/* =====================================================================
   CONFORMA SUITE — Design system
   Identité préservée : Or var(--p) + Marine var(--sb) (Prestige)
   Typo : Plus Jakarta Sans (UI) + Lora (display)
   ===================================================================== */

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

:root{
  /* Couleurs primaires */
  --p:#d99e22;          /* Or */
  --pd:#b3811a;         /* Or foncé */
  --pl:rgba(217,158,34,.13); /* Or clair */
  --sb:#13233b;         /* Marine sidebar */
  --sb2:#1d3654;
  --sb3:#2d4a6b;

  /* Surfaces */
  --bg:#f1f2f6;
  --card:#fff;
  --text:#1e2535;
  --t2:#5a6380;
  --t3:#9ba3bc;
  --border:#e4e7f0;

  /* Sémantique */
  --red:#e05252;
  --orange:#e8963a;
  --blue:#4a7fe5;
  --green:#3aab7a;
  --purple:#7e6ad8;
  --teal:#3fa6a6;

  /* Couleurs d'accent par module (signatures) */
  --m-trans:#d99e22;     /* Transaction = or (signature historique) */
  --m-loca:#3aab7a;      /* Locative = vert */
  --m-syndic:#7e6ad8;    /* Syndic = violet */
  --m-neuf:#4a7fe5;      /* Neuf = bleu */
  --m-cgp:#c4566a;       /* CGP = bordeaux */

  /* Élévations */
  --sh:0 2px 10px rgba(30,37,53,.07);
  --shl:0 8px 32px rgba(30,37,53,.12);
  --shx:0 16px 48px rgba(30,37,53,.18);

  /* Tokens */
  --r:12px;
  --rs:8px;
  --rxs:6px;
  --sw:240px;       /* sidebar width */
  --th:56px;        /* topbar height */

  /* Aliases (compatibilité multi-noms dans JS) */
  --bd:#e4e7f0;
  --t1:#1e2535;
  --t4:#c4cbdb;
  --bg2:#f7f8fb;
  --bg3:#e9ecf4;
  --gold:#d99e22;
  --gold-d:#b3811a;
  --orange-d:#c97928;
}

[data-theme="dark"]{
  --bg:#14192a;
  --card:#1e2535;
  --text:#e2e6f0;
  --t2:#8892ab;
  --t3:#4a5268;
  --border:#2a3248;
  --bd:#2a3248;
  --t1:#e2e6f0;
  --t4:#3a4258;
  --bg2:#1a2032;
  --bg3:#252b41;
  --sh:0 2px 10px rgba(0,0,0,.3);
  --shl:0 8px 32px rgba(0,0,0,.45);
  --pl:rgba(217,158,34,.10);
}
[data-theme="dark"] .topbar{background:#1e2535;border-color:#2a3248}
[data-theme="dark"] .form-control{background:#14192a;border-color:#2a3248;color:var(--text)}
[data-theme="dark"] .modal{background:#1e2535}
[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.03)}

html,body,#root{height:100%;overflow:hidden}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:13px;
  line-height:1.45;
  transition:background .25s,color .25s;
  -webkit-font-smoothing:antialiased;
}
button{cursor:pointer;border:none;font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t3);border-radius:3px;opacity:.4}
::-webkit-scrollbar-thumb:hover{background:var(--p)}

/* ==================== LAYOUT ==================== */
.layout{display:flex;height:100vh;overflow:hidden}

/* ==================== SIDEBAR ==================== */
.sidebar{
  width:var(--sw);min-width:var(--sw);
  background:var(--sb-gradient, var(--sb));
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
  position:relative;z-index:100;
}
.sidebar::after{
  content:'';position:absolute;top:0;right:0;
  width:1px;height:100%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--p) 25%, transparent),transparent);
}
/* Hauteur calée sur la topbar (--th) : la bordure du bandeau s'aligne pile avec
   la bordure sous le titre de page. box-sizing:border-box (global) -> la bordure
   tombe à exactement var(--th). Le logo est borné pour tenir dans cette hauteur. */
.sb-brand{padding:0 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:10px;height:var(--th);min-height:var(--th)}
.sb-logo{display:block;max-width:212px;width:auto;height:auto;max-height:calc(var(--th) - 20px);object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.sb-brand-fallback{display:none;align-items:center;gap:10px;width:100%}
.sb-brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--p),var(--pd));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Lora',serif;font-weight:700;font-size:15px;box-shadow:0 4px 12px color-mix(in srgb, var(--p) 35%, transparent)}
.sb-brand-name{font-family:'Lora',serif;font-weight:600;color:#fff;font-size:14.5px;letter-spacing:.2px;line-height:1.1}
.sb-brand-sub{font-size:9.5px;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:1.2px;margin-top:2px}

.sb-section{
  padding:14px 14px 5px;
  font-size:9.5px;font-weight:800;
  color:rgba(255,255,255,.62);
  letter-spacing:1.8px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.sb-section .dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
  flex-shrink:0;
}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;margin:1px 8px;border-radius:var(--rs);
  color:rgba(255,255,255,.82);
  font-size:12.5px;font-weight:500;
  cursor:pointer;transition:all .15s;
  position:relative;border:none;background:none;
  width:calc(100% - 16px);text-align:left;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9)}
.nav-item.active{background:var(--pl);color:var(--p);font-weight:700}
.nav-item.active::before{
  content:'';position:absolute;left:-8px;top:50%;
  transform:translateY(-50%);
  width:3px;height:18px;
  background:var(--p);border-radius:0 2px 2px 0;
}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:9.5px;font-weight:700;
  padding:1px 6px;border-radius:20px;line-height:1.5;
}
.nav-badge.warn{background:var(--orange)}
.nav-badge.success{background:var(--green)}
.nav-badge.info{background:rgba(255,255,255,.13);color:rgba(255,255,255,.7)}

.module-tag{font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:800;padding:2px 5px;border-radius:3px;margin-left:auto;color:#fff;opacity:.85}
.tag-trans{background:var(--m-trans)}.tag-loca{background:var(--m-loca)}.tag-syndic{background:var(--m-syndic)}.tag-neuf{background:var(--m-neuf)}.tag-cgp{background:var(--m-cgp)}

.sb-user{margin-top:auto;padding:10px 14px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.sb-user-info{flex:1;min-width:0}
.sb-user-name{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:10px;color:rgba(255,255,255,.4);margin-top:1px}

/* ==================== TOPBAR ==================== */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  background:var(--card);border-bottom:1px solid var(--border);
  padding:0 20px;height:var(--th);
  display:flex;align-items:center;gap:14px;
  flex-shrink:0;transition:background .25s;
}
.topbar-title{font-size:15px;font-weight:800;color:var(--text);white-space:nowrap}
.topbar-sub{font-size:11px;color:var(--t3);margin-top:1px}

.tb-search{
  flex:1;max-width:380px;
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--rs);padding:7px 11px;
  transition:border-color .15s;
}
.tb-search:focus-within{border-color:var(--p);background:var(--card)}
.tb-search input{border:none;background:none;outline:none;font-size:12.5px;color:var(--text);width:100%}
.tb-search input::placeholder{color:var(--t3)}
.tb-search kbd{font-size:9.5px;background:var(--card);border:1px solid var(--border);padding:1px 5px;border-radius:3px;color:var(--t3);}

.tb-actions{display:flex;align-items:center;gap:7px;margin-left:auto}

.profile-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:20px;padding:4px 12px 4px 4px;
  cursor:pointer;transition:all .15s;
}
.profile-pill:hover{border-color:var(--p);background:var(--pl)}
.profile-pill .pp-mark{width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.profile-pill .pp-name{font-size:11.5px;font-weight:700;color:var(--text)}
.profile-pill .pp-sub{font-size:9.5px;color:var(--t3);margin-top:-1px}

.content{flex:1;overflow-y:auto;padding:20px;padding-bottom:100px}
.content::-webkit-scrollbar-track{background:var(--bg)}

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--rs);
  font-size:12.5px;font-weight:600;
  transition:all .15s;white-space:nowrap;border:none;
}
.btn-primary{background:var(--p);color:#fff}
.btn-primary:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb, var(--p) 35%, transparent)}
.btn-secondary{background:var(--bg);border:1px solid var(--border);color:var(--t2)}
.btn-secondary:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.btn-ghost{background:transparent;color:var(--t2);padding:7px 9px}
.btn-ghost:hover{color:var(--p);background:var(--pl)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-success{background:var(--green);color:#fff}
.btn-sm{padding:5px 10px;font-size:11.5px}
.btn-lg{padding:11px 20px;font-size:13.5px}

.icon-btn{
  position:relative;width:34px;height:34px;border-radius:var(--rs);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--border);transition:all .15s;flex-shrink:0;color:var(--t2);
}
.icon-btn:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.icon-btn .notif-dot{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:var(--red);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ==================== CARDS ==================== */
.card{
  background:var(--card);
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--sh);
  transition:background .25s,border .25s,box-shadow .15s;
}
.card.hoverable:hover{box-shadow:var(--shl);border-color:var(--p)}
.card-header{
  padding:14px 18px 11px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.card-title{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.card-title .accent{width:3px;height:14px;background:var(--p);border-radius:2px}
.card-sub{font-size:11px;color:var(--t3);font-weight:500}
.card-body{padding:16px 18px}
.card-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border-radius:0 0 var(--r) var(--r)}

/* ==================== KPI ==================== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi-card{
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);padding:16px 18px;
  box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:all .15s;
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shl)}
.kpi-card::before{
  content:'';position:absolute;top:-22px;right:-22px;
  width:72px;height:72px;border-radius:50%;
  background:var(--accent,var(--pl));opacity:.2;
}
.kpi-lbl{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.kpi-val{font-size:24px;font-weight:800;color:var(--text);line-height:1.1;font-family:'Lora',serif}
.kpi-sub{font-size:11px;color:var(--t3);margin-top:5px;display:flex;align-items:center;gap:4px}
.kpi-sub.up{color:var(--green)}.kpi-sub.down{color:var(--red)}
.kpi-icon{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:9px;
  background:var(--accent,var(--pl));
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;
}
.kpi-card.module-trans .kpi-icon{background:var(--m-trans)}
.kpi-card.module-loca .kpi-icon{background:var(--m-loca)}
.kpi-card.module-syndic .kpi-icon{background:var(--m-syndic)}
.kpi-card.module-neuf .kpi-icon{background:var(--m-neuf)}
.kpi-card.module-cgp .kpi-icon{background:var(--m-cgp)}

/* ==================== GRIDS ==================== */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}
.dash-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:1100px){.dash-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.dash-grid{grid-template-columns:1fr}}

/* ==================== TABLES ==================== */
.tbl-wrap{overflow-x:auto;border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{
  background:var(--bg);padding:12px 14px;text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;color:var(--t3);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tbl thead th.ta-c{text-align:center}
.tbl thead th.ta-r{text-align:right}
.tbl tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
.tbl tbody tr:hover{background:color-mix(in srgb, var(--p) 4%, transparent);cursor:pointer}
.tbl tbody tr:last-child{border-bottom:none}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody td{padding:13px 14px;color:var(--text);vertical-align:middle}
.tbl td.ta-c{text-align:center}
.tbl td.ta-r{text-align:right}
.tbl td.strong{color:var(--text);font-weight:600}
.tbl td.mono{font-size:12.5px;color:var(--text)}

.cell-with-avatar{display:flex;align-items:center;gap:9px}
.cell-with-avatar .av{width:30px;height:30px;border-radius:8px;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.cell-with-avatar .info-name{color:var(--text);font-weight:600}
.cell-with-avatar .info-sub{font-size:10.5px;color:var(--t3);margin-top:1px}

/* ==================== BADGES ==================== */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-success{background:rgba(58,171,122,.13);color:var(--green)}
.badge-warn{background:rgba(232,150,58,.13);color:var(--orange)}
.badge-danger{background:rgba(224,82,82,.13);color:var(--red)}
.badge-info{background:rgba(74,127,229,.13);color:var(--blue)}
.badge-neutral{background:var(--bg);color:var(--t2);border:1px solid var(--border)}
.badge-purple{background:rgba(126,106,216,.13);color:var(--purple)}
.badge-gold{background:var(--pl);color:var(--p)}

/* ==================== FORMS ==================== */
.form-control{
  width:100%;padding:8px 11px;
  border:1px solid var(--border);border-radius:var(--rs);
  background:var(--card);color:var(--text);
  font-size:12.5px;outline:none;
  transition:border-color .15s;
}
.form-control:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.form-label{display:block;font-size:10.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}

.toggle{
  position:relative;width:36px;height:20px;
  background:var(--border);border-radius:20px;
  cursor:pointer;transition:background .18s;flex-shrink:0;
}
.toggle.on{background:var(--p)}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle.on::after{transform:translateX(16px)}

/* ==================== KANBAN ==================== */
.kb-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.kb-col{background:var(--bg);border-radius:var(--r);padding:10px 8px;min-height:300px;border:1px solid var(--border)}
.kb-col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 10px;border-bottom:2px solid var(--border)}
.kb-col-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text);display:flex;align-items:center;gap:6px}
.kb-col-title::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--p)}
.kb-col-count{font-size:11px;font-weight:700;color:var(--t3);background:var(--card);padding:1px 7px;border-radius:20px}

.kb-card{
  background:var(--card);border-radius:var(--rs);
  padding:11px 12px;margin-top:8px;
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(30,37,53,.04);
  cursor:pointer;transition:all .15s;
  position:relative;
}
.kb-card:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:var(--sh)}
.kb-card-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3}
.kb-card-sub{font-size:11px;color:var(--t2);display:flex;align-items:center;gap:5px}
.kb-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.kb-amount{font-size:12px;font-weight:700;color:var(--p);}
.kb-card-strip{position:absolute;top:0;left:0;width:3px;height:100%;border-radius:3px 0 0 3px}

/* ==================== TIMELINE ==================== */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding-bottom:14px}
.tl-item::before{content:'';position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--p)}
.tl-item.done::before{background:var(--p)}
.tl-item.alert::before{border-color:var(--red);background:var(--card)}
.tl-time{font-size:10.5px;color:var(--t3);}
.tl-title{font-size:12.5px;font-weight:600;color:var(--text);margin-top:1px}
.tl-desc{font-size:11.5px;color:var(--t2);margin-top:2px;line-height:1.4}

/* ==================== DRAWER ==================== */
.drawer-back{position:fixed;inset:0;background:rgba(15,18,33,.42);z-index:1899;backdrop-filter:blur(2px);animation:fadeIn .18s ease}
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:560px;max-width:96vw;
  background:var(--card);
  z-index:1900;display:flex;flex-direction:column;
  box-shadow:-12px 0 50px rgba(0,0,0,.18);
  /* Entrée NEUTRE en fondu (opacité, sans translate) : se joue à l'insertion DOM
     -> propre dès la 1re frame (pas d'effet « apparaît puis bouge »). Comme l'animation
     est sur la classe de base et n'utilise pas de transform, elle ne se rejoue PAS au
     repositionnement (changement de .drawer-pos-*) et n'entre pas en conflit avec le
     translateX(-50%) du mode centré. */
  animation:fadeIn .18s ease;
}
.drawer-wide{width:820px}
.drawer.drawer-raw.drawer-wide{width:980px;max-width:96vw}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;gap:12px}
.drawer-title{font-size:16px;font-weight:800;color:var(--text);font-family:'Lora',serif}
.drawer-sub{font-size:11.5px;color:var(--t3);margin-top:3px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;background:var(--bg)}
.close-btn{width:30px;height:30px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all .15s}
.close-btn:hover{color:var(--red);border-color:var(--red);background:rgba(224,82,82,.07)}

@keyframes slideR{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ==================== TABS ==================== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:9px 14px;font-size:12px;font-weight:600;
  color:var(--t2);background:none;border:none;
  cursor:pointer;position:relative;white-space:nowrap;
  transition:color .15s;
}
.tab:hover{color:var(--p)}
.tab.active{color:var(--p)}
.tab.active::after{
  content:'';position:absolute;left:8px;right:8px;bottom:-1px;
  height:2px;background:var(--p);border-radius:2px 2px 0 0;
}
.tab-count{margin-left:5px;background:var(--bg);color:var(--t2);font-size:10px;padding:1px 6px;border-radius:20px;font-weight:700}
.tab.active .tab-count{background:var(--pl);color:var(--p)}

/* ==================== MODULE PICKER ==================== */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.module-card{
  background:var(--card);border:2px solid var(--border);
  border-radius:var(--r);padding:18px 20px;
  cursor:pointer;transition:all .2s;
  position:relative;overflow:hidden;
}
.module-card:hover{border-color:var(--p);box-shadow:var(--shl);transform:translateY(-2px)}
.module-card.active{border-color:var(--accent,var(--p))}
.module-card.active::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--accent,var(--p));
}
.module-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.module-icon{
  width:42px;height:42px;border-radius:11px;
  background:var(--accent,var(--p));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.module-title{font-family:'Lora',serif;font-size:16px;font-weight:600;color:var(--text);margin-top:11px}
.module-desc{font-size:11.5px;color:var(--t2);margin-top:5px;line-height:1.45}
.module-stats{display:flex;gap:14px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--border)}
.module-stat{flex:1}
.module-stat-val{font-size:14px;font-weight:800;color:var(--text);}
.module-stat-lbl{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-top:1px}

/* ==================== MAKE / SCENARIOS ==================== */
.scenario-card{
  background:var(--card);border-radius:var(--r);
  border:1px solid var(--border);padding:0;
  position:relative;overflow:hidden;
  transition:all .15s;
}
.scenario-card:hover{box-shadow:var(--shl);border-color:var(--p)}
.scenario-card.on::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--green);
}
.scenario-card.off{opacity:.6}
.scenario-head{padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.scenario-icon{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#7e6ad8,#4a7fe5);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;font-size:14px}
.scenario-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.scenario-sub{font-size:10.5px;color:var(--t3);margin-top:2px}
.scenario-flow{padding:12px 18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--bg)}
.flow-step{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);padding:5px 10px;border-radius:6px;font-size:11px;color:var(--text);font-weight:600}
.flow-arrow{color:var(--t3);font-size:13px}
.scenario-meta{padding:11px 18px;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--t3)}
.scenario-meta .runs{color:var(--t2)}

/* ==================== PROPRIETE / BIEN CARDS (TRANS / NEUF) ==================== */
.bien-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.bien-card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh);cursor:pointer;transition:all .15s;display:flex;flex-direction:column}
.bien-card:hover{box-shadow:var(--shl);transform:translateY(-2px);border-color:var(--p)}
.bien-img{position:relative;height:160px;background:linear-gradient(135deg,#cfd6e3,#9ba8c4);overflow:hidden}
.bien-img-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:36px}
.bien-tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.95);padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text)}
.bien-tag-status{position:absolute;top:10px;right:10px}
.bien-photos-count{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;padding:3px 8px;border-radius:6px;font-size:10.5px;font-weight:600;display:flex;align-items:center;gap:4px}
.bien-body{padding:13px 15px;flex:1;display:flex;flex-direction:column}
.bien-price{font-family:'Lora',serif;font-size:18px;font-weight:700;color:var(--text);line-height:1.1}
.bien-price .per{font-size:11px;color:var(--t3);font-weight:500;font-family:'Plus Jakarta Sans',sans-serif}
.bien-title{font-size:12.5px;font-weight:600;color:var(--text);margin-top:4px}
.bien-loc{font-size:11px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:4px}
.bien-specs{display:flex;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.bien-spec{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t2);font-weight:500}

/* ==================== EMPTY STATE ==================== */
.empty{padding:50px 20px;text-align:center;color:var(--t3)}
.empty-icon{font-size:42px;margin-bottom:8px;opacity:.4}
.empty-title{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:4px;font-family:'Lora',serif}
.empty-desc{font-size:12px;max-width:340px;margin:0 auto;line-height:1.5}

/* ==================== NOTIFICATIONS ==================== */
.notif-pop{position:absolute;top:calc(var(--th) - 5px);right:20px;width:340px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shx);z-index:120;animation:slideUp .2s ease}
.notif-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-title{font-size:12px;font-weight:800;color:var(--text)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--bg)}
.notif-item:last-child{border-bottom:none}
.notif-dot-l{width:8px;height:8px;border-radius:50%;background:var(--p);margin-top:6px;flex-shrink:0}
.notif-text{flex:1;min-width:0}
.notif-msg{font-size:12px;color:var(--text);line-height:1.4}
.notif-ago{font-size:10.5px;color:var(--t3);margin-top:3px;}

