/* CyDrakk — site public. Thème clair/sombre par tokens (même pattern que la console). */
:root{
  /* Palette claire */
  --fond:#eef2f6; --fond-2:#e7edf3; --surface:#ffffff; --surface-2:#f4f7fa;
  --bordure:#d9e1ea; --bordure-forte:#c3ceda;
  --texte:#0d1620; --texte-2:#45586b; --texte-faible:#7c8da0;
  --accent:#0a857f; --accent-2:#5a3cf0; --accent-contraste:#ffffff;
  --accent-faible:rgba(10,133,127,.10); --accent-2-faible:rgba(90,60,240,.10);
  --crit:#c62f3d; --haut:#b5630f; --ok:#1c8f5c;
  --halo:rgba(10,133,127,.18); --halo-2:rgba(90,60,240,.16);
  --ombre:0 1px 2px rgba(13,22,32,.05), 0 10px 30px -12px rgba(13,22,32,.18);
  --ombre-douce:0 1px 2px rgba(13,22,32,.04), 0 2px 10px rgba(13,22,32,.05);
  --grille-lignes:rgba(13,22,32,.05);
  --r:14px; --r-s:10px; --max:1140px;
  --titre:"Chakra Petch",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --corps:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    color-scheme:dark;
    --fond:#060a10; --fond-2:#080d15; --surface:#0d141d; --surface-2:#111a25;
    --bordure:#1d2a37; --bordure-forte:#2b3b4b;
    --texte:#e8eff6; --texte-2:#a3b4c4; --texte-faible:#64788c;
    --accent:#3fd8c8; --accent-2:#9d82ff; --accent-contraste:#04211f;
    --accent-faible:rgba(63,216,200,.12); --accent-2-faible:rgba(157,130,255,.14);
    --crit:#ff6472; --haut:#ffac54; --ok:#56d196;
    --halo:rgba(63,216,200,.20); --halo-2:rgba(157,130,255,.18);
    --ombre:0 1px 2px rgba(0,0,0,.5), 0 18px 50px -18px rgba(0,0,0,.65);
    --ombre-douce:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
    --grille-lignes:rgba(255,255,255,.045);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fond:#060a10; --fond-2:#080d15; --surface:#0d141d; --surface-2:#111a25;
  --bordure:#1d2a37; --bordure-forte:#2b3b4b;
  --texte:#e8eff6; --texte-2:#a3b4c4; --texte-faible:#64788c;
  --accent:#3fd8c8; --accent-2:#9d82ff; --accent-contraste:#04211f;
  --accent-faible:rgba(63,216,200,.12); --accent-2-faible:rgba(157,130,255,.14);
  --crit:#ff6472; --haut:#ffac54; --ok:#56d196;
  --halo:rgba(63,216,200,.20); --halo-2:rgba(157,130,255,.18);
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 18px 50px -18px rgba(0,0,0,.65);
  --ombre-douce:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --grille-lignes:rgba(255,255,255,.045);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--corps); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--titre); margin:0; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; font-weight:600}
p{margin:0}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.enveloppe{max-width:var(--max); margin:0 auto; padding-inline:clamp(16px,5vw,40px)}
img,svg{max-width:100%}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--titre); font-weight:600;
  font-size:15px; padding:12px 20px; border-radius:var(--r-s); border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease}
.btn svg{width:16px;height:16px}
.btn-primaire{background:var(--accent); color:var(--accent-contraste); box-shadow:0 6px 20px -8px var(--halo)}
.btn-primaire:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px var(--halo)}
.btn-fantome{background:transparent; color:var(--texte); border-color:var(--bordure-forte)}
.btn-fantome:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}

/* ---------- En-tête ---------- */
.entete{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--fond) 82%, transparent); border-bottom:1px solid var(--bordure)}
.entete .enveloppe{display:flex; align-items:center; gap:20px; height:64px}
.marque{display:flex; align-items:center; gap:11px; font-family:var(--titre); font-weight:700; font-size:19px; letter-spacing:.02em}
.sceau{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--accent-contraste);
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 4px 14px -4px var(--halo)}
.sceau svg{width:20px;height:20px}
.nav-liens{display:flex; gap:26px; margin-left:12px}
.nav-liens a{font-size:14.5px; color:var(--texte-2); font-weight:500; transition:color .15s}
.nav-liens a:hover{color:var(--texte)}
.entete-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.bascule{width:38px; height:38px; border-radius:10px; border:1px solid var(--bordure); background:var(--surface-2);
  color:var(--texte-2); display:grid; place-items:center; cursor:pointer; transition:.15s}
