/* ================================================================
   LEVELUM · protection aérienne du domicile
   Registre : centre opérationnel. Sombre, dense, factuel.
   ================================================================ */

:root{
  --bg:#08090B;
  --bg-2:#0E1013;
  --surface:#121518;
  --surface-2:#171B1F;
  --line:#232A31;
  --line-2:#2E373F;
  --txt:#E9ECEF;
  --txt-2:#98A1AB;
  --txt-3:#5F6872;
  --amber:#FF7A00;
  --amber-dim:#8A4300;
  --alert:#E5484D;
  --ok:#3DD68C;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"Barlow Condensed",Impact,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --maxw:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- trame de filet, motif de fond ---------- */
.mesh-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:
    linear-gradient(45deg,transparent 49.6%,var(--line) 49.6%,var(--line) 50.4%,transparent 50.4%),
    linear-gradient(-45deg,transparent 49.6%,var(--line) 49.6%,var(--line) 50.4%,transparent 50.4%);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 75%);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}

/* ---------- barre de statut ---------- */
.statusbar{
  border-bottom:1px solid var(--line);background:var(--bg-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--txt-3);position:relative;z-index:30;
}
.statusbar .wrap{display:flex;gap:20px;align-items:center;
  padding-block:7px;flex-wrap:wrap;justify-content:space-between}
.statusbar .grp{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);
  display:inline-block;margin-right:7px;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- entête ---------- */
header.top{
  position:sticky;top:0;z-index:40;background:rgba(8,9,11,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-block:14px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand svg{width:30px;height:30px;color:var(--amber)}
.brand .nm{font-family:var(--cond);font-size:26px;font-weight:600;
  letter-spacing:.16em;line-height:1}
nav.main{display:flex;gap:28px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:var(--txt-2)}
nav.main a{padding-block:4px;border-bottom:1px solid transparent;transition:.15s}
nav.main a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  padding:10px 18px;border:1px solid var(--amber);color:var(--amber);
  background:transparent;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--amber);color:#000}
.btn-solid{background:var(--amber);color:#000;font-weight:600}
.btn-solid:hover{background:#fff;border-color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding-block:clamp(64px,10vw,128px)}
.hero .wrap{position:relative;z-index:2}
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  color:var(--amber);margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--amber)}
h1{
  font-family:var(--cond);font-weight:600;
  font-size:clamp(44px,8.5vw,104px);line-height:.95;letter-spacing:-.005em;
  margin:0 0 26px;text-transform:uppercase;max-width:16ch;
}
h1 em{font-style:normal;color:var(--amber)}
.lede{font-size:clamp(17px,2vw,20px);color:var(--txt-2);max-width:62ch;margin:0 0 38px}
.lede strong{color:var(--txt);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- bandeau de données ---------- */
.readout{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.readout .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.readout .cell{padding:26px 24px;border-right:1px solid var(--line)}
.readout .cell:last-child{border-right:none}
.readout .n{font-family:var(--cond);font-size:clamp(34px,4.4vw,52px);
  line-height:1;color:var(--amber);font-weight:600}
.readout .n small{font-size:.45em;color:var(--txt-2);margin-left:6px;
  font-family:var(--mono);letter-spacing:.04em}
.readout .lb{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  color:var(--txt-3);margin-top:10px;line-height:1.5}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,9vw,110px);position:relative}
.sec-head{margin-bottom:52px;max-width:70ch}
.sec-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--amber);margin-bottom:14px}
h2{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  font-size:clamp(32px,5vw,58px);line-height:1;letter-spacing:.01em;margin:0 0 18px}
h3{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  font-size:clamp(21px,2.4vw,27px);letter-spacing:.04em;margin:0 0 12px;line-height:1.1}
.sec-head p{color:var(--txt-2);font-size:17px;margin:0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- fiches menace ---------- */
.threats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.threat{background:var(--surface);padding:32px 28px;position:relative;transition:.2s}
.threat:hover{background:var(--surface-2)}
.threat .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--amber);border:1px solid var(--amber-dim);padding:4px 9px;
  display:inline-block;margin-bottom:20px}
.threat p{color:var(--txt-2);font-size:15px;margin:0 0 18px}
.threat .ans{border-top:1px solid var(--line);padding-top:16px;font-family:var(--mono);
  font-size:12px;color:var(--txt-3);letter-spacing:.04em}
.threat .ans b{color:var(--txt);font-weight:500;display:block;margin-top:5px;
  font-family:var(--sans);font-size:14px;letter-spacing:0}
.threat svg{width:100%;height:110px;margin-bottom:22px;color:var(--amber)}

/* ---------- cadre légal ---------- */
.legal{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.legal .col{background:var(--surface);padding:34px 30px}
.legal h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;margin:0 0 22px;
  display:flex;align-items:center;gap:10px}
