/* Delta Prospect - maquette. Ossature reprise de nos apps maison,
   recoloree sur l'identite bleue de Delta Electric International. */
:root{
  --accent:#08a0e1;          /* bleu exact du logo Delta */
  --accent-deep:#0072a8;
  --accent-ink:#ffffff;
  --miami:#00c2b2;           /* turquoise de contraste */
  --ok:#12a150; --warn:#e08a00; --danger:#e0364f; --info:#3b82f6;
  --bg-grad1:#eaf2f9; --bg-grad2:#f8fbfe;
  --surface:#ffffff; --surface-2:#f4f9fd;
  --text:#0c1f2e; --muted:#5b7488; --faint:#8ba2b5;
  --border:#e0eaf2; --border-strong:#c9d9e6;
  --radius:16px;
  --shadow:0 1px 2px rgba(12,31,46,.04),0 6px 20px rgba(12,31,46,.06);
  --shadow-lift:0 10px 34px rgba(12,31,46,.13);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--text);
  background:
    radial-gradient(1100px 560px at 100% -12%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 62%),
    radial-gradient(900px 480px at -10% 8%, color-mix(in srgb,var(--miami) 11%,transparent), transparent 60%),
    linear-gradient(180deg,var(--bg-grad1),var(--bg-grad2));
  background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
svg{flex:none}

/* --- Topbar --- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;
  padding:13px 26px;background:color-mix(in srgb,var(--surface) 84%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.3px;font-size:1.08rem}
.brand .dot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 42%,transparent)}
.brand .dot svg{width:19px;height:19px}
/* Variante « logo client » : la marque bleue a besoin d'un fond clair. */
.brand .dot.logo{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);padding:4px}
.brand .dot.logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand .sub{font-weight:600;color:var(--faint);font-size:.74rem;margin-left:3px;letter-spacing:0}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{padding:8px 14px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--muted);transition:.15s;white-space:nowrap}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.spacer{flex:1}
.mockchip{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 13%,transparent);padding:6px 11px;border-radius:99px;letter-spacing:.2px}
.mockchip .bl{width:7px;height:7px;border-radius:99px;background:var(--warn);animation:bl 1.8s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.who{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;color:var(--muted)}
.who .av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:.78rem;font-weight:800;
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-deep)}

/* --- Layout --- */
.container{max-width:1240px;margin:0 auto;padding:28px 26px 90px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:1.65rem;font-weight:800;letter-spacing:-.6px}
.page-head .sub{color:var(--muted);font-size:.92rem;margin-top:5px;max-width:70ch}
.page-head .actions{display:flex;gap:10px;flex-wrap:wrap}

/* --- Boutons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:11px;
  border:1px solid transparent;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.9rem;
  cursor:pointer;transition:.15s;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:var(--surface);color:var(--muted);border-color:var(--border);box-shadow:var(--shadow)}
.btn.ghost:hover{color:var(--text);border-color:var(--border-strong)}
.btn.sm{padding:8px 13px;font-size:.82rem}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* --- Cartes / tuiles --- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:20px;box-shadow:var(--shadow)}
.card h3{font-size:.95rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3 .h3t{display:flex;align-items:center;gap:8px;min-width:0}
.card h3 svg{width:15px;height:15px;color:var(--accent)}
.cardact{font-size:.78rem;font-weight:700;color:var(--accent);cursor:pointer;background:none;border:none}
.cardact:hover{text-decoration:underline}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:22px}
.tiles>*{min-width:0}
.tiles.t4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.tiles.t4{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:16px 18px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.tile .lab{font-size:.77rem;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}
.tile .lab svg{width:13px;height:13px;color:var(--faint)}
.tile .val{font-size:1.8rem;font-weight:800;letter-spacing:-1px;line-height:1.1}
.tile .val.a{color:var(--accent-deep)}
.tile .val.m{color:var(--miami)}
.tile .hint{font-size:.75rem;color:var(--faint);font-weight:600}
.cols{display:grid;gap:16px}
.cols.c2{grid-template-columns:1fr 1fr}
.cols.c23{grid-template-columns:1.6fr 1fr}
.cols>*{min-width:0}

/* --- Badges --- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge.neutral{background:color-mix(in srgb,#94a3b8 20%,transparent);color:#5b7488}
.badge.info{background:color-mix(in srgb,var(--info) 15%,transparent);color:#2563eb}
.badge.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:#0d7f3f}
.badge.warn{background:color-mix(in srgb,var(--warn) 17%,transparent);color:#a86400}
.badge.danger{background:color-mix(in srgb,var(--danger) 14%,transparent);color:#c02540}
.badge.accent{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-deep)}
.badge.miami{background:color-mix(in srgb,var(--miami) 18%,transparent);color:#00867b}

/* --- Tables --- */
.tablewrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
table.t{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
table.t th{text-align:left;padding:11px 14px;font-size:.71rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--faint);border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
table.t td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr{transition:.12s}
table.t tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
table.t tbody tr.clickable{cursor:pointer}
.strong{font-weight:700}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* --- Formulaires --- */
.field{margin-bottom:18px}
.field>label{display:block;font-weight:700;font-size:.86rem;margin-bottom:8px}
.inp{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);
  color:var(--text);font-size:.92rem;outline:none;transition:.15s}
