* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  padding: 32px 16px;
}
.card {
  max-width: 720px;
  margin: 0 auto;
  background: #1e293b;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.card.wide { max-width: 940px; }
h1 { margin-top: 0; font-size: 2rem; letter-spacing: -.5px; }
.tagline { color: #94a3b8; line-height: 1.6; }
.form { display: flex; flex-direction: column; gap: 18px; margin: 24px 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
input[type=text] {
  padding: 12px; border-radius: 8px; border: 1px solid #334155;
  background: #0f172a; color: #e2e8f0; font-size: 1rem;
}
.consent { flex-direction: row; align-items: flex-start; gap: 10px;
  color: #cbd5e1; font-size: .9rem; }
button {
  padding: 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: #38bdf8; color: #0f172a; font-weight: 700; font-size: 1rem;
}
button:hover { background: #0ea5e9; }
.alert { background: #7f1d1d; color: #fecaca; padding: 12px 16px;
  border-radius: 8px; margin-bottom: 16px; }
.how { border-top: 1px solid #334155; padding-top: 20px; color: #94a3b8; }
.how ol { line-height: 1.7; }
.legal { font-size: .8rem; color: #64748b; }
.back { color: #38bdf8; text-decoration: none; }
.meta { color: #94a3b8; font-size: .9rem; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #334155; }
th { color: #94a3b8; font-size: .85rem; text-transform: uppercase; }
.tag { padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.tag.bad { background: #7f1d1d; color: #fecaca; }
.tag.warn { background: #78350f; color: #fed7aa; }
.tag.ok { background: #14532d; color: #bbf7d0; }
.score { display: flex; align-items: center; gap: 20px; margin: 20px 0;
  padding: 20px; border-radius: 12px; background: #0f172a; }
.score .grade { font-size: 3rem; font-weight: 800; width: 70px;
  height: 70px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; }
.grade-A .grade { background:#14532d; color:#bbf7d0; }
.grade-B .grade { background:#365314; color:#d9f99d; }
.grade-C .grade { background:#78350f; color:#fed7aa; }
.grade-D .grade { background:#7c2d12; color:#fecaca; }
.grade-E .grade { background:#7f1d1d; color:#fecaca; }
.score-detail span { display:block; color:#94a3b8; font-size:.85rem; }
.finding { background: #0f172a; border-radius: 10px; padding: 18px;
  margin: 14px 0; border-left: 5px solid #475569; }
.finding header { display: flex; align-items: center; gap: 12px; }
.finding h3 { margin: 0; font-size: 1.05rem; }
.finding p { line-height: 1.55; color: #cbd5e1; }
.finding .fix { color: #bbf7d0; }
.sev { font-size: .72rem; font-weight: 800; padding: 4px 8px;
  border-radius: 6px; background:#334155; }
.sev-critique { border-left-color:#ef4444; }
.sev-critique .sev { background:#7f1d1d; color:#fecaca; }
.sev-elevee { border-left-color:#f97316; }
.sev-elevee .sev { background:#78350f; color:#fed7aa; }
.sev-moyenne { border-left-color:#eab308; }
.sev-faible { border-left-color:#38bdf8; }
.ok-msg { color:#bbf7d0; }
details { margin-top: 8px; color:#64748b; }
code { background:#1e293b; padding:2px 6px; border-radius:4px; }

.topbar { display:flex; justify-content:space-between; align-items:center; }
.link { color:#38bdf8; text-decoration:none; font-size:.9rem; }
.cve-bar { background:#0f172a; border:1px solid #334155; border-radius:8px;
  padding:10px 14px; margin:16px 0; font-size:.9rem; color:#cbd5e1; }
.mini { padding:6px 10px; font-size:.8rem; margin-left:8px; width:auto; }
.warn-msg { color:#fed7aa; }
.delta { background:#0f172a; border-left:4px solid #38bdf8; padding:12px 16px;
  border-radius:8px; margin:14px 0; color:#cbd5e1; line-height:1.5; }
.cve { background:#0f172a; border-radius:10px; padding:14px;
  margin:10px 0; border-left:5px solid #ef4444; }
.cve p { color:#cbd5e1; margin:6px 0; line-height:1.5; }
.cve a { color:#38bdf8; }
.plan { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.action { display:flex; gap:12px; align-items:flex-start; background:#0f172a;
  padding:12px 14px; border-radius:8px; border-left:5px solid #475569; }
.action small { color:#94a3b8; }
.risk-sans_risque { border-left-color:#22c55e; }
.risk-modere { border-left-color:#eab308; }
.risk-coupure { border-left-color:#ef4444; }
.transport { border:1px solid #334155; border-radius:8px; padding:14px;
  margin:14px 0; color:#cbd5e1; }
.transport legend { padding:0 8px; color:#94a3b8; }
.transport label { flex-direction:row; gap:8px; align-items:center;
  margin:6px 0; }
.ssh-fields { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ssh-fields input { flex:1 1 200px; }
.rollback-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.rollback-form input { flex:1 1 160px; }
button.danger { background:#ef4444; color:#fff; }
button.danger:hover { background:#dc2626; }
.grade-tag { font-weight:800; }
.grade-tag.grade-A { background:#14532d; color:#bbf7d0; }
.grade-tag.grade-B { background:#365314; color:#d9f99d; }
.grade-tag.grade-C { background:#78350f; color:#fed7aa; }
.grade-tag.grade-D { background:#7c2d12; color:#fecaca; }
.grade-tag.grade-E { background:#7f1d1d; color:#fecaca; }
.sev.sev-critique { background:#7f1d1d; color:#fecaca; }
.sev.sev-elevee { background:#78350f; color:#fed7aa; }
.sev.sev-moyenne { background:#854d0e; color:#fde68a; }
.sev.sev-faible { background:#334155; color:#cbd5e1; }
.verdict-protege { border-left-color:#22c55e; }
.verdict-protege .sev { background:#14532d; color:#bbf7d0; }
.verdict-vulnerable { border-left-color:#ef4444; }
.verdict-vulnerable .sev { background:#7f1d1d; color:#fecaca; }
.verdict-trop_bloque { border-left-color:#eab308; }
.verdict-trop_bloque .sev { background:#854d0e; color:#fde68a; }
.verdict-non_concluant { border-left-color:#64748b; }
.verdict-non_concluant .sev { background:#334155; color:#cbd5e1; }
.pentest-tabs { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0; }
.ptcard { flex:1 1 240px; background:#0f172a; border:1px solid #334155;
  border-radius:10px; padding:14px; display:flex; flex-direction:column;
  gap:8px; }
.ptcard strong { color:#e2e8f0; }
.ptcard small { color:#94a3b8; line-height:1.4; flex:1; }
.ptcard.lab { border-color:#7f1d1d; }
.ptcard input[type=text] { font-size:.85rem; }
.spark { display:inline-flex; align-items:flex-end; gap:2px; height:38px; }
.spark i { display:block; width:5px; background:#38bdf8; border-radius:1px; }
.row-actions { display:flex; gap:6px; }
.row-actions form { margin:0; }

/* ============ Refonte visuelle v2 ============ */
:root{
  --bg:#0b1120; --bg2:#0f172a; --panel:#16213a; --line:#27324a;
  --txt:#e8eef7; --muted:#9aa9c0; --brand:#3b9cff; --brand2:#22d3ee;
}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#15233f 0,var(--bg) 55%);
  color:var(--txt); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.card{
  background:linear-gradient(180deg,#16223c 0,var(--bg2) 100%);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.card.narrow{max-width:460px;} .center{text-align:center;}
h1{background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:800;}
h2{margin-top:34px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.tagline{color:var(--muted);font-size:1.05rem;}
.topbar{padding-bottom:14px;border-bottom:1px solid var(--line);
  margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.link{padding:4px 0;transition:color .15s;}
.link:hover{color:var(--brand2);}
button,.btn{
  background:linear-gradient(90deg,var(--brand),#2563eb);
  color:#fff;font-weight:700;border:0;border-radius:10px;
  padding:13px 18px;cursor:pointer;transition:transform .08s,filter .15s;
  text-decoration:none;display:inline-block;
}
button:hover,.btn:hover{filter:brightness(1.12);}
button:active{transform:translateY(1px);}
button.mini{background:#243352;color:var(--txt);font-weight:600;}
button.mini:hover{background:#2f4264;}
button.danger,button.mini.danger{
  background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff;}
input,select{
  background:#0c1426;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:12px 13px;font-size:.97rem;
  transition:border .15s,box-shadow .15s;
}
input:focus,select:focus,button:focus-visible{
  outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(59,156,255,.25);
}
input::placeholder{color:#5b6b86;}
.form{gap:16px;} label{font-weight:600;font-size:.92rem;}
table{border-radius:12px;overflow:hidden;}
thead th{background:#101a30;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:#13203a;}
.alert{border:1px solid #ef4444;background:rgba(239,68,68,.12);
  color:#fecaca;border-radius:10px;}
.cve-bar,.delta{border-radius:12px;}
.ptcard{transition:border-color .15s;}
.ptcard:hover{border-color:var(--brand);}
.error-code{font-size:4rem;font-weight:800;color:var(--brand);
  letter-spacing:2px;}
.spark i{background:linear-gradient(180deg,var(--brand2),var(--brand));}
@media (max-width:680px){
  body{padding:14px 8px;} .card{padding:20px;}
  .topbar{flex-direction:column;align-items:flex-start;}
  .pentest-tabs{flex-direction:column;}
}

/* ============ Habillage v3 (premium, sans build) ============ */
:root{ --rad:16px; }
body{ font-feature-settings:"ss01"; }
.card{ backdrop-filter:blur(4px); animation:rise .35s ease both; }
@keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1;} }
h1{ letter-spacing:-.5px; }
h2{ letter-spacing:-.2px; }

.hero{ display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg,#13203b,#0e1830);
  border:1px solid var(--line); border-radius:var(--rad);
  padding:22px 26px; margin:18px 0 8px; }
.hero-title{ margin:0 0 2px; border:0; padding:0; font-size:1.25rem; }
.ring svg{ display:block; }
.ring-bg{ fill:none; stroke:#1f2c46; stroke-width:11; }
.ring-fg{ fill:none; stroke-width:11; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:60px 60px;
  transition:stroke-dashoffset 1s ease; }
.ring-grade{ text-anchor:middle; font-size:30px; font-weight:800;
  fill:#e8eef7; }
.ring-score{ text-anchor:middle; font-size:12px; fill:#9aa9c0; }
.grade-A .ring-fg{ stroke:#22c55e; } .grade-B .ring-fg{ stroke:#84cc16; }
.grade-C .ring-fg{ stroke:#eab308; } .grade-D .ring-fg{ stroke:#f97316; }
.grade-E .ring-fg{ stroke:#ef4444; }
.kpis{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.kpi{ padding:6px 12px; border-radius:999px; font-size:.82rem;
  font-weight:700; background:#1b2942; color:#cbd5e1;
  border:1px solid #2a3a59; }
.kpi.crit{ background:rgba(239,68,68,.16); color:#fecaca;
  border-color:#7f1d1d; }
.kpi.high{ background:rgba(249,115,22,.16); color:#fed7aa;
  border-color:#7c2d12; }
.kpi.cve{ background:rgba(59,156,255,.16); color:#bfdbfe;
  border-color:#1e3a8a; }
.kpi.kev{ background:rgba(239,68,68,.22); color:#fff;
  border-color:#ef4444; animation:pulse 1.8s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 4px rgba(239,68,68,.18);} }

.card{ position:relative; }
button,.btn{ box-shadow:0 6px 18px rgba(37,99,235,.28); }
button.mini{ box-shadow:none; }
.finding{ transition:transform .12s, box-shadow .12s; }
.finding:hover{ transform:translateX(2px);
  box-shadow:-3px 0 0 0 currentColor; }
.tag{ letter-spacing:.2px; }
a.link.active{ color:var(--brand2); font-weight:700; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#243352; border-radius:8px; }
::selection{ background:rgba(59,156,255,.35); }
.steps{ margin:6px 0 2px 18px; color:#cbd5e1; line-height:1.7; }
.steps li{ margin:3px 0; }

/* ============ Design system v4 (pro, sans build) ============ */
:root{
  --bg:#080d1a; --bg2:#0c1426; --panel:#111c33; --line:#222f4a;
  --txt:#eef3fb; --muted:#93a3bd; --brand:#4c9dff; --brand2:#2ee6c5;
  --shadow:0 24px 60px rgba(0,0,0,.5);
}
body{
  background:
    radial-gradient(900px 500px at 100% -5%,rgba(46,230,197,.08),transparent 60%),
    radial-gradient(1100px 600px at -10% 0,rgba(140,100,50,.10),transparent 55%),
    var(--bg);
}
.card{
  background:linear-gradient(180deg,rgba(20,32,56,.92),rgba(10,18,34,.96));
  border:1px solid var(--line); box-shadow:var(--shadow);
  padding:30px 34px;
}
/* En-tête type application */
.topbar{
  position:sticky; top:0; z-index:20; margin:-30px -34px 22px;
  padding:16px 24px; background:rgba(10,17,32,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line); border-radius:18px 18px 0 0;
}
.topbar .brand{display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.15rem; letter-spacing:-.3px;}
.topbar .brand svg{width:26px; height:26px; flex:0 0 auto;}
.topbar .link{font-weight:600; padding:6px 10px; border-radius:8px;}
.topbar .link:hover{background:rgba(140,100,50,.12);}
.topbar .link.active{background:rgba(140,100,50,.16); color:var(--brand2);}

/* Titres de section avec accent */
h2{position:relative; padding-left:14px; border-bottom:0;
  margin-top:38px;}
h2::before{content:""; position:absolute; left:0; top:3px; bottom:3px;
  width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));}

/* Boutons premium */
button,.btn{border-radius:11px; letter-spacing:.2px;
  box-shadow:0 8px 22px rgba(37,99,235,.30); position:relative;
  overflow:hidden;}
button::after,.btn::after{content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-120%); transition:transform .5s;}
button:hover::after,.btn:hover::after{transform:translateX(120%);}

/* Cartes / tuiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px; margin:18px 0;}
.tile{background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:18px 18px;}
.tile .k{font-size:2rem; font-weight:800; line-height:1;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.tile .l{color:var(--muted); font-size:.85rem; margin-top:6px;}

/* Donut (conic-gradient, rendu serveur, sans JS) */
.donut-wrap{display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
.donut{width:150px; height:150px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; position:relative;}
.donut::after{content:""; position:absolute; inset:14px;
  border-radius:50%; background:var(--bg2);}
.donut .center{position:relative; z-index:1; text-align:center;}
.donut .center b{font-size:1.6rem;} .donut .center span{
  display:block; color:var(--muted); font-size:.78rem;}
.legend{display:flex; flex-direction:column; gap:6px;}
.legend .row{display:flex; align-items:center; gap:8px; font-size:.9rem;
  color:#cbd5e1;}
.legend .dot{width:12px; height:12px; border-radius:3px;}

/* États vides soignés */
.empty{text-align:center; padding:34px; color:var(--muted);
  border:1px dashed var(--line); border-radius:14px; background:var(--bg2);}

/* Inputs / tableaux raffinés */
input,select{background:#0a1322;}
tbody tr:nth-child(even){background:rgba(255,255,255,.015);}
th{letter-spacing:.04em;}

/* ===================================================================
   v5 — Landing « showcase » (impactant, sans build JS)
   =================================================================== */
:root{
  --v:#b67c3a;            /* violet accent */
  --glow:0 0 60px rgba(140,100,50,.18);
}
body.landing{
  padding:0; min-height:100vh;
  background:
    radial-gradient(1000px 600px at 85% -8%,rgba(46,230,197,.12),transparent 58%),
    radial-gradient(1200px 700px at -8% 4%,rgba(140,100,50,.16),transparent 55%),
    radial-gradient(900px 600px at 50% 110%,rgba(182,124,58,.12),transparent 60%),
    var(--bg);
}
/* trame technique discrète */
body.landing::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,160,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,220,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(900px 600px at 60% 0,#000,transparent 75%);
  mask-image:radial-gradient(900px 600px at 60% 0,#000,transparent 75%);
}
.lp{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  padding:0 24px 64px;}
.lp-nav{display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; gap:14px; flex-wrap:wrap;}
.lp-logo{display:flex; align-items:center; gap:11px; font-weight:800;
  font-size:1.3rem; letter-spacing:-.4px; color:var(--txt);}
.lp-logo .mark{width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(140,100,50,.45);}
.lp-nav .right{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* HERO */
.hero2{display:flex; gap:46px; align-items:center; flex-wrap:wrap;
  padding:48px 0 30px;}
.hero2 .left{flex:1 1 430px; min-width:300px;}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:.82rem;
  font-weight:700; padding:7px 14px; border-radius:999px; color:#cfe1ff;
  background:rgba(140,100,50,.12); border:1px solid rgba(140,100,50,.35);
  box-shadow:0 0 30px rgba(140,100,50,.25);}
.pill .ball{width:8px; height:8px; border-radius:50%;
  background:var(--brand2); box-shadow:0 0 10px var(--brand2);}
.lp-h1{font-size:3.2rem; line-height:1.04; font-weight:800;
  letter-spacing:-1.5px; margin:18px 0 0;
  background:linear-gradient(120deg,#fff 10%,#bcd4ff 45%,var(--brand2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;}
.lp-h1 em{font-style:normal;
  background:linear-gradient(120deg,var(--brand),var(--v));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;}
.lp-sub{color:#aebcd6; font-size:1.18rem; line-height:1.6;
  margin:20px 0 0; max-width:560px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;
  align-items:center;}
.btn.lg{font-size:1.05rem; padding:16px 26px; border-radius:13px;
  box-shadow:0 14px 34px rgba(37,99,235,.5);}
.btn.ghost{background:transparent; border:1px solid var(--line);
  color:var(--txt); box-shadow:none;}
.btn.ghost:hover{border-color:var(--brand); background:rgba(140,100,50,.08);}
.trust{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px;
  color:var(--muted); font-size:.86rem;}
.trust b{color:var(--txt);}

/* HERO mockup — la vitrine « deux visages » */
.hero2 .right{flex:1 1 420px; min-width:320px;}
.mock{position:relative;
  background:linear-gradient(180deg,rgba(20,32,58,.96),rgba(9,15,30,.98));
  border:1px solid rgba(140,100,50,.28); border-radius:20px; padding:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(140,100,50,.18);}
.mock::before{content:""; position:absolute; inset:-1px; border-radius:20px;
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(46,230,197,.5),transparent 40%,
    rgba(182,124,58,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;}
.mock-head{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 6px 14px; border-bottom:1px solid var(--line);}
.mock-host{display:flex; align-items:center; gap:9px; font-weight:700;
  font-size:.95rem;}
.mock-host .dotrow{display:flex; gap:5px;}
.mock-host .dotrow i{width:9px; height:9px; border-radius:50%; display:block;
  background:#33415a;}
.mock-host .dotrow i:nth-child(1){background:#ef4444;}
.mock-host .dotrow i:nth-child(2){background:#eab308;}
.mock-host .dotrow i:nth-child(3){background:#22c55e;}
.gradeA{display:flex; align-items:center; gap:9px;}
.gradeA .badge{width:40px; height:40px; border-radius:11px; font-weight:800;
  font-size:1.25rem; display:flex; align-items:center; justify-content:center;
  color:#06210f; background:linear-gradient(135deg,#4ade80,#22c55e);
  box-shadow:0 0 26px rgba(34,197,94,.5);}
.gradeA .meta b{display:block; font-size:.95rem;}
.gradeA .meta span{color:var(--muted); font-size:.74rem;}
.mock-cols{display:flex; gap:12px; margin:14px 0;}
.mcol{flex:1; background:rgba(8,14,28,.7); border:1px solid var(--line);
  border-radius:12px; padding:11px 12px;}
.mcol h4{margin:0 0 9px; font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); display:flex; gap:7px;
  align-items:center;}
.mcol.inside h4 span{color:var(--brand2);} .mcol.web h4 span{color:#fca5a5;}
.svc{display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 0; font-size:.82rem; border-top:1px dashed
  rgba(120,160,220,.12);}
.svc:first-of-type{border-top:0;}
.svc .s-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.svc .ok{background:#22c55e; box-shadow:0 0 8px #22c55e;}
.svc .bad{background:#ef4444; box-shadow:0 0 8px #ef4444;}
.svc .name{flex:1; color:#c7d3e8;}
.svc .v{color:var(--muted); font-size:.74rem;}
.mock-alert{display:flex; align-items:center; gap:10px; font-size:.84rem;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3);
  color:#bbf7d0; border-radius:11px; padding:11px 13px; margin-top:4px;}
.mock-alert .ic{font-size:1rem;}

/* STATS band */
.stats{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  margin:34px 0; padding:24px 26px; border-radius:18px;
  background:linear-gradient(180deg,rgba(18,28,50,.7),rgba(10,17,32,.7));
  border:1px solid var(--line);}
.stat{flex:1 1 180px; text-align:center;}
.stat .n{font-size:2.1rem; font-weight:800; line-height:1;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat .t{color:var(--muted); font-size:.84rem; margin-top:6px;}

/* SECTION titles for landing */
.lp h2.sec{font-size:2rem; letter-spacing:-.6px; padding:0; border:0;
  text-align:center; margin:54px 0 6px;}
.lp h2.sec::before{display:none;}
.sec-lead{text-align:center; color:var(--muted); max-width:620px;
  margin:0 auto 26px;}

/* FEATURE cards premium */
.feat-grid{display:flex; flex-wrap:wrap; gap:16px;}
.feat{flex:1 1 300px; background:linear-gradient(180deg,
  rgba(19,29,52,.8),rgba(11,18,34,.85)); border:1px solid var(--line);
  border-radius:16px; padding:22px; transition:transform .15s,
  box-shadow .2s, border-color .2s;}
.feat:hover{transform:translateY(-4px); border-color:rgba(140,100,50,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 30px rgba(140,100,50,.15);}
.feat .ico{width:46px; height:46px; border-radius:13px; display:flex;
  align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px;
  background:linear-gradient(135deg,rgba(140,100,50,.22),rgba(46,230,197,.18));
  border:1px solid rgba(140,100,50,.3);}
.feat h3{margin:0 0 8px; font-size:1.08rem;}
.feat p{margin:0; color:var(--muted); line-height:1.55; font-size:.93rem;}

/* PRICING */
.price-grid{display:flex; flex-wrap:wrap; gap:18px; align-items:stretch;}
.price{flex:1 1 270px; background:linear-gradient(180deg,
  rgba(17,27,49,.85),rgba(10,17,32,.9)); border:1px solid var(--line);
  border-radius:18px; padding:26px; display:flex; flex-direction:column;
  gap:8px;}
.price.popular{border-color:transparent; position:relative;
  box-shadow:0 26px 60px rgba(37,99,235,.35),0 0 0 1px rgba(140,100,50,.6),
    0 0 60px rgba(140,100,50,.25);
  background:linear-gradient(180deg,rgba(24,38,68,.95),rgba(12,20,38,.95));
  transform:scale(1.03);}
.price .ptag{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#04122b;
  font-weight:800; font-size:.72rem; padding:5px 14px; border-radius:999px;
  letter-spacing:.04em; box-shadow:0 8px 20px rgba(140,100,50,.5);}
.price .pname{font-weight:700; color:var(--muted); letter-spacing:.04em;
  text-transform:uppercase; font-size:.82rem;}
.price .amt{font-size:2.3rem; font-weight:800; letter-spacing:-1px;}
.price .amt small{font-size:.95rem; font-weight:600; color:var(--muted);}
.price ul{list-style:none; padding:0; margin:8px 0 16px;
  color:#c7d3e8; font-size:.92rem; line-height:1.5;}
.price ul li{padding:5px 0 5px 24px; position:relative;}
.price ul li::before{content:"✓"; position:absolute; left:0; color:var(--brand2);
  font-weight:800;}
.price .btn{margin-top:auto; text-align:center;}

.lp-foot{text-align:center; color:var(--muted); font-size:.86rem;
  margin-top:54px; padding-top:24px; border-top:1px solid var(--line);}
.lp-foot a{margin:0 4px;}

@media (max-width:720px){
  .lp-h1{font-size:2.3rem;} .hero2{padding:24px 0;}
  .price.popular{transform:none;}
}
.tag,.kpi{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}

/* ===================================================================
   v6 — IDENTITÉ VEILLOX (signature visuelle propriétaire)
   Trois marqueurs :
     1) La marque « œil vigilant » (anneaux concentriques + hex)
     2) Le RADAR « deux visages » (interne vs Internet, dots)
     3) Une couleur signature (« vigilance »): #e0a23d
   =================================================================== */
:root{
  --vigilance:#e0a23d;        /* OR — couleur signature Veillox */
  --night:#0e1019;            /* nuit profonde, légère teinte chaude */
  --mist:#9a8f7e;             /* texte secondaire — taupe chaud */
  --ivory:#ece3d2;            /* texte clair / titres */
  --bronze:#b67c3a;            /* accent secondaire */
}
body.landing{
  background:
    radial-gradient(1100px 700px at 88% -10%,rgba(224,162,61,.14),transparent 55%),
    radial-gradient(1100px 600px at -10% 6%,rgba(182,124,58,.12),transparent 55%),
    radial-gradient(900px 700px at 50% 115%,rgba(140,100,50,.10),transparent 60%),
    var(--night);
}
/* Watermark de « points de veille » dispersés (au lieu d'une grille) */
body.landing::before{
  background-image:
    radial-gradient(circle at 12% 18%, rgba(224,162,61,.25) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(182,124,58,.22) 0 1.5px, transparent 2px),
    radial-gradient(circle at 38% 52%, rgba(224,162,61,.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(140,100,50,.22) 0 1.5px, transparent 2px),
    radial-gradient(circle at 22% 78%, rgba(224,162,61,.18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 62% 88%, rgba(182,124,58,.20) 0 1.5px, transparent 2px);
  background-size: 220px 220px;
  -webkit-mask-image:radial-gradient(900px 700px at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(900px 700px at 50% 30%,#000,transparent 75%);
}

/* Wordmark Veillox : sérif raffiné + ligature visuelle (un point au-dessus du O) */
.vx-word{font-family:ui-serif,Georgia,"Times New Roman",serif;
  font-weight:600; letter-spacing:-.5px; font-size:1.55rem;
  background:linear-gradient(120deg,#f4ede2 10%,var(--vigilance) 90%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; position:relative;}
.vx-word::after{content:""; position:absolute; right:-9px; top:.05em;
  width:7px; height:7px; border-radius:50%; background:var(--vigilance);
  box-shadow:0 0 14px var(--vigilance);}
.vx-logo{display:inline-flex; align-items:center; gap:14px;}
.vx-logo svg{width:38px; height:38px; flex:0 0 auto;
  filter:drop-shadow(0 0 14px rgba(224,162,61,.55));}

/* HERO redéfini autour du RADAR */
.hero2 .lp-h1{
  font-family:ui-serif,Georgia,"Times New Roman",serif; font-weight:600;
  letter-spacing:-1.6px; font-size:3.5rem;
  background:linear-gradient(120deg,#fbf3e2 5%,#f0d9a7 45%,var(--vigilance) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;}
.hero2 .lp-h1 em{font-style:italic;
  background:linear-gradient(120deg,var(--vigilance),#b67c3a);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;}
.pill{background:rgba(224,162,61,.10); border-color:rgba(224,162,61,.45);
  color:#f4ede2; box-shadow:0 0 30px rgba(224,162,61,.25);}
.pill .ball{background:var(--vigilance); box-shadow:0 0 12px var(--vigilance);}
.btn.lg{box-shadow:0 14px 38px rgba(224,162,61,.35);}
.btn.lg:not(.ghost){background:linear-gradient(95deg,#f0c14b 0%,
  var(--vigilance) 55%,#b67c3a 115%); color:#1a1206;}

/* RADAR « deux visages » — visualisation signature */
.vx-radar{position:relative; aspect-ratio:1/1; max-width:460px;
  margin:0 auto;}
.vx-radar svg{width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 70px rgba(224,162,61,.20))
         drop-shadow(0 0 60px rgba(182,124,58,.15));}
.vx-radar .scan-beam{animation:vx-sweep 6s linear infinite;
  transform-origin:230px 230px;}
@keyframes vx-sweep{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.vx-radar .pulse{animation:vx-pulse 1.8s ease-in-out infinite;}
@keyframes vx-pulse{
  0%,100%{opacity:.55; r:5}
  50%{opacity:1; r:7}
}
.vx-radar .ring-label{font:600 10px ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.18em; fill:var(--mist); text-transform:uppercase;}
.vx-radar .score-text{font:700 28px ui-serif,Georgia,serif; fill:#f4ede2;}
.vx-radar .score-sub{font:600 9px ui-monospace,monospace;
  letter-spacing:.14em; fill:var(--vigilance); text-transform:uppercase;}

/* Sous-bloc « légende deux visages » sous le radar */
.vx-legend{display:flex; justify-content:center; gap:22px; margin-top:14px;
  font-size:.84rem; color:var(--mist);}
.vx-legend .lbl{display:inline-flex; align-items:center; gap:7px;}
.vx-legend .swatch{width:10px; height:10px; border-radius:50%;}
.vx-legend .ok{background:var(--vigilance);
  box-shadow:0 0 10px var(--vigilance);}
.vx-legend .bad{background:#ef4444; box-shadow:0 0 10px #ef4444;}

/* Bouton « marque » dans la nav landing */
.lp-logo{font-family:inherit;}
.lp-nav .right .btn{background:linear-gradient(95deg,var(--vigilance),
  #b67c3a); color:#1a1206;
  box-shadow:0 10px 26px rgba(224,162,61,.35);}

/* Petits raffinements pour cohérence */
.feat .ico{background:linear-gradient(135deg,rgba(224,162,61,.25),
  rgba(182,124,58,.22)); border-color:rgba(224,162,61,.35);}
.price.popular{box-shadow:0 26px 60px rgba(224,162,61,.30),
  0 0 0 1px rgba(224,162,61,.65),0 0 70px rgba(224,162,61,.22);}
.price .ptag{background:linear-gradient(90deg,var(--vigilance),#b67c3a);
  color:#1a1206;}
.price ul li::before{color:var(--vigilance);}
.stat .n{background:linear-gradient(90deg,var(--vigilance),#b67c3a);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Titres : passer de cyan/violet à or/bronze partout */
h1{background:linear-gradient(95deg,#f0c14b 0%,var(--vigilance) 60%,
  var(--bronze) 110%); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:ui-serif,Georgia,"Times New Roman",serif; font-weight:600;}
h2{color:var(--ivory);
  font-family:ui-serif,Georgia,"Times New Roman",serif; font-weight:600;
  letter-spacing:-.3px;}
h2::before{background:linear-gradient(180deg,var(--vigilance),
  var(--bronze));}
.link{color:var(--vigilance);}
.link:hover{color:#f0c14b;}

/* Radar inséré dans le rapport (réutilise .vx-radar) */
.vx-radar-report{margin:22px 0 8px; padding:24px 18px;
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg,rgba(18,28,50,.55),rgba(8,14,28,.85));
  text-align:center;}
.vx-radar-report .vx-radar{max-width:420px;}
.topbar .vx-logo svg{width:30px; height:30px;}
.topbar .vx-word{font-size:1.25rem;}

/* ===================================================================
   v7 — Cohérence « Garde de nuit » SUR TOUTES LES PAGES
   (et pas seulement la landing). Polish signature : badge note
   hexagonal, watermark hex sur les cartes, accents dorés.
   =================================================================== */
body{
  background:
    radial-gradient(900px 500px at 100% -5%,rgba(224,162,61,.10),transparent 60%),
    radial-gradient(1100px 600px at -10% 0,rgba(140,100,50,.10),transparent 55%),
    var(--night);
  color:var(--ivory);
}

/* CARTE : trait d'accent doré en haut + watermark hex subtil */
.card{
  background:linear-gradient(180deg,rgba(20,24,40,.92),rgba(10,12,22,.96));
  border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(224,162,61,.18);
  position:relative;
}
.card::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:2px;
  background:linear-gradient(90deg,transparent 0,
    rgba(224,162,61,.6) 35%,rgba(182,124,58,.6) 65%,transparent 100%);
  border-radius:0 0 2px 2px;
}
/* Watermark hex doré, très discret, en bas à droite des cartes larges */
.card.wide::after{
  content:""; position:absolute; right:18px; bottom:18px;
  width:140px; height:160px; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'><path d='M22 3 L39 12 V32 L22 41 L5 32 V12 Z' stroke='%23e0a23d' stroke-width='1.4'/><circle cx='22' cy='22' r='11' stroke='%23e0a23d' stroke-width='1'/><circle cx='22' cy='22' r='7' stroke='%23b67c3a' stroke-width='1'/><circle cx='22' cy='22' r='3' fill='%23e0a23d'/></svg>");
  background-repeat:no-repeat; background-size:contain;
}

/* INPUTS : bord & focus dorés */
input,select,textarea{
  background:#0a0e1a; color:var(--ivory);
  border:1px solid rgba(120,110,90,.25);
}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:0; border-color:var(--vigilance);
  box-shadow:0 0 0 3px rgba(224,162,61,.22);
}
input::placeholder{color:#7a7060;}

/* SCROLLBAR dorée */
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,
  var(--vigilance),var(--bronze)); border-radius:8px;}
::selection{background:rgba(224,162,61,.28); color:#1a1206;}

/* BADGE NOTE HEXAGONAL — signature, remplace le cercle classique */
.grade-hex{
  display:inline-flex; align-items:center; justify-content:center;
  width:90px; height:104px; flex:0 0 auto; position:relative;
  font-family:ui-serif,Georgia,serif; font-weight:700; font-size:2.6rem;
  color:#0a0e1a;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.grade-hex.A{background:linear-gradient(135deg,#a3e635,#22c55e);
  box-shadow:0 0 32px rgba(34,197,94,.45);}
.grade-hex.B{background:linear-gradient(135deg,#bef264,#65a30d);}
.grade-hex.C{background:linear-gradient(135deg,#fde047,#ca8a04);
  box-shadow:0 0 32px rgba(202,138,4,.4);}
.grade-hex.D{background:linear-gradient(135deg,#fb923c,#ea580c);
  box-shadow:0 0 32px rgba(234,88,12,.45);}
.grade-hex.E{background:linear-gradient(135deg,#fb7185,#dc2626);
  box-shadow:0 0 32px rgba(220,38,38,.5);}
.grade-hex .sm{position:absolute; bottom:14px; font-size:.65rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-family:ui-monospace,monospace; opacity:.75;}

/* TOPBAR cohérence : la marque Veillox toujours présente */
.topbar{
  border-bottom:1px solid rgba(120,110,90,.18);
  background:linear-gradient(180deg,rgba(20,24,40,.6),transparent);
  margin:-30px -34px 22px; padding:18px 28px;
  border-radius:18px 18px 0 0;
}
.topbar .link{color:var(--ivory); font-weight:600;}
.topbar .link:hover{color:var(--vigilance);}
.topbar .link.active{color:var(--vigilance);}

/* ÉTAT VIDE soigné, avec mark vigilant */
.empty{
  background:linear-gradient(180deg,rgba(20,24,40,.55),rgba(8,12,22,.55));
  border:1px dashed rgba(224,162,61,.3); color:var(--mist);
  padding:38px 22px;
}

/* PETITES finitions */
table thead th{background:linear-gradient(180deg,
  rgba(224,162,61,.08),transparent); color:var(--vigilance);
  border-bottom:1px solid rgba(224,162,61,.18);}
tbody tr:hover{background:rgba(224,162,61,.04);}
.tag.ok{background:rgba(134,180,138,.16); color:#bbe5be;
  border:1px solid rgba(134,180,138,.35);}
.tag.warn{background:rgba(234,179,8,.16); color:#fde68a;
  border:1px solid rgba(234,179,8,.35);}
.tag.bad{background:rgba(239,68,68,.16); color:#fecaca;
  border:1px solid rgba(239,68,68,.35);}
.meta code{background:#1a1812; color:var(--vigilance);
  border:1px solid rgba(224,162,61,.18);}

/* Bouton principal : cohérence dorée même hors landing */
button:not(.mini):not(.danger){
  background:linear-gradient(95deg,#f0c14b,var(--vigilance) 55%,
    var(--bronze));
  color:#1a1206; font-weight:700;
  box-shadow:0 10px 26px rgba(224,162,61,.32);
}
button.mini{background:rgba(224,162,61,.10); color:var(--ivory);
  border:1px solid rgba(224,162,61,.25);}
button.mini:hover{background:rgba(224,162,61,.18);}

/* Tuiles KPI : alignement gold */
.tile .k{background:linear-gradient(90deg,#f0c14b,var(--vigilance) 60%,
  var(--bronze)); -webkit-background-clip:text; background-clip:text;
  color:transparent;}
.tile{border-color:rgba(224,162,61,.20);}

/* ===================================================================
   v8 — Chaîne d'attaque MITRE ATT&CK (kill-chain visuelle)
   =================================================================== */
.killchain{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin:18px 0; padding:20px 18px 14px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(20,24,40,.6),rgba(8,12,22,.85));
}
.kc-col{
  flex:1 1 84px; min-width:78px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.kc-col.active .kc-bar{
  background:linear-gradient(180deg,#f0c14b,var(--vigilance) 60%,
    var(--bronze));
  box-shadow:0 0 18px rgba(224,162,61,.4);
}
.kc-bar{
  width:34px; border-radius:7px 7px 3px 3px; min-height:14px;
  transition:height .4s ease;
}
.kc-n{font-weight:800; font-size:1.1rem; color:var(--ivory);}
.kc-name{font-size:.66rem; color:var(--mist); line-height:1.2;
  min-height:2.4em; display:flex; align-items:center;}
.kc-id{font:600 .62rem ui-monospace,Menlo,monospace;
  color:var(--vigilance); letter-spacing:.04em;}

/* Badge de criticité d'actif (dashboard / parc) */
.crit-badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
}
.crit-1{background:#1b2942; color:#9fb4d4; border:1px solid #2a3a59;}
.crit-2{background:rgba(234,179,8,.16); color:#fde68a;
  border:1px solid #854d0e;}
.crit-3{background:rgba(239,68,68,.18); color:#fecaca;
  border:1px solid #7f1d1d; animation:pulse 1.8s infinite;}

/* Score de priorité (exposition × criticité) */
.prio-score{font-weight:800;
  background:linear-gradient(90deg,#f0c14b,var(--vigilance),var(--bronze));
  -webkit-background-clip:text; background-clip:text; color:transparent;}