/* ============================================================
   GolemTech News — "Signal Desk" design system
   Serif éditorial (Fraunces) + serif lecture (Newsreader) + mono méta (JetBrains).
   Fond bleu-nuit, spectre de signaux par thème.
   ============================================================ */

:root {
  /* base surfaces (dark default) */
  --bg:        #0C0F14;
  --bg-2:      #10151D;
  --surface:   #141A24;
  --surface-2: #1A222E;
  --hairline:  #232C39;
  --hairline-2:#2E3A4B;

  --text:      #E8EDF4;
  --text-soft: #B7C2D0;
  --text-mute: #7E8B9C;

  /* brand signal */
  --brand:     #2DD4BF;
  --brand-ink: #0A2E29;

  /* theme spectrum */
  --sante:   #34D399;
  --tech:    #38BDF8;
  --ia:      #A78BFA;
  --psycho:  #F472B6;
  --science: #22D3EE;
  --buzz:    #FBBF24;

  --accent: var(--brand);      /* overridden per-theme */
  --accent-ink: var(--brand-ink);

  /* type */
  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* scale */
  --step--1: clamp(.78rem, .74rem + .2vw, .86rem);
  --step-0:  clamp(1.02rem, .98rem + .25vw, 1.15rem);
  --step-1:  clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-3:  clamp(2.2rem, 1.8rem + 2.2vw, 3.6rem);
  --step-4:  clamp(2.9rem, 2.2rem + 4vw, 5.4rem);

  --radius: 14px;
  --radius-sm: 9px;
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 2.4rem);
  --maxw: 1240px;

  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 18px 40px -24px rgba(0,0,0,.7);
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="light"] {
  --bg:#F8FAFC; --bg-2:#F1F5F9; --surface:#FFFFFF; --surface-2:#F5F8FC;
  --hairline:#E2E8F0; --hairline-2:#CBD5E1;
  --text:#0D1520; --text-soft:#33414F; --text-mute:#5B6B7C;
  --brand-ink:#D7FBF3;
  --shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -28px rgba(15,30,50,.28);
}

/* theme accent scoping */
[data-t="sante"]   { --accent: var(--sante); }
[data-t="tech"]    { --accent: var(--tech); }
[data-t="ia"]      { --accent: var(--ia); }
[data-t="psycho"]  { --accent: var(--psycho); }
[data-t="science"] { --accent: var(--science); }
[data-t="buzz"]    { --accent: var(--buzz); }

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }

body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:var(--step-0); line-height:1.7;
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(45,212,191,.06), transparent 60%);
  background-attachment: fixed;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:560; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 .5em; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.mono { font-family:var(--mono); font-size:var(--step--1); letter-spacing:.02em; }
.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute); }

/* ---------- signal dot ---------- */
.signal { display:inline-flex; align-items:center; gap:.5em; }
.signal::before {
  content:""; width:.55em; height:.55em; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%{ box-shadow:0 0 0 .55em transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.chip { color:var(--accent); }

/* ============================ NAV ============================ */
.topbar { position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline); transition:padding .3s var(--ease); }
.topbar .row { display:flex; align-items:center; gap:1.2rem; height:64px; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-size:1.32rem; font-weight:600; letter-spacing:-.02em; white-space:nowrap; }
.brand .dot { width:.6rem; height:.6rem; border-radius:50%; background:var(--brand);
  box-shadow:0 0 12px var(--brand); animation:pulse 2.4s var(--ease) infinite; --accent:var(--brand); }
.brand b { color:var(--brand); font-weight:600; }
.nav-themes { display:flex; gap:.3rem; margin-left:.5rem; flex:1; overflow-x:auto;
  scrollbar-width:none; }
.nav-themes::-webkit-scrollbar{ display:none; }
.nav-themes a { font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  padding:.42rem .7rem; border-radius:999px; color:var(--text-soft);
  border:1px solid transparent; white-space:nowrap; transition:.2s var(--ease); }
.nav-themes a[data-t]:hover { color:var(--text); border-color:var(--hairline-2);
  background:var(--surface); }
.nav-themes a[data-t]:hover { color:var(--accent); }
.icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--hairline); background:var(--surface); color:var(--text-soft);
  cursor:pointer; transition:.2s var(--ease); }
