/* Styles partagés des pages Ressources (articles + hub). Raccord vitrine. */
:root{
  --bg:#0a0d12; --panel:#141b25; --line:#243040; --line2:#475569;
  --ink:#e9eef5; --ink-dim:#aab6c6; --muted:#76838f;
  --amber:#f5a623; --amber-soft:#ffcb73; --amber-glow:rgba(245,166,35,.16);
  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 95% 60% at 50% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 95% 60% at 50% 0%,#000 0%,transparent 75%);}
a{color:var(--amber-soft); text-decoration:none; border-bottom:1px solid var(--line2)}
a:hover{color:var(--amber)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:1}
header.bar{position:sticky; top:0; z-index:40; background:rgba(10,13,18,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.bar .wrap{max-width:1120px; display:flex; align-items:center; justify-content:space-between; height:54px}
.brand{font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:.10em; color:var(--ink); border:none}
.bar .right{display:flex; align-items:center; gap:14px}
.back{font-family:var(--mono); font-size:12px; color:var(--ink-dim); border:none}
.lang-tg{display:inline-flex; gap:2px; border:1px solid var(--line2); border-radius:7px; overflow:hidden}
.lang-tg button{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:4px 9px; background:transparent; color:var(--ink-dim); border:none; cursor:pointer}
.lang-tg button.on{background:var(--line2); color:var(--ink)}
/* bascule FR/EN : FR visible par défaut, EN masqué ; body.en inverse */
[data-lang="en"]{display:none}
body.en [data-lang="fr"]{display:none}
body.en [data-lang="en"]{display:block}

/* ---- article ---- */
article{padding:54px 0 30px}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:14px}
h1{font-family:var(--disp); font-weight:800; font-size:clamp(30px,6vw,46px); line-height:1.05; letter-spacing:.01em; margin-bottom:18px}
.lead{font-size:20px; color:var(--ink-dim); line-height:1.6; margin-bottom:30px}
.meta{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.05em; margin-bottom:38px; padding-bottom:20px; border-bottom:1px solid var(--line)}
article h2{font-family:var(--disp); font-weight:700; font-size:27px; letter-spacing:.01em; margin:38px 0 14px; color:var(--ink)}
article p{margin-bottom:18px; color:#d6dee8}
article ul{margin:0 0 20px 0; padding-left:0; list-style:none}
article li{position:relative; padding-left:22px; margin-bottom:10px; color:#d6dee8}
article li::before{content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; background:var(--amber); border-radius:1px}
strong{color:var(--ink); font-weight:600}
.note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:10px; padding:16px 20px; margin:26px 0; font-size:16px; color:var(--ink-dim)}
.cta{margin:46px 0 10px; padding:30px; background:var(--panel); border:1px solid var(--line2); border-radius:16px; text-align:center}
.cta h3{font-family:var(--disp); font-weight:700; font-size:24px; margin-bottom:10px; color:var(--ink)}
.cta p{color:var(--ink-dim); margin-bottom:20px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px; padding:13px 26px; border-radius:10px; background:var(--amber); color:#10141b; border:none}
.btn:hover{background:var(--amber-soft); color:#10141b}

/* ---- hub ressources ---- */
.hub{padding:54px 0 20px}
.hub .lead{margin-bottom:34px}
.res-grid{display:grid; gap:18px; margin-bottom:10px}
.res-card{display:block; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; padding:22px 24px; transition:border-color .15s, transform .15s}
.res-card:hover{border-color:var(--line2); transform:translateY(-2px)}
.res-card .rc-kick{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin-bottom:8px}
.res-card h2{font-family:var(--disp); font-weight:700; font-size:22px; color:var(--ink); margin-bottom:8px; line-height:1.1}
.res-card p{color:var(--ink-dim); font-size:15px; margin:0}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); margin-top:40px; padding:26px 0 50px}
footer .wrap{max-width:760px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--muted)}
footer a{color:var(--ink-dim); border:none}
@media(max-width:600px){ body{font-size:16px} .lead{font-size:18px} }