:root { --bg: #09090b; --panel: rgba(24,24,27,.55); --line: rgba(255,255,255,.08); --text: #d4d4d8; --muted: #71717a; --strong: #fafafa; --accent: #34d399; --cyan: #67e8f9; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: "Inter", system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); }
body::after { content: ""; position: fixed; top: -12rem; left: 50%; width: 36rem; height: 36rem; transform: translateX(-50%); border-radius: 50%; background: rgba(16,185,129,.13); filter: blur(130px); z-index: -1; pointer-events: none; }
a { color: var(--accent); }
code { font-family: "JetBrains Mono", monospace; font-size: .88em; background: rgba(9,9,11,.7); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .4rem; color: #a7f3d0; }
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: .8rem max(1.5rem, calc((100vw - 1100px) / 2)); border-bottom: 1px solid var(--line); background: rgba(9,9,11,.7); backdrop-filter: blur(14px); }
.brand { margin: 0; display: flex; align-items: center; gap: .625rem; font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -.025em; color: var(--strong); text-decoration: none; }
.brand svg { width: 28px; height: 28px; color: var(--accent); flex: none; }
.brand .ring { transform-origin: center; transform-box: fill-box; animation: th-spin 14s linear infinite; }
.brand .dot { animation: th-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.brand .lab { margin-left: .15rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid rgba(52,211,153,.35); background: rgba(52,211,153,.1); color: #a7f3d0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
@keyframes th-spin { to { transform: rotate(360deg); } }
@keyframes th-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .brand .ring, .brand .dot { animation: none; } }
.crumb { color: var(--muted); font-size: .9rem; }
.brand b { color: var(--accent); font-weight: 700; }
header nav { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
header nav a, header > a { color: var(--muted); text-decoration: none; font-size: .9rem; padding: .35rem .8rem; border-radius: 999px; }
header nav a:hover, header > a:hover { color: var(--strong); background: rgba(255,255,255,.05); }
header nav a.active { color: var(--strong); background: rgba(255,255,255,.07); }
main { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
h2 { font-family: "Space Grotesk", sans-serif; color: var(--strong); font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.kicker { font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.hero { text-align: center; padding: 3rem 0 1rem; }
.hero h2 { font-size: clamp(2.3rem, 6vw, 3.6rem); line-height: 1.05; margin: .8rem 0 1rem; letter-spacing: -.02em; }
.hero h2 span { background: linear-gradient(90deg, #6ee7b7, #67e8f9, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 40rem; margin: 0 auto; color: #a1a1aa; font-size: 1.05rem; }
.glass, .tool, .box, pre, table { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(14px); }
.box { padding: 1.3rem 1.5rem; }
.notice { border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.06); }
.tools, .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tool { display: block; padding: 1.3rem 1.4rem; text-decoration: none; color: inherit; transition: transform .25s, border-color .25s; }
.tool:hover { transform: translateY(-3px); border-color: rgba(52,211,153,.45); }
.tool .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08); font-size: 1.2rem; margin-bottom: .9rem; }
.tool b { display: block; font-family: "Space Grotesk", sans-serif; color: var(--strong); font-size: 1.05rem; }
.tool p, .muted { color: var(--muted); font-size: .9rem; margin: .35rem 0 0; }
form { display: flex; gap: .6rem; margin: 1.5rem 0; flex-wrap: wrap; }
input { flex: 1; min-width: 220px; background: rgba(9,9,11,.6); border: 1px solid rgba(255,255,255,.1); color: var(--strong); padding: .75rem 1rem; border-radius: 12px; font: inherit; font-family: "JetBrains Mono", monospace; outline: none; }
input:focus { border-color: rgba(52,211,153,.7); box-shadow: 0 0 0 4px rgba(52,211,153,.12); }
button { background: var(--accent); color: #09090b; border: 0; padding: .75rem 1.4rem; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #6ee7b7; }
pre { padding: 1.2rem; overflow-x: auto; white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: .88rem; color: #d4d4d8; }
table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
th, td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
th { color: var(--muted); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
#result > p { margin: 0 0 .8rem; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 1rem 3rem; }

/* Animations (outils/fx.js) : graphe en fond, apparition au défilement, halo sur les cartes */
.fx-graph { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.25) 100%); }
.rv { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--delay, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--delay, 0ms), filter .7s var(--delay, 0ms); }
.rv.in { opacity: 1; transform: none; filter: none; }
.tool.rv.in:hover { transform: translateY(-4px); transition-delay: 0ms; }
.tool, .box { position: relative; overflow: hidden; }
.tool::before, .box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(52,211,153,.14), transparent 60%); }
.tool:hover::before, .box:hover::before { opacity: 1; }
.tool > *, .box > * { position: relative; }
.tool:hover { box-shadow: 0 18px 50px -20px rgba(16,185,129,.45); }
.tool .ico { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.tool:hover .ico { transform: translateY(-2px) rotate(-6deg) scale(1.08); box-shadow: 0 0 22px rgba(52,211,153,.35); }
.hero h2 span { background-size: 200% auto; animation: th-shine 6s linear infinite; }
.kicker::after { content: "_"; margin-left: .15em; animation: th-blink 1s steps(1) infinite; }
#result > * { animation: th-rise .45s cubic-bezier(.2,.8,.2,1) both; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(52,211,153,.05); }
button { transition: background .2s, transform .15s, box-shadow .2s; }
button:hover { box-shadow: 0 0 24px rgba(52,211,153,.35); }
button:active { transform: scale(.97); }
@keyframes th-shine { to { background-position: 200% center; } }
@keyframes th-blink { 50% { opacity: 0; } }
@keyframes th-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; filter: none; transition: none; } .hero h2 span, .kicker::after, #result > * { animation: none; } }