.icon-btn:hover { color:var(--text); border-color:var(--hairline-2); }
.nav-search { display:flex; align-items:center; gap:.5rem; }
.nav-search input { background:var(--surface); border:1px solid var(--hairline);
  color:var(--text); border-radius:10px; padding:.5rem .8rem; font-family:var(--mono);
  font-size:.8rem; width:0; opacity:0; transition:.28s var(--ease); }
.nav-search.open input { width:min(46vw,220px); opacity:1; }
.hamb { display:none; }

/* mobile bottom bar */
.botbar { display:none; }

@media (max-width:1024px){
  .nav-themes { display:none; }
}
@media (max-width:640px){
  .topbar .row { height:56px; }
  .nav-search { display:none; }
  .brand { font-size:1.15rem; }
  .botbar { display:flex; position:fixed; inset:auto 0 0 0; z-index:60;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(14px); border-top:1px solid var(--hairline);
    padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom)); justify-content:space-around; }
  .botbar a { flex:1; text-align:center; font-family:var(--mono); font-size:.62rem;
    letter-spacing:.06em; color:var(--text-mute); padding:.35rem 0; text-transform:uppercase; }
  .botbar a[data-t] { color:var(--text-soft); }
  .botbar a[data-t]::before { content:""; display:block; width:.4rem; height:.4rem;
    border-radius:50%; background:var(--accent); margin:0 auto .28rem; }
  body { padding-bottom:64px; }
}

/* ---------- mobile sheet menu ---------- */
.sheet { position:fixed; inset:0; z-index:70; background:var(--bg-2);
  transform:translateY(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column; padding:var(--gutter); overflow:auto; }
.sheet.open { transform:translateY(0); }
.sheet .grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.4rem; }
.sheet .grid a { display:block; padding:1rem; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--surface); font-family:var(--display);
  font-size:1.3rem; }
.sheet .grid a::before { content:""; display:inline-block; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--accent); margin-right:.5rem; vertical-align:middle; }

/* ============================ HERO ============================ */
.reading-bar { position:fixed; top:0; left:0; height:3px; width:0; z-index:80;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,var(--brand)));
  box-shadow:0 0 10px var(--accent); }

.lead { display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(1rem,3vw,2.6rem);
  padding-block:clamp(1.6rem,4vw,3.4rem); align-items:stretch; }
.lead-main { position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--hairline); background:var(--surface); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:min(64vh,540px); }
.lead-main .ph { position:absolute; inset:0; }
.lead-main .cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.5; transition:transform 1.2s var(--ease), opacity .6s; }
.lead-main:hover .cover { transform:scale(1.05); }
.lead-main .veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,16,.15) 0%, rgba(8,11,16,.55) 45%, rgba(8,11,16,.94) 100%); }
.lead-main .body { position:relative; margin-top:auto; padding:clamp(1.2rem,3vw,2.2rem); }
.lead-main h1 { font-size:var(--step-4); max-width:16ch; }
.lead-main .chapo { color:var(--text-soft); font-size:var(--step-1); max-width:52ch; margin:.4rem 0 0; }

.lead-side { display:flex; flex-direction:column; gap:.9rem; }
.side-card { border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--surface); padding:1rem 1.1rem; flex:1; display:flex; flex-direction:column;
  justify-content:center; transition:.25s var(--ease); position:relative; overflow:hidden; }
.side-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:.0; transition:.25s var(--ease); }
.side-card:hover { border-color:var(--hairline-2); transform:translateX(3px); }
.side-card:hover::before { opacity:1; }
.side-card h3 { font-size:var(--step-1); margin:.35rem 0 0; }

/* ============================ RIVER / GRID ============================ */
.section-h { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin:clamp(1.6rem,4vw,2.8rem) 0 1.1rem; border-top:1px solid var(--hairline);
  padding-top:1.1rem; }
.section-h h2 { font-size:var(--step-2); margin:0; }
.section-h a { font-family:var(--mono); font-size:.76rem; color:var(--text-mute);
  white-space:nowrap; flex:none; }