/* ==================== PARCOURS DEMO ==================== */
.parcours-strip{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--sb);color:#fff;
  border-radius:50px;padding:10px 14px;
  display:flex;align-items:center;gap:12px;
  z-index:140;box-shadow:0 10px 40px rgba(0,0,0,.32);
  border:1px solid color-mix(in srgb, var(--p) 40%, transparent);
  max-width:96vw;
}
.parcours-step-pill{font-size:10.5px;background:var(--p);color:#fff;padding:3px 10px;border-radius:20px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.parcours-text{font-size:12px;font-weight:500;color:rgba(255,255,255,.9);max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parcours-btn{background:rgba(255,255,255,.13);color:#fff;padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:600;cursor:pointer;border:none}
.parcours-btn:hover{background:color-mix(in srgb, var(--p) 60%, transparent)}
.parcours-btn.primary{background:var(--p)}
.parcours-btn.primary:hover{background:var(--pd)}
.parcours-close{color:rgba(255,255,255,.5);background:none;border:none;cursor:pointer;font-size:14px;padding:4px 6px}
.parcours-close:hover{color:#fff}

/* ==================== PENELOPE ==================== */
.penelope-zone{
  background:linear-gradient(135deg,color-mix(in srgb, var(--p) 8%, transparent),rgba(74,127,229,.08));
  border:2px dashed var(--p);border-radius:var(--r);
  padding:30px 20px;text-align:center;
  transition:all .15s;cursor:pointer;
}
.penelope-zone:hover{background:linear-gradient(135deg,color-mix(in srgb, var(--p) 13%, transparent),rgba(74,127,229,.13));border-color:var(--pd)}
.penelope-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--p),#4a7fe5);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 12px;font-size:22px;box-shadow:0 8px 24px color-mix(in srgb, var(--p) 32%, transparent)}
.penelope-title{font-family:'Lora',serif;font-size:17px;font-weight:600;color:var(--text);margin-bottom:5px}
.penelope-desc{font-size:12px;color:var(--t2);max-width:420px;margin:0 auto;line-height:1.5}

.penelope-result{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-top:14px}
.penelope-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.penelope-row:last-child{border-bottom:none}
.penelope-row-icon{width:28px;height:28px;border-radius:8px;background:var(--pl);color:var(--p);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:700}
.penelope-row-icon.ok{background:rgba(58,171,122,.13);color:var(--green)}
.penelope-row-icon.warn{background:rgba(232,150,58,.13);color:var(--orange)}
.penelope-row-icon.err{background:rgba(224,82,82,.13);color:var(--red)}
.penelope-row-text{flex:1}
.penelope-row-title{font-size:12.5px;font-weight:700;color:var(--text)}
.penelope-row-desc{font-size:11.5px;color:var(--t2);margin-top:2px;line-height:1.4}

/* ==================== CHIPS / TAGS ==================== */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:var(--bg);border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;color:var(--t2)}
.chip-active{background:var(--pl);border-color:var(--p);color:var(--p)}
.chip-clickable{cursor:pointer;transition:all .12s}
.chip-clickable:hover{border-color:var(--p);color:var(--p)}

/* ==================== PROGRESS ==================== */
.progress{width:100%;height:6px;background:var(--bg);border-radius:20px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--p),var(--pd));border-radius:20px;transition:width .3s}

/* ==================== UTILS ==================== */
.row{display:flex;align-items:center;gap:8px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.row-wrap{display:flex;flex-wrap:wrap;gap:8px}
.muted{color:var(--t3)}
.strong{color:var(--text);font-weight:600}
.mono{}
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}
.flex-1{flex:1}
.text-right{text-align:right}
.text-center{text-align:center}
.divider{height:1px;background:var(--border);margin:14px 0}
.divider-v{width:1px;background:var(--border);margin:0 8px;align-self:stretch}

.section-title{font-family:'Lora',serif;font-size:18px;font-weight:600;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:10px}
.section-title .accent-bar{width:3px;height:18px;background:var(--p);border-radius:2px}
.section-sub{font-size:12px;color:var(--t2);margin-bottom:14px}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .left{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.toolbar .right{display:flex;align-items:center;gap:8px}
.search-mini{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:7px 11px;min-width:240px}
.search-mini input{border:none;background:none;outline:none;font-size:12.5px;color:var(--text);width:100%}

/* Filter pills */
.filter-pill{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;background:var(--card);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:all .12s}
.filter-pill:hover{border-color:var(--p);color:var(--p)}
.filter-pill.active{background:var(--p);color:#fff;border-color:var(--p)}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(15,18,33,.55);z-index:160;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);animation:fadeIn .18s}
.modal{background:var(--card);border-radius:var(--r);max-width:640px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shx);animation:slideUp .22s ease}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:800;color:var(--text);font-family:'Lora',serif}
.modal-body{padding:18px 22px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;background:var(--bg);border-radius:0 0 var(--r) var(--r)}

/* Document preview "feuille" */
.doc-paper{background:#fff;color:#222;padding:32px 36px;border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,.1);font-family:'Plus Jakarta Sans',sans-serif;max-width:580px;margin:0 auto}
[data-theme="dark"] .doc-paper{filter:none}
.doc-paper h2{font-family:'Lora',serif;font-size:18px;font-weight:700;color:var(--p);margin-bottom:14px}
.doc-paper p{font-size:12px;line-height:1.6;color:#444;margin-bottom:8px}
.doc-paper .ribbon{height:4px;background:var(--p);border-radius:2px;margin-bottom:18px;width:60px}
.doc-paper .meta{display:flex;justify-content:space-between;font-size:10.5px;color:#888;margin-bottom:18px;border-bottom:1px solid #eee;padding-bottom:10px}
.doc-paper .signature{margin-top:24px;padding-top:18px;border-top:1px dashed #ccc;display:flex;justify-content:space-between;font-size:11px;color:#666}

/* Avatar variants */
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--p);color:#fff;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:.5px}
.av-sm{width:26px;height:26px;font-size:10px}
.av-md{width:32px;height:32px;font-size:11px}
.av-lg{width:46px;height:46px;font-size:14px;border-radius:11px}
.av-xl{width:64px;height:64px;font-size:18px;border-radius:14px}

/* gallery thumbs */
.thumb-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.thumb{width:90px;height:64px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#cfd6e3 linear-gradient(135deg,#cfd6e3,#9ba8c4);cursor:pointer;border:2px solid transparent}
.thumb.active{border-color:var(--p)}

/* Chart container */
.chart-wrap{position:relative;height:240px}
.chart-wrap.lg{height:300px}
.chart-wrap.sm{height:160px}

/* Map */
.map-wrap{height:280px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--bg);position:relative}

/* sortable hover */
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--p)}

/* Status chip color helpers */
.s-actif{background:rgba(58,171,122,.13);color:var(--green)}
.s-en-cours{background:rgba(74,127,229,.13);color:var(--blue)}
.s-attente{background:rgba(232,150,58,.13);color:var(--orange)}
.s-retard{background:rgba(224,82,82,.13);color:var(--red)}
.s-clos{background:var(--bg);color:var(--t2)}

/* Status dots in lists */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.green{background:var(--green)}.dot.red{background:var(--red)}.dot.orange{background:var(--orange)}.dot.blue{background:var(--blue)}.dot.gold{background:var(--p)}.dot.purple{background:var(--purple)}

/* Slide-in fade */
.fade-in{animation:fadeIn .25s ease}

/* Responsive minimal */
@media (max-width:1100px){
  .dash-grid{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .sidebar{position:fixed;left:-260px;transition:left .25s}
  .sidebar.open{left:0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .drawer{width:100vw}
}

/* ==================== ADDITIONS — Parcours strip moderne, label, flow-num ==================== */
.label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);font-weight:700;margin-bottom:2px}
.flow-num{width:24px;height:24px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex-shrink:0}

/* Override .parcours-strip pour utiliser ma structure JS */
.parcours-strip{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--sb) 0%,var(--sb2) 100%);
  color:#fff;border-radius:16px;padding:14px 18px;
  display:flex;flex-direction:column;gap:10px;
  z-index:140;box-shadow:0 10px 40px rgba(0,0,0,.45);
  border:1px solid color-mix(in srgb, var(--p) 40%, transparent);
  width:600px;max-width:96vw;
}
.parc-head{display:flex;align-items:center;gap:10px}
.parc-body{padding:4px 0}
.parc-msg{font-size:13px;color:#fff;line-height:1.5;margin-bottom:8px}
.parc-prog{display:flex;gap:5px}
.parc-dot{width:24px;height:5px;border-radius:5px;background:rgba(255,255,255,.18);cursor:pointer;transition:background .15s}
.parc-dot.active{background:var(--p)}
.parc-dot.done{background:color-mix(in srgb, var(--p) 55%, transparent)}
.parc-actions{display:flex;gap:6px;justify-content:flex-end;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}

.bien-img{background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;align-items:center;justify-content:center;color:var(--t3);position:relative;overflow:hidden}

/* ==================== LOGIN PAGE ==================== */
.login-layout{
  position:fixed;inset:0;display:flex;background:#fff;z-index:200;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.login-left{
  flex:1;background:linear-gradient(135deg,var(--sb) 0%,var(--sb2) 55%,var(--sb) 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  padding:48px;position:relative;overflow:hidden;
}
.login-left::before{
  content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--p) 18%, transparent) 0%,transparent 70%);
  top:-120px;right:-160px;
}
.login-left::after{
  content:'';position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--p) 12%, transparent) 0%,transparent 70%);
  bottom:-100px;left:-120px;
}
.login-left-inner{position:relative;z-index:1;max-width:520px;width:100%}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.login-brand-mark{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--p),#d4a44c);
  color:var(--sb);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;font-family:'Lora',serif;
  box-shadow:0 6px 20px color-mix(in srgb, var(--p) 40%, transparent);
}
.login-brand-name{font-family:'Lora',serif;font-size:20px;font-weight:700;color:#fff}
.login-brand-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;max-width:340px}
.login-headline{
  font-family:'Lora',serif;font-size:42px;line-height:1.15;font-weight:700;
  color:#fff;margin:0 0 18px 0;letter-spacing:-0.5px;
}
.login-headline .hl{color:var(--p);font-style:italic}
.login-pitch{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 36px 0;
}
.login-features{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.lf{display:flex;gap:12px;align-items:flex-start}
.lf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:6px;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.lf strong{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}
.lf span{display:block;font-size:12px;color:rgba(255,255,255,.6);line-height:1.4}
.login-footer{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.5px}

.login-right{
  flex:0 0 680px;background:#f8f7f3;display:flex;align-items:center;justify-content:center;
  padding:40px;overflow-y:auto;
}
.login-right-inner{width:100%;max-width:420px}
.login-tabs{
  display:flex;background:#fff;border-radius:10px;padding:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);border:1px solid #e8e3d8;margin-bottom:28px;
}
.login-tab{
  flex:1;padding:10px 14px;border:none;background:transparent;
  font-size:13px;font-weight:600;color:#7e8a9c;cursor:pointer;
  border-radius:7px;transition:all .15s;font-family:inherit;
}
.login-tab.active{background:var(--sb);color:#fff;box-shadow:0 2px 8px rgba(27,44,68,.18)}
.login-form{display:flex;flex-direction:column}
.login-title{
  font-family:'Lora',serif;font-size:24px;font-weight:700;color:var(--sb);
  margin:0 0 6px 0;letter-spacing:-0.3px;
}
.login-sub{font-size:13px;color:#7e8a9c;margin:0 0 24px 0;line-height:1.5}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-field label{
  font-size:11px;font-weight:600;color:var(--sb);text-transform:uppercase;letter-spacing:.4px;
}
.login-field input{
  padding:11px 14px;border:1px solid #e8e3d8;border-radius:8px;
  font-size:14px;background:#fff;color:var(--sb);font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.login-field input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 12%, transparent)}
.login-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:12px}
.login-check{display:flex;align-items:center;gap:6px;cursor:pointer;color:#7e8a9c}
.login-check input{accent-color:var(--p)}
.login-link{color:var(--p);text-decoration:none;font-weight:600}
.login-link:hover{text-decoration:underline}
.login-submit{
  width:100%;justify-content:center;padding:12px 18px;font-size:14px;font-weight:600;
  background:linear-gradient(135deg,var(--p) 0%,#d4a44c 100%);
  border:none;color:var(--sb);border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px color-mix(in srgb, var(--p) 30%, transparent);transition:transform .1s,box-shadow .15s;
}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb, var(--p) 40%, transparent)}
.login-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.login-hint{
  margin-top:16px;padding:10px 12px;background:color-mix(in srgb, var(--p) 8%, transparent);
  border-left:3px solid var(--p);border-radius:6px;
  font-size:11px;color:#7e6a3a;line-height:1.5;
}
.login-hint em{color:var(--sb);font-style:normal;font-weight:600}

/* Module picker (register step 0) */
.login-modules{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.login-module{
  display:flex;gap:12px;align-items:center;padding:12px;
  background:#fff;border:1.5px solid #e8e3d8;border-radius:10px;
  cursor:pointer;text-align:left;font-family:inherit;transition:all .15s;
}
.login-module:hover{border-color:var(--p);background:#fffdf9}
.login-module.picked{background:#fffdf9}
.login-module-mark{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.login-module-body{flex:1;min-width:0}
.login-module-name{font-size:13px;font-weight:600;color:var(--sb);margin-bottom:2px}
.login-module-desc{font-size:11px;color:#7e8a9c;line-height:1.4}
.login-module-check{
  width:20px;height:20px;border-radius:50%;border:1.5px solid #d8d2c4;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;
}
.login-module-check.on{background:var(--p);border-color:var(--p)}

@media (max-width: 900px){
  .login-layout{flex-direction:column}
  .login-left{flex:0 0 auto;padding:32px;min-height:auto}
  .login-headline{font-size:28px}
  .login-features{display:none}
  .login-right{flex:1;padding:24px}
}

/* ==================== SIDEBAR — sections collapsibles ==================== */
.sb-section.collapsible{
  user-select:none;transition:color .12s,background .12s;border-radius:6px;
}
.sb-section.collapsible:hover{color:rgba(255,255,255,.95);background:rgba(255,255,255,.04)}
.sb-chev{
  display:inline-block;font-size:11px;color:rgba(255,255,255,.55);
  transition:transform .18s ease;line-height:1;
}
.sb-section.collapsible:hover .sb-chev{color:var(--p)}
.sb-section.is-collapsed{opacity:.85}

/* Sidebar divider */
.sb-divider{
  height:1px;background:rgba(255,255,255,.08);
  margin:8px 14px;
}

/* Topbar — bouton déconnexion (style hover rouge) */
.tb-actions .icon-btn[title="Se déconnecter"]:hover{
  background:rgba(231,76,60,.08);
  border-color:#e74c3c44;color:#c0392b;
}

/* View switch — petit groupe de boutons type segmented control */
.view-switch{
  display:inline-flex;background:var(--bg2);border:1px solid var(--bd);
  border-radius:8px;padding:3px;gap:2px;
}
.view-switch button{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border:none;background:transparent;
  font-size:12px;font-weight:600;color:var(--t2);cursor:pointer;
  border-radius:6px;transition:all .12s;font-family:inherit;
}
.view-switch button:hover{color:var(--t1)}
.view-switch button.active{
  background:#fff;color:var(--p);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

/* Tâches en retard — fond rosé + marqueur rouge ! + barre latérale */
.task-overdue{
  background:linear-gradient(90deg, rgba(231,76,60,.07) 0%, transparent 100%);
}
.task-overdue td:first-child{box-shadow:inset 3px 0 0 #e74c3c}
.overdue-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:#e74c3c;color:#fff;
  font-weight:800;font-size:11px;line-height:1;
  margin-right:8px;vertical-align:middle;
  box-shadow:0 1px 4px rgba(231,76,60,.4);
}
.overdue-date{
  display:inline-flex;align-items:center;gap:5px;
  color:#c0392b;font-weight:600;font-size:11.5px;
  background:rgba(231,76,60,.1);
  padding:3px 8px;border-radius:5px;
}

/* ==================== OPPORTUNITÉS — v2 ==================== */
/* Filtres header */
.opp-filters{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:12px 16px;margin-bottom:14px;
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
}
.opp-filter-group{display:flex;flex-direction:column;gap:6px}
.opp-filter-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t3);
}
.opp-filter-select{
  min-width:180px;padding:7px 12px;border:1px solid var(--bd);border-radius:7px;
  background:var(--bg);color:var(--t1);font-size:13px;font-weight:500;
  font-family:inherit;cursor:pointer;
}
.opp-filter-select:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 12%, transparent)}
.opp-filter-divider{width:1px;align-self:stretch;background:var(--bd);margin:6px 0}
.opp-chip-row{display:flex;gap:6px;flex-wrap:wrap}
.opp-filter-actions{display:flex;align-items:center;gap:10px}

/* Chip-checkbox */
.chip-check{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid var(--bd);border-radius:18px;
  background:var(--bg2);color:var(--t3);
  font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .12s;user-select:none;
}
.chip-check:hover{background:var(--bg);color:var(--t2)}
.chip-check.on{background:var(--card);color:var(--t1);border-color:var(--p)}
.chip-box{
  width:14px;height:14px;border-radius:4px;
  border:1.5px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:inherit;flex-shrink:0;opacity:.5;
}
.chip-check.on .chip-box{background:currentColor;border-color:currentColor;opacity:1;color:#fff}
.chip-check.on .chip-box svg{color:var(--card)}

/* Hint kanban */
.opp-hint{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;background:color-mix(in srgb, var(--p) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--p) 25%, transparent);border-left:3px solid var(--p);
  border-radius:8px;margin-bottom:12px;
  font-size:12px;color:var(--t2);
}

/* Vue tableau */
.opp-table-wrap{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  overflow:hidden;
}
.opp-table{width:100%;border-collapse:collapse;font-size:13px}
.opp-table thead th{
  background:var(--bg);padding:11px 14px;text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;color:var(--t3);border-bottom:1px solid var(--bd);
}
.opp-table thead th.ta-c{text-align:center}
.opp-table thead th.ta-r{text-align:right}
.opp-table tbody tr{
  border-bottom:1px solid var(--bd);cursor:pointer;
  transition:background .12s;
}
.opp-table tbody tr:last-child{border-bottom:none}
.opp-table tbody tr:hover{background:color-mix(in srgb, var(--p) 4%, transparent)}
.opp-table td{padding:14px}
.opp-table td.ta-c{text-align:center}
.opp-table td.ta-r{text-align:right}
.opp-title{font-weight:600;color:var(--t1);font-size:13px;margin-bottom:3px}
.opp-sub{font-size:11px;color:var(--t3);line-height:1.4}
.opp-stage{
  display:inline-block;padding:3px 9px;background:var(--bg2);
  border-radius:5px;font-size:11.5px;color:var(--t2);font-weight:500;
}
.opp-temp{font-weight:600;font-size:12px;white-space:nowrap}
.opp-val{font-weight:500;color:var(--t1);font-size:12.5px}
.opp-fee{font-weight:700;color:var(--gold-d);font-family:'Lora',serif;font-size:14px}
.opp-proba{display:flex;align-items:center;gap:8px;min-width:120px}
.opp-proba-bar{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.opp-proba-fill{height:100%;border-radius:3px;transition:width .3s}
.opp-proba-val{font-size:11.5px;font-weight:700;color:var(--t1);min-width:32px}
.opp-next{font-size:12px;color:var(--t1);font-weight:500}
.opp-next-date{font-size:10.5px;color:var(--gold-d);margin-top:2px;font-weight:600}
.opp-state-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:5px;
  font-size:11px;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;
}

/* Vue kanban */
.opp-kanban{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;
  align-items:flex-start;
}
.opp-kb-col{
  min-width:260px;width:260px;flex-shrink:0;
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  overflow:hidden;
}
.opp-kb-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px 10px;background:var(--card);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t1);border-bottom:1px solid var(--bd);
}
.opp-kb-count{
  background:var(--bg2);color:var(--t2);
  padding:2px 8px;border-radius:10px;font-size:10.5px;font-weight:700;
}
.opp-kb-body{
  padding:10px;display:flex;flex-direction:column;gap:8px;
  min-height:80px;max-height:calc(100vh - 380px);overflow-y:auto;
}
.opp-kb-empty{
  text-align:center;padding:18px 8px;color:var(--t3);
  font-size:11px;font-style:italic;
}
.opp-kb-card{
  background:var(--card);border:1px solid var(--bd);border-radius:8px;
  padding:11px 12px;cursor:pointer;
  transition:all .15s;
}
.opp-kb-card:hover{
  border-color:var(--p);box-shadow:0 4px 12px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.opp-kb-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.opp-kb-temp{font-size:10.5px;font-weight:700}
.opp-kb-fee{
  font-family:'Lora',serif;font-weight:700;font-size:13px;
  color:var(--gold-d);
}
.opp-kb-title{
  font-size:13px;font-weight:600;color:var(--t1);
  line-height:1.35;margin-bottom:6px;
}
.opp-kb-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;color:var(--t3);margin-bottom:8px;
}
.opp-kb-days{font-style:italic}
.opp-kb-proba{height:3px;background:var(--bg2);border-radius:2px;overflow:hidden}
.opp-kb-proba-fill{height:100%;border-radius:2px}
.opp-kb-won{background:rgba(46,204,113,.04);border-color:rgba(46,204,113,.3)}

/* Tweak view-switch disabled state */
.view-switch button:disabled{opacity:.4;cursor:not-allowed}
.view-switch button:disabled:hover{color:var(--t2)}

/* ==================== CONTACTS — page liste/cartes + fiche ==================== */
/* Toolbar */
.contacts-toolbar{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:10px 14px;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.contacts-toolbar-divider{width:1px;align-self:stretch;background:var(--bd)}
.contacts-statut-row{display:flex;gap:6px;flex-wrap:wrap}
.statut-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid var(--bd);border-radius:18px;
  background:var(--bg2);color:var(--t3);
  font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .12s;
}
.statut-chip:hover{background:var(--bg);color:var(--t2)}
.statut-chip.on{background:var(--card);color:var(--t1)}
.statut-chip-count{
  background:rgba(0,0,0,.06);padding:1px 7px;border-radius:9px;
  font-size:10px;font-weight:700;color:inherit;
}
.statut-chip.on .statut-chip-count{background:rgba(255,255,255,.5)}

/* Statut badge (utilisé dans liste/fiche) */
.statut-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:5px;
  font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
}
.statut-dot{display:inline-block;width:6px;height:6px;border-radius:50%}

/* Tags contact */
.contact-tags{display:flex;gap:4px;flex-wrap:wrap}
.contact-tag{
  display:inline-block;padding:2px 8px;border-radius:11px;
  font-size:10.5px;font-weight:600;
  background:var(--bg2);color:var(--t2);border:1px solid var(--bd);
  white-space:nowrap;
}
.contact-tag.muted{opacity:.6;font-style:italic}
.contact-tag.more{background:var(--bg2);color:var(--t2);border:1px solid var(--bd);font-style:normal}
.contact-tag.tag-role{background:color-mix(in srgb, var(--p) 12%, transparent);color:var(--gold-d);border-color:color-mix(in srgb, var(--p) 30%, transparent)}
.contact-tag.tag-thematic{background:rgba(74,127,229,.1);color:#3a64b8;border-color:rgba(74,127,229,.25)}

/* Vue liste (table) */
.contacts-list{background:var(--card);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.contacts-table{width:100%;border-collapse:collapse;font-size:13px}
.contacts-table thead th{
  background:var(--bg);padding:11px 14px;text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;color:var(--t3);border-bottom:1px solid var(--bd);
}
.contacts-table thead th.ta-r{text-align:right}
.contacts-table tbody tr{border-bottom:1px solid var(--bd);cursor:pointer;transition:background .12s}
.contacts-table tbody tr:last-child{border-bottom:none}
.contacts-table tbody tr:hover{background:color-mix(in srgb, var(--p) 4%, transparent)}
.contacts-table td{padding:12px 14px}
.contacts-table td.ta-r{text-align:right}
.contact-cell{display:flex;align-items:center;gap:10px}
.contact-name{font-weight:600;color:var(--t1);font-size:13px}
.contact-sub{font-size:11px;color:var(--t3);margin-top:1px}
.contact-src{
  display:inline-block;padding:2px 8px;border-radius:5px;
  background:var(--bg2);color:var(--t2);font-size:11px;
}

/* Vue cartes */
.contacts-cards{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.contact-card{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;cursor:pointer;
  transition:all .15s;display:flex;flex-direction:column;
}
.contact-card:hover{border-color:var(--p);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.contact-card-top{
  padding:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--bd);
}
.contact-card-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.contact-card-name{font-family:'Lora',serif;font-size:16px;font-weight:700;color:var(--t1);margin-bottom:2px}
.contact-card-sub{font-size:12px;color:var(--t2)}
.contact-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 12px}
.contact-card-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding-top:12px;border-top:1px solid var(--bd);margin-top:auto;
}
.cf-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--t3)}
.cf-value{font-size:12.5px;font-weight:600;color:var(--t1);margin-top:2px;}

