/* ═══════════════════════════════════════════════════════
   EASY CLAW — MAIN
   Variables :root, reset, layout, toutes les sections de page
   ═══════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --bg:#070b14; --bg-card:#0d1220; --bg-card-hover:#111830;
  --cyan:#00e5ff; --cyan-dim:#00b8d4;
  --cyan-glow:rgba(0,229,255,.15); --cyan-glow-strong:rgba(0,229,255,.3);
  --purple:#a855f7; --purple-glow:rgba(168,85,247,.15);
  --gradient:linear-gradient(135deg,var(--cyan),var(--purple));
  --text:#e8eaf6; --text-dim:#8892b0; --text-muted:#4a5568;
  --border:rgba(255,255,255,.06); --border-glow:rgba(0,229,255,.15);
  --danger:#ff4757; --danger-bg:rgba(255,71,87,.08); --danger-border:rgba(255,71,87,.25);
  --accent-green:#00ff88;
  --font:'Outfit',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --container:1140px;
  --radius-sm:8px; --radius-md:16px; --radius-lg:24px
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.7; overflow-x:hidden }
.container { max-width:var(--container); margin:0 auto; padding:0 2rem }

/* ── Particles canvas ── */
#particles { position:fixed; inset:0; z-index:0; pointer-events:none }

/* ── Tag / badge mono ── */
.stag { font-family:var(--mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.25em; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.5rem; display:block }

/* ──────────────────────────────────────────
   NAV
────────────────────────────────────────── */
nav {
  position:fixed; top:0; width:100%; z-index:1000; height:60px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; background:rgba(7,11,20,.8);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border)
}
.nav-logo { font-family:var(--font); font-weight:800; font-size:1.2rem; letter-spacing:-.02em }
.nav-logo span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.nav-links { display:flex; gap:2rem; align-items:center }
.nav-links a { font-size:.85rem; font-weight:500; color:var(--text-dim); text-decoration:none; transition:color .25s }
.nav-links a:hover { color:var(--text) }
.nav-cta { font-size:.95rem!important; font-weight:700!important; padding:.65rem 1.8rem; background:var(--gradient); color:#fff!important; border-radius:50px; transition:all .3s; box-shadow:0 0 20px var(--cyan-glow) }
.nav-cta:hover { box-shadow:0 0 40px var(--cyan-glow-strong); transform:translateY(-1px) }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; width:28px; height:20px; position:relative }
.nav-toggle span { display:block; width:100%; height:2px; background:var(--text); position:absolute; left:0; transition:all .3s }
.nav-toggle span:nth-child(1) { top:0 }
.nav-toggle span:nth-child(2) { top:9px }
.nav-toggle span:nth-child(3) { top:18px }
.nav-toggle.active span:nth-child(1) { top:9px; transform:rotate(45deg) }
.nav-toggle.active span:nth-child(2) { opacity:0 }
.nav-toggle.active span:nth-child(3) { top:9px; transform:rotate(-45deg) }
@media(max-width:768px) {
  .nav-links { display:none; position:absolute; top:60px; left:0; right:0; background:rgba(7,11,20,.96); backdrop-filter:blur(20px); flex-direction:column; padding:1.5rem; gap:1rem; border-bottom:1px solid var(--border) }
  .nav-links.open { display:flex }
  .nav-toggle { display:block }
}

/* ──────────────────────────────────────────
   HERO
────────────────────────────────────────── */
/* ORB background */
.orb { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; animation:orbFloat 8s ease-in-out infinite }
.orb-cyan { width:400px; height:400px; background:radial-gradient(circle,rgba(0,229,255,.2),transparent 70%) }
.orb-purple { width:350px; height:350px; background:radial-gradient(circle,rgba(168,85,247,.15),transparent 70%) }