.section-h a:hover { color:var(--accent); }
@media (max-width:640px){
  .section-h { flex-direction:column; align-items:flex-start; gap:.35rem; }
}

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem); }
@media (max-width:1024px){ .grid{ grid-template-columns:repeat(2,1fr);} .lead{ grid-template-columns:1fr; } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr;} }

.card { border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--surface); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s var(--ease), border-color .28s var(--ease); }
.card:hover { transform:translateY(-4px); border-color:var(--hairline-2); }
.card .thumb { aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--surface-2); }
.card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .thumb img { transform:scale(1.06); }
.card .thumb .ph { position:absolute; inset:0; }
.card .c-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card h3 { font-size:var(--step-1); margin:0; }
.card .meta { margin-top:auto; display:flex; gap:.7rem; align-items:center;
  font-family:var(--mono); font-size:.7rem; color:var(--text-mute); letter-spacing:.03em; }

/* thematic placeholder gradient (when no image) */
.ph { background:
    radial-gradient(130% 100% at 15% 0%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 55%),
    linear-gradient(150deg, var(--surface-2), var(--bg-2)); }
.ph.tag::after { content:attr(data-tag); position:absolute; left:1rem; bottom:.8rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); opacity:.85; }

/* ============================ ARTICLE ============================ */
.crumbs { font-family:var(--mono); font-size:.74rem; color:var(--text-mute);
  padding-top:1.4rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a:hover { color:var(--accent); }
.article { display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:clamp(1.4rem,4vw,3rem); padding-block:1.2rem 4rem; align-items:start; }
@media (max-width:980px){ .article{ grid-template-columns:1fr; } .toc{ display:none; } }
.art-head h1 { font-size:var(--step-3); max-width:20ch; margin-top:.6rem; }
.art-head .chapo { font-size:var(--step-1); color:var(--text-soft); max-width:var(--measure); }
.art-meta { display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; margin:1.2rem 0;
  padding:.8rem 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:.76rem; color:var(--text-mute); }
.art-cover { border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline);
  margin:1.4rem 0; aspect-ratio:16/9; position:relative; }
.art-cover img { width:100%; height:100%; object-fit:cover; }
.art-cover figcaption { position:absolute; right:.7rem; bottom:.6rem; font-family:var(--mono);
  font-size:.64rem; color:var(--text-soft); background:rgba(8,11,16,.6); padding:.2rem .5rem; border-radius:6px; }

.prose { max-width:var(--measure); font-size:1.16rem; line-height:1.8; color:var(--text-soft); }
.prose > * + * { margin-top:1.15em; }
.prose h2 { font-size:var(--step-2); color:var(--text); margin-top:1.8em; scroll-margin-top:80px; }
.prose h3 { font-size:var(--step-1); color:var(--text); margin-top:1.4em; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%, transparent); }
.prose ul,.prose ol { padding-left:1.3em; }
.prose li + li { margin-top:.5em; }
.prose blockquote { border-left:3px solid var(--accent); padding-left:1.1em; color:var(--text);
  font-style:italic; }
.prose strong { color:var(--text); }

/* product recommendation card */
.reco { margin:2.2rem 0; border:1px solid var(--hairline-2); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:1.3rem 1.4rem;
  position:relative; overflow:hidden; }
.reco::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
.reco .eyebrow { color:var(--accent); }
.reco h4 { font-family:var(--display); font-size:var(--step-1); margin:.4rem 0 .3rem; }
.reco p { color:var(--text-soft); margin:0 0 .9rem; font-size:1rem; }
.reco .btn { display:inline-flex; align-items:center; gap:.5rem; }

.btn { font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; padding:.6rem 1rem;
  border-radius:10px; border:1px solid var(--accent); color:var(--accent-ink);
  background:var(--accent); cursor:pointer; transition:.2s var(--ease); }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--accent); }
.btn.ghost:hover { background:color-mix(in srgb,var(--accent) 12%, transparent); }