.bascule:hover{color:var(--accent); border-color:var(--accent)}
.bascule svg{width:18px;height:18px}
.bascule .lune{display:none}
:root[data-theme="dark"] .bascule .soleil{display:none} :root[data-theme="dark"] .bascule .lune{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bascule .soleil{display:none} :root:not([data-theme="light"]) .bascule .lune{display:block} }

/* ---------- Fonds décor ---------- */
.decor{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.decor .grille{position:absolute; inset:-2px;
  background-image:linear-gradient(var(--grille-lignes) 1px, transparent 1px), linear-gradient(90deg, var(--grille-lignes) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%)}
.decor .halo-a{position:absolute; width:620px; height:620px; border-radius:50%; filter:blur(90px); opacity:.5;
  background:radial-gradient(circle, var(--halo), transparent 65%); top:-220px; right:-120px}
.decor .halo-b{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px); opacity:.45;
  background:radial-gradient(circle, var(--halo-2), transparent 65%); top:60px; left:-180px}

/* ---------- Sections ---------- */
section{position:relative; z-index:1}
.section{padding-block:clamp(56px,8vw,104px)}
.oeil{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:500}
.titre-section{font-size:clamp(26px,3.4vw,40px); margin-top:14px; max-width:20ch}
.sous-titre{color:var(--texte-2); font-size:clamp(16px,1.6vw,18px); margin-top:14px; max-width:60ch}
.tete-centree{text-align:center; margin-inline:auto} .tete-centree .sous-titre{margin-inline:auto}

/* ---------- Héros ---------- */
.heros{padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(40px,6vw,72px)}
.badge-ligne{display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--bordure); background:var(--surface); font-size:13px; color:var(--texte-2); box-shadow:var(--ombre-douce)}
.badge-ligne .pulse{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.badge-ligne .pulse{animation:none}}
.heros h1{font-size:clamp(34px,6vw,64px); margin-top:26px; max-width:17ch; font-weight:700}
.heros h1 .teinte{background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.heros .accroche{margin-top:22px; font-size:clamp(16px,1.8vw,20px); color:var(--texte-2); max-width:56ch}
.heros-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.note-legale{margin-top:20px; font-size:13.5px; color:var(--texte-faible); display:flex; align-items:center; gap:8px}
.note-legale svg{width:15px;height:15px; color:var(--accent); flex:none}

/* bandeau de preuves chiffrées */
.chiffres{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:54px;
  background:var(--bordure); border:1px solid var(--bordure); border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre-douce)}
.chiffre{background:var(--surface); padding:22px 20px}
.chiffre .n{font-family:var(--titre); font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--texte)}
.chiffre .l{font-size:13px; color:var(--texte-2); margin-top:4px}
@media(max-width:720px){.chiffres{grid-template-columns:repeat(2,1fr)}}

/* ---------- Pipeline ---------- */
.pipeline{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px}
.etape{background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r); padding:22px; position:relative; box-shadow:var(--ombre-douce); transition:transform .18s ease, border-color .18s ease}
.etape:hover{transform:translateY(-4px); border-color:var(--accent)}
.etape .num{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em}
.etape h3{font-size:17px; margin-top:12px}
.etape p{font-size:14px; color:var(--texte-2); margin-top:8px}
.etape .ic{width:40px;height:40px; border-radius:10px; background:var(--accent-faible); color:var(--accent); display:grid; place-items:center; margin-bottom:6px}
.etape .ic svg{width:21px;height:21px}
@media(max-width:860px){.pipeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.pipeline{grid-template-columns:1fr}}

/* ---------- Grille d'atouts ---------- */
.atouts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px}
.carte{background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r); padding:24px; box-shadow:var(--ombre-douce); transition:transform .18s ease, border-color .18s ease}
.carte:hover{transform:translateY(-4px); border-color:var(--bordure-forte)}
.carte .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--accent-faible); color:var(--accent)}
.carte.violet .ic{background:var(--accent-2-faible); color:var(--accent-2)}
.carte .ic svg{width:22px;height:22px}
.carte h3{font-size:17.5px}
.carte p{font-size:14.5px; color:var(--texte-2); margin-top:9px}
.carte .futur{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  padding:3px 9px; border-radius:999px; background:var(--accent-2-faible); color:var(--accent-2)}
@media(max-width:860px){.atouts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.atouts{grid-template-columns:1fr}}

/* ---------- Bloc ROE (schéma) ---------- */
.roe-bloc{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; margin-top:46px}
.roe-tableau{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--bordure);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre); font-size:13.5px}
.roe-tableau th,.roe-tableau td{padding:13px 12px; text-align:center; border-bottom:1px solid var(--bordure)}
.roe-tableau th{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--texte-faible); background:var(--surface-2)}
.roe-tableau td:first-child,.roe-tableau th:first-child{text-align:left; font-weight:500}
.roe-tableau tr:last-child td{border-bottom:0}
.verdict{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; font-weight:500}
.v-ok{color:var(--ok)} .v-lim{color:var(--haut)} .v-no{color:var(--crit)}
.mini{display:block; font-size:10.5px; color:var(--texte-faible); font-weight:400}
.roe-bloc .legende{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:12px}
.roe-bloc .legende li{display:flex; gap:11px; font-size:14.5px; color:var(--texte-2)}
.roe-bloc .legende b{color:var(--texte); font-weight:600}
.roe-bloc .legende .p{width:9px;height:9px;border-radius:3px;margin-top:6px;flex:none}