.inp:focus{border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
textarea.inp{resize:vertical;min-height:96px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint2{font-size:.78rem;color:var(--faint);margin-top:6px}

/* --- Barre de progression --- */
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--miami));
  transition:width .6s cubic-bezier(.4,0,.2,1)}

/* --- Entonnoir --- */
.funnel{display:flex;flex-direction:column;gap:9px}
.fstep{display:flex;align-items:center;gap:12px}
.fstep .fl{width:170px;font-size:.83rem;color:var(--muted);font-weight:600;flex:none}
.fstep .fb{flex:1;height:30px;border-radius:8px;background:var(--surface-2);overflow:hidden;position:relative}
.fstep .fb i{display:block;height:100%;border-radius:8px;opacity:.85;transition:width .8s cubic-bezier(.4,0,.2,1)}
.fstep .fv{width:56px;text-align:right;font-weight:800;font-size:.95rem;flex:none;font-variant-numeric:tabular-nums}

/* --- Liste d'activite --- */
.feed{display:flex;flex-direction:column;gap:2px}
.fitem{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border)}
.fitem:last-child{border-bottom:none}
.fitem .fd{width:9px;height:9px;border-radius:99px;margin-top:6px;flex:none;background:var(--faint)}
.fitem.accent .fd{background:var(--accent)} .fitem.ok .fd{background:var(--ok)}
.fitem.info .fd{background:var(--info)} .fitem.neutral .fd{background:var(--faint)}
.fitem .ft{font-weight:700;font-size:.87rem}
.fitem .fs{color:var(--muted);font-size:.83rem;margin-top:2px}
.fitem .fw{color:var(--faint);font-size:.76rem;margin-left:auto;white-space:nowrap;font-weight:600}

/* --- Modale --- */
.overlay{position:fixed;inset:0;background:rgba(9,26,40,.45);backdrop-filter:blur(3px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:18px;width:min(920px,100%);max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lift);animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.modal .mhead{padding:20px 24px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px}
.modal .mhead h3{font-size:1.15rem;font-weight:800}
.modal .mbody{padding:20px 24px;overflow-y:auto}
.modal .mfoot{padding:13px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:var(--surface-2)}
.xbtn{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;flex:none}
.xbtn:hover{color:var(--text);border-color:var(--border-strong)}
.recap{white-space:pre-wrap;font-size:.87rem;line-height:1.62;background:var(--surface-2);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:15px 17px;color:var(--text)}

/* --- Divers --- */
.sectitle{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);margin:26px 0 12px}
.toolbar{display:flex;gap:11px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.searchbox{flex:1;min-width:210px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:0 14px;box-shadow:var(--shadow)}
.searchbox svg{width:17px;height:17px;color:var(--faint)}
.searchbox input{flex:1;border:none;background:none;outline:none;font-size:.92rem;padding:11px 0;color:var(--text)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);
  color:#fff;padding:13px 22px;border-radius:12px;font-weight:600;font-size:.89rem;opacity:0;pointer-events:none;
  transition:.25s;z-index:90;box-shadow:var(--shadow-lift)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.linkbox{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px dashed var(--border-strong);
  border-radius:11px;padding:11px 14px;font-size:.86rem;font-weight:600;color:var(--accent-deep);word-break:break-all}
.linkbox svg{width:16px;height:16px;color:var(--accent)}
.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty .eico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin:0 auto 13px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.empty .eico svg{width:25px;height:25px}
.empty .et{font-weight:800;color:var(--text);font-size:1.05rem}

@media(max-width:900px){
  .cols.c2,.cols.c23{grid-template-columns:1fr}
  .nav{display:none}
  .container{padding:22px 16px 70px}
  .frow{grid-template-columns:1fr}
}