/* sources */
.sources { max-width:var(--measure); margin-top:2.4rem; border-top:1px solid var(--hairline); padding-top:1.2rem; }
.sources h4 { font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mute); }
.sources ol { padding-left:1.3em; font-family:var(--mono); font-size:.82rem; }
.sources a { color:var(--text-soft); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.sources a:hover { color:var(--accent); }

/* toc */
.toc { position:sticky; top:84px; font-family:var(--mono); font-size:.78rem; align-self:start; }
.toc .eyebrow { margin-bottom:.7rem; }
.toc a { display:block; color:var(--text-mute); padding:.3rem 0; border-left:2px solid var(--hairline);
  padding-left:.8rem; transition:.2s; }
.toc a:hover,.toc a.active { color:var(--accent); border-color:var(--accent); }

/* share */
.share { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .7rem; margin-top:2rem;
  padding-top:1.4rem; border-top:1px solid var(--hairline); }
.share-label { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mute); margin-right:.2rem; }
.share-net { display:flex; flex-wrap:wrap; gap:.5rem; }
.sbtn { --c:var(--text-soft); display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; border:1px solid var(--hairline);
  background:var(--surface); cursor:pointer; padding:0; position:relative;
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.sbtn .ico { width:19px; height:19px; background:var(--text-soft); transition:background .18s var(--ease);
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.sbtn:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--c) 60%, var(--hairline));
  background:color-mix(in srgb,var(--c) 14%, var(--surface)); }
.sbtn:hover .ico { background:var(--c); }
.sbtn:focus-visible { outline:2px solid var(--c); outline-offset:2px; }
.sbtn.is-copied { --c:var(--sante); }
.sbtn.is-copied::after { content:"Lien copié"; position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:.68rem;
  padding:.3rem .5rem; border-radius:7px; background:var(--sante); color:#04231a; box-shadow:var(--shadow); }
/* brand tints + icon masks */
.s-x        { --c:#E7E9EA; --m:url("../img/social/x.svg"); }
.s-facebook { --c:#1877F2; --m:url("../img/social/facebook.svg"); }
.s-linkedin { --c:#0A66C2; --m:url("../img/social/linkedin.svg"); }
.s-whatsapp { --c:#25D366; --m:url("../img/social/whatsapp.svg"); }
.s-telegram { --c:#26A5E4; --m:url("../img/social/telegram.svg"); }
.s-reddit   { --c:#FF4500; --m:url("../img/social/reddit.svg"); }
.s-pinterest{ --c:#BD081C; --m:url("../img/social/pinterest.svg"); }
.s-bluesky  { --c:#0285FF; --m:url("../img/social/bluesky.svg"); }
.s-threads  { --c:#E8E8E8; --m:url("../img/social/threads.svg"); }
.s-email    { --c:var(--brand); --m:url("../img/social/email.svg"); }
.s-copy     { --c:var(--brand); --m:url("../img/social/copy.svg"); }
.s-native   { --c:var(--accent); --m:url("../img/social/native.svg"); }
.s-x .ico,.s-facebook .ico,.s-linkedin .ico,.s-whatsapp .ico,.s-telegram .ico,.s-reddit .ico,
.s-pinterest .ico,.s-bluesky .ico,.s-threads .ico,.s-email .ico,.s-copy .ico,.s-native .ico { -webkit-mask-image:var(--m); mask-image:var(--m); }

/* ============================ FOOTER ============================ */
.foot { border-top:1px solid var(--hairline); margin-top:3rem; padding-block:2.4rem 3rem;
  background:var(--bg-2); }
.foot .cols { display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; }
.foot h5 { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute); margin:0 0 .8rem; }
.foot a { color:var(--text-soft); display:block; padding:.2rem 0; }
.foot a:hover { color:var(--accent); }
.foot .fine { color:var(--text-mute); font-family:var(--mono); font-size:.72rem; margin-top:1.6rem; }

/* utilities */
.empty { text-align:center; padding:5rem 1rem; color:var(--text-mute); }
.empty .signal { justify-content:center; margin-bottom:1rem; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
/* reveals only hide when JS is active — content stays visible without JS */
.js .reveal { opacity:0; transform:translateY(18px); }
.js .reveal.in { opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }