/* ===== Huntertainment — Design System « Clair Tech » (partagé) ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{
  --paper:#f6f7fc;--paper-2:#ffffff;--paper-3:#eef1f9;
  --ink:#12142e;--ink-2:#2c2f50;--muted:#5a5d7e;--faint:#9396b3;
  --line:#e4e7f2;--line-2:#d8dcec;
  --violet:#6b4bff;--blue:#2f7bff;--blue-deep:#1f5be6;
  --grad:linear-gradient(100deg,#6b4bff,#2f7bff);
  --dark:#0c0e22;--dark-2:#13162f;--dark-line:#272a4d;--dark-ink:#eef0fb;--dark-muted:#a6a9c8;
  --ok:#16a36a;--warn:#d98300;--danger:#e23b54;
  --r-s:12px;--r-m:18px;--r-l:26px;--r-pill:999px;
  --sh:0 10px 30px #1216330d;--sh-md:0 16px 40px #12163314;--sh-lg:0 28px 64px #1216331c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:'Inter',system-ui,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif;margin:0;line-height:1.14;letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.narrow{max-width:760px}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);font-weight:500}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:15px;padding:13px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:.18s}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px #2f7bff44}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px #2f7bff55}
.btn.ghost{background:var(--paper-2);border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn.dark{background:var(--ink);color:#fff}
.btn.sm{padding:9px 18px;font-size:13px}
.lnk{font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--blue-deep);display:inline-flex;align-items:center;gap:6px}
.lnk:hover{gap:10px}
.sec{padding:70px 0}
.shead{max-width:680px;margin-bottom:40px}
.shead h2{font-size:clamp(28px,3.8vw,40px);font-weight:700;margin:12px 0 0}
.shead p{color:var(--muted);margin-top:12px;font-size:16.5px}
.center{margin-left:auto;margin-right:auto;text-align:center}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:#f6f7fcd9;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav .lg{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:18px}
.nav .lg svg{width:34px;height:34px;border-radius:9px;box-shadow:var(--sh)}
.nav .links{display:flex;gap:26px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.nav .links a:hover{color:var(--violet)}
.nav .cta{font-family:'Space Grotesk';font-weight:600;font-size:14px;background:var(--grad);color:#fff;padding:10px 20px;border-radius:var(--r-pill);box-shadow:0 8px 18px #2f7bff3d}

/* PAGE HERO (intérieur) */
.phero{position:relative;overflow:hidden;background:radial-gradient(680px 380px at 86% -10%,#6b4bff14,transparent 60%),radial-gradient(520px 320px at -4% 110%,#2f7bff10,transparent 60%),var(--paper);border-bottom:1px solid var(--line)}
.phero .gridbg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(#12163308 1px,transparent 1px),linear-gradient(90deg,#12163308 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 60% 70% at 80% 6%,#000,transparent 75%)}
.phero .in{position:relative;padding:54px 0 60px}
.phero h1{font-size:clamp(32px,4.8vw,52px);font-weight:700;margin:16px 0 0;max-width:760px;letter-spacing:-.02em}
.phero .p{color:var(--ink-2);font-size:18px;margin:18px 0 0;max-width:600px}
.bc{font-family:'JetBrains Mono';font-size:12px;color:var(--faint);letter-spacing:.04em}
.bc a:hover{color:var(--violet)}
.bc .sep{margin:0 8px;opacity:.5}

/* CARTES génériques */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:24px;box-shadow:var(--sh)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0}
.card.hover{transition:.18s}.card.hover:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}

/* secteurs/offres cell */
.scell{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:24px;box-shadow:var(--sh);transition:.18s}
.scell:hover{transform:translateY(-3px);border-color:#2f7bff44}
.scell .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#6b4bff16,#2f7bff16);display:grid;place-items:center;margin-bottom:14px}
.scell .ic svg{width:24px;height:24px}
.scell h4{font-size:17px;margin-bottom:6px}.scell p{color:var(--muted);font-size:14px;margin:0}

/* process */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcell{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;box-shadow:var(--sh);text-align:center}
.pcell .st{font-family:'JetBrains Mono';font-size:11px;color:var(--blue);letter-spacing:.1em}
.pcell h4{font-size:18px;margin:8px 0 6px}.pcell p{color:var(--muted);font-size:14px;margin:0}

/* photo treatment */
.photo{position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ov{position:absolute;inset:0;background:linear-gradient(130deg,#6b4bff66,#2f7bff33 55%,transparent);mix-blend-mode:multiply}

/* portfolio cards */
.realis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcell{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh);border:1px solid var(--line-2)}
.rcell img{width:100%;height:100%;object-fit:cover;transition:.4s}
.rcell:hover img{transform:scale(1.06)}
.rcell .ov{position:absolute;inset:0;background:linear-gradient(0deg,#0c0e22e6,#0c0e2230 45%,transparent 70%)}
.rcell .tt{position:absolute;inset:auto 0 0 0;padding:18px}
.rcell .tt .tag{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9fc0ff}
.rcell .tt h4{color:#fff;font-size:17px;margin-top:5px}

/* produits affiliation */
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:.18s}
.prod:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.prod .ph{position:relative;height:170px;background:#eef1f9}
.prod .ph img{width:100%;height:100%;object-fit:cover}
.prod .rk{position:absolute;left:12px;top:12px;font-family:'JetBrains Mono';font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--grad);color:#fff;padding:5px 11px;border-radius:999px}
.prod .bd{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod h4{font-size:17px;margin:0}
.prod .stars{color:#f5a623;font-size:13px}.prod .stars span{color:var(--muted);font-size:12px}
.prod .pr{font-family:'Space Grotesk';font-weight:700;font-size:21px}.prod .pr small{font-weight:400;font-size:11px;color:var(--faint);font-family:'Inter'}
.prod .abtn{margin-top:auto;text-align:center;font-family:'Space Grotesk';font-weight:600;font-size:13px;background:var(--ink);color:#fff;padding:11px;border-radius:var(--r-pill)}
.prod .aff{font-size:10px;color:var(--faint);text-align:center}

/* blog cards */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcell{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh);transition:.18s}
.bcell:hover{transform:translateY(-3px)}
.bcell .ph{height:170px;position:relative;overflow:hidden}
.bcell .ph img{width:100%;height:100%;object-fit:cover}
.bcell .ph .ov{position:absolute;inset:0;background:linear-gradient(130deg,#6b4bff5e,#2f7bff33);mix-blend-mode:multiply}
.bcell .bd{padding:18px}
.bcell .tag{font-family:'JetBrains Mono';font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-deep)}
.bcell h4{font-size:17px;margin:8px 0 6px;line-height:1.25}
.bcell .meta,.bcell p{color:var(--muted);font-size:13px;margin:0}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh)}
table.tbl th,table.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl th{background:var(--paper-3);font-family:'Space Grotesk';font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td b{color:var(--ink)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:12px;padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--paper-2)}
.badge.v{background:#6b4bff12;color:var(--violet);border-color:#6b4bff33}
.badge.b{background:#2f7bff12;color:var(--blue-deep);border-color:#2f7bff33}
.badge.ok{background:#16a36a12;color:var(--ok);border-color:#16a36a33}

/* prose (article/legal) */
.prose{color:var(--ink-2);font-size:16.5px;line-height:1.8}
.prose h2{font-size:26px;margin:38px 0 12px;color:var(--ink)}
.prose h3{font-size:20px;margin:28px 0 10px;color:var(--ink)}
.prose p{margin:0 0 16px}
.prose ul{padding-left:20px;margin:0 0 16px}.prose li{margin:8px 0}
.prose img{border-radius:var(--r-m);margin:24px 0;box-shadow:var(--sh)}
.prose blockquote{border-left:3px solid var(--violet);margin:24px 0;padding:6px 20px;color:var(--ink);background:var(--paper-3);border-radius:0 12px 12px 0}
.prose a{color:var(--blue-deep);font-weight:600}

/* objectif strip */
.obj{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.obj .in{padding:50px 0;text-align:center}
.obj h2{font-size:clamp(22px,3.2vw,32px);font-weight:700;max-width:820px;margin:0 auto;line-height:1.3}

/* CTA band */
.ctaband{position:relative;border-radius:var(--r-l);overflow:hidden;background:radial-gradient(620px 300px at 82% 0%,#3a2a8e70,transparent 60%),var(--dark);border:1px solid var(--dark-line);padding:54px 46px;box-shadow:var(--sh-lg);text-align:center}
.ctaband .gridbg{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:46px 46px}
.ctaband h2{position:relative;color:#fff;font-size:clamp(26px,3.6vw,36px);font-weight:700;max-width:640px;margin:0 auto}
.ctaband p{position:relative;color:var(--dark-muted);margin:14px auto 26px;max-width:520px;font-size:16px}

/* form */
.field,.area,select.field{display:block;width:100%;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:14px 16px;color:var(--ink);font-family:inherit;font-size:15px;margin-bottom:14px}
.field::placeholder,.area::placeholder{color:var(--faint)}
.area{min-height:130px;resize:vertical}
label.lab{font-family:'Space Grotesk';font-weight:600;font-size:13px;color:var(--ink);display:block;margin:0 0 6px}

/* rating ring */
.ring{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--blue) var(--p,90%),#e4e7f2 0);position:relative}
.ring::before{content:"";position:absolute;inset:8px;background:var(--paper-2);border-radius:50%}
.ring b{position:relative;font-family:'Space Grotesk';font-size:22px;font-weight:700}

/* pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc .box{border-radius:var(--r-m);padding:22px;border:1px solid}
.pc .pros{background:#16a36a0a;border-color:#16a36a33}
.pc .cons{background:#e23b540a;border-color:#e23b5433}
.pc h4{font-size:16px;margin-bottom:10px}.pc .pros h4{color:var(--ok)}.pc .cons h4{color:var(--danger)}
.pc ul{margin:0;padding-left:18px}.pc li{margin:7px 0;font-size:14px;color:var(--ink-2)}

/* aff disclosure inline */
.affnote{background:#d983000c;border:1px solid #d9830033;border-radius:var(--r-s);padding:12px 16px;font-size:13px;color:var(--ink-2);margin:18px 0}

/* TOC */
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px;box-shadow:var(--sh)}
.toc h5{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;font-size:14px;color:var(--ink-2);padding:6px 0;border-top:1px solid var(--line)}
.toc a:first-of-type{border-top:none}.toc a:hover{color:var(--violet)}

/* FOOTER */
footer{background:var(--dark);color:var(--dark-muted);border-top:1px solid var(--dark-line);margin-top:0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:56px 0 36px}
.fcol .lg{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:18px;color:#fff;margin-bottom:14px}
.fcol .lg svg{width:32px;height:32px;border-radius:9px}
.fcol p{font-size:13.5px;line-height:1.7;max-width:300px}
.fcol h5{font-family:'Space Grotesk';font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px}
.fcol a{display:block;font-size:14px;color:var(--dark-muted);padding:5px 0}.fcol a:hover{color:#fff}
.fbar{border-top:1px solid var(--dark-line);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7e81a8}
.fbar .disc{font-family:'JetBrains Mono';font-size:11px}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  /* nav : liens en barre scrollable + CTA compact (toujours accessible) */
  .nav .in{height:62px;gap:10px}
  .nav .lg{font-size:16px}
  .nav .lg svg{width:30px;height:30px}
  .nav .links{display:flex;flex:1;min-width:0;overflow-x:auto;gap:18px;margin:0 10px;font-size:13.5px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .links a{white-space:nowrap}
  .nav .cta{flex:none;padding:9px 15px;font-size:13px}
}
@media(max-width:860px){
  .grid3,.grid4,.realis,.prodgrid,.blog{grid-template-columns:1fr 1fr}
  .grid2,.proc,.pc{grid-template-columns:1fr!important}
  .card[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  aside[style*="sticky"]{position:static!important;top:auto!important}
  .fgrid{grid-template-columns:1fr 1fr}
  .sec{padding:54px 0}
  .phero .in{padding:44px 0 48px}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .grid3,.grid4,.realis,.prodgrid,.blog,.fgrid{grid-template-columns:1fr}
  .sec{padding:42px 0}
  .shead{margin-bottom:30px}
  .phero .in{padding:34px 0 40px}
  .ctaband{padding:38px 22px}
  .card{padding:20px}
  .prose{font-size:16px}
  .obj .in{padding:38px 0}
  /* grand tableau comparatif : scroll horizontal propre */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}