/* ---------- Verticale ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:40px}
.liste-check{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:14px}
.liste-check li{display:flex; gap:12px; font-size:15px; color:var(--texte-2)}
.liste-check svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px}
.liste-check b{color:var(--texte)}
.panneau{background:var(--surface); border:1px solid var(--bordure); border-radius:var(--r); padding:26px; box-shadow:var(--ombre)}
.panneau .l-titre{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-faible)}
.rapport-apercu{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--bordure); border-radius:var(--r-s); overflow:hidden; margin-top:14px}
.rapport-apercu .col{padding:18px}
.rapport-apercu .col+.col{border-left:1px solid var(--bordure); background:var(--surface-2)}
.rapport-apercu h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.rapport-apercu .gros{font-family:var(--titre); font-size:30px; font-weight:700}
.rapport-apercu p{font-size:13px; color:var(--texte-2); margin-top:8px}
.rapport-apercu .ligne-cve{font-family:var(--mono); font-size:12px; color:var(--texte-2); margin-top:7px}
.rapport-apercu .sev{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
@media(max-width:860px){.roe-bloc,.split{grid-template-columns:1fr}}

/* ---------- Suite rouge/bleu ---------- */
.suite{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.pan-suite{border-radius:var(--r); padding:28px; border:1px solid var(--bordure); box-shadow:var(--ombre-douce)}
.pan-suite.rouge{background:linear-gradient(160deg, color-mix(in srgb,var(--crit) 10%, var(--surface)), var(--surface))}
.pan-suite.bleu{background:linear-gradient(160deg, color-mix(in srgb,var(--accent-2) 12%, var(--surface)), var(--surface))}
.pan-suite .tag{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.pan-suite.rouge .tag{color:var(--crit)} .pan-suite.bleu .tag{color:var(--accent-2)}
.pan-suite h3{font-size:20px; margin-top:8px} .pan-suite p{color:var(--texte-2); margin-top:10px; font-size:14.5px}
@media(max-width:720px){.suite{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:780px; margin:40px auto 0}
.qa{border:1px solid var(--bordure); border-radius:var(--r-s); background:var(--surface); margin-bottom:12px; overflow:hidden}
.qa summary{list-style:none; cursor:pointer; padding:18px 20px; font-family:var(--titre); font-weight:600; font-size:16px;
  display:flex; justify-content:space-between; align-items:center; gap:14px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .chev{width:18px;height:18px;color:var(--accent);transition:transform .2s;flex:none}
.qa[open] summary .chev{transform:rotate(180deg)}
.qa .rep{padding:0 20px 18px; color:var(--texte-2); font-size:14.5px}

/* ---------- CTA bas ---------- */
.cta-final{position:relative; overflow:hidden; border-radius:calc(var(--r) + 4px); margin-block:clamp(40px,6vw,72px);
  border:1px solid var(--bordure); background:linear-gradient(140deg, var(--surface), var(--surface-2)); padding:clamp(34px,5vw,60px); text-align:center; box-shadow:var(--ombre)}
.cta-final h2{font-size:clamp(24px,3.2vw,36px); max-width:22ch; margin-inline:auto}
.cta-final p{color:var(--texte-2); margin-top:14px}
.cta-final .btn{margin-top:26px}
.cta-final .contact{margin-top:18px; font-size:14px; color:var(--texte-faible)}
.cta-final .contact .mono{color:var(--accent)}

/* ---------- Pied ---------- */
.pied{border-top:1px solid var(--bordure); background:var(--surface)}
.pied .enveloppe{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding-block:26px}
.pied .marque{font-size:16px}
.pied .mentions{font-family:var(--mono); font-size:12px; color:var(--texte-faible); letter-spacing:.04em}

/* ---------- Apparition au scroll (depuis un état VISIBLE) ---------- */
.monte{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .monte{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  .js .monte.vu{opacity:1; transform:none}
}

/* Dernières failles (top news) */
.actus-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px}
.actus-vide{color:var(--texte-faible);text-align:center;grid-column:1/-1}
.actu{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:16px 18px;position:relative}
.actu-tag{display:inline-block;font-family:var(--police-mono);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.actu-tag.kev{background:rgba(209,57,74,.14);color:#d1394a}
.actu-tag.ransom{background:rgba(201,106,18,.16);color:#c96a12}
:root[data-theme="dark"] .actu-tag.kev,:root:not([data-theme="light"]) .actu-tag.kev{color:#ff6b7a}
.actu-cve{font-family:var(--police-mono);font-weight:700;font-size:17px;color:var(--accent)}
.actu-nom{margin-top:4px;color:var(--texte);font-size:14px;line-height:1.4}
.actu-meta{margin-top:10px;font-size:12px;color:var(--texte-faible);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actu-epss{font-family:var(--police-mono);border:1px solid var(--bordure);border-radius:999px;padding:1px 8px}

/* Sélecteur de langue (header) */
.langues{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bordure);border-radius:999px;padding:2px;background:var(--surface)}
.langues .lang{border:0;background:transparent;color:var(--texte-attenue);font-family:var(--police-mono);font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;line-height:1}
.langues .lang:hover{color:var(--texte)}
.langues .lang.actif{background:var(--accent);color:var(--accent-texte)}
@media(max-width:620px){.langues{order:3}}

/* Schéma des sections interne / applicatif */
.panneau .schema{width:100%;height:auto;margin-top:14px;color:var(--texte-faible)}

/* Correctif menu header v2 : une seule ligne, jamais de débordement */
.entete .enveloppe{flex-wrap:nowrap; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,36px); gap:14px}
.nav-liens{flex-wrap:nowrap; gap:16px; margin-left:8px; min-width:0}
.nav-liens a{font-size:13.5px; white-space:nowrap}
.entete-actions{gap:10px}
.langues{padding:2px}
.langues .lang{padding:3px 7px; font-size:11px}
.bascule{width:34px;height:34px}
.btn-primaire{white-space:nowrap}
@media(max-width:1100px){ .nav-liens{display:none} }
@media(max-width:620px){ .entete-actions{gap:6px} .btn-primaire{padding:9px 11px} .btn-primaire span{display:none} .langues .lang{padding:3px 5px} .marque{font-size:16px} }

/* Anti-débordement horizontal global (halos décoratifs, tableaux) sur mobile */
html{overflow-x:hidden}
body{overflow-x:clip;max-width:100%}
.roe-tableau{max-width:100%}
@media(max-width:620px){
  .roe-tableau{font-size:11px}
  .roe-tableau th,.roe-tableau td{padding:7px 5px}
  .grille{max-width:100%}
}

/* Menu : mise en avant discrète du "Free scan" */
.nav-liens .nav-cta{color:var(--accent);font-weight:600}
.nav-liens .nav-cta::before{content:"◆ ";font-size:9px;vertical-align:middle;opacity:.8}