/* ==================== FICHE CONTACT — drawer avec sidebar ==================== */
.contact-sheet{display:flex;flex-direction:column;height:100%;background:var(--card)}
.contact-sheet-header{
  padding:22px 24px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.csh-info{flex:1;min-width:0}
.csh-name{font-family:'Lora',serif;font-size:22px;font-weight:700;color:var(--t1);margin-bottom:6px}
.csh-meta{display:flex;gap:8px;font-size:12px;color:var(--t2);flex-wrap:wrap;align-items:center;margin-bottom:10px}
.csh-meta svg{vertical-align:middle;margin-right:3px;opacity:.6}
.csh-tags{display:flex;flex-wrap:wrap;gap:5px}

.contact-sheet-body{display:flex;flex:1;min-height:0;overflow:hidden}
.contact-sheet-side{
  width:230px;flex-shrink:0;background:var(--bg);
  border-right:1px solid var(--bd);
  padding:16px 8px;overflow-y:auto;
}
.css-section-label{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--t3);padding:6px 12px;
}
.css-nav-item{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:9px 12px;margin:1px 0;border:none;background:transparent;
  font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;
  border-radius:7px;text-align:left;font-family:inherit;transition:all .12s;
}
.css-nav-item:hover{background:var(--bg2);color:var(--t1)}
.css-nav-item.active{background:var(--card);color:var(--p);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.css-nav-item.active svg{color:var(--p)}
.css-nav-count{
  margin-left:auto;background:var(--bg2);color:var(--t3);
  padding:1px 7px;border-radius:9px;font-size:10px;font-weight:700;
}
.css-nav-item.active .css-nav-count{background:var(--pl);color:var(--p)}
.css-nav-alert{
  margin-left:auto;background:var(--red);color:#fff;
  padding:1px 7px;border-radius:9px;font-size:10px;font-weight:800;
}
.css-nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.04)}

.contact-sheet-content{flex:1;overflow-y:auto;padding:22px 26px}
/* Barre d'enregistrement figée en bas du contenu de la fiche (le contenu scrolle dessous) */
.cs-save-bar{
  position:sticky;bottom:0;z-index:5;
  display:flex;justify-content:flex-end;gap:8px;
  margin:10px -26px -22px;padding:9px 26px;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
}

.cs-h3{font-family:'Lora',serif;font-size:15px;font-weight:700;color:var(--t1);margin:0 0 12px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.cs-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.cs-field{display:flex;flex-direction:column;gap:5px;min-width:0}  /* min-width:0 -> évite le débordement de la grille (inputs Nom/Adresse coupés à droite) */
.cs-field label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--t3)}
.cs-field input,.cs-field select,.cs-field textarea{
  width:100%;box-sizing:border-box;
  padding:8px 11px;border:1px solid var(--bd);border-radius:6px;
  font-size:13px;background:var(--bg);color:var(--t1);font-family:inherit;
  resize:vertical;
}
.cs-field input:focus,.cs-field select:focus,.cs-field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 10%, transparent)}
.cs-tags-edit{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:8px;border:1px dashed var(--bd);border-radius:7px;background:var(--bg)}
.cs-tag-add{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border:1px dashed var(--bd);border-radius:11px;
  background:transparent;color:var(--t3);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;
}
.cs-tag-add:hover{border-color:var(--p);color:var(--p);border-style:solid}

.cs-mini-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:8px;
  padding:11px 13px;display:flex;flex-direction:column;gap:5px;
}
.cs-mc-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--t3)}

.cs-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--card);border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.cs-table thead th{background:var(--bg);padding:9px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--t3);border-bottom:1px solid var(--bd)}
.cs-table tbody td{padding:10px 12px;border-bottom:1px solid var(--bd)}
.cs-table tbody tr:last-child td{border-bottom:none}
.cs-doc-type{display:inline-block;padding:2px 7px;background:var(--pl);color:var(--p);border-radius:4px;font-size:10.5px;font-weight:800;letter-spacing:.3px}

/* Historique */
.cs-history-input{display:flex;gap:8px;align-items:flex-start}
.cs-history-input textarea{
  flex:1;padding:10px 12px;border:1px solid var(--bd);border-radius:7px;
  font-family:inherit;font-size:13px;background:var(--bg);color:var(--t1);resize:none;
}
.cs-history-input textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 10%, transparent)}
.cs-history-input .btn{height:auto;align-self:stretch;padding:0 16px}
.cs-tl{position:relative;padding-left:18px}
.cs-tl::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--bd)}
.cs-tl-item{position:relative;padding:8px 0 12px}
.cs-tl-dot{position:absolute;left:-18px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--p);border:2px solid var(--card);box-shadow:0 0 0 1px var(--bd)}
.cs-tl-content{}
.cs-tl-date{font-size:10.5px;color:var(--gold-d);font-weight:600;margin-bottom:2px}
.cs-tl-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.cs-tl-desc{font-size:12px;color:var(--t2);line-height:1.5}

/* Profil de risque */
.cs-profile-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  padding:16px;
}
.cs-profile-mark{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:18px;font-family:'Lora',serif;
  box-shadow:0 4px 12px rgba(0,0,0,.1);flex-shrink:0;
}
.cs-procedures{display:flex;flex-direction:column;gap:8px}
.cs-proc{
  display:flex;align-items:center;gap:12px;
  background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:11px 13px;
}
.cs-proc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Simulateurs */
.cs-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-sim-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  padding:16px;cursor:pointer;transition:all .15s;
}
.cs-sim-card:hover{border-color:var(--p);background:var(--pl);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb, var(--p) 10%, transparent)}
.cs-sim-emoji{font-size:24px;margin-bottom:8px}
.cs-sim-name{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:4px}
.cs-sim-desc{font-size:11.5px;color:var(--t2);line-height:1.5;margin-bottom:8px}
.cs-sim-cta{font-size:11.5px;font-weight:700;color:var(--p)}
.cs-sim-placeholder{
  background:var(--bg);border:1px dashed var(--bd);border-radius:10px;
  padding:40px 20px;display:flex;flex-direction:column;align-items:center;
}
.cs-sim-placeholder-emoji{font-size:48px;margin-bottom:12px}

/* Vues métier */
.cs-bien-card{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  margin-bottom:10px;overflow:hidden;
}
.cs-bien-head{
  padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  background:var(--bg);
}
.cs-bien-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--bd);
}
.cs-bien-stats > div{
  padding:10px 14px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--bd);
}
.cs-bien-stats > div:last-child{border-right:none}
.cs-bsl{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--t3)}
.cs-bien-stats > div > span:last-child{font-size:12.5px;font-weight:600;color:var(--t1)}
.cs-info-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
}
.cs-info-card > div{padding:11px 14px;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.cs-info-card > div:nth-child(2n){border-right:none}
.cs-info-card > div:nth-last-child(-n+2){border-bottom:none}
.cs-info-card > div > span:last-child{font-size:13px;font-weight:600;color:var(--t1)}

@media (max-width: 900px){
  .contact-sheet-body{flex-direction:column}
  .contact-sheet-side{width:100%;max-height:none;border-right:none;border-bottom:1px solid var(--bd);display:flex;flex-wrap:wrap;padding:8px}
  .css-section-label{width:100%;padding:6px 8px}
  .css-nav-item{flex:1;min-width:140px}
  .cs-grid,.cs-grid-3,.cs-sim-grid{grid-template-columns:1fr}
  .cs-bien-stats{grid-template-columns:1fr 1fr}
  .cs-bien-stats > div:nth-child(2n){border-right:none}
}

/* Drawer raw — pas de head ni padding (pour fiches custom comme ContactDrawer) */
.drawer-raw{position:fixed}
.drawer-body-raw{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.drawer-raw-close{
  position:absolute;top:14px;right:14px;z-index:10;
  width:32px;height:32px;border-radius:8px;
  background:var(--card);border:1px solid var(--bd);color:var(--t2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;font-family:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.drawer-raw-close:hover{color:var(--red);border-color:var(--red);background:rgba(224,82,82,.07)}

/* ==================== ANALYSE IA — layout 2 colonnes ==================== */
.ia-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:14px;
  align-items:flex-start;
}
.ia-grid > .card{margin:0}

.ia-pending-list{display:flex;flex-direction:column;gap:8px}
.ia-pending-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;
  background:var(--bg);border:1px solid var(--bd);border-radius:8px;
  transition:border-color .12s;
}
.ia-pending-item:hover{border-color:var(--p)}
.ia-pending-icon{
  width:36px;height:42px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ia-pending-body{flex:1;min-width:0}
.ia-pending-name{
  font-weight:600;font-size:12.5px;color:var(--t1);
  margin-bottom:3px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ia-pending-meta{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  font-size:10.5px;color:var(--t3);
}
.ia-pending-dot{opacity:.5}

.ia-recent-list{display:flex;flex-direction:column;gap:8px}
.ia-recent-item{padding:12px;cursor:pointer}

@media (max-width: 1100px){
  .ia-grid{grid-template-columns: 1fr}
}

/* ==================== MARKETING — éditeur newsletter drag&drop ==================== */
.nl-editor{display:flex;flex-direction:column;height:calc(100vh - 140px);min-height:600px}

/* Toolbar */
.nl-toolbar{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:10px 14px;margin-bottom:12px;flex-wrap:wrap;
}
.nl-name{
  flex:1;min-width:200px;
  padding:8px 12px;border:1px solid var(--bd);border-radius:7px;
  font-size:14px;font-weight:600;background:var(--bg);color:var(--t1);
  font-family:inherit;
}
.nl-name:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 10%, transparent)}

/* Workspace 3 panneaux */
.nl-workspace{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns: 280px 1fr 300px;
  gap:12px;
  overflow:hidden;
}
.nl-workspace.preview{grid-template-columns: 1fr}

/* Panneau palette (gauche) */
.nl-palette{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:14px;overflow-y:auto;
}
.nl-palette-section{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--t3);padding:10px 0 8px;margin-top:4px;
  border-bottom:1px solid var(--bd);margin-bottom:10px;
}
.nl-palette-section:first-child{padding-top:0;margin-top:0}
.nl-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--t3);font-style:italic}

.nl-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.nl-field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--t3)}
.nl-field input,.nl-field select,.nl-field textarea{
  padding:8px 11px;border:1px solid var(--bd);border-radius:6px;
  font-size:12.5px;background:var(--bg);color:var(--t1);font-family:inherit;
  resize:vertical;
}
.nl-field input:focus,.nl-field select:focus,.nl-field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 10%, transparent)}
.nl-field code{background:var(--bg2);padding:1px 5px;border-radius:3px;font-family:inherit;font-size:10.5px;color:var(--gold-d)}

.nl-blocks-library{display:flex;flex-direction:column;gap:6px}
.nl-lib-block{
  display:flex;gap:10px;align-items:center;
  padding:9px 11px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;
  cursor:grab;transition:all .12s;user-select:none;
}
.nl-lib-block:hover{border-color:var(--p);background:var(--pl);transform:translateX(2px)}
.nl-lib-block:active{cursor:grabbing;transform:scale(.98)}
.nl-lib-icon{
  width:30px;height:30px;border-radius:7px;
  background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nl-lib-name{font-weight:600;font-size:12px;color:var(--t1)}
.nl-lib-desc{font-size:10.5px;color:var(--t3);margin-top:1px;line-height:1.3}

/* Canvas (centre) */
.nl-canvas-wrap{
  background:#e8e6e0;
  border-radius:10px;
  overflow-y:auto;
  padding:30px 20px;
}
.nl-workspace.preview .nl-canvas-wrap{padding:40px 20px}
.nl-canvas{
  max-width:600px;margin:0 auto;
  background:#fff;border-radius:6px;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  overflow:hidden;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.nl-email-head{
  padding:14px 20px;background:#f8f7f3;border-bottom:1px solid #e8e3d8;
  display:flex;flex-direction:column;gap:4px;font-size:11.5px;
}
.nl-email-meta{display:flex;gap:8px}
.nl-email-meta > span:first-child{
  width:60px;flex-shrink:0;color:#999;font-weight:600;
  text-transform:uppercase;font-size:9.5px;letter-spacing:.5px;line-height:1.4;padding-top:2px;
}
.nl-email-body{padding:24px;background:#fff;min-height:200px}

/* Drop zones */
.nl-dropzone{height:8px;position:relative;transition:height .15s}
.nl-dropzone.active{height:34px}
.nl-dropzone-line{
  position:absolute;inset:50% 0 50% 0;
  height:3px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--p), var(--p), transparent);
  animation:dropPulse .8s ease-in-out infinite alternate;
}
@keyframes dropPulse{
  from{opacity:.6;transform:translateY(-50%) scaleX(.95)}
  to  {opacity:1;transform:translateY(-50%) scaleX(1)}
}

/* Bloc dans le canevas */
.nl-block{
  position:relative;border:1px dashed transparent;border-radius:4px;
  transition:all .12s;cursor:pointer;padding:2px 4px;
}
.nl-block:hover{border-color:var(--p)55;background:color-mix(in srgb, var(--p) 4%, transparent)}
.nl-block.selected{border-color:var(--p);border-style:solid;background:color-mix(in srgb, var(--p) 8%, transparent);box-shadow:0 0 0 2px color-mix(in srgb, var(--p) 18%, transparent)}
.nl-block.dragging{opacity:.4}
.nl-block.preview{border:none;cursor:default;padding:0}
.nl-block.preview:hover{background:transparent}

.nl-block-actions{
  position:absolute;top:-12px;right:8px;
  display:none;gap:2px;z-index:5;
  background:var(--sb);border-radius:6px;padding:3px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.nl-block:hover .nl-block-actions,
.nl-block.selected .nl-block-actions{display:flex}
.nl-block-actions button{
  width:24px;height:22px;border:none;background:transparent;color:#fff;
  border-radius:4px;cursor:pointer;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  transition:background .12s;
}
.nl-block-actions button:hover{background:rgba(255,255,255,.15)}
.nl-block-actions button[title="Supprimer"]:hover{background:rgba(231,76,60,.4)}

.nl-block-handle{
  position:absolute;top:50%;left:-22px;transform:translateY(-50%);
  width:18px;height:30px;
  display:none;align-items:center;justify-content:center;
  color:var(--p);cursor:grab;font-size:12px;font-weight:800;
  background:#fff;border:1px solid var(--p)55;border-radius:4px;
  letter-spacing:-2px;
}
.nl-block:hover .nl-block-handle,
.nl-block.selected .nl-block-handle{display:flex}
.nl-block-handle:active{cursor:grabbing}

.nl-empty{
  text-align:center;padding:60px 20px;color:#7e8a9c;
  border:2px dashed #d8d2c4;border-radius:8px;
}
.nl-empty-emoji{font-size:48px;margin-bottom:12px;opacity:.5}

/* Rendu interne des blocs (typo email) */
.nl-h1{font-family:'Lora',serif;font-size:28px;font-weight:700;color:var(--sb);margin:14px 0 10px;line-height:1.2}
.nl-h2{font-family:'Lora',serif;font-size:20px;font-weight:600;color:var(--sb);margin:14px 0 8px;line-height:1.3}
.nl-p{font-size:14.5px;line-height:1.65;color:var(--sb2);margin:8px 0}
.nl-img{display:block;width:100%;object-fit:cover;border-radius:4px}
.nl-img-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#f8f7f3;border:2px dashed #d8d2c4;border-radius:6px;
}
.nl-cta{
  display:inline-block;padding:13px 28px;border-radius:7px;
  color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.3px;box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .1s;
}
.nl-cta:hover{transform:translateY(-1px)}
.nl-hr{margin:18px 0;border:none;border-top:1px solid #e8e3d8}
.nl-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0}
.nl-col{}
.nl-quote{
  margin:14px 0;padding:14px 18px;
  border-left:4px solid var(--p);background:#f8f7f3;border-radius:0 6px 6px 0;
}
.nl-quote-text{font-family:'Lora',serif;font-size:15px;font-style:italic;color:var(--sb);line-height:1.5}
.nl-quote-author{font-size:11.5px;color:#7e8a9c;margin-top:8px;font-weight:600}

/* Email footer */
.nl-email-foot{}

/* Panneau propriétés (droite) */
.nl-props{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:14px;overflow-y:auto;
}
.nl-props-empty{
  padding:40px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;
}
.nl-props-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:10px;border-bottom:1px solid var(--bd);margin-bottom:14px;
}
.nl-props-title{font-weight:700;font-size:13px;color:var(--t1);font-family:'Lora',serif}

@media (max-width: 1100px){
  .nl-workspace{grid-template-columns: 240px 1fr}
  .nl-props{display:none}
}
@media (max-width: 800px){
  .nl-workspace{grid-template-columns: 1fr}
  .nl-palette{display:none}
}

