/* ============================================================
   Knowledge Graph — Design System
   Projet Web Sémantique E-Commerce
   Palette : Obsidian / Slate / Porcelain / Lime Pulse / Coral / Iris
   Type    : Syne (display) · Manrope (body) · IBM Plex Mono (code)
   ============================================================ */

:root{
  /* ---- Palette nommée ---- */
  --obsidian:#0B0E1A;
  --slate:#161B2E;
  --slate-2:#1F2740;
  --porcelain:#EDF0F6;
  --paper:#FFFFFF;
  --ink:#11141F;
  --muted:#5B6478;
  --mist:#D9DEE8;
  --lime:#C2F23D;       /* accent primaire — nœuds / énergie */
  --lime-deep:#9BCB1F;
  --coral:#FF5C72;      /* accent secondaire — actions write */
  --iris:#5B4BE6;       /* relations sémantiques / liens */
  --iris-soft:#EEECFC;

  /* ---- Échelle typo ---- */
  --fs-h1:48px; --fs-h2:32px; --fs-body:16px; --fs-caption:13px;

  --shadow:0 18px 50px -20px rgba(11,14,26,.35);
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:var(--fs-body);font-weight:400;line-height:1.65;
  color:var(--ink);background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--lime);color:var(--obsidian)}
a{color:var(--iris);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,iframe{max-width:100%}
html,body{overflow-x:clip}                 /* aucun scroll horizontal */
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* Focus visible — accessibilité (tout élément interactif) */
:focus-visible{outline:3px solid var(--iris);outline-offset:2px;border-radius:6px}
.btn:focus-visible,a.pill:focus-visible,.btn-lime:focus-visible{outline-offset:3px}
.hero :focus-visible{outline-color:var(--lime)}

h1,h2,h3{font-family:"Syne",sans-serif;letter-spacing:-.02em;line-height:1.08}
h1{font-size:var(--fs-h1);font-weight:600}
h2{font-size:var(--fs-h2);font-weight:600}
.caption{font-size:var(--fs-caption);color:var(--muted)}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(237,240,246,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--mist)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:"Syne",sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink);
  display:flex;align-items:center;gap:10px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(194,242,61,.25)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--ink);font-weight:600;font-size:.93rem;position:relative}
.nav-links a:hover{color:var(--iris)}
.nav-links a.pill{background:var(--obsidian);color:#fff;padding:9px 16px;border-radius:10px}
.nav-links a.pill:hover{background:var(--iris)}
@media(max-width:720px){.nav-links a:not(.pill){display:none}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:"Manrope";font-weight:700;
  font-size:.95rem;min-height:44px;padding:11px 22px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--obsidian);box-shadow:0 10px 24px -10px rgba(155,203,31,.7)}
.btn-dark{background:var(--obsidian);color:#fff}
.btn-dark:hover{background:var(--iris)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{background:transparent;border-color:var(--mist);color:var(--ink)}
.btn-outline:hover{border-color:var(--iris);color:var(--iris)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--obsidian);color:#fff;
  padding:96px 0 84px}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{font-family:"IBM Plex Mono";font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);margin-bottom:18px}
.hero h1{font-size:clamp(40px,6vw,68px);font-weight:800;color:#fff;max-width:17ch;line-height:1.12}
.hero h1 .accent{color:var(--lime);white-space:nowrap}
.hero h1 .underline{position:relative;white-space:nowrap}
.hero h1 .underline::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--coral);border-radius:2px;opacity:.9}
.hero p.lead{font-size:1.18rem;color:#c7cedd;margin-top:22px;max-width:60ch}

/* signature : ticker de triplets */
.ticker{margin-top:30px;display:inline-flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:10px 20px;font-family:"IBM Plex Mono";font-size:.92rem;
  min-height:44px}
.ticker .lbl{color:#7a839b;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.ticker .triple{display:inline-flex;align-items:center;gap:9px;opacity:0;transition:opacity .5s}
.ticker .triple.show{opacity:1}
.ticker .nd{display:inline-flex;align-items:center;gap:6px}
.ticker .nd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime)}
.ticker .nd.o::before{background:var(--coral)}
.ticker .pred{color:var(--iris);font-style:normal}
.ticker .pred b{color:#aeb6ff;font-weight:500}
.ticker .arr{color:#4a5375}

.hero .cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

/* graph motif background */
.hero .graph-bg{position:absolute;inset:0;z-index:1;opacity:.5}
.hero .graph-bg .edge{stroke:rgba(124,135,176,.35);stroke-width:1}
.hero .graph-bg .node{fill:var(--iris)}
.hero .graph-bg .node.l{fill:var(--lime)}
.hero .graph-bg .node.c{fill:var(--coral)}
.hero .graph-bg g{animation:drift 18s ease-in-out infinite alternate}
.hero .graph-bg .pulse{animation:pulse 3.2s ease-in-out infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-26px,18px)}}
@keyframes pulse{0%,100%{opacity:.45;r:4}50%{opacity:1;r:7}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:54px;position:relative;z-index:2}
@media(max-width:840px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:20px 16px}
.stat .n{font-family:"Syne";font-weight:800;font-size:2rem;color:#fff}
.stat .n .u{color:var(--lime)}
.stat .l{font-family:"IBM Plex Mono";font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8b93a9;margin-top:6px}

/* ---------- SECTIONS ---------- */
section{padding:90px 0}
@media(max-width:600px){
  section{padding:64px 0}
  .hero{padding:74px 0 58px}
  .ticker{flex-wrap:wrap;font-size:.82rem;border-radius:18px;width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:clamp(34px,9vw,48px)}
}
.kicker{font-family:"IBM Plex Mono";font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--iris);margin-bottom:12px}
.lead{color:var(--muted);max-width:64ch;margin-bottom:36px;font-size:1.05rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:840px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--mist);border-radius:var(--radius);padding:26px;
  transition:transform .15s, box-shadow .15s, border-color .15s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;margin-bottom:16px;background:var(--iris-soft)}
.card h3{font-family:"Syne";font-size:1.2rem;font-weight:700;margin-bottom:8px}
.card p,.card li{color:var(--muted);font-size:.96rem}
.card ul{margin:8px 0 0 18px}
.card code{font-family:"IBM Plex Mono";background:var(--porcelain);padding:2px 6px;border-radius:5px;
  font-size:.85em;color:var(--iris)}

/* ---------- CODE ---------- */
pre{font-family:"IBM Plex Mono";background:var(--obsidian);color:#dfe4f2;padding:22px;border-radius:14px;
  overflow:auto;font-size:.88rem;line-height:1.6;border:1px solid var(--slate-2)}
pre .k{color:var(--lime)} pre .c{color:#8b93a9}   /* contraste AA sur obsidian */

/* ---------- FOOTER ---------- */
footer{background:var(--obsidian);color:#8b93a9;padding:46px 0;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer .brand{color:#fff}
footer a{color:#c7cedd}