.hero { min-height:100vh; display:flex; align-items:center; padding:8rem 0 5rem; position:relative; overflow:hidden }
.hero .orb-cyan { top:10%; right:5% }
.hero .orb-purple { bottom:10%; left:-5%; animation-delay:-4s }
.hero-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:1 }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--danger); background:var(--danger-bg); padding:.4rem 1rem; border:1px solid var(--danger-border); border-radius:50px; margin-bottom:1.5rem; width:fit-content }
.hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--danger); animation:pulse 1.5s ease-in-out infinite }
h1 { font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; line-height:1.05; letter-spacing:-.04em; margin-bottom:1.25rem }
h1 .hl { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-sub { font-size:1.1rem; color:var(--text-dim); max-width:480px; margin-bottom:2rem; line-height:1.65 }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem }
.hero-price { font-family:var(--mono); font-size:.8rem; color:var(--text-muted) }
.hero-price strong { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:1rem }
.ip-hero { position:relative }
.ip-hero::before { content:''; position:absolute; top:50%; left:50%; width:300px; height:300px; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(0,229,255,.08),transparent 70%); pointer-events:none; z-index:-1 }
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; text-align:center }
  .hero-sub { margin:0 auto 2rem }
  .hero-actions { justify-content:center }
  .hero-badge { margin:0 auto 1.5rem }
  .ip-hero { margin-top:1rem }
}

/* ──────────────────────────────────────────
   STATS BAR
────────────────────────────────────────── */
.logo-bar { padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:1 }
.lb-row { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap }
.lb-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--text-dim); padding:.4rem .8rem; border-radius:10px; transition:all .3s; border:1px solid transparent }
.lb-item:hover { background:rgba(255,255,255,.03); border-color:var(--border) }
.lb-item.op { opacity:.35 }
.lb-item small { font-size:.55rem; color:var(--text-muted); font-weight:400; margin-left:-.1rem; background:rgba(255,255,255,.05); padding:.1rem .35rem; border-radius:50px }
.lb-logo { flex-shrink:0; border-radius:50%; filter:drop-shadow(0 0 6px rgba(255,255,255,.08)) }
.lb-sep { width:1px; height:20px; background:var(--border) }
.lb-sep.lg { width:2px; background:var(--border); margin:0 .3rem }
@media(max-width:600px) { .lb-row { gap:.5rem } .lb-item { font-size:.65rem } .lb-sep.lg { display:none } }

/* ──────────────────────────────────────────
   VALUE PROP
────────────────────────────────────────── */
.value-prop { padding:4rem 0; text-align:center; position:relative; z-index:1 }
.value-prop h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; letter-spacing:-.03em }
.value-prop h2 .hl { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.value-prop p { color:var(--text-dim); font-size:1.1rem; max-width:560px; margin:.8rem auto 0 }

/* ── Glow cards ── */
.glow-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; position:relative; z-index:1 }
.glow-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:2rem 1.6rem; transition:all .4s; position:relative; overflow:hidden }
.glow-card::before { content:''; position:absolute; inset:-1px; border-radius:var(--radius-md); padding:1px; background:var(--gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s }
.glow-card:hover::before { opacity:1 }
.glow-card:hover { background:var(--bg-card-hover); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,229,255,.06) }
.gc-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; font-size:1.2rem; border:1px solid var(--border) }
.gc-icon.cyan { background:rgba(0,229,255,.08); color:var(--cyan); border-color:rgba(0,229,255,.2) }
.gc-icon.purple { background:rgba(168,85,247,.08); color:var(--purple); border-color:rgba(168,85,247,.2) }
.gc-icon.green { background:rgba(0,255,136,.08); color:var(--accent-green); border-color:rgba(0,255,136,.2) }
.glow-card h4 { font-size:1.05rem; font-weight:700; margin-bottom:.4rem }
.glow-card p { font-size:.88rem; color:var(--text-dim); line-height:1.6 }
.gc-tags { display:flex; gap:.4rem; margin-top:.8rem; flex-wrap:wrap }
.gc-tag { font-family:var(--mono); font-size:.62rem; padding:.25rem .6rem; border-radius:50px; background:rgba(0,229,255,.06); color:var(--cyan); border:1px solid rgba(0,229,255,.15) }
@media(max-width:768px) { .glow-cards { grid-template-columns:1fr } }

