:root{
  --purple:#782B84;
  --purple-dark:#43237E;
  --purple-vivid:#8B369A;
  --purple-light:#834FC8;
  --lavender:#7676B0;
  --green:#65BC7B;
  --ink:#22253D;
  --slate:#4F578D;
  --mist:#A6ABCD;
  --line:#E4E7F2;
  --bg:#F4F5FA;
  --white:#fff;
  --shadow:0 1px 2px rgba(34,37,61,.04), 0 8px 24px rgba(34,37,61,.06);
  --shadow-lg:0 12px 40px rgba(67,35,126,.16);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:22px; margin:2px 0 0; font-weight:600; letter-spacing:-.01em}
a{color:inherit}
.app{display:grid; grid-template-columns:288px 1fr; min-height:100vh}

/* ================= SIDEBAR ================= */
.sidebar{
  background:linear-gradient(180deg,var(--purple-dark) 0%, #3a1f6e 60%, #331b60 100%);
  color:#EEE9F6; padding:22px 16px; display:flex; flex-direction:column; gap:14px;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand img{height:34px; width:auto; display:block}
.sidebar-caption{
  margin:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#B7A9DA; font-weight:500;
}
.sidebar-nav{display:flex; flex-direction:column; gap:4px; margin-top:6px; overflow-y:auto; flex:1}
.mod{
  display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:11px;
  text-decoration:none; color:#D8CFEB; transition:.16s; position:relative; border:1px solid transparent;
}
.mod-icon{width:24px; height:24px; display:grid; place-items:center; flex-shrink:0; color:#B7A9DA; transition:color .16s}
.mod-icon svg{width:19px; height:19px; display:block}
.mod:hover .mod-icon{color:#EAE3F7}
.mod--active .mod-icon{color:var(--green)}
.mod-body{display:flex; flex-direction:column; line-height:1.25}
.mod-name{font-size:13px; font-weight:500}
.mod-code{font-size:10.5px; color:#9E90C6; letter-spacing:.02em}
.mod--active{background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.16)}
.mod--active .mod-code{color:var(--green)}
.mod--soon{opacity:.62; cursor:default}
.mod--soon:hover{opacity:.82; background:rgba(255,255,255,.05)}
.mod-dot{width:7px; height:7px; border-radius:50%; background:var(--green); margin-left:auto; box-shadow:0 0 0 4px rgba(101,188,123,.22)}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.12); padding-top:12px}
.user{display:flex; align-items:center; gap:10px}
.user-av{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple-vivid),var(--purple-light));
  display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff
}
.user-name{font-size:12.5px;font-weight:600;color:#fff}
.user-role{font-size:11px;color:#A99BCF}

/* ================= MAIN ================= */
.main{padding:26px 34px 60px; max-width:1180px}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px}
.crumbs{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); font-weight:600}
.topbar-project{display:flex; gap:8px; flex-shrink:0}
.chip{
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;
}
.chip--ghost{background:#fff; border:1px solid var(--line); color:var(--slate)}
.chip--client{background:var(--purple); color:#fff}

/* Stepper */
.stepper{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 22px; flex-wrap:wrap}
.step{
  display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:11px;
  background:#fff; border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--mist);
  flex:1; min-width:150px; transition:.16s;
}
.step b{
  width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--mist);
  display:grid;place-items:center;font-size:12px;border:1px solid var(--line)
}
.step--current{border-color:var(--purple); color:var(--ink); box-shadow:var(--shadow)}
.step--current b{background:var(--purple); color:#fff; border-color:var(--purple)}
.step--done{color:var(--slate)}
.step--done b{background:var(--green); color:#fff; border-color:var(--green)}

/* Panels */
.panel{display:none; animation:fade .25s ease}
.panel--visible{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.grid2{display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start}
.grid-doc{display:grid; grid-template-columns:1fr 1.25fr; gap:18px; align-items:start}

/* Cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card--sticky{position:sticky; top:18px}
.card-h{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; margin-bottom:6px; flex-wrap:wrap}
.tag{background:var(--purple); color:#fff; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; letter-spacing:.03em}
.tag--green{background:var(--green)}
.ai-badge{margin-left:auto; font-size:11px; color:var(--purple-vivid); background:#F5EDFB; padding:4px 9px; border-radius:999px; font-weight:600}
.muted{color:var(--slate); font-size:13px; margin:0 0 16px}

/* Form */
fieldset{border:none; padding:0; margin:0 0 18px}
fieldset.reveal{background:#FAF8FE; border:1px dashed #D8C7EC; border-radius:10px; padding:12px 14px}
legend{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--purple); font-weight:700; margin-bottom:9px; padding:0}
.auto{background:#EAF6ED; color:#2f7d45; font-size:9.5px; padding:2px 7px; border-radius:999px; letter-spacing:.02em; text-transform:none; font-weight:600; margin-left:6px}
.radio,.check{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; cursor:pointer; font-size:13.5px; transition:.12s}
.radio:hover,.check:hover{background:#F7F5FC}
.radio input,.check input{accent-color:var(--purple); width:16px; height:16px}
.field-money{display:inline-flex; align-items:center; gap:8px; background:#F7F7FC; border:1px solid var(--line); border-radius:10px; padding:4px 12px 4px 4px}
.field-money input{border:none; background:transparent; font-size:18px; font-weight:600; width:150px; padding:8px 10px; color:var(--ink); outline:none}
.field-money span{color:var(--slate); font-weight:600; font-size:13px}

/* Requirements list */
.req{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px}
.req li{display:flex; gap:9px; align-items:flex-start; font-size:13px; background:#FAFAFE; border:1px solid var(--line); border-left:3px solid var(--green); border-radius:8px; padding:9px 12px}
.req li b{color:var(--purple-dark)}
.note{background:#F5EDFB; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--slate)}
.note b{color:var(--purple)}
.hint{margin-top:12px; font-size:12px; color:var(--mist)}

/* Buttons */
.btn{font-family:inherit; font-size:13.5px; font-weight:600; border-radius:10px; padding:11px 18px; border:1px solid transparent; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:7px}
.btn--primary{background:var(--purple); color:#fff}
.btn--primary:hover{background:var(--purple-vivid); box-shadow:var(--shadow-lg)}
.btn--ghost{background:#fff; border-color:var(--line); color:var(--slate)}
.btn--ghost:hover{border-color:var(--purple); color:var(--purple)}
.btn--block{width:100%; justify-content:center; margin-top:6px; padding:13px}
.btn--sm{padding:7px 12px; font-size:12px}
.panel-nav{display:flex; justify-content:space-between; margin-top:18px}

/* Blocs CFC */
.blocs{display:flex; flex-direction:column; gap:10px}
.bloc{border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:#fff; transition:.15s}
.bloc:hover{border-color:var(--purple-light); box-shadow:var(--shadow)}
.bloc-h{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.bloc-cfc{font-size:10.5px; font-weight:700; color:#fff; background:var(--slate); padding:2px 7px; border-radius:5px}
.bloc-title{font-weight:600; font-size:13.5px}
.bloc-check{margin-left:auto; color:var(--green); font-weight:700; font-size:13px}
.bloc-text{font-size:12.5px; color:var(--slate); line-height:1.5}
.version{margin-top:16px; font-size:11.5px; color:var(--mist); display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px}
.version b{color:var(--purple)}
.version a{color:var(--purple-vivid); text-decoration:none}
.version .strike{margin-left:auto; text-decoration:line-through; opacity:.6}

/* Document preview */
.doc-card{padding:0; overflow:hidden}
.doc-toolbar{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#FAF8FE; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; color:var(--slate)}
.doc{padding:34px 38px; font-size:13px; line-height:1.6; max-height:640px; overflow-y:auto}
.doc-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--purple); padding-bottom:14px; margin-bottom:20px}
.doc-logo{font-family:'Jost',sans-serif; font-weight:500; letter-spacing:.28em; color:var(--purple); font-size:16px}
.doc-logo small{display:block; letter-spacing:.06em; font-size:8.5px; color:var(--mist); font-weight:400; margin-top:3px}
.doc-phase{text-align:right; font-size:11px; color:var(--slate)}
.doc-phase b{display:block; font-size:15px; color:var(--purple-dark)}
.doc h2{font-size:13px; color:var(--purple); text-transform:uppercase; letter-spacing:.05em; margin:22px 0 8px; border-left:3px solid var(--green); padding-left:9px}
.doc p{margin:0 0 10px}
.doc .kv{display:grid; grid-template-columns:150px 1fr; gap:4px 12px; font-size:12.5px; background:#FAFAFE; padding:12px 14px; border-radius:9px}
.doc .kv dt{color:var(--mist)}
.doc .kv dd{margin:0; font-weight:500}
.doc .var{background:#EAF6ED; color:#2f7d45; padding:0 4px; border-radius:4px; font-weight:600}

/* Fees table */
.fees-top{display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.field-money--lg{display:flex; flex-direction:column; align-items:stretch; gap:6px; background:none; border:none; padding:0}
.fm-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--purple); font-weight:700}
.fm-input{display:inline-flex; align-items:center; background:#F7F7FC; border:1px solid var(--line); border-radius:10px; padding:2px 12px 2px 2px}
.fm-input input{border:none; background:transparent; font-size:17px; font-weight:600; width:140px; padding:9px 10px; outline:none; color:var(--ink)}
.fm-input i{color:var(--slate); font-style:normal; font-weight:600}
.fees{width:100%; border-collapse:collapse; font-size:13px}
.fees th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mist); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line)}
.fees td{padding:12px; border-bottom:1px solid var(--line)}
.fees .r{text-align:right}
.fees tbody tr:hover{background:#FAFAFE}
.fees .ph{font-weight:700; color:var(--purple); background:#F5EDFB; padding:2px 8px; border-radius:6px; font-size:12px}
.fees tfoot td{font-weight:700; font-size:15px; color:var(--purple-dark); border-top:2px solid var(--purple); border-bottom:none}
.err{font-size:11px; color:var(--slate); background:#F4F5FA; padding:2px 8px; border-radius:999px}
.coherence{margin-top:16px; display:flex; align-items:center; gap:10px; background:#EAF6ED; border:1px solid #B9E2C4; border-radius:10px; padding:12px 15px; font-size:13px; color:#2f7d45}
.coherence b{color:#256b38}

/* A4 summary — mise en page soignée */
.a4{
  background:#fff; width:100%; max-width:820px; margin:0 auto; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.a4-band{position:relative; overflow:hidden; background:linear-gradient(120deg,#2d1658,var(--purple-dark) 55%,var(--purple));
  color:#fff; padding:28px 36px; display:flex; justify-content:space-between; align-items:center}
.a4-ring{position:absolute; right:-26px; top:-24px; width:150px; height:150px; opacity:.12; pointer-events:none}
.a4-band .a4-logo{position:relative; font-family:'Jost',sans-serif; letter-spacing:.32em; font-size:22px; font-weight:400}
.a4-band .a4-logo small{display:block; font-size:8.5px; letter-spacing:.12em; color:#C9BBE8; margin-top:5px; font-weight:400}
.a4-band .a4-ref{position:relative; text-align:right; font-size:11px; color:#C0AEE6; line-height:1.5}
.a4-band .a4-ref b{display:block; color:#fff; font-size:17px; font-weight:600; letter-spacing:.02em; margin:2px 0}
.a4-accent{height:4px; background:linear-gradient(90deg,var(--green),var(--purple-light),var(--purple))}

.a4-body{padding:26px 36px}
.a4-head{border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:20px}
.a4-title{font-family:'Jost',sans-serif; font-size:22px; font-weight:500; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em; line-height:1.2}
.a4-chips{display:flex; flex-wrap:wrap; gap:7px}
.a4-chip{background:#F5F5FB; border:1px solid var(--line); color:var(--slate); font-size:11.5px; padding:4px 11px; border-radius:999px; font-weight:500}
.a4-chip--label{background:var(--purple); border-color:var(--purple); color:#fff; font-weight:600}

.a4-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px}
.a4-cell{position:relative; background:#FAFAFE; border:1px solid var(--line); border-radius:12px; padding:15px 16px; overflow:hidden}
.a4-cell::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--purple-light)}
.a4-cell--fee{background:linear-gradient(135deg,#EAF6ED,#f4fbf6); border-color:#B9E2C4}
.a4-cell--fee::before{background:var(--green)}
.a4-cell .lab{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mist); font-weight:700}
.a4-cell .val{font-family:'Jost',sans-serif; font-size:22px; font-weight:500; color:var(--purple-dark); margin-top:6px; line-height:1.1}
.a4-cell--fee .val{color:#2f7d45}
.a4-cell .val small{font-size:12px; color:var(--slate); font-weight:500}

.a4-grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.a4-sec h3{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--purple); margin:0 0 12px; border-left:3px solid var(--green); padding-left:9px}
.a4-check{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.a4-check li{font-size:12.5px; color:var(--slate); display:flex; gap:9px; align-items:flex-start; line-height:1.45}
.a4-check li::before{content:''; flex-shrink:0; width:16px; height:16px; margin-top:1px; border-radius:50%;
  background:#EAF6ED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.a4-check li b{color:var(--purple-dark); font-weight:600}
.a4-foot{border-top:1px solid var(--line); padding:15px 36px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:10.5px; color:var(--mist)}

/* ===== Mobile top bar & drawer (masqués sur desktop) ===== */
.mtopbar{display:none}
.scrim{display:none}

@media(max-width:1024px){
  .app{grid-template-columns:1fr}
  /* Barre supérieure mobile */
  .mtopbar{
    display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:60;
    padding:11px 16px; background:linear-gradient(120deg,var(--purple-dark),#3a1f6e);
    box-shadow:0 4px 18px rgba(30,15,60,.28);
  }
  .mtopbar-burger{background:none; border:none; width:30px; height:24px; padding:4px 3px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between}
  .mtopbar-burger span{display:block; height:2.5px; border-radius:2px; background:#fff; transition:.25s}
  .app.drawer-open ~ * .mtopbar-burger span:nth-child(1){}/* no-op */
  .mtopbar-logo img{height:30px; width:auto}
  .mtopbar-logout{margin-left:auto; color:#D8CFEB; font-size:20px; text-decoration:none; width:34px; height:34px; display:grid; place-items:center; border-radius:9px}
  .mtopbar-logout:hover{background:rgba(255,255,255,.12); color:#fff}

  /* Sidebar → tiroir hors-écran */
  .sidebar{
    position:fixed; top:0; left:0; height:100dvh; width:284px; z-index:80;
    transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
  }
  .app.drawer-open .sidebar{transform:translateX(0); box-shadow:0 0 60px rgba(20,10,40,.5)}

  /* Voile */
  .scrim{
    display:block; position:fixed; inset:0; z-index:70; background:rgba(20,10,40,.45);
    opacity:0; pointer-events:none; transition:.28s;
  }
  .app.drawer-open .scrim{opacity:1; pointer-events:auto}

  .main{padding:20px 18px 60px}
  .grid2,.grid-doc{grid-template-columns:1fr}
  .card--sticky{position:static}
  .topbar{flex-wrap:wrap}
}

/* Print */
@media print{
  /* Masquer tout le shell (y compris la version mobile déclenchée par la largeur papier) */
  .sidebar,.mtopbar,.scrim,.topbar,.stepper,.panel-nav,.doc-toolbar,
  .card-h .btn,.ai-badge,.demo-ribbon,.toast,.vcm-overlay{display:none !important}

  .app{display:block !important; grid-template-columns:none !important}
  .main{padding:0 !important; margin:0 !important; max-width:none !important}

  /* N'imprimer QUE l'étape affichée à l'écran, pas les 4 panneaux */
  .panel{display:none !important}
  .panel--visible{display:block !important}

  /* Étape « Livrable » : n'imprimer que l'aperçu du document, pas la colonne de gauche */
  .grid-doc{display:block !important}
  .grid-doc > .card:not(.doc-card){display:none !important}
  .doc{max-height:none !important; overflow:visible !important}

  .a4,.doc-card,.card{box-shadow:none !important; border:none !important}
  .a4{max-width:none !important}

  /* Le document occupe toute la feuille : pied de page ancré en bas */
  .a4{display:flex !important; flex-direction:column !important; min-height:96vh}
  .a4-body{flex:1 0 auto}

  body{background:#fff !important}
  @page{margin:14mm}
}

/* ============================================================
   Shell additions, login & modules P2–P8
   ============================================================ */
.sidebar-brand{display:block}
.user-meta{flex:1; min-width:0}
.user-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logout{margin-left:auto; color:#C9BBE8; text-decoration:none; font-size:18px; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; transition:.15s}
.logout:hover{background:rgba(255,255,255,.12); color:#fff}
.muted-inline{color:var(--mist); font-weight:400; font-size:13px}
.mt{margin-top:18px}
.colstack{display:flex; flex-direction:column; gap:18px}

/* ---------- Login ---------- */
.login-body{
  min-height:100vh; margin:0; display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 30% -10%, #5a2f9e 0%, transparent 60%),
             linear-gradient(160deg,var(--purple-dark) 0%, #2c1652 100%);
  font-family:'Inter',sans-serif;
}
.login-wrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.login-card{background:#fff; width:380px; max-width:92vw; border-radius:20px; padding:38px 34px; box-shadow:0 30px 80px rgba(0,0,0,.4); text-align:center}
.login-logo{height:74px; width:auto; filter:invert(18%) sepia(48%) saturate(1600%) hue-rotate(255deg)}
.login-caption{margin:14px 0 22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); font-weight:600}
.login-form{display:flex; flex-direction:column; gap:14px; text-align:left}
.login-field span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--purple); font-weight:700; margin-bottom:6px}
.login-field input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px; font-size:14px; outline:none; transition:.15s; font-family:inherit}
.login-field input:focus{border-color:var(--purple); box-shadow:0 0 0 3px rgba(120,43,132,.12)}
.login-error{background:#FDE8EA; color:#b3283a; font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:16px}
.login-2fa{margin-top:20px; font-size:11px; color:var(--mist); line-height:1.6}
.login-back{color:#C9BBE8; text-decoration:none; font-size:13px}
.login-back:hover{color:#fff}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.kpi-lab{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mist); font-weight:600}
.kpi-val{font-size:26px; font-weight:700; color:var(--purple-dark); margin:6px 0 4px}
.kpi-val small{font-size:13px; color:var(--slate); font-weight:500}
.kpi-trend{font-size:12px; color:var(--slate)}
.kpi-trend.up{color:#2f7d45}
.kpi-trend.warn{color:#c9820a; font-weight:600}

/* ---------- Pipeline ---------- */
.pipeline{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:6px}
.pl-col{background:var(--bg); border-radius:12px; padding:10px; min-height:120px}
.pl-head{font-size:12px; font-weight:700; color:var(--slate); display:flex; justify-content:space-between; padding:4px 6px 10px; text-transform:uppercase; letter-spacing:.03em}
.pl-head span{background:#fff; border-radius:999px; padding:1px 8px; color:var(--purple); font-size:11px}
.pl-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:9px; box-shadow:var(--shadow); cursor:grab; transition:.15s}
.pl-card:hover{border-color:var(--purple-light); transform:translateY(-1px)}
.pl-card b{font-size:13px; display:block}
.pl-tag{font-size:11px; color:var(--mist)}
.pl-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:12px; font-weight:600; color:var(--slate)}
.prob{font-size:11px; padding:2px 8px; border-radius:999px; font-weight:700}
.p20{background:#F0F0F6; color:var(--mist)} .p40{background:#FEF3E2; color:#c9820a}
.p70{background:#EAF6ED; color:#2f7d45} .p100{background:var(--green); color:#fff} .plost{background:#FDE8EA; color:#b3283a}
.pl-card--hot{border-color:var(--green); border-left:3px solid var(--green)}
.pl-open{margin-top:7px; font-size:11px; color:#2f7d45; background:#EAF6ED; padding:4px 8px; border-radius:7px}
.pl-won{border-left:3px solid var(--green)} .pl-lost{opacity:.6}

/* ---------- Relances / notif / lead ---------- */
.relist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.relist li{border:1px solid var(--line); border-radius:11px; padding:13px}
.re-draft{background:#FAF8FE; border-radius:9px; padding:10px 12px; font-size:12.5px; color:var(--slate); font-style:italic; margin:8px 0}
.re-act{display:flex; gap:8px; justify-content:flex-end}
.notif{display:flex; align-items:center; gap:10px; font-size:13px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:9px}
.notif--muted{color:var(--mist)}
.notif-dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(101,188,123,.2); flex-shrink:0}
.notif-dot.off{background:var(--mist); box-shadow:none}
.notif-hot{margin-left:auto; background:#EAF6ED; color:#2f7d45; font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600}
.lead{background:#FAF8FE; border:1px dashed #D8C7EC; border-radius:11px; padding:13px}
.lead-mail{font-size:13px; font-weight:500}
.lead-act{margin-top:9px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.minirow{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:9px 4px; border-bottom:1px solid var(--line)}
.minirow:last-child{border-bottom:none}

/* Switch */
.banner-soon{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.switch{position:relative; display:inline-block; width:42px; height:24px}
.switch input{display:none}
.slider{position:absolute; inset:0; background:var(--mist); border-radius:999px; transition:.2s; cursor:pointer}
.slider::before{content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.tag--slate{background:var(--slate)} .tag--red{background:#c0392b}

/* ---------- Alerts / cascade (P3) ---------- */
.alert-strip{background:#FEF3E2; border:1px solid #F5D79E; border-radius:12px; padding:13px 16px; font-size:13px; color:#8a5a00; margin-bottom:18px}
.alert-strip b{color:#6b4600}
.cascade{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 16px}
.casc-node{border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:150px}
.casc-role{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--mist); font-weight:700}
.casc-node b{display:block; margin:3px 0 6px; font-size:14px}
.casc-amt{font-size:12px; font-weight:600; padding:3px 8px; border-radius:7px; display:inline-block}
.casc-amt.sell{background:#F5EDFB; color:var(--purple-dark)}
.casc-amt.marge{background:#EAF6ED; color:#2f7d45}
.casc-client{background:#fff} .casc-vc{background:#FAF8FE; border-color:var(--purple-light)}
.casc-arrow{color:var(--mist); font-size:20px}
.casc-partners{display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; min-width:260px}
.casc-p{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:12.5px}
.casc-p b{margin-left:auto; color:var(--slate)}
.lot{font-size:9.5px; font-weight:800; color:#fff; padding:2px 6px; border-radius:5px; letter-spacing:.03em}
.lot.ele{background:#e08a1e} .lot.san{background:#2a7fb8} .lot.des{background:#7a4fc0} .lot.the{background:#c0392b}
.delta-bar{position:relative; height:34px; background:#FDE8EA; border-radius:10px; overflow:hidden}
.delta-fill{position:absolute; inset:0; width:65%; background:linear-gradient(90deg,var(--purple),var(--green))}
.delta-labels{position:relative; display:flex; justify-content:space-between; padding:8px 14px; font-size:12px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Generic table */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mist); font-weight:600; padding:9px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px; border-bottom:1px solid var(--line)}
.tbl .r{text-align:right}
.tbl tbody tr:hover{background:#FAFAFE}
.st{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px}
.st.paid,.st.signed{background:var(--green); color:#fff}
.st.topay{background:#FEF3E2; color:#c9820a}
.st.recv{background:#EAF0FB; color:#3a5ba0}
.st.wait{background:#F0F0F6; color:var(--mist)}
.casc-progress{display:flex; flex-direction:column; gap:10px}
.cp-row{display:flex; align-items:center; gap:10px; font-size:12.5px}
.cp-row span{width:110px; color:var(--slate)}
.cp-row .bar{flex:1; height:9px; background:var(--bg); border-radius:999px; overflow:hidden}
.cp-row .bar i{display:block; height:100%; background:var(--green)}
.cp-row .bar i.warn{background:#e0a72e}
.cp-row b{width:40px; text-align:right; color:var(--slate)}
.alert-card{border-color:#F5C6CB; background:#FEF6F6}
.alert-card p{margin:0; font-size:13px}
.contract{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px}
.contract:last-child{border-bottom:none}
.doc-ico{font-size:20px}

/* ---------- Chantier (P4) ---------- */
.grid-chantier{display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start}
.card--phonewrap{display:flex; flex-direction:column; align-items:center}
.phone{width:230px; background:var(--purple-dark); border-radius:26px; padding:10px; box-shadow:var(--shadow-lg)}
.phone-top{color:#C9BBE8; font-size:10.5px; text-align:center; padding:6px 0}
.phone-body{background:#fff; border-radius:18px; padding:14px}
.ph-photo{background:linear-gradient(135deg,#eee,#ddd); border-radius:12px; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:30px; color:var(--slate)}
.ph-photo span{font-size:10px; margin-top:2px}
.ph-step{font-size:12px; padding:8px 10px; border-radius:8px; background:var(--bg); margin-top:7px; color:var(--slate)}
.ph-step.done{background:#EAF6ED; color:#2f7d45; font-weight:600}
.ph-step.done::before{content:'✓ '}
.phone-body .btn{margin-top:10px}
.beforeafter{display:flex; align-items:center; gap:10px; margin-top:12px}
.ba{width:70px; height:54px; background:var(--bg); border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:22px}
.ba span{font-size:9px; color:var(--mist)}
.ba-arrow{color:var(--mist)}
.plan{position:relative; height:180px; background:repeating-linear-gradient(0deg,#f4f5fa 0 24px,#eef0f8 24px 25px),repeating-linear-gradient(90deg,#f4f5fa 0 24px,#eef0f8 24px 25px); border:1px solid var(--line); border-radius:12px}
.plan-pin{position:absolute; width:26px; height:26px; background:var(--purple); color:#fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:grid; place-items:center; font-size:12px; font-weight:700; box-shadow:var(--shadow)}
.plan-pin span,.plan-pin{transform-origin:center}
.plan-pin{ }
.plan-pin.warn{background:#c0392b}
.plan-label{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:11px; color:var(--mist)}
.pv{background:#FAF8FE; border-radius:11px; padding:16px}
.pv-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--purple); padding-bottom:8px; margin-bottom:10px; font-size:12px; color:var(--slate)}
.pv-list{margin:0 0 10px; padding-left:18px; font-size:13px; color:var(--slate)}
.convoc{display:flex; align-items:center; gap:14px; padding:6px 0}
.conv-date{background:var(--purple); color:#fff; border-radius:11px; width:52px; text-align:center; padding:8px 0}
.conv-date b{display:block; font-size:20px} .conv-date span{font-size:10px}
.conv-guests{font-size:12px; color:var(--mist); margin-top:4px}

/* ---------- Finance (P5) ---------- */
.raf{display:flex; flex-direction:column; gap:14px}
.raf-row{display:grid; grid-template-columns:1fr 2fr auto; gap:14px; align-items:center}
.raf-row.alert .raf-name{color:#b3283a}
.raf-name{font-size:13px; font-weight:500}
.raf-bar{height:14px; background:var(--bg); border-radius:999px; overflow:hidden}
.raf-bar i{display:block; height:100%; background:var(--green); border-radius:999px}
.raf-bar i.warn{background:#e0a72e}
.raf-val{font-size:12.5px; font-weight:600; color:var(--slate); white-space:nowrap}
.raf-rest{display:block; font-size:11px; color:var(--mist); font-weight:500}
.raf-rest.warn{color:#c9820a; font-weight:700}
.chartbars{display:flex; gap:20px; align-items:flex-end; height:150px; padding:10px 0}
.cb{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.cb-track{flex:1; width:100%; display:flex; gap:6px; align-items:flex-end; justify-content:center}
.cb-in,.cb-out{width:26px; border-radius:6px 6px 0 0}
.cb-in{background:var(--green)} .cb-out{background:var(--purple-light)}
.cb label{font-size:11px; color:var(--mist)}
.cb b{font-size:12px} .cb b.pos{color:#2f7d45}
.legend{display:flex; gap:18px; font-size:12px; color:var(--slate); justify-content:center}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle}
.legend .dot.in{background:var(--green)} .legend .dot.out{background:var(--purple-light)}
.attest{display:flex; flex-wrap:wrap; gap:8px}
.badge-att{font-size:12px; padding:6px 11px; border-radius:999px; font-weight:600}
.badge-att.ok{background:#EAF6ED; color:#2f7d45}
.badge-att.warn{background:#FEF3E2; color:#c9820a}
.badge-att.alert{background:#FDE8EA; color:#b3283a}
.fiduciaire{background:linear-gradient(135deg,#f3fbf5,#eafaf0); border-color:#B9E2C4}
.fiduciaire p{margin:0; font-size:13px}

/* ---------- IA (P6) ---------- */
.principle{background:#F5EDFB; border:1px solid #E0CCF0; border-radius:12px; padding:13px 16px; font-size:13px; color:var(--slate); margin-bottom:18px}
.principle b{color:var(--purple)}
.ai-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ai-card{display:flex; flex-direction:column}
.ai-h{display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin-bottom:6px}
.ai-draft{background:#FAF8FE; border-radius:9px; padding:11px 12px; font-size:12.5px; color:var(--slate); line-height:1.55; margin:6px 0 10px}
.ai-out{color:#2f7d45; font-weight:600}
.ai-foot{margin-top:auto; padding-top:8px; font-size:11.5px; color:var(--mist)}
.mailrow{display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 4px; border-bottom:1px solid var(--line)}
.mt-tag{font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; color:#fff}
.mt-tag.client{background:var(--purple)} .mt-tag.facture{background:#e08a1e} .mt-tag.repondre{background:#2a7fb8}
.searchbox{background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:12.5px; color:var(--slate); margin-bottom:8px}
.match{font-size:11px; font-weight:700; color:#2f7d45; background:#EAF6ED; padding:2px 8px; border-radius:999px}
.qc{font-size:13px; padding:9px 12px; border-radius:9px; margin-bottom:8px}
.qc.ok{background:#EAF6ED; color:#2f7d45}
.qc.warn{background:#FEF3E2; color:#c9820a}

/* ---------- Collaboration (P7) ---------- */
.drive{display:flex; flex-direction:column; gap:8px}
.dr-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px}
.dr-item .lock{margin-left:auto; font-size:11px; color:var(--mist)}
.tabs{display:flex; gap:6px; margin-bottom:12px}
.tab{font-size:12.5px; padding:7px 13px; border-radius:9px; background:var(--bg); color:var(--slate); cursor:pointer}
.tab.active{background:var(--purple); color:#fff}
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kb-col{background:var(--bg); border-radius:11px; padding:9px}
.kb-head{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:700; padding:2px 4px 8px}
.kb-card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 10px; font-size:12.5px; margin-bottom:7px; box-shadow:var(--shadow)}
.kb-card.done{border-left:3px solid var(--green); color:var(--slate)}
.portal{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px}
.portal:last-of-type{border-bottom:none}
.onboard{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.ob-item{background:var(--bg); border-radius:11px; padding:14px; font-size:13px; text-align:center}
.ob-item.green{background:#EAF6ED; color:#2f7d45; font-weight:600}

/* ---------- RH (P8) ---------- */
.charge,.timesheet{display:flex; flex-direction:column; gap:12px}
.ch-row{display:grid; grid-template-columns:230px 1fr auto; gap:14px; align-items:center}
.ch-row.overload{opacity:.9}
.ch-name{font-size:13px; font-weight:500}
.ch-track{height:16px; background:var(--bg); border-radius:999px; overflow:hidden}
.ch-track i{display:block; height:100%; background:var(--green); border-radius:999px; max-width:100%}
.ch-track i.warn{background:#e0a72e} .ch-track i.alert{background:#c0392b}
.ch-val{font-size:13px; font-weight:700; color:var(--slate); width:60px; text-align:right}
.ch-val.warn{color:#c9820a} .ch-val.alert{color:#b3283a}
.ts-row{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line)}
.ts-total{display:flex; justify-content:space-between; font-size:14px; font-weight:700; color:var(--purple-dark); padding-top:10px; border-top:2px solid var(--purple)}
.ts-total, .timesheet .btn{margin-top:4px}

/* Responsive additions */
@media(max-width:1024px){
  .kpis,.ai-grid,.onboard{grid-template-columns:repeat(2,1fr)}
  .grid-chantier{grid-template-columns:1fr}
  .ch-row,.raf-row{grid-template-columns:1fr}
  /* Pipeline & tableaux : défilement horizontal plutôt qu'écrasement */
  .pipeline{grid-template-columns:repeat(4,minmax(180px,1fr)); overflow-x:auto; padding-bottom:6px}
  .fees, .tbl{display:block; overflow-x:auto; white-space:nowrap}
}
@media(max-width:640px){
  .kpis,.ai-grid,.onboard,.a4-cards,.pv2-stats{grid-template-columns:1fr}
  .fees-top{flex-direction:column}
  .field-money--lg{width:100%}
  .stepper .step{min-width:0; flex:1 1 46%}
  .topbar h1{font-size:19px}
  .cascade{flex-direction:column; align-items:stretch}
  .casc-arrow{transform:rotate(90deg); align-self:center}
  .casc-partners{grid-template-columns:1fr}
  .device{transform:scale(.92)}
}
.login-demo{margin-top:16px; font-size:12px; color:var(--purple-vivid); background:#F5EDFB; padding:8px 12px; border-radius:9px; font-weight:600}

/* ============================================================
   P4 — Chantier (version enrichie)
   ============================================================ */
/* Realistic device mockup */
.device{
  position:relative; width:264px; height:544px; margin:6px auto; border-radius:46px;
  padding:11px;
  background:linear-gradient(150deg,#3a3a3f 0%, #131316 42%, #060608 60%, #26262b 100%);
  box-shadow:
    0 30px 60px -18px rgba(20,10,40,.5),
    0 8px 20px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 1px 1px rgba(255,255,255,.25);
}
.device::before{ /* edge highlight */
  content:''; position:absolute; inset:3px; border-radius:43px; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.device-screen{
  position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden;
  background:#fff; display:flex; flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.device-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:6;
  width:44%; height:26px; background:#050506; border-radius:0 0 18px 18px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.dn-speaker{width:34px; height:5px; border-radius:3px; background:#1c1c22}
.dn-cam{width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #3a3f5c, #0a0a12); box-shadow:inset 0 0 2px #000}
.device-btn{position:absolute; width:3px; background:linear-gradient(90deg,#0a0a0c,#3a3a40); border-radius:3px 0 0 3px}
.btn-silent{left:-3px; top:96px; height:26px}
.btn-volup{left:-3px; top:140px; height:44px}
.btn-voldn{left:-3px; top:196px; height:44px}
.btn-power{right:-3px; top:160px; height:66px; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#3a3a40,#0a0a0c)}
.scr-status{display:flex; justify-content:space-between; align-items:center; padding:9px 22px 5px; font-size:12px; color:var(--ink); font-weight:600}
.scr-time{letter-spacing:.02em}
.scr-sys{display:flex; align-items:center; gap:5px}
.sig{width:16px; height:11px; background:
  linear-gradient(var(--ink),var(--ink)) 0 100%/3px 4px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 4.5px 100%/3px 6px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 9px 100%/3px 8px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 13.5px 100%/3px 11px no-repeat}
.wifi{width:14px; height:10px; background:var(--ink);
  -webkit-mask:conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 0);
  mask:conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 0)}
.bat{width:22px; height:11px; border-radius:3px; border:1.5px solid var(--ink); position:relative}
.bat::before{content:''; position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:72%; background:var(--green); border-radius:1px}
.bat::after{content:''; position:absolute; right:-3.5px; top:3px; width:2px; height:4px; background:var(--ink); border-radius:0 2px 2px 0}
.scr-appbar{display:flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:600;
  padding:8px 16px 12px; background:linear-gradient(135deg,var(--purple-dark),var(--purple))}
.scr-appbar img{height:20px; width:auto}
.scr-more{margin-left:auto; font-size:16px; letter-spacing:1px}
.scr-body{flex:1; background:#fff; padding:14px 14px 8px; overflow:hidden}
.ph2-photo{position:relative; height:120px; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end;
  background:linear-gradient(135deg,#9aa2be,#5b6591)}
.ph2-photo::after{content:'🏗️'; position:absolute; inset:0; display:grid; place-items:center; font-size:42px; opacity:.85}
.ph2-pin{position:absolute; top:32%; left:44%; font-size:24px; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.ph2-cap{position:relative; z-index:2; background:rgba(28,15,56,.74); color:#fff; font-size:10.5px; padding:5px 9px; margin:8px; border-radius:8px}
.ph2-fields{display:flex; gap:7px; margin:12px 0}
.ph2-pill{background:#F5EDFB; color:var(--purple-dark); font-size:10.5px; font-weight:600; padding:5px 10px; border-radius:999px}
.ph2-steps{display:flex; gap:5px; margin-bottom:13px}
.ph2-step{flex:1; text-align:center; font-size:9.5px; font-weight:600; color:var(--mist); background:var(--bg); border-radius:7px; padding:6px 2px}
.ph2-step.done{background:#EAF6ED; color:#2f7d45}
.ph2-step.done::before{content:'✓ '}
.scr-nav{display:flex; justify-content:space-around; background:#fff; padding:11px 0 8px; font-size:18px; border-top:1px solid var(--line)}
.scr-nav span{opacity:.38; transition:.15s}
.scr-nav .active{opacity:1; filter:drop-shadow(0 2px 5px rgba(120,43,132,.45))}
.device-home{display:block; width:110px; height:5px; border-radius:3px; background:#1c1c22; margin:0 auto 8px}

/* Floor plan */
.fplan-wrap{display:grid; grid-template-columns:1fr 200px; gap:14px; align-items:stretch}
.fplan{
  position:relative; display:grid; gap:6px; height:230px; padding:6px;
  background:#FAFAFE; border:1px solid var(--line); border-radius:12px;
  grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr 0.7fr;
  grid-template-areas:"sejour cuisine" "sejour chambre" "tech sdb";
}
.froom{border:1.5px solid #D8DDEE; border-radius:8px; background:#fff; display:flex; align-items:flex-start; padding:7px 9px; position:relative}
.froom span{font-size:10.5px; color:var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.froom--tech{background:#F5EDFB; border-color:#E0CCF0}
.fpin{
  align-self:center; justify-self:center; width:30px; height:30px; border:none; cursor:pointer;
  background:var(--purple); color:#fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  font-size:13px; font-weight:700; box-shadow:var(--shadow); transition:.15s; z-index:2;
}
.fpin > *{transform:rotate(45deg)}
.fpin{display:grid; place-items:center}
.fpin span{transform:rotate(45deg)}
.fpin--warn{background:#c0392b}
.fpin:hover{transform:rotate(-45deg) scale(1.12)}
.fpin.sel{box-shadow:0 0 0 4px rgba(120,43,132,.28)}
.fpin--warn.sel{box-shadow:0 0 0 4px rgba(192,57,43,.28)}
.fplan-detail{background:#FAFAFE; border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; justify-content:center}
.fpd-empty{font-size:12.5px; color:var(--mist); text-align:center}
.fpd-t{font-size:13px; font-weight:600; color:var(--purple-dark); margin-bottom:6px}
.fpd-d{font-size:12px; color:var(--slate); line-height:1.5; margin-bottom:10px}
.fpd-sev{align-self:flex-start; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px}
.fplan-legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--slate)}
.fplan-legend span{display:flex; align-items:center; gap:7px}
.fpin-mini{width:19px; height:19px; background:var(--purple); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700}
.fpin-mini.warn{background:#c0392b}

/* Réserve cards */
.res-list{display:flex; flex-direction:column; gap:10px}
.res-item{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; border-left:4px solid var(--mist); transition:.15s}
.res-item:hover{box-shadow:var(--shadow)}
.res-item.sev-high{border-left-color:#c0392b}
.res-item.sev-med{border-left-color:#e0a72e}
.res-item.sev-done{border-left-color:var(--green); opacity:.85}
.res-sev{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; width:64px; flex-shrink:0}
.sev-high .res-sev{color:#c0392b} .sev-med .res-sev{color:#c9820a} .sev-done .res-sev{color:#2f7d45}
.res-main{flex:1; min-width:0}
.res-main b{font-size:13.5px}
.res-meta{font-size:12px; color:var(--mist); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.res-thumbs{display:flex; align-items:center; gap:6px}
.thumb{width:44px; height:40px; border-radius:8px; background:var(--bg); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:15px}
.thumb i{font-size:8px; color:var(--mist); font-style:normal}
.thumb.todo{background:#FEF3E2; border-color:#F5D79E}
.thumb.ok{background:#EAF6ED; border-color:#B9E2C4}
.thumb-arrow{color:var(--mist); font-size:12px}
.fpd-sev.sev-high{background:#FDE8EA; color:#c0392b}
.fpd-sev.sev-med{background:#FEF3E2; color:#c9820a}
.fpd-sev.sev-done{background:#EAF6ED; color:#2f7d45}

/* PV v2 */
.pv2{border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff}
.pv2-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--purple); padding-bottom:11px}
.pv2-logo{font-family:'Jost',sans-serif; letter-spacing:.22em; color:var(--purple); font-size:15px; font-weight:500}
.pv2-logo small{display:block; letter-spacing:.08em; font-size:8px; color:var(--mist); margin-top:3px; font-weight:400}
.pv2-ref{text-align:right; font-size:14px; font-weight:700; color:var(--purple-dark)}
.pv2-ref span{display:block; font-size:11px; color:var(--mist); font-weight:400}
.pv2-title{font-size:13px; font-weight:600; margin:12px 0}
.pv2-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.pv2-stats div{background:#FAFAFE; border-radius:10px; padding:11px; text-align:center}
.pv2-stats b{display:block; font-size:20px; color:var(--purple-dark); font-weight:700}
.pv2-stats span{font-size:10.5px; color:var(--mist)}
.pv2-list{margin:0; padding-left:18px; font-size:12.5px; color:var(--slate); line-height:1.7}
.conv-date.past{background:var(--mist)}
.convoc + .convoc{border-top:1px solid var(--line); margin-top:4px; padding-top:12px}

@media(max-width:1024px){
  .fplan-wrap{grid-template-columns:1fr}
}
@media(max-width:640px){
  .res-item{flex-wrap:wrap}
  .res-thumbs{order:3}
}

/* Lien retour au site depuis la plateforme */
.sidebar-back{text-decoration:none; transition:.15s; display:block}
.sidebar-back:hover{color:var(--green)}
.sidebar-brand:hover{opacity:.85}

/* ============================================================
   Polish visuel global (desktop & large screens)
   ============================================================ */
.main{max-width:1280px; margin:0 auto}
@media(min-width:1600px){ .main{max-width:1420px} }

/* Cartes : ombre douce + micro-relief au survol */
.card{transition:box-shadow .2s, transform .2s, border-color .2s}
.card:hover{box-shadow:0 10px 30px rgba(34,37,61,.09)}

/* Sidebar : scrollbar discrète */
.sidebar-nav{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2); border-radius:6px}

/* Barre d'accent verte sur le module actif */
.mod--active::before{content:''; position:absolute; left:-16px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--green)}

/* Topbar plus aérée + séparateur subtil */
.topbar{padding-bottom:16px; border-bottom:1px solid var(--line)}

/* Focus visible accessible sur les champs & boutons */
.btn:focus-visible, input:focus-visible, .mod:focus-visible{outline:2px solid var(--purple-light); outline-offset:2px}

/* Empêche les débordements de tableaux sur petits écrans */
.tbl, .fees{max-width:100%}

/* ============================================================
   Icônes de ligne dans le contenu (.ic) + toast de démo
   ============================================================ */
.ic{width:1.05em; height:1.05em; vertical-align:-.15em; flex:0 0 auto; display:inline-block}
.card-h .ic, .ai-h .ic{opacity:.9}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(18px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:12px; font-size:13.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.25s;
  z-index:200; display:flex; align-items:center; gap:9px; max-width:90vw;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .ic{color:var(--green); width:18px; height:18px}

/* ============================================================
   F5.2 — Trésorerie prévisionnelle (graphique d'aire)
   ============================================================ */
.cf-stats{display:flex; gap:11px; margin:6px 0 16px; flex-wrap:wrap}
.cf-stat{display:flex; align-items:center; gap:10px; background:#FAFAFE; border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; flex:1; min-width:135px}
.cf-stat b{font-size:16px; font-weight:700; color:var(--ink); display:block; line-height:1.15}
.cf-stat small{font-size:10.5px; color:var(--mist)}
.cf-dot{width:11px; height:11px; border-radius:3px; flex-shrink:0}
.cf-dot.in{background:var(--green)}
.cf-dot.out{background:var(--purple-light)}
.cf-stat--net{background:linear-gradient(135deg,#EAF6ED,#f4fbf6); border-color:#B9E2C4}
.cf-stat--net b{color:#2f7d45}
.cf-up{width:20px; height:20px; margin-left:auto; color:#2f7d45}

.cf-chart{margin-top:4px}
.cf-chart svg{width:100%; height:auto; display:block; overflow:visible;
  font-family:'Inter',sans-serif}
.cf-grid line{stroke:var(--line); stroke-width:1}
.cf-grid .cf-axis{stroke:#CED6EA}
.cf-ylab text{font-size:11px; fill:var(--mist); text-anchor:end}
.cf-xlab text{font-size:11px; fill:var(--slate); text-anchor:middle}
.cf-seuil{stroke:#e0a72e; stroke-width:1.4; stroke-dasharray:5 4}
.cf-seuil-lab{font-size:10px; fill:#c9820a; text-anchor:end}
.cf-pt circle{fill:#fff; stroke:#4fa866; stroke-width:2.6}
.cf-pt .cf-pt--end{stroke:var(--green); stroke-width:3; filter:drop-shadow(0 3px 6px rgba(101,188,123,.5))}
.cf-pt text{font-size:11.5px; font-weight:700; fill:#2f7d45; text-anchor:middle}

/* ============================================================
   Ruban démo · séparateur menu · Tableau de bord
   ============================================================ */
.demo-ribbon{display:flex; align-items:center; gap:10px; background:#FEF3E2; border:1px solid #F5D79E;
  color:#8a5a00; font-size:12.5px; padding:9px 14px; border-radius:11px; margin-bottom:16px}
.dr-badge{background:#e0a72e; color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 8px; border-radius:6px}
.dr-close{margin-left:auto; background:none; border:none; color:#b3852a; font-size:20px; line-height:1; cursor:pointer; padding:0 4px}
.dr-close:hover{color:#8a5a00}

.sidebar-sep{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#8E7FBF; font-weight:600;
  padding:12px 11px 5px; margin-top:4px}

.dash-link{margin-left:auto; font-size:12px; font-weight:600; color:var(--purple-vivid); text-decoration:none}
.dash-link:hover{text-decoration:underline}
.dash-relances{display:flex; flex-direction:column; gap:10px}
.dash-re{display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:13px}
.dash-re b{font-size:13.5px}

.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:4px}
.quick-item{display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:12px;
  padding:13px; text-decoration:none; color:var(--ink); transition:.18s; background:#fff}
.quick-item:hover{border-color:var(--purple-light); box-shadow:var(--shadow); transform:translateY(-2px)}
.quick-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg,#F5EDFB,#EAF6ED); color:var(--purple)}
.quick-ico svg{width:20px; height:20px}
.quick-body{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.quick-body b{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.quick-body small{font-size:10.5px; color:var(--mist)}
@media(max-width:1024px){ .quick{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .quick{grid-template-columns:1fr} }

/* Graphiques P2 (barres) & RH (charge) */
.bc-val text{font-size:11px; font-weight:700; fill:var(--purple-dark); text-anchor:middle}
.barchart svg{overflow:visible}
.ch-pt circle{fill:#fff; stroke:#c0392b; stroke-width:2.6}

@media(max-width:640px){ .a4-grid2{grid-template-columns:1fr; gap:16px} }

/* ============================================================
   Ventes — KPIs héros + mini graphique CA dynamique
   ============================================================ */
.kpis--hero .kpi{padding:20px 22px; border-left:4px solid var(--purple-light); transition:.18s}
.kpis--hero .kpi:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.kpis--hero .kpi-val{font-family:'Jost',sans-serif; font-size:32px; font-weight:500; letter-spacing:-.01em}
.kpis--hero .kpi-lab{font-size:11.5px}
.kpi--green{border-left-color:var(--green) !important}
.kpi--amber{border-left-color:#e0a72e !important}

.minichart{position:relative}
.minichart svg{width:100%; height:auto; display:block; overflow:visible; font-family:'Inter',sans-serif}
.mini-bar{
  transform-box:fill-box; transform-origin:bottom;
  animation:growBar .7s cubic-bezier(.2,.8,.3,1) both;
  cursor:pointer; transition:filter .15s;
}
.mini-bar:hover{filter:brightness(1.18) saturate(1.15)}
.mini-bar:nth-of-type(1){animation-delay:.05s}
.mini-bar:nth-of-type(2){animation-delay:.13s}
.mini-bar:nth-of-type(3){animation-delay:.21s}
.mini-bar:nth-of-type(4){animation-delay:.29s}
.mini-bar:nth-of-type(5){animation-delay:.37s}
.mini-bar:nth-of-type(6){animation-delay:.45s}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.charttip{
  position:absolute; pointer-events:none; z-index:5; white-space:nowrap;
  background:var(--ink); color:#fff; font-size:11.5px; font-weight:600;
  padding:5px 10px; border-radius:7px; transform:translate(-50%,-130%);
  opacity:0; transition:opacity .12s; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.charttip.show{opacity:1}
.charttip::after{content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink)}

/* ============================================================
   RH — graphiques animés
   ============================================================ */
/* Barres de charge : croissance à l'affichage */
.ch-track i{transform-origin:left; animation:growW .9s cubic-bezier(.2,.8,.3,1) both}
.ch-row:nth-child(1) .ch-track i{animation-delay:.05s}
.ch-row:nth-child(2) .ch-track i{animation-delay:.18s}
.ch-row:nth-child(3) .ch-track i{animation-delay:.31s}
@keyframes growW{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ch-row:hover .ch-track i{filter:brightness(1.12)}

/* Courbe de projection : tracé progressif + aire en fondu */
.draw-line{stroke-dasharray:700; stroke-dashoffset:700; animation:drawLine 1.6s .25s ease-out forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.chart-area{opacity:0; animation:fadeArea .7s 1.2s ease forwards}
@keyframes fadeArea{to{opacity:1}}
.chart-pts circle{opacity:0; animation:fadeArea .4s 1.5s ease forwards}

/* Survol : zones invisibles + point marqueur */
.hov-zone{fill:transparent; cursor:crosshair}
#chHoverDot{opacity:0; transition:opacity .12s; pointer-events:none; filter:drop-shadow(0 2px 5px rgba(122,79,192,.5))}
#chHoverDot.on{opacity:1}

/* ============================================================
   Modales génériques (vcOpen)
   ============================================================ */
.vcm-overlay{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px;
  background:rgba(20,10,40,.45); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease;
}
.vcm-overlay.on{opacity:1}
.vcmodal{
  background:#fff; border-radius:16px; width:560px; max-width:94vw; max-height:86vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 80px rgba(20,10,40,.45);
  transform:translateY(14px) scale(.98); transition:transform .18s ease;
}
.vcm-overlay.on .vcmodal{transform:none}
.vcm-head{display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--line)}
.vcm-title{font-size:16px; font-weight:600}
.vcm-sub{font-size:12.5px; color:var(--mist); margin-top:2px}
.vcm-close{margin-left:auto; background:none; border:none; font-size:24px; line-height:1; color:var(--mist); cursor:pointer; padding:0 4px; border-radius:8px}
.vcm-close:hover{color:var(--ink); background:var(--bg)}
.vcm-body{padding:18px 20px; overflow-y:auto; font-size:13.5px}
.vcm-body p{margin:0 0 10px}
.vcm-foot{display:flex; justify-content:flex-end; gap:9px; padding:14px 20px; border-top:1px solid var(--line); background:#FAFAFE}
.vcmodal textarea{
  width:100%; min-height:120px; border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink); resize:vertical; outline:none;
}
.vcmodal textarea:focus{border-color:var(--purple); box-shadow:0 0 0 3px rgba(120,43,132,.1)}
.vcm-mail{background:#FAF8FE; border:1px dashed #D8C7EC; border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--slate); margin-bottom:12px}
.vcm-mail b{color:var(--ink)}
.vcm-est{display:flex; align-items:center; gap:10px; background:#EAF6ED; border:1px solid #B9E2C4; border-radius:10px; padding:11px 14px; font-size:13px; color:#2f7d45; font-weight:600}
.vcm-kv{display:grid; grid-template-columns:130px 1fr; gap:5px 12px; font-size:12.5px; margin-bottom:12px}
.vcm-kv dt{color:var(--mist)} .vcm-kv dd{margin:0; font-weight:500}

/* ============================================================
   Couche globale « motion & polish » — toutes les pages
   ============================================================ */
::selection{background:#E7D6F0; color:var(--purple-dark)}

/* Entrée en cascade des cartes et KPI (activée par JS via body.anim) */
@keyframes cardIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@keyframes fadeDown{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
body.anim .main > .topbar{animation:fadeDown .45s ease both}
body.anim .main .card, body.anim .main .kpi{animation:cardIn .55s cubic-bezier(.2,.8,.3,1) both}

/* Boutons : dégradé + retour tactile */
.btn--primary{background:linear-gradient(135deg,var(--purple) 0%, var(--purple-vivid) 100%)}
.btn--primary:hover{background:linear-gradient(135deg,var(--purple-vivid) 0%, var(--purple-light) 100%)}
.btn:active{transform:scale(.97)}
.btn{will-change:transform}

/* Sidebar : glissement et zoom d'icône au survol */
.mod{transition:background .16s, color .16s, transform .16s}
.mod:hover{transform:translateX(3px)}
.mod-icon svg{transition:transform .18s}
.mod:hover .mod-icon svg{transform:scale(1.14)}
.mod--active:hover{transform:none}

/* Accès rapide & éléments interactifs : retour visuel */
.quick-item:active{transform:scale(.98)}
.st{transition:background .2s, color .2s}
.chip{transition:.15s}

/* Tableaux : lignes plus vivantes */
.tbl tbody tr{transition:background .13s}

/* Barre de défilement discrète (zone principale) */
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-thumb{background:#CBBFE3; border-radius:8px; border:2px solid var(--bg)}
body::-webkit-scrollbar-thumb:hover{background:var(--purple-light)}
body::-webkit-scrollbar-track{background:var(--bg)}

/* Ruban démo : plus discret */
.demo-ribbon{opacity:.92}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important}
}

/* ============================================================
   Livrables — bibliothèque CFC interactive + génération IA
   ============================================================ */
.bloc-toggle{
  margin-left:auto; flex-shrink:0; font-family:inherit; font-size:11px; font-weight:700;
  border-radius:999px; padding:4px 11px; border:1px solid var(--line); background:#fff;
  color:var(--slate); cursor:pointer; transition:.15s;
}
.bloc-toggle:hover{border-color:var(--purple); color:var(--purple)}
.bloc-toggle.on{background:#EAF6ED; border-color:#B9E2C4; color:#2f7d45}
.bloc--off{opacity:.55; background:#FAFAFE}
.bloc--off .bloc-text{color:var(--mist)}
.bloc--custom{border-left:3px solid var(--purple-light)}
.bloc-ia{font-size:9.5px; font-weight:800; letter-spacing:.05em; color:var(--purple-vivid);
  background:#F5EDFB; padding:3px 8px; border-radius:999px; text-transform:uppercase}

.ai-gen{display:flex; gap:8px; margin-bottom:12px}
.ai-inp{flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font-family:inherit; font-size:13px; color:var(--ink); outline:none; transition:.15s}
.ai-inp:focus{border-color:var(--purple); box-shadow:0 0 0 3px rgba(120,43,132,.1)}
.ai-inp::placeholder{color:var(--mist)}

#aiDraft{margin-bottom:10px}
#aiDraft:empty{display:none}
.bloc--ai{border:1px dashed #D8C7EC; background:#FDFBFF}
.bloc-prompt{font-size:11.5px; color:var(--purple-vivid); font-style:italic; margin:2px 0 7px}
.bloc-actions{display:flex; gap:7px; justify-content:flex-end; margin-top:10px}
.typing-caret::after{content:'▍'; color:var(--purple-vivid); animation:caretBlink .8s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}