/* ==================== MARKETING — Vue Code HTML ==================== */
.nl-workspace.html-mode{grid-template-columns: 1fr}
.nl-html-wrap{
  background:var(--sb) !important;
  padding:0 !important;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.nl-html-view{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}

.nl-html-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:#13213a;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.nl-html-info{display:flex;gap:14px;align-items:center}
.nl-html-meta{
  font-size:11px;color:rgba(255,255,255,.55);
  font-family:inherit;
}
.nl-html-meta strong{color:var(--p);font-weight:700}

.nl-html-bar .btn{
  background:rgba(255,255,255,.08);color:#fff;border-color:transparent;
}
.nl-html-bar .btn:hover{background:rgba(255,255,255,.14)}
.nl-html-bar .btn-primary{background:var(--p) !important;color:var(--sb) !important}

.nl-html-pre{
  flex:1;margin:0;padding:14px 0;
  background:var(--sb);color:#e8e6e0;
  overflow:auto;
  font-family:inherit;
  font-size:12.5px;line-height:1.55;
}
.nl-html-pre code{
  display:block;white-space:pre;
}

.nl-html-line{display:flex;gap:12px;padding:0 14px}
.nl-html-line:hover{background:rgba(255,255,255,.03)}
.nl-html-ln{
  display:inline-block;min-width:38px;
  text-align:right;color:rgba(255,255,255,.25);
  user-select:none;
  flex-shrink:0;
}
.nl-html-code{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}

/* Coloration syntaxique */
.hl-t{color:#e67e9e}      /* tag name : rose pâle */
.hl-a{color:var(--p)}      /* attribute name : or */
.hl-v{color:#7ec47e}      /* attribute value : vert */
.hl-c{color:#7e8a9c;font-style:italic} /* comment : gris bleu */

/* ==================== AGENT IA — bouton flottant + panneau ==================== */
@keyframes ai-fab-pulse{
  0%,100%{box-shadow:0 8px 28px color-mix(in srgb, var(--p) 45%, transparent)}
  50%    {box-shadow:0 8px 40px color-mix(in srgb, var(--p) 45%, transparent),0 0 0 10px color-mix(in srgb, var(--p) 12%, transparent)}
}
@keyframes ai-orb-listen{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--p) 0%, transparent)}
  50%    {box-shadow:0 0 0 10px color-mix(in srgb, var(--p) 18%, transparent)}
}
@keyframes ai-orb-speak{
  0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}
  50%    {box-shadow:0 0 0 10px rgba(46,204,113,.22)}
}
@keyframes ai-open{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes ai-typing-dot{
  0%,100%{transform:translateY(0);opacity:.35}
  50%    {transform:translateY(-5px);opacity:1}
}

/* Bouton flottant */
.ai-fab{
  position:fixed;bottom:24px;right:24px;z-index:1500;
  width:62px;height:62px;border-radius:50%;
  border:3px solid #fff;
  padding:0;cursor:pointer;
  background:linear-gradient(135deg,var(--sb) 0%,var(--sb2) 50%,var(--p) 130%);
  box-shadow:0 8px 28px color-mix(in srgb, var(--p) 45%, transparent);
  transition:transform .18s,box-shadow .15s;
  animation:ai-fab-pulse 3s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
.ai-fab:hover{transform:scale(1.08)}
.ai-fab-img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:50%;
}
.ai-fab-pulse{display:none}

/* Panneau */
.ai-panel{
  position:fixed;top:16px;bottom:16px;right:24px;
  z-index:1499;width:390px;max-width:calc(100vw - 32px);
  border-radius:22px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03);
  display:flex;flex-direction:column;overflow:hidden;
  animation:ai-open .25s cubic-bezier(.34,1.56,.64,1) both;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* Header */
.ai-head{
  padding:14px 16px;flex-shrink:0;
  background:linear-gradient(135deg,var(--sb) 0%,#2a3e5d 50%,var(--p) 140%);
  display:flex;align-items:center;gap:11px;
}
.ai-head-mark{
  width:38px;height:38px;border-radius:13px;flex-shrink:0;
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.3);
  overflow:hidden;
}
.ai-head-mark img{width:100%;height:100%;object-fit:cover;display:block}
.ai-head-name{
  font-size:14px;font-weight:800;color:#fff;
  letter-spacing:-.02em;line-height:1.1;
  font-family:'Lora',Georgia,serif;
}
.ai-head-sub{
  font-size:11px;color:rgba(255,255,255,.8);margin-top:3px;
  display:flex;align-items:center;gap:5px;
}
.ai-head-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(74,222,128,.3);
}
.ai-close{
  width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(0,0,0,.2);color:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s;font-family:inherit;
}
.ai-close:hover{background:rgba(0,0,0,.4)}

/* Messages */
.ai-msgs{
  flex:1;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;min-height:0;
}
.ai-msgs::-webkit-scrollbar{width:4px}
.ai-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px}

.ai-msg{display:flex;gap:8px;align-items:flex-end}
.ai-msg.user{justify-content:flex-end}
.ai-msg-avatar{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;margin-bottom:2px;
  border:1px solid color-mix(in srgb, var(--p) 30%, transparent);
  overflow:hidden;
}
.ai-msg-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.ai-bubble{
  max-width:78%;padding:9px 13px;
  font-size:13.5px;line-height:1.55;word-break:break-word;
}
.ai-bubble.ai{
  border-radius:4px 16px 16px 16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.85);
}
.ai-bubble.user{
  border-radius:16px 16px 4px 16px;
  background:linear-gradient(135deg,var(--p),#d4a44c);
  color:#0e1a30;font-weight:500;
}

.ai-typing{display:flex;gap:5px;align-items:center;padding:10px 14px}
.ai-typing span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.45);
  animation:ai-typing-dot 1.1s ease-in-out infinite;
}
.ai-typing span:nth-child(2){animation-delay:.18s}
.ai-typing span:nth-child(3){animation-delay:.36s}

/* Suggestions */
.ai-suggestions{
  padding:0 14px 8px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;
}
.ai-sugg{
  padding:6px 11px;border-radius:14px;
  background:color-mix(in srgb, var(--p) 10%, transparent);border:1px solid color-mix(in srgb, var(--p) 25%, transparent);
  color:#e8d4a3;font-size:11.5px;font-weight:500;cursor:pointer;
  font-family:inherit;transition:all .12s;
}
.ai-sugg:hover{background:color-mix(in srgb, var(--p) 20%, transparent);border-color:color-mix(in srgb, var(--p) 45%, transparent)}