/* ──────────────────────────────────────────
   USE CASES MARQUEE
────────────────────────────────────────── */
.uc-sec { padding:4rem 0 3rem; text-align:center; position:relative; z-index:1; overflow:hidden }
.uc-sec h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; letter-spacing:-.03em; margin-bottom:.3rem }
.uc-sec h2 .hl { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.uc-sub { color:var(--text-dim); font-size:1.05rem; margin-bottom:2rem }
.uc-rows { display:flex; flex-direction:column; gap:.7rem }
.uc-mq-wrap { position:relative; overflow:hidden; padding:.15rem 0 }
.uc-mq-wrap::before, .uc-mq-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none }
.uc-mq-wrap::before { left:0; background:linear-gradient(90deg,var(--bg) 0%,transparent 100%) }
.uc-mq-wrap::after { right:0; background:linear-gradient(270deg,var(--bg) 0%,transparent 100%) }
.uc-mq { display:flex; gap:.6rem; width:max-content }
.uc-mq.r2l { animation:ucR2L 50s linear infinite }
.uc-mq.l2r { animation:ucL2R 55s linear infinite }
.uc-mq.r2l-slow { animation:ucR2L 60s linear infinite }
.uc-mq.l2r-slow { animation:ucL2R 65s linear infinite }
.uc-mq.r2l-fast { animation:ucR2L 42s linear infinite }
.uc-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:10px; border:1px dashed var(--border); background:rgba(255,255,255,.02); white-space:nowrap; font-size:.82rem; color:var(--text-dim) }
.uc-pill-icon { font-size:.9rem; flex-shrink:0; opacity:.6 }
.uc-ps { color:var(--cyan); font-size:.82rem; font-style:italic; margin-top:1.5rem; opacity:.7 }
@media(max-width:768px) { .uc-mq-wrap::before, .uc-mq-wrap::after { width:40px } }