.legal .yes h4{color:var(--ok)}
.legal .no h4{color:var(--alert)}
.legal ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.legal li{padding-left:22px;position:relative;font-size:15px;color:var(--txt-2);
  line-height:1.5}
.legal li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px}
.legal .yes li::before{content:"+";color:var(--ok)}
.legal .no li::before{content:"−";color:var(--alert)}
.legal li b{color:var(--txt);font-weight:600}
.legal li .ref{display:block;font-family:var(--mono);font-size:11px;
  color:var(--txt-3);margin-top:5px;letter-spacing:.04em}

/* ---------- catalogue ---------- */
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.prod{background:var(--surface);display:flex;flex-direction:column}
.prod .vis{aspect-ratio:4/3;background:var(--bg-2);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);display:grid;place-items:center}
.prod .vis svg{width:66%;height:66%;color:var(--amber);opacity:.85}
.prod .body{padding:26px 24px;flex:1;display:flex;flex-direction:column}
.prod .ref{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--txt-3);margin-bottom:10px}
.prod p{color:var(--txt-2);font-size:14.5px;margin:0 0 20px;flex:1}
.spec{border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px;
  display:flex;flex-direction:column;gap:7px}
.spec div{display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.spec dt{color:var(--txt-3)}
.spec dd{color:var(--txt);margin:0;text-align:right}
.price{font-family:var(--cond);font-size:30px;color:var(--amber);font-weight:600;
  display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.price small{font-family:var(--mono);font-size:11px;color:var(--txt-3);
  letter-spacing:.06em}

/* ---------- bloc ukraine ---------- */
.field{background:var(--bg-2);border-block:1px solid var(--line);position:relative;
  overflow:hidden}
.field .wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.field .netvis{aspect-ratio:1;border:1px solid var(--line);position:relative;
  background:var(--surface);overflow:hidden}
.field blockquote{margin:0;font-family:var(--cond);
  font-size:clamp(24px,3vw,34px);line-height:1.15;text-transform:uppercase;
  border-left:2px solid var(--amber);padding-left:24px}
.field cite{display:block;font-family:var(--mono);font-size:11px;
  color:var(--txt-3);letter-spacing:.08em;font-style:normal;margin-top:20px;
  text-transform:none}

/* ---------- tableau de specs ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-3);
  background:var(--bg-2);font-weight:400;text-transform:uppercase}
td{color:var(--txt-2)}
td:first-child{color:var(--txt);font-weight:500}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface)}
.mono{font-family:var(--mono);font-size:12.5px;color:var(--amber)}

/* ---------- appel final ---------- */
.final{border-top:1px solid var(--line);text-align:center;position:relative;
  overflow:hidden}
.final .wrap{position:relative;z-index:2}
.final h2{max-width:20ch;margin-inline:auto}
.final p{color:var(--txt-2);max-width:58ch;margin:0 auto 34px;font-size:17px}
.final .hero-cta{justify-content:center}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:52px 34px;font-size:13.5px;color:var(--txt-3)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:44px;
  margin-bottom:42px}
footer h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--txt-2);margin:0 0 16px;font-weight:400;text-transform:uppercase}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:var(--amber)}
footer .legal-note{border-top:1px solid var(--line);padding-top:26px;
  font-size:12px;line-height:1.65;color:var(--txt-3)}
footer .legal-note strong{color:var(--txt-2)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .threats,.cat{grid-template-columns:1fr 1fr}
  .readout .grid{grid-template-columns:1fr 1fr}
  .readout .cell:nth-child(2){border-right:none}
  .readout .cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .field .wrap{grid-template-columns:1fr;gap:40px}
  footer .cols{grid-template-columns:1fr 1fr;gap:34px}
  nav.main{display:none}
}
@media (max-width:640px){
  .threats,.cat,.legal{grid-template-columns:1fr}
  .readout .grid{grid-template-columns:1fr}
  .readout .cell{border-right:none;border-bottom:1px solid var(--line)}
  .readout .cell:last-child{border-bottom:none}
  .statusbar .grp .hide-s{display:none}
  footer .cols{grid-template-columns:1fr}
  .wrap{padding-inline:18px}
}

/* ---------- animations ---------- */
.sweep{animation:sweep 4.5s linear infinite}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.will-reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.will-reveal.is-in{opacity:1;transform:none}
.threat.will-reveal:nth-child(2),.prod.will-reveal:nth-child(2){transition-delay:.08s}
.threat.will-reveal:nth-child(3),.prod.will-reveal:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .sweep{animation:none}
  .will-reveal{opacity:1;transform:none;transition:none}
  .dot{animation:none}
  html{scroll-behavior:auto}
}