/* Barre de saisie */
.ai-input-bar{
  padding:12px 12px 16px;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);
  display:flex;gap:8px;align-items:flex-end;
}
.ai-mic{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  border:1.5px solid;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s, background .2s;font-family:inherit;
}
.ai-ta{
  flex:1;border-radius:13px;padding:10px 13px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  font:13.5px 'Plus Jakarta Sans',Arial,sans-serif;
  resize:none;line-height:1.55;max-height:110px;overflow-y:auto;
}
.ai-ta::placeholder{color:rgba(255,255,255,.32)}
.ai-ta:focus{outline:none;border-color:color-mix(in srgb, var(--p) 45%, transparent)}
.ai-send{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  border:none;cursor:pointer;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-family:inherit;
}
.ai-send:not(:disabled){
  background:linear-gradient(135deg,var(--p),#d4a44c);color:#0e1a30;
  box-shadow:0 4px 14px color-mix(in srgb, var(--p) 35%, transparent);
}
.ai-send:not(:disabled):hover{transform:translateY(-1px)}
.ai-send:disabled{cursor:not-allowed}

/* Mobile */
@media (max-width: 480px){
  .ai-panel{
    top:0;bottom:0;right:0;left:0;
    width:100%;max-width:100%;
    border-radius:0;
  }
  .ai-fab{bottom:16px;right:16px;width:54px;height:54px}
}

/* ==================== PARAMÈTRES — apparence ==================== */
/* Mode clair / sombre — cartes choix */
.theme-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.theme-mode-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--bg);border:2px solid var(--bd);border-radius:12px;
  padding:14px;cursor:pointer;text-align:left;transition:all .15s;
  font-family:inherit;
}
.theme-mode-card:hover{border-color:var(--p);transform:translateY(-1px)}
.theme-mode-card.active{border-color:var(--p);background:var(--pl)}
.theme-mode-preview{
  height:100px;border-radius:8px;display:grid;grid-template-columns:60px 1fr;gap:0;overflow:hidden;
  border:1px solid var(--bd);
}
.theme-mode-preview.light{background:#f1f2f6}
.theme-mode-preview.light .tmp-side{background:var(--sb)}
.theme-mode-preview.light .tmp-content{background:#f1f2f6;padding:10px;display:flex;flex-direction:column;gap:6px}
.theme-mode-preview.light .tmp-bar{height:14px;background:#fff;border:1px solid #e4e7f0;border-radius:4px}
.theme-mode-preview.light .tmp-card{flex:1;background:#fff;border:1px solid #e4e7f0;border-radius:6px;border-left:3px solid var(--p)}
.theme-mode-preview.dark{background:#14192a}
.theme-mode-preview.dark .tmp-side{background:#0e1320}
.theme-mode-preview.dark .tmp-content{background:#14192a;padding:10px;display:flex;flex-direction:column;gap:6px}
.theme-mode-preview.dark .tmp-bar{height:14px;background:#1e2535;border:1px solid #2a3248;border-radius:4px}
.theme-mode-preview.dark .tmp-card{flex:1;background:#1e2535;border:1px solid #2a3248;border-radius:6px;border-left:3px solid var(--p)}
.theme-mode-info{}
.theme-mode-title{font-weight:700;font-size:14px;color:var(--t1);margin-bottom:4px;font-family:'Lora',serif}
.theme-mode-desc{font-size:11.5px;color:var(--t2);line-height:1.5}
.theme-mode-check{
  position:absolute;top:14px;right:14px;
  width:24px;height:24px;border-radius:50%;
  background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* Palettes */
.palette-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px;
}
.palette-card{
  position:relative;display:flex;flex-direction:column;gap:0;
  background:var(--bg);border:2px solid var(--bd);border-radius:10px;
  padding:0;cursor:pointer;text-align:left;transition:all .15s;
  overflow:hidden;font-family:inherit;
}
.palette-card:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.palette-card.active{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.palette-swatches{
  display:grid;grid-template-columns:60px 1fr;height:60px;
}
.ps-side{}
.ps-stack{display:grid;grid-template-rows:1fr 1fr 1fr}
.ps-primary,.ps-dark,.ps-accent{}
.palette-body{padding:10px 12px}
.palette-name{font-weight:700;font-size:13px;color:var(--t1);margin-bottom:2px;font-family:'Lora',serif}
.palette-desc{font-size:11px;color:var(--t2);line-height:1.4}
.palette-check{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;border-radius:50%;background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.palette-custom{border-style:dashed}

/* Editeur custom */
.custom-editor{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.custom-pickers{display:flex;flex-direction:column;gap:10px}
.cp-row{
  display:grid;grid-template-columns:140px 1fr 1fr;gap:10px;align-items:center;
  padding:8px 10px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;
}
.cp-row label{font-size:12px;font-weight:600;color:var(--t1)}
.cp-input{display:flex;gap:6px;align-items:center}
.cp-input input[type="color"]{
  width:36px;height:30px;padding:0;border:1px solid var(--bd);border-radius:5px;cursor:pointer;background:transparent;
}
.cp-input input[type="color"]::-webkit-color-swatch-wrapper{padding:1px}
.cp-input input[type="color"]::-webkit-color-swatch{border-radius:3px;border:none}
.cp-hex{
  width:90px;padding:5px 9px;font-family:inherit;
  font-size:11.5px;border:1px solid var(--bd);border-radius:5px;
  background:var(--bg);color:var(--t1);font-family:inherit;
  text-transform:uppercase;
}
.cp-help{font-size:10.5px;color:var(--t3);font-style:italic;line-height:1.4}

.custom-presets{
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  padding:14px;
}
.cp-section-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--t3);margin-bottom:6px}
.cp-presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cp-preset{
  padding:8px;border:1px solid var(--bd);border-radius:6px;
  background:var(--card);cursor:pointer;text-align:left;font-family:inherit;
  font-size:11px;color:var(--t1);transition:all .12s;
}
.cp-preset:hover{border-color:var(--p);background:var(--pl)}

/* Aperçu */
.theme-preview-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 0}

@media (max-width: 800px){
  .theme-mode-row{grid-template-columns:1fr}
  .custom-editor{grid-template-columns:1fr}
  .cp-row{grid-template-columns:1fr;gap:6px}
}

/* ==================== DARK MODE — adaptations supplémentaires ==================== */
[data-theme="dark"]{
  --bg:#14192a;
  --card:#1e2535;
  --text:#e2e6f0;
  --t2:#8892ab;
  --t3:#5a6480;
  --border:#2a3248;
  --bd:#2a3248;
  --t1:#e2e6f0;
  --t4:#3a4258;
  --bg2:#1a2032;
  --bg3:#252b41;
  --sh:0 2px 10px rgba(0,0,0,.3);
  --shl:0 8px 32px rgba(0,0,0,.45);
  --shx:0 16px 48px rgba(0,0,0,.6);
}
[data-theme="dark"] body{background:var(--bg);color:var(--t1)}
[data-theme="dark"] .card{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .topbar{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .nl-canvas{background:#1e2535}
[data-theme="dark"] .nl-canvas-wrap{background:#0a0e1a}
[data-theme="dark"] .nl-email-head{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .nl-email-body{background:#1e2535}
[data-theme="dark"] .nl-h1,
[data-theme="dark"] .nl-h2{color:#fff}
[data-theme="dark"] .nl-p{color:#c5cad8}
[data-theme="dark"] .nl-quote{background:#252b41;border-left-color:var(--p)}
[data-theme="dark"] .nl-quote-text{color:#fff}
[data-theme="dark"] .opp-table-wrap,
[data-theme="dark"] .contacts-list{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .opp-table thead th,
[data-theme="dark"] .contacts-table thead th,
[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .cs-table thead th{background:#14192a;color:var(--t3);border-color:var(--bd)}
[data-theme="dark"] .opp-table tbody tr,
[data-theme="dark"] .contacts-table tbody tr,
[data-theme="dark"] .data-table tbody tr,
[data-theme="dark"] .cs-table tbody tr{border-color:var(--bd)}
[data-theme="dark"] .opp-table tbody tr:hover,
[data-theme="dark"] .contacts-table tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .filter-pill{background:#252b41;border-color:var(--bd);color:var(--t2)}
[data-theme="dark"] .chip-check,
[data-theme="dark"] .statut-chip{background:#252b41;border-color:var(--bd);color:var(--t2)}
[data-theme="dark"] .chip-check.on,
[data-theme="dark"] .statut-chip.on{background:var(--card)}
[data-theme="dark"] .badge{filter:brightness(1.1)}
[data-theme="dark"] .contact-tag{background:#252b41;border-color:var(--bd);color:var(--t2)}
[data-theme="dark"] .opp-stage{background:#252b41;color:var(--t2)}
[data-theme="dark"] .view-switch{background:#0e1320;border-color:var(--bd)}
[data-theme="dark"] .view-switch button.active{background:var(--card);color:var(--p)}
[data-theme="dark"] .opp-filters,
[data-theme="dark"] .contacts-toolbar,
[data-theme="dark"] .opp-filter-divider,
[data-theme="dark"] .contacts-toolbar-divider{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .opp-filter-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select{background:#14192a;color:var(--t1);border-color:var(--bd)}
[data-theme="dark"] .opp-kb-col{background:#0e1320;border-color:var(--bd)}
[data-theme="dark"] .opp-kb-head{background:var(--card);color:var(--t1);border-color:var(--bd)}
[data-theme="dark"] .opp-kb-card{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .modal{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .drawer{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .drawer-back{background:rgba(0,0,0,.6)}
[data-theme="dark"] .drawer-head,
[data-theme="dark"] .drawer-foot{border-color:var(--bd)}
[data-theme="dark"] .contact-sheet{background:var(--card)}
[data-theme="dark"] .contact-sheet-header{border-color:var(--bd)}
[data-theme="dark"] .contact-sheet-side{background:#0e1320;border-color:var(--bd)}
[data-theme="dark"] .css-nav-item.active{background:var(--card)}
[data-theme="dark"] .ia-pending-item,
[data-theme="dark"] .ia-recent-item{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .ia-pending-item:hover{border-color:var(--p)}
[data-theme="dark"] .kpi-card{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .opp-proba-bar,
[data-theme="dark"] .ia-pending-meta,
[data-theme="dark"] .opp-kb-proba{background:#252b41}
[data-theme="dark"] .data-table td,
[data-theme="dark"] .cs-table td{border-color:var(--bd)}
[data-theme="dark"] .login-right{background:#1a2032}
[data-theme="dark"] .login-tabs{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .login-module{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .login-field input{background:var(--bg);border-color:var(--bd);color:var(--t1)}
[data-theme="dark"] .login-title{color:#fff}
[data-theme="dark"] .login-sub{color:var(--t2)}
[data-theme="dark"] .login-field label{color:#fff}
[data-theme="dark"] .opp-state-badge{filter:brightness(1.15)}
[data-theme="dark"] .nl-toolbar,
[data-theme="dark"] .nl-palette,
[data-theme="dark"] .nl-props{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .nl-lib-block{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .nl-lib-block:hover{background:var(--pl)}
[data-theme="dark"] .nl-name{background:#14192a;border-color:var(--bd);color:#fff}
[data-theme="dark"] .nl-field input,
[data-theme="dark"] .nl-field textarea,
[data-theme="dark"] .nl-field select{background:#14192a;border-color:var(--bd);color:#fff}
[data-theme="dark"] .opp-hint{background:color-mix(in srgb, var(--p) 10%, transparent);color:var(--t1)}
[data-theme="dark"] .css-nav-item:hover{background:#14192a}
[data-theme="dark"] .cs-mini-card,
[data-theme="dark"] .cs-bien-card,
[data-theme="dark"] .cs-info-card,
[data-theme="dark"] .cs-profile-card,
[data-theme="dark"] .cs-history-input textarea{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .cs-bien-stats,
[data-theme="dark"] .cs-bien-head{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .cs-field input,
[data-theme="dark"] .cs-field select,
[data-theme="dark"] .cs-field textarea{background:var(--bg);border-color:var(--bd);color:var(--t1)}
[data-theme="dark"] .login-module-mark{filter:brightness(1.2)}
[data-theme="dark"] .theme-mode-card,
[data-theme="dark"] .palette-card,
[data-theme="dark"] .cp-row,
[data-theme="dark"] .custom-presets{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .cp-preset{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .cp-help{color:var(--t3)}

/* ==================== SETTINGS — modules métiers compacts ==================== */
.settings-modules-list{display:flex;flex-direction:column;gap:8px}
.sm-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  background:var(--bg);border:1px solid var(--bd);border-radius:9px;
  transition:border-color .12s;
}
.sm-row:hover{border-color:var(--p)}
.sm-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sm-name{flex:1;font-weight:600;font-size:14px;color:var(--t1)}

/* Toggle pill (switch) */
.toggle-pill{
  position:relative;width:42px;height:24px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--bd);
  cursor:pointer;transition:all .18s;flex-shrink:0;padding:0;
  font-family:inherit;
}
.toggle-pill .tp-knob{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .18s;
}
.toggle-pill.on .tp-knob{transform:translateX(18px)}

/* Theme toggle pill (header palette) */
.settings-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.settings-card-head .card-title{
  font-family:'Lora',serif;font-size:15px;font-weight:700;color:var(--t1);
}
.settings-card-head .card-sub{
  font-size:11.5px;color:var(--t2);margin-top:2px;
}
.theme-toggle-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:20px;
  background:var(--bg2);border:1px solid var(--bd);
  color:var(--t1);font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.theme-toggle-pill:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.theme-toggle-pill svg{flex-shrink:0}

/* Custom editor inline */
.custom-editor-inline{margin-top:18px;padding-top:14px;border-top:1px dashed var(--bd)}
.ce-divider{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.ce-divider span{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--p);background:var(--pl);padding:4px 10px;border-radius:5px;
}

/* Topbar — bouton déconnexion avec texte */
.btn-logout{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--bd);
  color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.btn-logout:hover{background:rgba(231,76,60,.08);border-color:#e74c3c44;color:#c0392b}
.btn-logout svg{flex-shrink:0}

[data-theme="dark"] .sm-row{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .toggle-pill{background:#0e1320;border-color:var(--bd)}
[data-theme="dark"] .theme-toggle-pill{background:#14192a;border-color:var(--bd);color:var(--t1)}

/* ==================== COLLABORATEURS / ÉQUIPES / AGENCES ==================== */
.collab-tabs{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:6px;margin-bottom:14px;
}
.ct-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:none;background:transparent;
  font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;
  border-radius:7px;transition:all .12s;font-family:inherit;
}
.ct-btn:hover{color:var(--t1);background:var(--bg2)}
.ct-btn.active{background:var(--p);color:#fff}
.ct-count{
  font-size:10.5px;padding:1px 7px;border-radius:9px;font-weight:700;
  background:rgba(0,0,0,.08);color:inherit;
}
.ct-btn.active .ct-count{background:rgba(255,255,255,.22)}

.collab-table tbody tr td{padding:12px 14px}
.collab-table .ta-c{text-align:center}

/* Liste des droits */
.rights-list{display:flex;flex-direction:column;gap:6px}
.right-row{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 14px;border:1px solid var(--bd);border-radius:8px;
  background:var(--bg);cursor:pointer;
  transition:all .12s;
}
.right-row:hover{border-color:var(--p)}
.right-row.on{background:var(--pl)}
.right-row input[type="checkbox"]{
  margin:1px 0 0 0;width:16px;height:16px;
  accent-color:var(--p);cursor:pointer;flex-shrink:0;
}

[data-theme="dark"] .collab-tabs{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .right-row{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .right-row.on{background:var(--pl)}

/* ==================== SIDEBAR USER MENU ==================== */
.sb-user-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 14px;
  background:transparent;border:none;border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer;font-family:inherit;text-align:left;
  transition:background .15s;
}
.sb-user-btn:hover{background:rgba(255,255,255,.04)}
.sb-user-photo{
  width:32px;height:32px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
}
.sb-user-menu{
  position:absolute;bottom:calc(100% + 8px);left:14px;right:14px;
  background:var(--sb);border:1px solid color-mix(in srgb, var(--p) 30%, transparent);border-radius:10px;
  box-shadow:0 -8px 28px rgba(0,0,0,.45);
  padding:6px;display:flex;flex-direction:column;gap:2px;
  z-index:200;
  animation:sbumIn .18s ease;
}
@keyframes sbumIn{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:translateY(0)}
}
.sbum-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:none;background:transparent;border-radius:7px;
  color:rgba(255,255,255,.85);font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;text-align:left;transition:all .12s;
}
.sbum-item:hover{background:color-mix(in srgb, var(--p) 18%, transparent);color:#fff}
.sbum-item svg{flex-shrink:0;color:var(--p)}

/* ==================== MON PROFIL ==================== */
.profile-photo{
  width:96px;height:96px;border-radius:14px;overflow:hidden;
  border:2px solid var(--bd);background:var(--bg2);
  flex-shrink:0;
}
.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.profile-photo-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-family:'Lora',serif;font-size:32px;
}

/* ==================== FORMATIONS ==================== */
.train-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.train-card{
  background:var(--bg);border:1px solid var(--bd);border-radius:10px;
  padding:14px;
  transition:all .15s;
}
.train-card:hover{border-color:var(--p);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.train-tag{
  display:inline-block;padding:2px 9px;border-radius:11px;
  font-size:10.5px;font-weight:700;
  white-space:nowrap;
}

.quiz-block{
  background:var(--bg2);border:1px solid var(--bd);border-radius:10px;
  padding:14px;margin:14px 0;
}

.follow-matrix .follow-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--bg2);color:var(--t3);
  font-size:11px;font-weight:700;
}
.follow-matrix .follow-dot.done{background:#2ecc71;color:#fff}
.follow-matrix .follow-dot.prog{background:#4a7fe522;color:#4a7fe5}

/* ==================== ÉDITEUR DE FORMATION ==================== */
.formation-editor{display:flex;flex-direction:column;height:calc(100vh - 140px);min-height:600px}
/* En plein écran recouvrant (édition de cours/QCM, comme le builder de devis) */
.doc-builder-overlay .formation-editor{height:100%;min-height:0;padding:18px 22px;box-sizing:border-box;overflow:hidden}
.doc-builder-overlay .formation-editor .nl-workspace{flex:1;min-height:0}
.fe-toolbar{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:10px 14px;margin-bottom:12px;flex-wrap:wrap;
}

[data-theme="dark"] .train-card{background:#14192a;border-color:var(--bd)}
[data-theme="dark"] .quiz-block{background:#0e1320;border-color:var(--bd)}
[data-theme="dark"] .sb-user-menu{background:#0e1320}
[data-theme="dark"] .profile-photo{background:#0e1320;border-color:var(--bd)}

/* ==================== DATA-TABLE — style unifié pour toutes les listes ==================== */
/* Modèle calqué sur .opp-table / .contacts-table : padding aéré, header en small caps,
   hover doré, rangées séparées par 1px var(--bd) */
.data-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.data-table thead th{
  background:var(--bg);padding:12px 14px;text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;color:var(--t3);border-bottom:1px solid var(--bd);
  white-space:nowrap;
}
.data-table thead th.ta-c{text-align:center}
.data-table thead th.ta-r{text-align:right}
.data-table tbody tr{
  border-bottom:1px solid var(--bd);
  transition:background .12s;
}
.data-table tbody tr:last-child{border-bottom:none}
.data-table tbody tr:hover{background:color-mix(in srgb, var(--p) 4%, transparent)}
.data-table td{padding:13px 14px;vertical-align:middle}
.data-table td.ta-c{text-align:center}
.data-table td.ta-r{text-align:right}
/* Sous-ligne secondaire dans une cellule (description, méta…) */
.data-table .row-sub{
  font-size:11px;color:var(--t3);line-height:1.4;margin-top:3px;
}
/* Cellule "titre principal" */
.data-table .row-title{
  font-weight:600;color:var(--t1);font-size:13px;
}

/* Wrapper standard quand la table est posée dans une carte sans padding */
.data-table-wrap{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  overflow:hidden;
}

/* Adaptations dark mode */
[data-theme="dark"] .data-table thead th{
  background:#14192a;color:var(--t3);border-color:var(--bd);
}
[data-theme="dark"] .data-table tbody tr{border-color:var(--bd)}
[data-theme="dark"] .data-table tbody tr:hover{background:rgba(255,255,255,.03)}

/* ==================== AJUSTEMENTS table dans Card ==================== */
/* Quand une .data-table est mise dans une .card sans padding pour s'étendre bord à bord,
   on enlève les bordures arrondies des coins du haut (la card s'en occupe) */
.card[style*="padding:0"] .data-table thead th:first-child,
.card .data-table thead th:first-child{padding-left:18px}
.card[style*="padding:0"] .data-table thead th:last-child,
.card .data-table thead th:last-child{padding-right:18px}
.card[style*="padding:0"] .data-table td:first-child,
.card .data-table td:first-child{padding-left:18px}
.card[style*="padding:0"] .data-table td:last-child,
.card .data-table td:last-child{padding-right:18px}

/* Spécifique : matrice de suivi formations — colonnes plus serrées + horizontal scroll */
.follow-matrix th,
.follow-matrix td{padding:10px 8px}
.follow-matrix th:first-child,
.follow-matrix td:first-child{padding-left:18px}

/* Tags réutilisables avec style "module pill" arrondi */
.pill-tag{
  display:inline-block;padding:3px 10px;border-radius:11px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  white-space:nowrap;
}

/* ==================== TOPBAR USER MENU ==================== */
.tb-user-btn{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:var(--card);
  cursor:pointer;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.tb-user-btn:hover{border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.tb-user-btn .av{width:34px;height:34px;font-size:13px;border-radius:50%}
.tb-user-photo{
  width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;
}
.tb-user-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:240px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  padding:6px;display:flex;flex-direction:column;gap:2px;
  z-index:200;
  animation:tbumIn .18s ease;
}
@keyframes tbumIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
.tb-um-head{padding:12px 14px 10px}
.tb-um-name{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.2px}
.tb-um-role{font-size:11.5px;color:var(--t3);margin-top:3px}
.tb-um-divider{height:1px;background:var(--border);margin:4px 6px}
.tb-um-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:none;background:transparent;border-radius:7px;
  color:var(--text);font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;text-align:left;transition:all .12s;
}
.tb-um-item:hover{background:var(--pl);color:var(--p)}
.tb-um-item svg{flex-shrink:0;color:var(--p)}
.tb-um-item-danger{color:#c0392b}
.tb-um-item-danger svg{color:#c0392b}
.tb-um-item-danger:hover{background:rgba(231,76,60,.08);color:#c0392b}
[data-theme="dark"] .tb-user-menu{background:#1a2138;box-shadow:0 12px 36px rgba(0,0,0,.5)}
[data-theme="dark"] .tb-um-item-danger{color:#ff7766}
[data-theme="dark"] .tb-um-item-danger:hover{background:rgba(255,119,102,.1);color:#ff8877}

/* ==================== SIDEBAR — BOUTON GÉRER LE MENU ==================== */
.sb-manage-menu{
  margin:8px 14px 14px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;
  background:transparent;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:rgba(255,255,255,.65);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.sb-manage-menu:hover{
  border-color:color-mix(in srgb, var(--p) 50%, transparent);background:color-mix(in srgb, var(--p) 10%, transparent);
  color:rgba(255,255,255,.95);
}
.sb-manage-menu svg{color:color-mix(in srgb, var(--p) 80%, transparent)}

/* ==================== RDV / MODAL GÉNÉRIQUE ==================== */
.rdv-modal-backdrop{
  position:fixed;inset:0;background:rgba(15,20,40,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:500;padding:20px;
  animation:rdvBdIn .15s ease;
}
@keyframes rdvBdIn{from{opacity:0}to{opacity:1}}
.rdv-modal{
  width:100%;max-width:560px;max-height:90vh;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  display:flex;flex-direction:column;overflow:hidden;
  animation:rdvMdIn .2s ease;
}
@keyframes rdvMdIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.rdv-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.rdv-modal-body{padding:18px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.rdv-modal-foot{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding:14px 20px;border-top:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}

/* ==================== MANAGE MENU — TOGGLES ==================== */
.manage-menu-row{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 13px;margin-bottom:6px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  font-size:13px;font-weight:600;color:var(--text);
  cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.manage-menu-row:hover{border-color:var(--p);background:var(--pl)}
.manage-menu-row.is-on{border-color:var(--p);background:var(--pl)}
.manage-menu-row.manage-menu-row-locked{
  cursor:not-allowed;opacity:.7;
}
.manage-menu-row.manage-menu-row-locked:hover{
  border-color:var(--border);background:var(--bg);
}
.mm-toggle{
  width:34px;height:18px;border-radius:18px;background:var(--border);
  position:relative;flex-shrink:0;transition:background .2s;
}
.mm-toggle.on{background:var(--p)}
.mm-toggle-knob{
  position:absolute;top:2px;left:2px;width:14px;height:14px;
  background:#fff;border-radius:50%;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.mm-toggle.on .mm-toggle-knob{transform:translateX(16px)}


/* ==================== FORMATIONS — multi-select popover ==================== */
.multi-select-pop{
  position:absolute;top:calc(100% + 6px);left:0;
  width:320px;max-height:380px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 36px rgba(0,0,0,.15);
  display:flex;flex-direction:column;z-index:100;
  animation:tbumIn .15s ease;
}
.msp-head{
  display:flex;align-items:center;gap:4px;padding:6px;
  border-bottom:1px solid var(--border);
}
.msp-list{flex:1;overflow-y:auto;padding:6px}
.msp-item{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;
  transition:background .12s;
}
.msp-item:hover{background:var(--pl)}
.msp-item input{margin:0;cursor:pointer;flex-shrink:0}

/* ==================== FORMATIONS — éditeur structure ==================== */
.fe-structure{
  flex:1;overflow-y:auto;padding:18px 22px;max-width:980px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.fe-meta{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.fe-meta-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fe-summary{
  display:flex;gap:18px;padding:10px 14px;
  background:var(--pl);border-radius:8px;
  font-size:12.5px;color:var(--text);
}
.fe-summary strong{color:var(--p);font-weight:800}
.fe-section{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;
}
.fe-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.fe-section-title{
  font-family:'Lora',serif;font-size:15px;font-weight:600;color:var(--text);
}
.fe-empty-block{
  padding:14px;background:var(--bg);border:1px dashed var(--border);border-radius:8px;
  font-size:12px;color:var(--t3);text-align:center;font-style:italic;
}
.fe-module{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;margin-bottom:8px;
}
.fe-module-head{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.fe-module-title{
  flex:1;border:none;background:transparent;
  font-family:'Lora',serif;font-size:14px;font-weight:600;color:var(--text);
  padding:5px 8px;border-radius:5px;
  font-family:inherit;
}
.fe-module-title:hover,.fe-module-title:focus{background:var(--card);outline:none}
.fe-module-courses{padding-left:20px;display:flex;flex-direction:column;gap:5px}
.fe-course-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:var(--card);
  border:1px solid var(--border);border-radius:7px;
}
.fe-course-row:hover{border-color:var(--p)}
.fe-course-title{
  flex:1;font-size:13px;font-weight:500;color:var(--text);cursor:text;
  padding:3px 6px;border-radius:4px;
  border:none;background:transparent;font-family:inherit;
}
.fe-course-title:hover{background:var(--pl)}
.fe-course-title:focus{background:var(--bg);outline:1px solid var(--p)}

/* ==================== FORMATIONS — édition QCM ==================== */
.quiz-edit-card{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin-bottom:12px;
}

/* ==================== FORMATIONS — matrice de suivi (transposée) ==================== */
.follow-collab-head{
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px;border-radius:7px;width:100%;
  transition:background .12s;
}
.follow-collab-head:hover{background:var(--pl)}


/* ==================== ÉDITEUR DE COURS — onglets centrés verticalement ==================== */
.ce-tabs{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:8px 12px;margin-bottom:12px;
  /* hauteur min pour que les boutons soient visuellement centrés */
  min-height:54px;
}
.ce-tabs .ct-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;font-size:13px;font-weight:600;
}

/* ==================== CATALOGUE ADMIN — cartes cliquables ==================== */
.train-card-clickable{
  cursor:pointer;transition:all .15s;
}
.train-card-clickable:hover{
  border-color:var(--p);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
[data-theme="dark"] .train-card-clickable:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ==================== FORMATION DRAWER — sections ==================== */
.form-drawer-section{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.form-drawer-section-head{
  display:flex;align-items:center;justify-content:space-between;
}
.form-drawer-section-title{
  font-family:'Lora',serif;font-size:14px;font-weight:600;color:var(--text);
}
.form-drawer-single-course{
  background:var(--pl);border-radius:10px;
  padding:18px;text-align:center;
}


/* ==================== FORMATION DRAWER — toggle visibilité ==================== */
.form-drawer-visibility-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
}
.form-drawer-visibility-row > div:first-child{flex:1;min-width:0}
.form-drawer-visibility-row .mm-toggle{
  width:42px;height:22px;cursor:pointer;flex-shrink:0;border:none;
}
.form-drawer-visibility-row .mm-toggle .mm-toggle-knob{width:18px;height:18px}
.form-drawer-visibility-row .mm-toggle.on .mm-toggle-knob{transform:translateX(20px)}

/* ==================== FORMATIONS — métadonnées en lecture seule (système) ==================== */
.form-drawer-meta-readonly{
  display:flex;flex-direction:column;gap:8px;
}
.fdmro-row{
  display:flex;gap:12px;padding:8px 10px;
  background:var(--card);border:1px solid var(--border);border-radius:7px;
}
.fdmro-label{
  flex:0 0 120px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;color:var(--t3);
  padding-top:1px;
}
.fdmro-value{
  flex:1;font-size:13px;color:var(--text);line-height:1.4;
}

/* ==================== FORMATIONS INTERNES — entête de catégorie ==================== */
.form-cat-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding:6px 4px;
}
.form-cat-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;background:var(--pl);color:var(--p);
  border-radius:14px;font-size:12px;font-weight:700;
}


/* ==================== WHITE CONTAINER (page Contacts/Opportunités) ==================== */
.white-container{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
}

/* ==================== NAV ITEM SUB (sous-entrées légèrement décalées) ==================== */
.nav-item-sub{
  padding-left:32px !important;
  font-size:12.5px !important;
  opacity:.85;
}
.nav-item-sub.active{opacity:1}

/* ==================== ZONE DRAG & DROP DOCUMENTS ==================== */
.cs-doc-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px;
  background:var(--bg);
  border:2px dashed var(--border);
  border-radius:10px;
  text-align:center;
  transition:all .15s;
  cursor:default;
}
.cs-doc-drop.drag-over{
  border-color:var(--p);
  background:var(--pl);
}

/* ==================== LIENS ENTREPRISES/CONTACTS ==================== */
.cs-links-list{
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px;
  min-height:50px;
}
.cs-link-row{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;
  background:var(--card);
  border-radius:6px;
  border:1px solid var(--border);
}

/* ==================== DOC BUILDER ==================== */
.doc-builder-overlay{
  /* z-index au-dessus de la fiche contact (Drawer = 1900) pour rester utilisable
     quand on ouvre le générateur depuis la fiche ; reste sous les toasts/confirm (3000+). */
  position:fixed;inset:0;background:var(--bg);z-index:2200;
  display:flex;flex-direction:column;
}
.doc-builder{
  display:flex;flex-direction:column;
  height:100vh;
  background:var(--bg);
}
.db-toolbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.db-close{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:6px;transition:all .15s;flex-shrink:0}
.db-close:hover{background:var(--red);border-color:var(--red);color:#fff}

.db-workspace{
  flex:1;display:grid;grid-template-columns:520px 1fr;gap:0;
  overflow:hidden;
}
.db-edit{
  background:var(--card);
  border-right:1px solid var(--border);
  overflow-y:auto;
  padding:18px;
  display:flex;flex-direction:column;gap:18px;
}
.db-section{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.db-section-title{
  font-family:'Lora',serif;font-size:13px;font-weight:700;
  color:var(--text);
  text-transform:uppercase;letter-spacing:.6px;
}
.db-line{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  margin-bottom:8px;
}
.db-line-label{
  font-weight:600;
  font-size:13px !important;
}
.db-preview-wrap{
  overflow-y:auto;
  padding:30px;
  background:#e9ecf1;
}
[data-theme="dark"] .db-preview-wrap{background:#0a0d18}
.db-preview{
  background:#fff;
  color:#1a1a1a;
  max-width:780px;
  margin:0 auto;
  padding:42px 50px;
  border-radius:4px;
  box-shadow:0 4px 24px rgba(0,0,0,.15);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  min-height:1080px;
}
.db-preview-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:18px;border-bottom:3px solid var(--p);
}
.db-preview-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.db-preview-table thead th{
  background:#1a1a1a;
  color:#fff;
  padding:10px 12px;
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.db-preview-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid #eee;
}
.db-preview-table tbody tr:nth-child(even){background:#fafaf7}


/* ==================== PRODUITS — filtres catégories/sous-catégories ==================== */
.prod-cat-filters{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 0 14px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.prod-subcat-filters{
  border-bottom:none;
  padding:0 0 14px 0;
  margin-top:-6px;
  margin-left:18px;
}
.prod-cat-pill{
  padding:8px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--t2);
  font-weight:600;
  font-size:12.5px;
  cursor:pointer;
  font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;
}
.prod-cat-pill:hover{
  border-color:var(--p);color:var(--p);
}
.prod-cat-pill.active{
  background:var(--p);
  color:#fff;
  border-color:var(--p);
}
.prod-cat-count{
  font-size:10.5px;
  padding:1px 7px;
  border-radius:9px;
  background:rgba(0,0,0,.08);
  font-weight:700;
}
.prod-cat-pill.active .prod-cat-count{
  background:rgba(255,255,255,.22);
}
.prod-subcat-pill{
  font-size:11.5px;padding:6px 12px;
  border-style:dashed;
}

/* ==================== PRODUITS — vignettes images ==================== */
.prod-thumb{
  width:42px;height:42px;border-radius:6px;
  object-fit:cover;display:block;
  border:1px solid var(--border);
}
.prod-thumb-placeholder{
  width:42px;height:42px;border-radius:6px;
  background:var(--bg);border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
}

/* ==================== PRODUITS — galerie d'images dans formulaire ==================== */
.prod-images{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;
}
.prod-image-tile{
  position:relative;aspect-ratio:1;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--border);
}
.prod-image-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.prod-image-tile button{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;
  border:none;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:700;
}
.prod-image-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  aspect-ratio:1;
  border:2px dashed var(--border);
  border-radius:8px;background:var(--bg);
  color:var(--t3);font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all .12s;
}
.prod-image-add:hover{border-color:var(--p);color:var(--p);background:var(--pl)}


/* ==================== CONTACT — photo / logo carré ==================== */
.cs-photo-wrap{
  margin-bottom:16px;
}
.cs-photo-frame{
  display:flex;align-items:flex-end;gap:14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
}
.cs-photo-frame img{
  width:120px;height:120px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  display:block;
}
.cs-photo-actions{
  display:flex;flex-direction:column;gap:6px;
}
.cs-photo-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:160px;height:160px;
  border:2px dashed var(--border);
  border-radius:10px;
  background:var(--bg);
  cursor:pointer;font-family:inherit;
  color:var(--t3);
  transition:all .15s;
}
.cs-photo-empty:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.cs-photo-icon{font-size:42px;opacity:.5}
.cs-photo-cta{
  font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.cs-photo-hint{font-size:10.5px;color:var(--t3)}

/* Photo dans la liste/carte */
.contact-photo-sm{
  width:36px;height:36px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border);flex-shrink:0;
}
.contact-photo-sm img{width:100%;height:100%;object-fit:cover;display:block}
.contact-photo-lg{
  width:64px;height:64px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);
}
.contact-photo-lg img{width:100%;height:100%;object-fit:cover;display:block}

/* Photo dans le bandeau header */
.csh-photo{
  width:80px;height:80px;border-radius:14px;overflow:hidden;
  border:2px solid var(--card);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  flex-shrink:0;
}
.csh-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ==================== CONTACT — liens cliquables (sans changement visuel) ==================== */
.cs-field-link{
  display:block;
  text-decoration:none;color:inherit;
}
.cs-field-link input{cursor:pointer !important}
.cs-field-link:hover input{border-color:var(--p) !important}

.csh-link{
  display:inline-flex;align-items:center;gap:4px;
  color:inherit;text-decoration:none;
  cursor:pointer;
  transition:color .12s;
}
.csh-link:hover{color:var(--p)}
.csh-link-btn{
  background:none;border:none;padding:0;font:inherit;
  font-family:inherit;
}

/* ==================== CONTACT — formulaire d'interaction ==================== */
/* Le bg est blanc (--card) pour contraster avec les champs gris à l'intérieur. */
.cs-interaction-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.cs-interaction-row{
  display:flex;gap:10px;
}
@media (max-width:640px){
  .cs-interaction-row{flex-direction:column}
}

/* ==================== CONTACT — input pour ajout de tag ==================== */
.cs-tag-input{
  border:1px dashed var(--border) !important;
  background:transparent !important;
  font-size:12px !important;
  padding:4px 10px !important;
  border-radius:14px !important;
  width:auto !important;
  min-width:90px;
  outline:none;
  font-family:inherit;
  color:var(--t1);
}
.cs-tag-input:focus{border-color:var(--p) !important}


/* ==================== SETTINGS — blocs cliquables ==================== */
.settings-blocks-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:14px;
}
.settings-block-card{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:all .15s;
}
.settings-block-card:hover{
  border-color:var(--p);
  background:var(--pl);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.settings-block-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.settings-block-text{flex:1;min-width:0}
.settings-block-title{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:3px;
}
.settings-block-desc{
  font-size:12px;color:var(--t2);line-height:1.4;
}
.settings-block-arrow{
  font-size:20px;color:var(--t3);
  font-weight:300;
}
.settings-block-card:hover .settings-block-arrow{color:var(--p)}

/* ==================== CONTACT — avatar/photo cliquable dans bandeau ==================== */
.csh-avatar-wrap{
  position:relative;
  cursor:pointer;
  display:inline-block;
}
.csh-avatar-overlay{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.csh-avatar-wrap:hover .csh-avatar-overlay{opacity:1}
.csh-avatar-remove{
  position:absolute;
  top:-6px;right:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;
  border:2px solid var(--card);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:700;
  z-index:2;
}


/* ==================== DASHBOARD — config rows ==================== */


/* Hover des KPI cards quand cliquables */
.kpi-grid > div[style*="cursor:pointer"]:hover{
  transform:translateY(-2px);
  transition:transform .15s;
}


/* ==================== DASHBOARD CONFIG — réordonnable ==================== */
.dash-cfg-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  transition:all .12s;
}
.dash-cfg-row-selected{
  border-color:var(--p);
  background:var(--pl);
}
.dash-cfg-row-available{
  border-style:dashed;
  background:var(--bg);
}
.dash-cfg-row-available:hover{
  border-color:var(--p);
  border-style:solid;
  background:var(--pl);
}
/* Boutons up/down */
.dash-order{
  display:flex;flex-direction:column;gap:1px;
  flex-shrink:0;
}
.dash-order-btn{
  width:22px;height:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-family:inherit;
  border-radius:3px;
  padding:0;
}
.dash-order-btn:first-child{border-radius:4px 4px 2px 2px}
.dash-order-btn:last-child{border-radius:2px 2px 4px 4px}
.dash-order-btn:not(:disabled):hover{
  background:var(--p);color:#fff;border-color:var(--p);
}
.dash-order-btn:disabled{
  opacity:.3;cursor:not-allowed;
}
/* Bouton remove */
.dash-remove-btn{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;
  background:transparent;
  color:var(--t3);
  cursor:pointer;
  font-family:inherit;
  border-radius:50%;
  flex-shrink:0;
}
.dash-remove-btn:hover{
  background:var(--red);color:#fff;
}
/* Bouton ajouter */
.dash-add-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  border:1px solid var(--p);
  background:transparent;
  color:var(--p);
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  border-radius:6px;
  flex-shrink:0;
}
.dash-add-btn:hover{
  background:var(--p);color:#fff;
}


/* ==================== TASKS — switch de vue + kanban ==================== */
.view-switch{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg);
}
.view-switch button{
  padding:7px 14px;
  background:transparent;
  border:none;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--t2);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.view-switch button:not(:last-child){border-right:1px solid var(--border)}
.view-switch button.active{
  background:var(--p);
  color:#fff;
}
.view-switch button:not(.active):hover{
  background:var(--pl);
  color:var(--p);
}

/* Status select dans la liste */
.status-select{
  background:var(--card);
  border:1.5px solid;
  border-radius:14px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  outline:none;
}

/* Kanban */
.task-kanban{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-top:4px;
}
@media (max-width:900px){
  .task-kanban{grid-template-columns:1fr}
}
.task-kanban-col{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  display:flex;flex-direction:column;
  min-height:300px;
}
.task-kanban-col-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.task-kanban-count{
  margin-left:auto;
  font-size:11px;font-weight:700;
  background:var(--card);
  padding:2px 8px;border-radius:10px;
  border:1px solid var(--border);
  color:var(--t2);
}
.task-kanban-body{
  padding:10px;
  display:flex;flex-direction:column;gap:8px;
  flex:1;
}
.task-kanban-empty{
  text-align:center;
  padding:20px;
  font-size:11.5px;
  color:var(--t3);
  font-style:italic;
}
.task-kanban-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
  transition:all .12s;
}
.task-kanban-card:hover{
  border-color:var(--p);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.task-kanban-title{
  font-size:13px;font-weight:600;
  line-height:1.3;
  margin-bottom:4px;
}
.task-kanban-details{
  font-size:11.5px;color:var(--t2);
  line-height:1.4;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.task-kanban-meta{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:6px;
}
.task-kanban-foot{
  display:flex;justify-content:space-between;
  align-items:center;
  padding-top:6px;
  border-top:1px solid var(--border);
}
.task-kanban-actions{
  display:flex;gap:4px;
  margin-top:6px;
  justify-content:flex-end;
  padding-top:6px;
  border-top:1px dashed var(--border);
}
.task-mini-btn{
  width:24px;height:24px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);
}
.task-mini-btn:hover{
  border-color:currentColor;
  background:var(--bg);
}


/* ==================== CARDS GRID — vues alternatives liste→cartes ==================== */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  margin-top:4px;
}

/* Cartes documents (devis / BdC) */
.doc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  cursor:pointer;
  display:flex;flex-direction:column;
  transition:all .12s;
}
.doc-card:hover{
  border-color:var(--p);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.doc-card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.doc-card-body{margin-bottom:12px}
.doc-card-objet{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:4px}
.doc-card-client{font-size:12px;color:var(--t2)}
.doc-card-amount{
  background:var(--bg);
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:10px;
  text-align:center;
}
.doc-card-foot{
  display:flex;align-items:center;gap:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

/* Cartes ventes */
.vente-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:flex;flex-direction:column;
  transition:all .12s;
}
.vente-card:hover{
  border-color:var(--p);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.vente-card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.vente-card-title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:3px}
.vente-card-stage{font-size:11.5px;color:var(--t3);margin-bottom:12px}
.vente-card-amount{
  background:var(--pl);
  padding:12px;
  border-radius:8px;
  text-align:center;
  margin-bottom:10px;
}
.vente-card-foot{
  display:flex;flex-direction:column;gap:4px;
  padding-top:10px;
  border-top:1px solid var(--border);
  margin-bottom:10px;
}
.vente-card-actions{
  display:flex;gap:6px;
  padding-top:8px;
  border-top:1px dashed var(--border);
}
.vente-card-actions .btn{flex:1}

/* Cartes produits */
.prod-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  display:flex;flex-direction:column;
  transition:all .12s;
}
.prod-card:hover{
  border-color:var(--p);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.prod-card-img{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.prod-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.prod-card-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.prod-card-disabled{
  position:absolute;
  top:8px;right:8px;
  padding:3px 8px;
  background:rgba(0,0,0,.7);color:#fff;
  border-radius:4px;
  font-size:10px;font-weight:700;
}
.prod-card-body{
  padding:12px 14px;
  flex:1;
}
.prod-card-cat{margin-bottom:6px}
.prod-card-name{
  font-size:14px;font-weight:700;
  line-height:1.3;
  margin-bottom:3px;
}
.prod-card-ref{
  font-size:11px;color:var(--t3);
  font-family:inherit;
  margin-bottom:4px;
}
.prod-card-supplier{
  font-size:11px;color:var(--t3);
  margin-bottom:10px;
  display:inline-flex;align-items:center;gap:4px;
}
.prod-card-price-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.prod-card-foot{
  display:flex;align-items:center;gap:4px;
  padding:10px 14px;
  background:var(--bg);
  border-top:1px solid var(--border);
}


/* ==================== CRM — Toolbar unifiée ==================== */
.crm-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.crm-toolbar > * { flex-shrink:0 }
@media (max-width:720px){
  .crm-toolbar{
    gap:8px;
  }
  .crm-toolbar .form-control{
    width:100% !important;
  }
}


/* ==================== FLOATING DOCK ==================== */
.floating-dock{
  position:fixed;
  bottom:18px;
  right:18px;
  display:flex;
  align-items:center;
  gap:6px;
  z-index:1500;
  padding:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.dock-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--t2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  transition:all .15s;
  padding:0;
}
.dock-btn:hover{
  background:var(--p);
  color:#fff;
  border-color:var(--p);
  transform:translateY(-2px);
}
.dock-ai-btn{
  width:38px;height:38px;
  background:var(--p);
  border-color:var(--p);
  color:#fff;
  padding:0;
  overflow:hidden;
}
.dock-ai-btn:hover{transform:scale(1.06)}
.dock-ai-img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* Cartes d'idées */
.idea-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .12s;
}
.idea-card:hover{border-color:var(--p)}
.idea-card-text{
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  margin-bottom:8px;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.idea-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  padding-top:8px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--t3);
}
.idea-card-meta .btn{padding:3px 6px}


/* ==================== DRAWER FULLSCREEN — mode visio ==================== */
.drawer.drawer-fullscreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  max-height:100vh !important;
  z-index:2000 !important; /* au-dessus de la topbar ET de la sidebar */
  animation:none !important;
  transform:none !important;
  box-shadow:none !important;
}
.drawer.drawer-fullscreen.drawer-raw{
  width:100vw !important;
  max-width:100vw !important;
}
/* En mode fullscreen, on supprime le voile sombre derrière (drawer-back) :
   le drawer couvre déjà tout, donc le voile crée juste un flash noir au moment de l'ouverture */
body:has(.drawer-fullscreen) .drawer-back{
  display:none !important;
}
/* Rabaisser la sidebar de l'app et la topbar pour que le drawer les recouvre */
body:has(.drawer-fullscreen) .sidebar,
body:has(.drawer-fullscreen) .topbar{
  z-index:1 !important;
}

/* === Bandeau du haut compact en mode visio === */
.drawer-fullscreen .contact-sheet-header{
  padding:10px 18px !important;
  gap:12px !important;
}
.drawer-fullscreen .csh-avatar-wrap > .av,
.drawer-fullscreen .csh-photo{
  width:42px !important;height:42px !important;
  border-radius:8px !important;
}
.drawer-fullscreen .csh-photo img{border-radius:8px}
.drawer-fullscreen .csh-name{
  font-size:15px !important;
  margin-bottom:0 !important;
  display:inline-block;
  margin-right:14px;
}
/* Tout sur une ligne : nom + meta + tags */
.drawer-fullscreen .csh-info{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  overflow:hidden;
}
.drawer-fullscreen .csh-meta{
  margin-bottom:0 !important;
  flex-wrap:nowrap !important;
  overflow:hidden;
  font-size:11.5px !important;
}
.drawer-fullscreen .csh-tags{display:none !important}

/* Layout split : bandeau en haut + (sidebar | visio | content) en dessous */
.drawer-fullscreen .contact-sheet-body{
  display:grid;
  grid-template-columns:220px 1fr 720px;
  gap:0;
  flex:1;
  min-height:0;
  height:auto;
}
.drawer-fullscreen .contact-sheet-side{
  overflow-y:auto;
  height:100%;
}

/* Items spéciaux du bloc Visio dans le menu fiche contact */
.css-nav-invite{
  background:color-mix(in srgb, var(--p) 15%, transparent) !important;
  color:var(--p) !important;
  font-weight:700;
  margin-right:8px; /* léger espace avant le bord droit du menu */
}
.css-nav-invite:hover{
  background:var(--p) !important;
  color:#fff !important;
}
.css-nav-quit{
  background:rgba(220,38,38,.12) !important;
  color:#dc2626 !important;
  font-weight:700;
  margin-right:8px; /* léger espace avant le bord droit du menu */
  margin-bottom:14px; /* espace avant la section "Fiche client" */
}
.css-nav-quit:hover{
  background:#dc2626 !important;
  color:#fff !important;
}

/* Boîte avec lien dans le modal Inviter */
.invite-link-box{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:8px;
}
.invite-link-box input{
  flex:1;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:12.5px;
  color:var(--text);
  outline:none;
  cursor:text;
}

/* Pane vidéo (visio-pane) : pleine hauteur de sa zone, fond clair pour éviter le flash noir */
.visio-pane{
  display:flex;flex-direction:column;
  background:#f3f5f8; /* fond clair cohérent avec Daily.co */
  border-left:1px solid #e4e7f0; /* fin séparateur */
  overflow:hidden;
  height:100%;
}
.visio-frame{
  flex:1;
  position:relative;
  background:#f3f5f8;
  display:flex;align-items:center;justify-content:center;
}
/* Plus de loader visuel — Daily.co gère son propre rendu */
.visio-loading{ display:none; }
.visio-error{
  color:#fff;
  background:rgba(220,38,38,.4);
  padding:16px 20px;
  border-radius:8px;
  font-size:13px;
  text-align:center;
}

/* Contenu droite en mode split */
.contact-sheet-content-half{
  border-left:1px solid var(--border);
  overflow-y:auto;
  height:100%;
  background:var(--card);
}

/* En-tête mini "Retour aux consignes" en haut à gauche du contenu droit */
.visio-content-back{
  display:flex;align-items:center;gap:8px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:5;
  margin-bottom:20px;
}
.visio-content-back button{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:6px;
  font-size:12px;font-weight:600;
  color:var(--t2);
  cursor:pointer;
  font-family:inherit;
}
.visio-content-back button:hover{
  border-color:var(--p);
  color:var(--p);
}

/* Bouton "Quitter le mode visio" dans le menu */
/* Consignes par défaut sur la moitié droite */
.visio-consignes{
  padding:30px 28px;
}
.visio-consignes-title{
  font-family:'Lora',serif;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.visio-consignes-sub{
  font-size:12.5px;
  color:var(--t3);
  margin-bottom:24px;
}
.visio-step{
  display:flex;gap:14px;
  padding:14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:10px;
}
.visio-step-num{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--p);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;
  font-family:'Lora',serif;
}
.visio-step-content{flex:1}
.visio-step-title{
  font-size:13.5px;font-weight:700;
  color:var(--text);
  margin-bottom:3px;
}
.visio-step-desc{
  font-size:12px;color:var(--t2);
  line-height:1.5;
}

/* Sur petits écrans : layout vertical */
@media (max-width:1100px){
  .drawer-fullscreen .contact-sheet-body{
    grid-template-columns:200px 1fr;
    grid-template-rows:60vh 40vh;
  }
  .drawer-fullscreen .contact-sheet-side{
    grid-row:1 / span 2;
    height:auto;
  }
  .visio-pane{grid-row:1; grid-column:2; height:auto}
  .contact-sheet-content-half{grid-row:2; grid-column:2; border-left:0; border-top:1px solid var(--border); height:auto}
}


/* ==================== PHONE INPUT international ==================== */
.phone-input{
  display:flex;
  border:1.5px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
}
.phone-input:focus-within{
  border-color:var(--p);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 12%, transparent);
}
.phone-cc{
  flex-shrink:0;
  border:none !important;
  background:var(--bg);
  border-right:1px solid var(--border) !important;
  padding:8px 8px;
  font-size:13px;
  font-family:inherit;
  color:var(--text);
  cursor:pointer;
  outline:none;
  border-radius:0 !important;
  width:auto;
  max-width:100px;
}
.phone-number{
  flex:1;
  border:none !important;
  background:transparent;
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  outline:none;
  color:var(--text);
  border-radius:0 !important;
}

/* ==================== SETTINGS — champs fiche contact ==================== */
.field-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
}
.field-row-disabled{
  opacity:.5;
  background:var(--bg);
}
.field-row input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--p);
  cursor:pointer;
}
.field-type-badge{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--t3);
  background:var(--bg);
  padding:2px 8px;
  border-radius:10px;
  border:1px solid var(--border);
}

/* Pills de taxonomie (statuts/sources/tags) */
.taxo-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 4px 5px 10px;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:var(--card);
  font-size:12px;
  font-weight:600;
  color:var(--text);
}
.taxo-pill button{
  width:18px;height:18px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--t3);
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.taxo-pill button:hover{
  background:var(--red,#dc2626);
  color:#fff;
}

/* ==================== FICHE CONTACT — modules (cog + sélection) ==================== */
.cog-mini{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  color:var(--t3);
}
.cog-mini:hover{
  background:var(--p);
  color:#fff;
  border-color:var(--p);
}

.modules-empty-cta{
  margin:6px 12px;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:var(--bg);
  font-size:12px;
  color:var(--t3);
  text-align:left;
  cursor:pointer;
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  transition:all .12s;
}
.modules-empty-cta:hover{
  border-color:var(--p);
  color:var(--p);
  background:var(--pl);
}

.module-pick-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  background:var(--card);
  transition:all .12s;
}
.module-pick-row:hover{
  border-color:var(--p);
}
.module-pick-row.checked{
  border-color:var(--p);
  background:var(--pl);
}
.module-pick-row input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--p);
  cursor:pointer;
}


/* ==================== CONTACT QUICK ACTIONS — bouton + menu ==================== */
.contact-qa{position:relative;display:inline-block}
.contact-qa-btn{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:50%;
  cursor:pointer;
  font-family:inherit;
  color:var(--p);
  transition:all .12s;
}
.contact-qa-btn:hover{
  background:var(--p);
  border-color:var(--p);
  color:#fff;
  transform:scale(1.06);
}
/* Cluster d'actions en bout de ligne : [+ actions rapides] [œil voir la fiche] */
.contact-row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
/* Bouton "Voir la fiche" — même style que le bouton +, accent au survol.
   Référence à réutiliser sur les pages refondues (ouvre la fiche en drawer). */
.contact-fiche-btn{position:relative}
.contact-fiche-btn:hover{background:var(--p);border-color:var(--p);color:#fff;transform:scale(1.06)}
.contact-qa-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  padding:6px;
  z-index:100;
  min-width:220px;
  animation:slideUp .15s ease;
}
.contact-qa-head{
  padding:8px 10px 6px;
  font-size:11px;
  font-weight:700;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
  font-family:'Lora',serif;
}
.contact-qa-item{
  width:100%;
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  font-size:12.5px;
  color:var(--text);
  text-align:left;
}
.contact-qa-item:hover{
  background:var(--pl);
  color:var(--p);
}
.contact-qa-item svg{flex-shrink:0;color:var(--t3)}
.contact-qa-item:hover svg{color:var(--p)}

/* Position du bouton dans la carte contact */
.contact-card-quickact{
  position:absolute;
  top:12px;
  right:12px;
}
.contact-card-top{position:relative}


/* ==================== CONTACTS — toolbar v2 + filtres + pagination ==================== */
.contacts-toolbar-v2{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.contacts-toolbar-v2 .form-control-sm{
  padding:6px 8px;font-size:12px;
}

/* Recherche + dropdown */
.contacts-search-wrap{position:relative}
.search-clear{
  position:absolute;
  right:8px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  background:var(--t3);color:#fff;
  border:none;border-radius:50%;
  cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;
}
.search-clear:hover{background:var(--red)}
.contacts-search-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  max-height:340px;overflow-y:auto;
  z-index:120;
}
.contacts-search-item{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:transparent;border:none;
  cursor:pointer;font-family:inherit;
  border-bottom:1px solid var(--border);
}
.contacts-search-item:last-child{border-bottom:none}
.contacts-search-item:hover{background:var(--pl)}

/* Bandeau filtres actifs */
.contacts-active-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;
  background:var(--pl);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:14px;
}
.filter-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 6px 5px 10px;
  background:var(--card);
  border:1.5px solid var(--p);
  border-radius:14px;
  font-size:12px;
  color:var(--text);
}
.filter-chip strong{font-weight:700}
.filter-chip button{
  width:18px;height:18px;
  border-radius:50%;
  border:none;background:transparent;
  color:var(--t3);
  cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.filter-chip button:hover{background:var(--red);color:#fff}

/* Cellules cliquables (statut/tag/ville/source dans la liste) */
.clickable-cell{cursor:pointer}
.clickable-cell:hover{outline:2px solid color-mix(in srgb, var(--p) 40%, transparent);outline-offset:1px;border-radius:4px}

/* Pagination */
.contacts-pagination{
  display:flex;align-items:center;gap:10px;
  padding:14px 4px 4px;
  margin-top:8px;
  border-top:1px solid var(--border);
}
.pagination-controls{
  display:flex;align-items:center;
  margin-left:8px;
}
.pagination-controls .btn{
  padding:4px 10px;
  min-width:32px;
}

/* Drawer Vues — view-row */
.view-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
}
.view-row.active{
  border-color:var(--p);
  background:var(--pl);
}
.view-row-name{
  flex:1;
  background:transparent;border:none;
  text-align:left;font-family:inherit;
  font-size:13px;font-weight:600;
  color:var(--text);
  cursor:pointer;
  padding:0;
}
.view-row-name:hover{color:var(--p)}

/* Drawer Filtres — filter-edit-row */
.filter-edit-row{
  display:flex;align-items:center;gap:6px;
  padding:8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
}
.filter-edit-row select,
.filter-edit-row input{
  flex:1;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--card);
  font-size:12.5px;
  font-family:inherit;
  color:var(--text);
  outline:none;
  min-width:0;
}
.filter-edit-row select:focus,
.filter-edit-row input:focus{
  border-color:var(--p);
}

.cs-field-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:6px;
}


/* ==================== CAMPAGNES ==================== */
.campaign-table .inter-list{
  display:flex;flex-direction:column;gap:3px;
  max-height:80px;overflow-y:auto;
}
.inter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:10.5px;
  white-space:nowrap;
}
.inter-btn{
  width:28px;height:28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  transition:all .12s;
}
.inter-btn:hover{
  background:var(--p);
  border-color:var(--p);
  transform:translateY(-1px);
}

.campaign-pick-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.campaign-pick-row:last-child{border-bottom:none}
.campaign-pick-row:hover{background:var(--pl)}
.campaign-pick-row input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--p);
  cursor:pointer;
}

/* Tag campagne dans bandeau fiche */
.tag-campaign{
  background:rgba(236,72,153,.15) !important;
  color:#be185d !important;
  border:1px solid rgba(236,72,153,.4) !important;
  font-weight:700;
}

/* Mini badge campagne dans la liste */
.campaign-mini-badge{
  display:inline-flex;align-items:center;
  margin-left:6px;
  padding:1px 7px;
  background:rgba(236,72,153,.15);
  color:#be185d;
  border-radius:9px;
  font-size:10.5px;font-weight:700;
  border:1px solid rgba(236,72,153,.3);
  vertical-align:middle;
}


/* ==================== CAMPAGNES — sous-menu sidebar ==================== */
.nav-subitem{
  padding-left:32px !important;
  font-size:12.5px !important;
  opacity:.85;
}
.nav-sub-bullet{
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  flex-shrink:0;
}
.nav-subitem.active .nav-sub-bullet{
  background:var(--p);
}

/* ==================== CAMPAGNES TÉLÉPHONIQUES — tabs + cellules refondues ==================== */
.campaign-tabs{
  display:flex;gap:4px;
  border-bottom:2px solid var(--border);
  margin-bottom:14px;
}
.campaign-tab{
  padding:10px 18px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;
  color:var(--t3);
  display:flex;align-items:center;gap:7px;
  transition:all .15s;
}
.campaign-tab:hover{color:var(--t1)}
.campaign-tab.active{
  color:var(--p);
  border-bottom-color:var(--p);
}
.tab-count{
  padding:1px 8px;
  background:var(--pl);
  color:var(--p);
  border-radius:10px;
  font-size:11px;font-weight:700;
  min-width:22px;text-align:center;
}
.campaign-tab.active .tab-count{
  background:var(--p);
  color:#fff;
}

/* Boutons d'interaction agrandis */
.inter-btn-lg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 8px;
  background:var(--card);
  border:1.5px solid;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  min-width:65px;
  transition:all .12s;
}
.inter-btn-lg:hover{
  background:var(--pl);
  transform:translateY(-1px);
}

/* Bouton supprimer plus gros */
.del-btn-lg{
  width:36px;height:36px;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  color:var(--red);
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.del-btn-lg:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

/* Dernière interaction */
.last-inter{
  display:flex;align-items:center;gap:8px;
}
.last-inter-icon{
  font-size:14px;font-weight:700;
  width:24px;text-align:center;
}

/* Info programmation */
.sched-info{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  background:var(--pl);
  border-radius:6px;
}

/* Pick mini collab */
.collab-pick-mini{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  background:var(--card);
}
.collab-pick-mini:hover{background:var(--pl)}
.collab-pick-mini input[type="checkbox"]{
  width:14px;height:14px;
  accent-color:var(--p);
  cursor:pointer;
}

/* ==================== CAMPAGNES SMS — preview phone ==================== */
.sms-preview{
  display:flex;flex-direction:column;
  align-items:center;
  padding:14px;
}
.sms-preview-phone{
  width:240px;
  height:420px;
  background:#1a1a1a;
  border-radius:28px;
  padding:14px 8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  position:relative;
}
.sms-preview-bar{
  width:60px;height:5px;
  background:#000;
  border-radius:3px;
  margin:0 auto 14px;
}
.sms-preview-screen{
  background:#0a0a0a;
  border-radius:18px;
  height:calc(100% - 24px);
  padding:30px 12px 12px;
  position:relative;
}
.sms-preview-screen::before{
  content:'Messages';
  position:absolute;
  top:8px;left:0;right:0;
  text-align:center;
  color:#fff;
  font-size:10px;
  font-weight:600;
  opacity:.5;
}
.sms-preview-bubble{
  background:#0a84ff;
  color:#fff;
  padding:8px 12px;
  border-radius:16px 16px 4px 16px;
  font-size:12px;
  line-height:1.4;
  max-width:90%;
  margin-left:auto;
  word-wrap:break-word;
  white-space:pre-wrap;
  min-height:30px;
}

/* ==================== CAMPAGNES COURRIER — preview lettre ==================== */
.letter-preview{
  padding:14px;
}
.letter-paper{
  background:#fffef9;
  border:1px solid #d4d0c4;
  border-radius:4px;
  padding:24px 20px;
  min-height:380px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  position:relative;
}
.letter-stamp{
  position:absolute;
  top:14px;right:14px;
  width:60px;height:36px;
  border:1.5px dashed var(--p);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;
  color:var(--p);
  font-weight:700;
}

/* ==================== SCÉNARIO BUILDER — workflow visuel ==================== */
.scenario-builder{
  display:flex;flex-direction:column;
  height:calc(100vh - 100px);
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
}
.scenario-topbar{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.scenario-title-input{
  font-family:'Lora',serif;
  font-size:18px;font-weight:700;
  border:none;
  background:transparent;
  width:100%;
  outline:none;
  color:var(--text);
}
.scenario-title-input:focus{outline:1px solid var(--p);border-radius:4px;padding:2px 4px;margin:-2px -4px}
.scenario-desc-input{
  font-size:12px;
  color:var(--t3);
  border:none;
  background:transparent;
  width:100%;
  outline:none;
  font-family:inherit;
  margin-top:2px;
}

.scenario-layout{
  flex:1;
  display:flex;
  min-height:0;
}

/* Palette */
.scenario-palette{
  width:260px;
  background:var(--bg);
  border-right:1px solid var(--border);
  padding:14px 0;
  overflow-y:auto;
  flex-shrink:0;
}
.scenario-palette-title{
  padding:0 14px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--t3);
}
.scenario-palette-item{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:10px 12px 10px 14px;
  background:transparent;
  border:none;
  border-left:4px solid transparent;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.scenario-palette-item:hover{
  background:var(--card);
}

/* Canvas */
.scenario-canvas-wrap{
  flex:1;
  overflow:auto;
  background:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/20px 20px,
    var(--bg);
  position:relative;
}
.scenario-canvas{
  position:relative;
  width:2400px;
  height:1400px;
  min-width:100%;
  min-height:100%;
}
.scenario-svg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
}
.scenario-node{
  position:absolute;
  width:160px;
  background:var(--card);
  border:2px solid;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:move;
  user-select:none;
  z-index:2;
  transition:transform .1s, box-shadow .1s;
}
.scenario-node:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.scenario-node.selected{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 30%, transparent), 0 4px 14px rgba(0,0,0,.12);
}
.scenario-node-head{
  padding:6px 10px;
  display:flex;align-items:center;gap:6px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.scenario-node-body{
  padding:10px 12px;
  font-size:13px;
  color:var(--text);
  background:var(--card);
}
.scenario-empty-hint{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  padding:14px 24px;
  background:var(--card);
  border:2px dashed var(--p);
  border-radius:10px;
  color:var(--p);
  font-size:13px;
  font-weight:600;
}

/* Sidebar édition node */
.scenario-editor{
  width:320px;
  background:var(--card);
  border-left:1px solid var(--border);
  overflow-y:auto;
  flex-shrink:0;
}
.scenario-editor-head{
  display:flex;align-items:center;gap:8px;
  padding:14px;
  border-bottom:1px solid var(--border);
}


/* ==================== FACTURATION ==================== */
.facture-table .mono{
  font-size:12.5px;
}
.retard-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}

/* Lignes facture pour sélection source avoir */
.facture-pick-row{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:10px 14px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:var(--text);
}
.facture-pick-row:last-child{border-bottom:none}
.facture-pick-row:hover{background:var(--pl)}


/* ==================== BOUTON COG FLOTTANT EN BAS-DROITE DE PAGE ==================== */
.page-cog-fab{
  position:fixed;
  bottom:30px;
  right:30px;
  width:48px;height:48px;
  background:var(--p);
  color:#fff;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px color-mix(in srgb, var(--p) 40%, transparent), 0 2px 6px rgba(0,0,0,.1);
  transition:all .15s;
  z-index:90;
}
.page-cog-fab:hover{
  transform:translateY(-2px) rotate(30deg);
  box-shadow:0 8px 24px color-mix(in srgb, var(--p) 50%, transparent), 0 4px 8px rgba(0,0,0,.12);
}
.page-cog-fab:active{
  transform:translateY(0) rotate(60deg);
}
/* Si plusieurs FAB (dock + cog), repositionner */
body:has(.floating-dock) .page-cog-fab{
  bottom:90px;
}


/* ==================== SCÉNARIO BUILDER V2 — layout hiérarchique + zoom ==================== */
.scenario-layout-v2{
  flex:1;
  display:flex;
  min-height:0;
  overflow:hidden;
}

/* Sidebars figées */
.scenario-side-fixed{
  width:280px;
  flex-shrink:0;
  overflow-y:auto;
  background:var(--bg);
  border-left:1px solid var(--border);
}
.scenario-palette-v2{
  border-left:none;
  border-right:1px solid var(--border);
  padding:14px 0;
}
.scenario-editor-v2{
  display:flex;
  flex-direction:column;
}
.scenario-editor-empty{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Items de palette (info seulement) */
.scenario-palette-item-info{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px 8px 14px;
  border-left:4px solid;
  margin-bottom:1px;
}

/* Canvas wrap : flex column avec zoom en haut et scroll en dessous */
.scenario-canvas-v2-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
}

/* Contrôles zoom en haut à droite, sticky */
.scenario-zoom-controls{
  position:absolute;
  top:10px;
  right:14px;
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  z-index:10;
}
.zoom-btn{
  width:28px;height:28px;
  background:transparent;
  border:none;
  border-radius:6px;
  font-size:18px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.zoom-btn:hover{background:var(--pl);color:var(--p)}
.zoom-level{
  font-size:12px;
  font-weight:700;
  color:var(--t2);
  padding:0 8px;
  min-width:50px;
  text-align:center;
  font-family:inherit;
}
.zoom-reset{
  width:28px;height:28px;
  background:transparent;
  border:none;
  border-left:1px solid var(--border);
  margin-left:4px;
  padding-left:8px;
  border-radius:0 6px 6px 0;
  font-size:14px;
  color:var(--t3);
  cursor:pointer;
  font-family:inherit;
}
.zoom-reset:hover{color:var(--p)}

/* Zone scrollable : seul élément qui scrolle */
.scenario-canvas-v2-scroll{
  flex:1;
  overflow:auto;
  background:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
}

/* Canvas centré */
.scenario-canvas-v2{
  position:relative;
  flex-shrink:0;
}

.scenario-svg-v2{
  position:absolute;
  top:0;left:0;
  pointer-events:none;
  z-index:1;
}

/* Nodes V2 */
.scenario-node-v2{
  position:absolute;
  background:var(--card);
  border:2px solid;
  border-radius:10px;
  overflow:visible;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:pointer;
  user-select:none;
  z-index:2;
  transition:transform .12s, box-shadow .12s;
}
.scenario-node-v2:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transform:translateY(-1px);
}
.scenario-node-v2.selected{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 35%, transparent), 0 4px 14px rgba(0,0,0,.12);
}
.scenario-node-v2-head{
  padding:6px 10px;
  display:flex;align-items:center;gap:6px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  border-radius:8px 8px 0 0;
}
.scenario-node-v2-body{
  padding:10px 12px;
  font-size:13px;
  color:var(--text);
  background:var(--card);
  border-radius:0 0 8px 8px;
  min-height:50px;
}
.scenario-node-meta{
  margin-top:4px;
  font-size:10.5px;
  color:var(--t3);
  font-style:italic;
}

/* Bouton + sous chaque node */
.scenario-add-btn{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  width:28px;height:28px;
  background:var(--card);
  border:2px solid var(--p);
  color:var(--p);
  border-radius:50%;
  font-size:18px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
  z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.scenario-add-btn:hover{
  background:var(--p);
  color:#fff;
  transform:translateX(-50%) scale(1.15);
}

/* Modal d'ajout : grid de cards */
.scenario-add-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.scenario-add-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 12px;
  background:var(--card);
  border:2px solid;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  text-align:center;
  transition:all .15s;
}
.scenario-add-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.1);
}


/* ==================== FACTURE BUILDER — totaux (compléments) ==================== */
.db-total-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
  font-size:13px;
  color:#333;
}
.db-total-line strong{
  font-weight:700;
}
.db-total-grand{
  margin-top:8px;
  padding-top:10px;
  border-top:2px solid var(--p);
  font-size:16px;
  font-weight:700;
}
.db-total-grand span{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.db-total-grand strong{
  font-size:18px;
}


/* ==================== MENU AJOUT LIGNES (catalogue/devis/BdC) ==================== */
.add-source-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  min-width:260px;
  padding:6px;
  z-index:100;
}
.add-source-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
}
.add-source-item:hover:not(:disabled){
  background:var(--pl);
}
.add-source-item:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* Lignes de sélection (catalogue/devis/BdC) */
.source-pick-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 14px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:var(--text);
}
.source-pick-row:last-child{border-bottom:none}
.source-pick-row:hover{background:var(--pl)}


/* ==================== STACK DE BOUTONS FLOTTANTS (horizontal) ==================== */
.page-fab-stack{
  position:fixed;
  bottom:30px;
  right:30px;
  display:flex;
  flex-direction:row;
  gap:10px;
  z-index:90;
}
.page-fab-stack .page-cog-fab{
  position:static;
}
/* Si le FloatingDock est présent, on décale les FABs au-dessus pour ne pas se chevaucher */
body:has(.floating-dock) .page-fab-stack{
  bottom:90px;
}
.page-stats-fab{
  /* Même style que cog : couleur dorée */
}

/* ==================== MODE TOGGLE manuel/auto ==================== */
.mode-toggle{
  display:flex;
  gap:0;
  border:1.5px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.mode-toggle-btn{
  flex:1;
  padding:8px 10px;
  background:var(--card);
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  color:var(--t2);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.mode-toggle-btn:not(:last-child){
  border-right:1px solid var(--border);
}
.mode-toggle-btn:hover{
  background:var(--pl);
}
.mode-toggle-btn.active{
  background:var(--p);
  color:#fff;
  font-weight:700;
}

/* Badge mode sur node scénario */
.scenario-mode-tag{
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.scenario-mode-tag.is-auto{
  background:color-mix(in srgb, var(--p) 15%, transparent);
  color:var(--p);
}
.scenario-mode-tag.is-manual{
  background:rgba(59,130,246,.15);
  color:#3b82f6;
}

/* ==================== STATS DRAWER + VIEWER ==================== */
.stat-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  width:100%;
}
.stat-row:hover{
  background:var(--pl);
}
.stat-row.on{
  border-color:var(--p);
  background:var(--pl);
}

/* Grille de stats dans le viewer */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
}
.stat-card-big{
  grid-column:span 2;
  background:linear-gradient(135deg, var(--pl), var(--card));
  border-color:var(--p);
}
.stat-card-wide{
  grid-column:span 2;
}
.stat-card-label{
  font-size:11px;
  font-weight:700;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
}
.stat-card-value{
  font-size:36px;
  font-weight:700;
  color:var(--p);
  font-family:'Lora',serif;
  margin-top:4px;
  line-height:1;
}
.stat-card-sub{
  font-size:11.5px;
  color:var(--t3);
  margin-top:4px;
}

/* Barres horizontales */
.hbar-row{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;
  font-size:12px;
}
.hbar-label{
  width:90px;
  flex-shrink:0;
  color:var(--text);
  font-weight:600;
  text-transform:capitalize;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hbar-bar-wrap{
  flex:1;
  height:14px;
  background:var(--bg);
  border-radius:4px;
  overflow:hidden;
}
.hbar-bar{
  height:100%;
  border-radius:4px;
  transition:width .3s;
}
.hbar-value{
  width:36px;
  text-align:right;
  font-weight:700;
  color:var(--text);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

/* Barres verticales (évolution mensuelle) */
.monthly-bars{
  display:flex;align-items:flex-end;
  gap:8px;
  margin-top:14px;
  height:140px;
}
.monthly-col{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  height:100%;
}
.monthly-bar-wrap{
  flex:1;
  width:100%;
  display:flex;align-items:flex-end;
  justify-content:center;
}
.monthly-bar{
  width:100%;
  background:linear-gradient(180deg, var(--p), #d4a96e);
  border-radius:4px 4px 0 0;
  min-height:4px;
  position:relative;
  transition:height .3s;
}
.monthly-val{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:700;
  color:var(--p);
}
.monthly-label{
  margin-top:6px;
  font-size:10.5px;
  color:var(--t3);
  text-transform:capitalize;
}

@media (max-width:900px){
  .stats-grid{grid-template-columns:1fr}
  .stat-card-big, .stat-card-wide{grid-column:span 1}
}


/* ==================== Séparateur dans le FloatingDock ==================== */
.dock-separator{
  width:1px;
  height:24px;
  background:var(--border);
  margin:0 2px;
  flex-shrink:0;
}


/* ==================== ESPACE CLIENT — bandeau statut + switch ==================== */
.ec-status-banner{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border:1.5px solid;
  border-radius:10px;
  background:var(--bg);
}
.ec-switch{
  position:relative;display:inline-block;
  width:46px;height:24px;flex-shrink:0;
}
.ec-switch input{opacity:0;width:0;height:0}
.ec-switch-slider{
  position:absolute;cursor:pointer;inset:0;
  background:#ccc;
  border-radius:24px;
  transition:.2s;
}
.ec-switch-slider:before{
  position:absolute;content:'';
  height:18px;width:18px;
  left:3px;bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ec-switch input:checked + .ec-switch-slider{background:var(--p)}
.ec-switch input:checked + .ec-switch-slider:before{transform:translateX(22px)}

/* Ligne de fonctionnalité espace client */
.ec-feature-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  transition:all .15s;
}
.ec-feature-row.on{border-color:var(--p);background:var(--pl)}
.ec-feature-icon{
  width:40px;height:40px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Color picker */
.ec-color-picker{
  display:flex;align-items:center;gap:8px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--card);
}
.ec-color-picker input[type="color"]{
  width:40px;height:32px;
  border:none;padding:0;cursor:pointer;
  border-radius:4px;
  background:none;
}
.ec-color-picker input[type="text"]{
  border:none;background:transparent;
  font-size:12px;outline:none;
  font-family:inherit;
  color:var(--text);
}

/* Aperçu navigateur */
.ec-preview-frame{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  max-width:560px;
  margin:0 auto;
}
.ec-preview-browser-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:#e8e8e8;
}
.ec-preview-dots{display:flex;gap:5px}
.ec-preview-dots span{
  width:10px;height:10px;border-radius:50%;
  background:#ccc;
}
.ec-preview-dots span:nth-child(1){background:#ff5f57}
.ec-preview-dots span:nth-child(2){background:#febc2e}
.ec-preview-dots span:nth-child(3){background:#28c840}
.ec-preview-url{
  flex:1;
  font-size:11px;color:#666;
  background:#fff;
  padding:4px 12px;border-radius:4px;
  text-align:center;
}
.ec-preview-content{
  min-height:340px;
}
.ec-preview-header{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  color:#fff;
}

/* Code blocks */
.ec-code-block{
  background:#0a1a30;
  color:#a9d4ff;
  padding:12px 14px;
  border-radius:8px;
  font-size:11.5px;
  font-family:inherit;
  overflow-x:auto;
  margin:0;
  white-space:pre;
  line-height:1.6;
}

/* ==================== SITE / LANDING — pages + templates ==================== */
.site-page-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
}
.site-page-thumb{
  width:48px;height:48px;
  border-radius:8px;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  flex-shrink:0;
}

.site-templates-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.site-template-card{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition:all .15s;
  text-align:left;
  font-family:inherit;
  padding:0;
}
.site-template-card:hover{
  border-color:var(--p);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.site-template-preview{
  padding:30px 14px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:140px;
}

/* ==================== PAGE EDITOR ==================== */
.page-editor{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 200px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.page-editor-topbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--border);
}
.page-editor-body{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.page-editor-split{
  flex:1;
  display:grid;
  grid-template-columns:380px 1fr;
  min-height:0;
  overflow:hidden;
}
.page-editor-blocks{
  padding:14px;
  overflow-y:auto;
  border-right:1px solid var(--border);
  background:var(--bg);
}
.page-editor-preview-pane{
  padding:18px;
  overflow-y:auto;
  background:#e8e8e8;
}
.page-fullpreview{
  flex:1;
  overflow-y:auto;
}

.block-edit-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
  overflow:hidden;
}
.block-edit-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.block-edit-card input, .block-edit-card textarea{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:12px;
  font-family:inherit;
  outline:none;
}
.block-edit-card input:focus, .block-edit-card textarea:focus{border-color:var(--p)}


/* ==================== ESPACE CLIENT — APERÇU PLEIN ÉCRAN ==================== */
.ec-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: #f5f7fa;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  animation: fadeIn .2s ease;
}
.ec-fullscreen-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 1;
}
.ec-portal-mock {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ec-portal-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 30px;
  flex-shrink: 0;
}
.ec-portal-body {
  flex: 1;
  padding: 30px;
}
/* ============================================================
   SIDEBAR EN FOND CLAIR (palette Qanton — data-sb-light sur <html>)
   Le fond du menu devient clair (#ddeeff) : on bascule donc tout
   le texte de la sidebar en sombre pour rester lisible.
============================================================ */
[data-sb-light] .sidebar{ background:var(--sb); }
[data-sb-light] .sidebar::after{
  background:linear-gradient(180deg,transparent,rgba(190,21,127,.22),transparent);
}
/* En-tête / marque */
[data-sb-light] .sb-brand{ border-bottom-color:rgba(26,35,64,.12); }
[data-sb-light] .sb-brand-name{ color:#1a2340; }
[data-sb-light] .sb-brand-sub{ color:rgba(26,35,64,.5); }
/* Items de navigation */
[data-sb-light] .nav-item{ color:rgba(26,35,64,.74); }
[data-sb-light] .nav-item:hover{ background:rgba(26,35,64,.07); color:#1a2340; }
[data-sb-light] .nav-item.active{ background:var(--pl); color:var(--p); }
/* Sous-items */
[data-sb-light] .nav-sub-bullet{ background:rgba(26,35,64,.4); }
[data-sb-light] .nav-subitem.active .nav-sub-bullet{ background:var(--p); }
/* Titres de section */
[data-sb-light] .sb-section{ color:rgba(26,35,64,.6); }
[data-sb-light] .sb-section .dot{ box-shadow:0 0 0 2px rgba(26,35,64,.08); }
[data-sb-light] .sb-section.collapsible:hover{ color:#1a2340; background:rgba(26,35,64,.05); }
[data-sb-light] .sb-chev{ color:rgba(26,35,64,.45); }
[data-sb-light] .sb-section.collapsible:hover .sb-chev{ color:var(--p); }
/* Divider */
[data-sb-light] .sb-divider{ background:rgba(26,35,64,.1); }
/* Badges info */
[data-sb-light] .nav-badge.info{ background:rgba(26,35,64,.12); color:rgba(26,35,64,.72); }
/* Utilisateur en bas */
[data-sb-light] .sb-user{ border-top-color:rgba(26,35,64,.12); }
[data-sb-light] .sb-user-name{ color:#1a2340; }
[data-sb-light] .sb-user-role{ color:rgba(26,35,64,.5); }
/* Bouton gérer le menu */
[data-sb-light] .sb-manage-menu{
  border-color:rgba(26,35,64,.18);
  color:rgba(26,35,64,.7);
}
[data-sb-light] .sb-manage-menu:hover{
  border-color:var(--p);
  background:var(--pl);
  color:var(--p);
}
[data-sb-light] .sb-manage-menu svg{ color:var(--p); }

/* ============================================================
   LOT 1 — Scrollbar masquée dans le menu + hub d'idées
============================================================ */
/* Masquer le couloir de scroll de la sidebar (scroll toujours fonctionnel) */
.sidebar{ scrollbar-width:none; -ms-overflow-style:none; }
.sidebar::-webkit-scrollbar{ width:0; height:0; display:none; }
.sidebar nav{ scrollbar-width:none; -ms-overflow-style:none; }
.sidebar nav::-webkit-scrollbar{ width:0; height:0; display:none; }

/* Hub "Noter une idée" — écran de choix */
.ideas-choice{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:12px; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.ideas-choice:hover{ border-color:var(--p); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.07); }
.ideas-choice-icon{
  width:46px; height:46px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ============================================================
   LOT 3 — Drawer : position gauche/droite + plein écran (hors menu)
   Préférence mémorisée par page.
============================================================ */
/* Conteneurs de boutons de contrôle */
.drawer-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.drawer-pos-ctrl{ display:flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:2px; }
.drawer-pos-ctrl button{
  width:28px; height:26px; border-radius:6px;
  background:transparent; border:none; color:var(--t3);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .14s;
}
.drawer-pos-ctrl button:hover{ color:var(--t1); background:var(--card); }
.drawer-pos-ctrl button.active{ color:#fff; background:var(--p); }

/* Variante raw : barre de contrôles en haut à droite */
.drawer-raw-actions{
  position:absolute; top:14px; right:14px; z-index:11;
  display:flex; align-items:center; gap:8px;
}
.drawer-raw-actions .drawer-pos-ctrl{ background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.drawer-raw-actions .drawer-raw-close{ position:static; top:auto; right:auto; }

/* --- POSITIONS du drawer --- */
/* Droite (défaut) : déjà géré par .drawer de base. */
.drawer.drawer-pos-right{ right:0; left:auto; }
/* Gauche : collé au bord gauche du navigateur, RECOUVRE le menu */
.drawer.drawer-pos-left{
  left:0; right:auto;
  box-shadow:12px 0 50px rgba(0,0,0,.18);
}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* Milieu : centré horizontalement */
.drawer.drawer-pos-center{
  left:50%; right:auto; transform:translateX(-50%);
  box-shadow:0 12px 60px rgba(0,0,0,.22);
}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) scale(.97)}to{opacity:1;transform:translateX(-50%) scale(1)}}
/* Pleine page : tout le navigateur (recouvre aussi le menu) */
.drawer.drawer-pos-full{
  left:0 !important; right:0 !important;
  width:100vw !important; max-width:100vw !important;
  box-shadow:none !important;
}

/* ============================================================
   LOT 4 — Paramètres de la page contact (hub, taxonomie, stats)
============================================================ */
/* Lignes de réglage (toggle compteurs, regroupement) */
.cfg-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:var(--bg); border:1px solid var(--border); border-radius:10px;
}
.cfg-row-title{ font-size:13.5px; font-weight:700; }
.cfg-row-desc{ font-size:11.5px; color:var(--t3); margin-top:2px; line-height:1.4; }

/* Liste de navigation des sections */
.cfg-nav-row{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:13px 14px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  cursor:pointer; font-family:inherit; transition:all .14s;
}
.cfg-nav-row:hover{ border-color:var(--p); background:var(--pl); }
.cfg-nav-icon{
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--pl); color:var(--p);
}

/* Gestionnaire de taxonomie (statuts/sources/tags) */
.taxo-list{ display:flex; flex-direction:column; gap:6px; }
.taxo-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--card);
  border:1px solid var(--border); border-radius:9px;
}
.taxo-dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.taxo-item-label{ font-size:13px; font-weight:600; }
.taxo-item-module{
  font-size:10px; font-weight:700; padding:1px 7px;
  border:1px solid; border-radius:10px; text-transform:uppercase; letter-spacing:.3px;
}
.taxo-act{
  width:30px; height:30px; border-radius:7px;
  background:var(--bg); border:1px solid var(--border); color:var(--t2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .14s; font-family:inherit;
}
.taxo-act:hover{ color:var(--p); border-color:var(--p); background:var(--pl); }
.taxo-act-del:hover{ color:var(--red); border-color:var(--red); background:rgba(224,82,82,.08); }

/* Éditeur (ajout/modification) */
.taxo-editor{
  padding:14px; background:var(--bg);
  border:1px solid var(--border); border-radius:10px; margin-bottom:12px;
}
.taxo-color-pick{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.taxo-swatch{
  width:24px; height:24px; border-radius:6px; cursor:pointer;
  border:2px solid transparent; transition:transform .12s;
}
.taxo-swatch:hover{ transform:scale(1.12); }
.taxo-swatch.sel{ border-color:var(--text); box-shadow:0 0 0 2px var(--card) inset; }
.taxo-color-custom{
  width:30px; height:26px; padding:0; border:1px solid var(--border);
  border-radius:6px; cursor:pointer; background:none;
}

/* Réordonnancement des stats par glisser-déposer */
.stat-reorder-list{ display:flex; flex-direction:column; gap:6px; }
.stat-reorder-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--card);
  border:1px solid var(--border); border-radius:9px;
  cursor:grab; transition:all .12s;
}
.stat-reorder-item.dragging{ opacity:.5; border-style:dashed; border-color:var(--p); }
.stat-drag-handle{ color:var(--t3); font-size:16px; cursor:grab; user-select:none; letter-spacing:-2px; }

/* ============================================================
   LOT 5 — Tableau contacts : tri, sélection, regroupement
============================================================ */
/* En-têtes triables (pas de flèches, juste curseur + tooltip "Ordonner") */
.contacts-table th.th-sort{ cursor:pointer; user-select:none; transition:color .12s; }
.contacts-table th.th-sort:hover{ color:var(--p); }
.contacts-table th.th-sort.is-sorted{ color:var(--p); }
/* Générique : s'applique à toutes les tables du modèle (.data-table, etc.) */
th.th-sort{ cursor:pointer; user-select:none; transition:color .12s; }
th.th-sort:hover{ color:var(--p); }
th.th-sort.is-sorted{ color:var(--p); }

/* Ligne sélectionnée pour regroupement */
.contacts-table tr.row-selected{ background:var(--pl); }

/* Barre de regroupement */
.grouping-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; margin-bottom:12px;
  background:var(--pl); border:1px solid var(--p);
  border-radius:10px;
}

/* ============================================================
   Dialogues codés (confirm/prompt/alert) + toasts
============================================================ */
.cs-dialog-back{
  position:fixed; inset:0; z-index:3000;
  background:rgba(15,18,33,.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .15s ease;
}
.cs-dialog{
  width:420px; max-width:92vw;
  background:var(--card); border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  padding:22px; animation:csDialogPop .16s ease;
}
/* Animation propre au dialog : centré par flexbox -> PAS de translateX (sinon il
   apparaît décalé à gauche puis se recentre). Échelle + opacité seulement. */
@keyframes csDialogPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.cs-dialog-title{ font-size:16px; font-weight:800; font-family:'Lora',serif; margin-bottom:8px; }
.cs-dialog-msg{ font-size:13.5px; color:var(--t2); line-height:1.5; }
.cs-dialog-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.btn-danger{ background:var(--red,#e05252); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }

.cs-toast-wrap{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:3100; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.cs-toast{
  padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600;
  color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.22);
  animation:csDialogPop .18s ease;   /* PAS popIn : popIn contient translateX(-50%) -> décalait le toast ancré à droite */
}
.cs-toast-success{ background:#1f9d57; }
.cs-toast-warn{ background:#d9831f; }
.cs-toast-error{ background:var(--red,#e05252); }

/* Indicateur de dépôt lors du glisser-déposer : un emplacement vide de la taille d'un bloc
   qui écarte les autres pour laisser la place au bloc déplacé */
.drop-zone{
  height:46px; margin:6px 0; border-radius:9px;
  background:var(--pl); border:2px dashed var(--p);
  animation:fadeIn .1s ease;
}
.stat-reorder-item.dragging{ opacity:.4; border-style:dashed; border-color:var(--p); }

/* ============================================================
   v6 — Coquille & chargement à la demande
============================================================ */
.cs-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:14px;color:var(--t2,#64748b);font-family:Inter,system-ui,sans-serif}
.cs-boot-label{font-size:13px}
.cs-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(125,125,125,.25);border-top-color:var(--p,#2c6fb3);animation:csspin .7s linear infinite}
@keyframes csspin{to{transform:rotate(360deg)}}
.cs-page-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:60px 20px;color:var(--t3,#94a3b8);font-size:13px}
.cs-page-error{padding:30px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin:20px}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:8px}
.sidebar-nav .nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;color:inherit;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13.5px;text-align:left}
.sidebar-nav .nav-item:hover{background:rgba(125,125,125,.12)}
.sidebar-nav .nav-item.active{background:var(--p,#2c6fb3);color:#fff}
.sidebar-nav .nav-ico{width:18px;text-align:center}

/* =====================================================================
   KANBAN GÉNÉRIQUE — CS.KanbanBoard (réutilisable sur toutes les pages
   embarquant un Kanban : tâches, opportunités, pipeline, scénarios…)
===================================================================== */
.kb-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;margin-top:4px;align-items:flex-start}
.kb-col{
  flex:1 1 0;min-width:240px;max-width:25%;          /* jamais plus d'un quart de la page */
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;transition:background .12s,border-color .12s;
}
.kb-col.is-over{border-color:var(--p);background:var(--pl)}
.kb-col-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;background:var(--card);
  border-bottom:1px solid var(--border);border-top:3px solid var(--border);
}
.kb-col-title{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--t1)}
.kb-col-count{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--bg);padding:2px 8px;border-radius:10px;border:1px solid var(--border);color:var(--t2)}
.kb-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:80px}
.kb-empty{text-align:center;padding:20px;font-size:11.5px;color:var(--t3);font-style:italic}
.kb-slot{display:flex;flex-direction:column;gap:8px}
/* La carte = SEUL élément bordé (bordure extérieure unique qui change au survol) */
.kb-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:11px 12px;cursor:grab;transition:border-color .15s,box-shadow .15s,transform .15s}
.kb-card:hover{border-color:var(--p);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.kb-card:active{cursor:grabbing}
.kb-card.is-dragging{opacity:.4}
.kb-drop-line{height:0;border-top:2px dashed var(--p);margin:1px 2px;border-radius:2px}

/* Contenu de carte de tâche (sans bordure : portée par .kb-card) */
.kb-task-card{position:relative}
.kb-task-title{font-size:13px;font-weight:600;line-height:1.3;margin-bottom:4px}
.kb-task-details{font-size:11.5px;color:var(--t3);line-height:1.4;margin-bottom:6px}
.kb-task-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.kb-task-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kb-task-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.kb-mini-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer;transition:all .12s}
.kb-mini-btn:hover{background:var(--card);transform:scale(1.08)}

/* Colonne « Statut » en icônes (liste) + sélecteur statut (drawer) */
.status-icons{display:inline-flex;gap:4px}
.status-icon{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1.5px solid var(--border);border-radius:7px;background:var(--card);color:var(--t3);cursor:pointer;font-family:inherit;transition:all .12s}
.status-icon:hover{filter:brightness(1.05);transform:scale(1.05);color:var(--t1)}
.status-icon.active{font-weight:700}
.status-icons-lg{display:flex;gap:6px}
.status-icons-lg .status-icon{width:auto;padding:0 12px;height:34px}

/* Actions de ligne génériques + bouton « Voir la fiche » (référence transverse) */
.crm-row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.crm-fiche-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1.5px solid var(--border);border-radius:50%;cursor:pointer;color:var(--p);transition:all .12s}
.crm-fiche-btn:hover{background:var(--p);border-color:var(--p);color:#fff;transform:scale(1.06)}

/* Badge "conversations en attente" du dock chat — rouge et visible */
.dock-chat-btn{position:relative}
.dock-chat-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;
  border:2px solid var(--bg);border-radius:9px;
  font-size:10px;font-weight:800;line-height:1;
}
/* Chips de filtres actifs (réutilisable) */
.crm-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.crm-filter-chip{display:inline-flex;align-items:center;gap:6px;background:var(--pl);color:var(--p);border:1px solid var(--p);border-radius:14px;padding:3px 6px 3px 10px;font-size:11.5px;font-weight:600}
.crm-filter-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;opacity:.7}
.crm-filter-chip button:hover{opacity:1}

/* ===== Popup de mentions @ (porté dans document.body, position:fixed) ===== */
.mentions-popup{
  list-style:none;margin:0;padding:5px;
  min-width:240px;max-width:300px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  max-height:262px;overflow-y:auto;
}
.mentions-popup-head{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);padding:6px 10px 4px;
}
.mentions-pop-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:8px;cursor:pointer;
}
.mentions-pop-item.is-highlight,
.mentions-pop-item:hover{ background:var(--pl); }
.mentions-pop-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:700;flex-shrink:0;
}

/* Masquer le dock flottant quand un builder (devis/BDC/facture) est ouvert */
body:has(.doc-builder-overlay) .floating-dock{ display:none !important; }

/* Champ de recherche de contact (autocomplétion) */
.cs-contact-search{position:relative}
.cs-contact-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);max-height:260px;overflow-y:auto;padding:5px}
.cs-contact-opt{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:7px 10px;border:none;background:none;border-radius:8px;cursor:pointer}
.cs-contact-opt:hover{background:var(--pl)}
.cs-contact-selected{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-size:13px;font-weight:600}
.cs-contact-selected button{border:none;background:none;color:var(--t3);cursor:pointer;font-size:18px;line-height:1}
.cs-contact-selected button:hover{color:var(--red)}

/* Détail projet en lecture seule (ouvert en plein écran depuis la liste) */
.pm-readonly-banner{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fef3c7;color:#92400e;font-size:12.5px;font-weight:600;border-bottom:1px solid #fde68a}
[data-theme="dark"] .pm-readonly-banner{background:#3a2f15;color:#fcd34d;border-color:#4a3a1a}
.pm-readonly button,.pm-readonly input,.pm-readonly select,.pm-readonly textarea{opacity:.55 !important;pointer-events:none !important;cursor:default !important}

/* Glisser-déposer de la config du dashboard */
.dash-cfg-row[draggable]{cursor:grab}
.dash-cfg-row.is-dragging{opacity:.45;cursor:grabbing}
.dash-drag-handle{display:inline-flex;align-items:center;cursor:grab;padding:0 2px;color:var(--t3)}
.dash-drag-handle:active{cursor:grabbing}