/* ──────────────────────────────────────────
   SECURITY
────────────────────────────────────────── */
.security { padding:5rem 0; position:relative; z-index:1 }
h2.sec-h { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:900; letter-spacing:-.03em; margin-bottom:.75rem }
.sdesc { color:var(--text-dim); font-size:1.05rem; max-width:560px; margin-bottom:2.5rem }
.score-layout { display:flex; gap:3rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:2.5rem }
.score-big { font-family:var(--mono); font-size:5.5rem; font-weight:900; line-height:1; flex-shrink:0; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 0 40px var(--cyan-glow)) }
.score-big small { font-size:2rem; opacity:.5 }
.score-bars { flex:1; min-width:260px }
.br { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem }
.bl { font-family:var(--mono); font-size:.68rem; color:var(--text-dim); width:170px; flex-shrink:0 }
.bt { flex:1; height:4px; background:rgba(255,255,255,.04); border-radius:4px; overflow:hidden }
.bf { height:100%; width:0; border-radius:4px; background:var(--gradient); transition:width 1.2s cubic-bezier(.22,1,.36,1) }
.bf.partial { background:linear-gradient(90deg,var(--cyan),#ffa502) }
.br.anim .bf { width:var(--tw) }
.vulns { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.vuln { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.6rem; transition:all .3s }
.vuln:hover { border-color:var(--border-glow); background:var(--bg-card-hover) }
.vt { font-family:var(--mono); font-size:.68rem; font-weight:700; color:var(--accent-green); margin-bottom:.5rem }
.vuln h4 { font-size:.88rem; font-weight:700; margin-bottom:.3rem }
.vuln p { font-size:.82rem; color:var(--text-dim); line-height:1.55 }
.ssrc { margin-top:1.5rem; font-family:var(--mono); font-size:.68rem; color:var(--text-muted) }
.ssrc a { color:var(--text-dim); text-decoration:underline; text-underline-offset:2px }
@media(max-width:768px) { .vulns { grid-template-columns:1fr } .score-big { font-size:4rem } .bl { width:130px; font-size:.62rem } }

/* ──────────────────────────────────────────
   COMPARE
────────────────────────────────────────── */
.compare { padding:5rem 0; position:relative; z-index:1; border-top:1px solid var(--border) }
.ct { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:1.5rem; border-radius:var(--radius-md); overflow:hidden }
.ct th { font-family:var(--mono); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text); text-align:left; padding:.9rem 1rem; background:var(--bg-card); border-bottom:1px solid var(--border) }
.ct th.uth { background:rgba(0,229,255,.05); color:var(--cyan) }
.ct td { padding:.75rem 1rem; border-bottom:1px solid var(--border); color:var(--text-dim); background:var(--bg-card) }
.ct td:first-child { color:var(--text); font-weight:600 }
.ct tr:hover td { background:var(--bg-card-hover) }
.ct .utd { color:var(--text); font-weight:600; background:rgba(0,229,255,.03) }
.ck { color:var(--accent-green); font-family:var(--mono); font-weight:700 }
.cx { color:#8892b0 }
.cc { display:none; margin-top:1.5rem }
.cci { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.2rem; margin-bottom:.75rem }
.ccf { font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--text); margin-bottom:.6rem }
.ccr { display:flex; justify-content:space-between; padding:.35rem 0; font-size:.78rem; color:var(--text-dim); border-bottom:1px solid var(--border) }
.ccr:last-child { border-bottom:none }
.ccr .nm { color:#8892b0 }
.ccr.ur { color:var(--cyan); font-weight:600 }
@media(max-width:768px) { .ct { display:none } .cc { display:block } }

/* ──────────────────────────────────────────
   HOW IT WORKS
────────────────────────────────────────── */
.how { padding:5rem 0; position:relative; z-index:1; border-top:1px solid var(--border); text-align:center; overflow:hidden }
.how .orb-purple { top:-20%; right:-10%; width:300px; height:300px }
.steps-circles { display:flex; justify-content:center; align-items:flex-start; gap:0; margin-top:3rem; position:relative; padding:0 1rem }
.step-item { text-align:center; flex:1; max-width:240px; position:relative }
.step-circle { width:80px; height:80px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-family:var(--mono); font-size:1.8rem; font-weight:900; color:var(--text-muted); transition:all .5s; position:relative; z-index:2; background:var(--bg) }
.step-item:nth-child(1) .step-circle { border-color:rgba(0,229,255,.4); color:var(--cyan); box-shadow:0 0 30px var(--cyan-glow) }
.step-item:nth-child(2) .step-circle { border-color:rgba(0,229,255,.3); color:var(--cyan) }
.step-item:nth-child(3) .step-circle { border-color:rgba(168,85,247,.4); color:var(--purple); box-shadow:0 0 30px var(--purple-glow) }
.step-item:nth-child(4) .step-circle { border-color:rgba(0,255,136,.4); color:var(--accent-green); box-shadow:0 0 30px rgba(0,255,136,.15) }
.step-line { position:absolute; top:40px; left:calc(50% + 40px); width:calc(100% - 80px); height:2px; background:linear-gradient(90deg,var(--cyan),var(--purple)); opacity:.3; z-index:1 }
.step-item:last-child .step-line { display:none }
.step-item h4 { font-size:.9rem; font-weight:700; margin-bottom:.3rem }
.step-item p { font-size:.82rem; color:var(--text-dim); line-height:1.5; padding:0 .5rem }
@media(max-width:768px) { .steps-circles { flex-direction:column; align-items:center; gap:2rem } .step-line { display:none } }

/* ──────────────────────────────────────────
   PERSONAS
────────────────────────────────────────── */
.personas { padding:5rem 0; position:relative; z-index:1; border-top:1px solid var(--border) }
.pg { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.5rem }
.persona { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.6rem 1.2rem; transition:all .3s; position:relative; overflow:hidden }
.persona::before { content:''; position:absolute; inset:-1px; border-radius:var(--radius-md); padding:1px; background:var(--gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s }
.persona:hover::before { opacity:.6 }
.persona:hover { background:var(--bg-card-hover); transform:translateY(-3px) }
.persona-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; font-size:.9rem }
.persona-icon svg { width:20px; height:20px }
.pi-build { background:rgba(0,229,255,.08); color:var(--cyan); border:1px solid rgba(0,229,255,.2) }
.pi-shop { background:rgba(168,85,247,.08); color:var(--purple); border:1px solid rgba(168,85,247,.2) }
.pi-home { background:rgba(0,229,255,.08); color:var(--cyan); border:1px solid rgba(0,229,255,.2) }
.pi-legal { background:rgba(168,85,247,.08); color:var(--purple); border:1px solid rgba(168,85,247,.2) }
.pi-target { background:rgba(0,255,136,.08); color:var(--accent-green); border:1px solid rgba(0,255,136,.2) }
.pi-code { background:rgba(0,229,255,.08); color:var(--cyan); border:1px solid rgba(0,229,255,.2) }
.pi-box { background:rgba(168,85,247,.08); color:var(--purple); border:1px solid rgba(168,85,247,.2) }
.pi-bolt { background:rgba(0,255,136,.08); color:var(--accent-green); border:1px solid rgba(0,255,136,.2) }
.persona h4 { font-size:.85rem; font-weight:700; margin-bottom:.3rem }
.persona p { font-size:.78rem; color:var(--text-dim); line-height:1.5 }
.persona .uc { margin-top:.6rem; font-family:var(--mono); font-size:.65rem; color:var(--cyan); opacity:.7 }
@media(max-width:900px) { .pg { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px) { .pg { grid-template-columns:1fr } }

/* ──────────────────────────────────────────
   PRICING
────────────────────────────────────────── */
.pricing { padding:5rem 0; border-top:1px solid var(--border); position:relative; z-index:1; overflow:hidden }
.pricing .orb-cyan { bottom:-20%; left:-10%; width:350px; height:350px }
.pricing .container { max-width:680px; text-align:center }
.pb { background:var(--bg-card); border:1px solid var(--border-glow); border-radius:20px; padding:2.5rem; margin-top:1.5rem; position:relative; overflow:hidden }
.pb::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient) }
.pbig { font-size:3.5rem; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.pbig small { font-size:1.1rem; -webkit-text-fill-color:var(--text-muted); font-weight:500 }
.psub { font-family:var(--mono); font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.15em; margin-bottom:1.5rem }
.pl { list-style:none; text-align:left; margin-bottom:1.5rem }
.pl li { padding:.55rem 0; border-bottom:1px solid var(--border); font-size:.88rem; color:var(--text-dim); display:flex; align-items:flex-start; gap:.7rem }
.pl li::before { content:'✓'; color:var(--accent-green); font-family:var(--mono); font-weight:700; font-size:.75rem; flex-shrink:0; margin-top:.15rem }
.pb .btn-main { width:100%; justify-content:center; font-size:.95rem; padding:1.1rem; border-radius:50px }
.pnote { font-family:var(--mono); font-size:.82rem; color:var(--text-dim); margin-top:.8rem; line-height:1.5 }
.wp { margin-top:1.5rem; text-align:center }
.wp a { font-size:.78rem; color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; transition:color .2s }
.wp a:hover { color:var(--cyan) }

/* ──────────────────────────────────────────
   FAQ
────────────────────────────────────────── */
.faq { padding:5rem 0; position:relative; z-index:1; border-top:1px solid var(--border) }
.faq .container { max-width:720px }
.fi { border-bottom:1px solid var(--border) }
.fq { width:100%; background:none; border:none; color:var(--text); font-size:.9rem; font-weight:600; text-align:left; padding:1.1rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:color .2s; font-family:var(--font) }
.fq:hover { color:var(--cyan) }
.fq::after { content:'+'; font-size:1.2rem; font-weight:400; color:var(--text-muted); transition:transform .3s; flex-shrink:0; margin-left:1rem }
.fi.open .fq::after { content:'−'; color:var(--cyan) }
.fa { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .3s; font-size:.88rem; color:var(--text-dim); line-height:1.65 }
.fi.open .fa { max-height:300px; padding-bottom:1.2rem }

/* ──────────────────────────────────────────
   FOOTER
────────────────────────────────────────── */
footer { padding:3rem 0; border-top:1px solid var(--border); position:relative; z-index:1 }
.finner { max-width:var(--container); margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem }
.fbrand p { font-size:.78rem; color:var(--text-muted); margin-top:.4rem; max-width:300px; line-height:1.55 }
.flinks { display:flex; gap:2.5rem }
.fcol h5 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--text-muted); margin-bottom:.6rem }
.fcol a { display:block; font-size:.8rem; color:var(--text-dim); text-decoration:none; padding:.2rem 0; transition:color .2s }
.fcol a:hover { color:var(--cyan) }
.fcopy { width:100%; text-align:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.68rem; color:var(--text-muted) }
.fcopy a { color:var(--text-muted); text-decoration:none; transition:color .2s }
.fcopy a:hover { color:var(--cyan) }
@media(max-width:600px) { .finner { flex-direction:column } .flinks { flex-direction:column; gap:1.5rem } }

/* ──────────────────────────────────────────
   MODELS & CHANNELS
────────────────────────────────────────── */
.models-sec { padding:5rem 0; border-top:1px solid var(--border); position:relative; z-index:1; text-align:center }
.mc-label { font-size:.76rem; font-weight:600; color:var(--text-dim); margin-bottom:1rem; text-transform:uppercase; letter-spacing:.12em; font-family:var(--mono) }
.mc-sublabel { font-size:.82rem; color:var(--text-dim); margin-bottom:1rem; display:block }
.mc-row { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem }
.mc-chip { display:inline-flex; align-items:center; gap:.7rem; padding:.8rem 1.5rem; border-radius:14px; border:1px solid var(--border); background:var(--bg-card); cursor:pointer; transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden }
.mc-chip::before { content:''; position:absolute; inset:-1px; border-radius:15px; padding:1px; background:var(--gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; pointer-events:none }
.mc-chip:hover { border-color:transparent; transform:translateY(-2px); box-shadow:0 0 25px rgba(0,229,255,.08),0 12px 35px rgba(0,0,0,.2) }
.mc-chip:hover::before { opacity:.5 }
.mc-chip.active { border-color:var(--cyan); box-shadow:0 0 25px var(--cyan-glow) }
.mc-chip.active::before { opacity:.8 }
.mc-chip.active::after { content:'✓'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.72rem; color:var(--cyan); font-weight:700 }
.mc-chip.active { padding-right:2.2rem }
.mc-chip .mc-logo { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; flex-shrink:0 }
.mc-chip .mc-name { font-size:.88rem; font-weight:600; color:var(--text) }
.mc-logo-claude { background:linear-gradient(135deg,#d4783c,#e8956a); color:#fff }
.mc-logo-gpt { background:linear-gradient(135deg,#10a37f,#1dc98e); color:#fff }
.mc-logo-gemini { background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); color:#fff; font-size:.55rem!important }
.mc-chip.disabled { opacity:.35; cursor:default; pointer-events:none }
.mc-chip.disabled .mc-soon { font-size:.58rem; color:var(--text-muted); font-weight:500; background:rgba(255,255,255,.05); padding:.12rem .45rem; border-radius:50px }
.mc-logo-tg { background:#2AABEE; color:#fff }
.mc-logo-dc { background:#5865F2; color:#fff }
.mc-logo-wa { background:#25D366; color:#fff }
.mc-deploy-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2.2rem; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:50px; color:var(--text); font-size:.9rem; font-weight:600; cursor:pointer; transition:all .4s; margin-top:.5rem }
.mc-deploy-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(0,229,255,.2); box-shadow:0 0 30px rgba(0,229,255,.08); transform:translateY(-2px) }
.mc-deploy-btn svg { width:18px; height:18px; color:var(--cyan) }
.mc-urgency { margin-top:1rem; font-size:.8rem; color:var(--text-dim) }
.mc-urgency span { color:var(--danger); font-weight:600 }

/* ──────────────────────────────────────────
   TELEGRAM TUTO
────────────────────────────────────────── */
.tg-tuto { padding:5rem 0; border-top:1px solid var(--border); position:relative; z-index:1; overflow:hidden }
.tg-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; margin-top:2rem }
.tg-left { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:2.5rem }
.tg-header { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem }
.tg-header svg { width:28px; height:28px; color:#2AABEE; flex-shrink:0 }
.tg-header h3 { font-size:1.1rem; font-weight:700 }
.tg-title { font-size:.95rem; font-weight:700; margin-bottom:1rem; color:var(--text) }
.tg-steps { counter-reset:tg }
.tg-steps li { counter-increment:tg; list-style:none; padding:.6rem 0 .6rem 2rem; font-size:.88rem; color:var(--text-dim); line-height:1.6; position:relative }
.tg-steps li::before { content:counter(tg) '.'; position:absolute; left:0; font-family:var(--mono); font-weight:700; font-size:.8rem; color:var(--cyan) }
.tg-steps li code { font-family:var(--mono); font-size:.78rem; padding:.15rem .5rem; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px; color:var(--text) }
.tg-steps li a { color:var(--cyan); text-decoration:underline; text-underline-offset:2px }
.tg-input-label { font-size:.82rem; font-weight:600; color:var(--text-dim); margin-top:1.5rem; margin-bottom:.5rem }
.tg-input { width:100%; padding:.75rem 1rem; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; color:var(--text-muted); font-family:var(--mono); font-size:.78rem }
.tg-submit { width:100%; padding:.85rem; margin-top:1rem; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); font-size:.88rem; font-weight:600; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:.5rem }
.tg-submit:hover { background:rgba(255,255,255,.1); border-color:var(--border-glow) }

/* ──────────────────────────────────────────
   SOCIAL PROOF
────────────────────────────────────────── */
.sp { padding:4.5rem 0; position:relative; z-index:1; border-top:1px solid var(--border); overflow:hidden }
.sp .container { max-width:var(--container) }
.sp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.8rem }
.sp-title { font-family:var(--font); font-weight:900; font-size:1.6rem; display:flex; align-items:center; gap:.5rem }
.sp-title .chevron { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:300; font-size:1.3rem }
.sp-viewall { font-size:.85rem; font-weight:600; color:var(--cyan); text-decoration:none; transition:color .2s; white-space:nowrap }
.sp-viewall:hover { color:#fff }
.sp-strip { display:grid; grid-template-columns:repeat(6,1fr) auto; gap:0; margin-bottom:2.2rem }
.sp-si { text-align:center; padding:1.3rem .6rem 1rem; position:relative; background:var(--bg-card); border:1px solid var(--border) }
.sp-si:first-child { border-radius:14px 0 0 14px }
.sp-si:nth-child(6) { border-radius:0 }
.sp-si:not(:first-child) { border-left:none }
.sp-sn { font-family:var(--mono); font-size:1.55rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.15; letter-spacing:-.02em }
.sp-sl { font-size:.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.3rem; font-weight:500 }
.sp-ys { color:#f5c518; font-size:.6rem; letter-spacing:2px; margin-top:.35rem; text-shadow:0 0 6px rgba(245,197,24,.3) }
.sp-live { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem .8rem; background:rgba(0,255,136,.04); border:1px solid rgba(0,255,136,.12); border-left:none; border-radius:0 14px 14px 0; font-family:var(--mono); font-size:.6rem; color:var(--accent-green); font-weight:600; text-transform:uppercase; letter-spacing:.08em; writing-mode:vertical-lr }
.sp-dot { width:5px; height:5px; border-radius:50%; background:var(--accent-green); animation:spP 2s ease infinite }
.sp-mq-wrap { position:relative; overflow:hidden; margin-bottom:1rem }
.sp-mq-wrap::before, .sp-mq-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none }
.sp-mq-wrap::before { left:0; background:linear-gradient(90deg,var(--bg) 0%,transparent 100%) }
.sp-mq-wrap::after { right:0; background:linear-gradient(270deg,var(--bg) 0%,transparent 100%) }
.sp-mq { display:flex; gap:1rem; width:max-content; padding:.3rem 0 }
.sp-mq:hover { animation-play-state:paused }
.sp-mq-r2l { animation:spR2L 45s linear infinite }
.sp-mq-l2r { animation:spL2R 50s linear infinite }
.sp-c { flex-shrink:0; width:480px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.3rem 1.4rem; display:flex; gap:1rem; align-items:flex-start; position:relative; overflow:hidden; cursor:default }
.sp-c::before { content:''; position:absolute; inset:-1px; border-radius:17px; padding:1px; background:var(--gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.25; pointer-events:none }
.sp-av { width:44px; height:44px; border-radius:50%; flex-shrink:0; object-fit:cover; border:2px solid rgba(0,229,255,.2); filter:drop-shadow(0 0 4px rgba(0,229,255,.1)) }
.sp-ct { flex:1; min-width:0 }
.sp-qt { font-size:.86rem; color:var(--text-dim); line-height:1.6; margin-bottom:.7rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.sp-qt::before { content:'« '; color:var(--text-muted); font-weight:600 }
.sp-qt::after { content:' »'; color:var(--text-muted); font-weight:600 }
.sp-hd { font-size:.8rem; font-weight:700; color:var(--cyan); text-decoration:none; transition:color .2s }
.sp-hd:hover { color:#fff }
.sp-row2 .sp-c { width:380px; padding:1.1rem 1.2rem }
.sp-row2 .sp-qt { font-size:.82rem }
.sp-row2 .sp-av { width:38px; height:38px }
@media(max-width:768px) {
  .sp-strip { grid-template-columns:repeat(3,1fr) }
  .sp-si { border-left:1px solid var(--border)!important }
  .sp-si:first-child { border-radius:14px 0 0 0!important; border-left:none!important }
  .sp-si:nth-child(3) { border-radius:0 14px 0 0!important }
  .sp-si:nth-child(4) { border-top:none!important; border-radius:0!important; border-left:none!important }
  .sp-si:nth-child(6) { border-radius:0 0 14px 0!important }
  .sp-live { grid-column:1/-1; writing-mode:horizontal-tb; border-radius:0 0 14px 14px!important; border:1px solid rgba(0,255,136,.12)!important; border-top:none!important; flex-direction:row }
  .sp-sn { font-size:1.15rem }
  .sp-c { width:340px }
  .sp-row2 .sp-c { width:300px }
  .sp-mq-wrap::before, .sp-mq-wrap::after { width:40px }
  .sp-head { flex-direction:column; gap:.5rem; align-items:flex-start }
}

/* ──────────────────────────────────────────
   LEGAL PAGES (mentions, privacy, cgv)
────────────────────────────────────────── */
.legal-page { padding:8rem 0 5rem; position:relative; z-index:1 }
.legal-page .container { max-width:720px }
.legal-page h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; letter-spacing:-.03em; margin-bottom:.5rem }
.legal-page .legal-date { font-family:var(--mono); font-size:.72rem; color:var(--text-muted); margin-bottom:2.5rem }
.legal-page h2 { font-size:1.2rem; font-weight:700; margin:2rem 0 .75rem; color:var(--text) }
.legal-page h3 { font-size:1rem; font-weight:600; margin:1.5rem 0 .5rem; color:var(--text-dim) }
.legal-page p { font-size:.9rem; color:var(--text-dim); line-height:1.7; margin-bottom:1rem }
.legal-page ul, .legal-page ol { padding-left:1.5rem; margin-bottom:1rem }
.legal-page li { font-size:.9rem; color:var(--text-dim); line-height:1.7; margin-bottom:.3rem }
.legal-page a { color:var(--cyan); text-underline-offset:2px }
.legal-page table { width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.85rem }
.legal-page th { text-align:left; padding:.6rem .8rem; background:var(--bg-card); border:1px solid var(--border); color:var(--text); font-size:.75rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em }
.legal-page td { padding:.6rem .8rem; border:1px solid var(--border); color:var(--text-dim) }
.legal-page tr:hover td { background:var(--bg-card) }
.legal-divider { border:none; border-top:1px solid var(--border); margin:2rem 0 }

/* ── Citation Karpathy ── */
.quote-box { background:rgba(255,71,87,.04); border:1px solid rgba(255,71,87,.15); border-left:3px solid var(--danger); border-radius:12px; padding:1.5rem; margin:2rem 0 }
.quote-box blockquote { font-style:italic; color:var(--text-dim); font-size:.95rem; margin:0 0 .8rem }
.quote-box cite { color:var(--cyan); font-size:.8rem; font-weight:600 }
.quote-box .quote-sub { margin:.8rem 0 0; font-weight:700; color:var(--text) }

/* ── Hooks audience DevOps / Métier (section sécurité) ── */
.sec-hooks { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap }
.sec-hook { display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--text-dim); line-height:1.5; flex:1; min-width:240px }
.sec-hook-tag { flex-shrink:0; font-size:.7rem; font-weight:700; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; padding:.2em .6em; border-radius:4px }
.sec-hook-tag.devops { background:rgba(0,229,255,.1); color:var(--cyan); border:1px solid rgba(0,229,255,.2) }
.sec-hook-tag.metier { background:rgba(168,85,247,.1); color:var(--purple); border:1px solid rgba(168,85,247,.2) }

/* ── Note documentation sécurité (honnêteté scope) ── */
.sec-doc-note { font-size:.82rem; color:var(--text-dim); line-height:1.6; margin:1.5rem 0; padding:.9rem 1.1rem; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:10px }
.sec-doc-note strong { color:var(--accent-green) }