/* Blog aux couleurs du site v2 (16/10/2026) : fond sombre du site, police Cocogoose Pro, accent cyan → teal.
   Chargée après blog.css (prototype) : elle redéfinit ses jetons et habille ses composants. Le site est sombre
   uniquement, le blog aussi : mêmes valeurs quel que soit le thème du système. */
:root:not(#gs){
  --bg:#01121b; --surface:rgba(255,255,255,.04); --fg:#ecfcff; --muted:rgba(236,252,255,.66); --line:rgba(255,255,255,.1);
  --accent:#34d8ff; --accent-fg:#04121c; --soft:rgba(52,216,255,.07); --shadow:0 20px 50px rgba(0,0,0,.35);
  --grad:linear-gradient(90deg,#34d8ff,#0fa8c9);
  --display:'Cocogoose Pro','Space Grotesk',sans-serif; --body:'Cocogoose Pro','Inter',sans-serif;
  color-scheme:dark;
}
html{background:#03080e}
body.blog{background:radial-gradient(circle at 20% 0%,rgba(15,95,120,.35),transparent 55%),radial-gradient(at 50% 0%,rgba(19,25,52,.65),rgba(5,5,9,.92)) fixed,#03080e;
  color:var(--fg);font-family:var(--body);font-weight:300;font-size:1.04rem;line-height:1.75}
body.blog b,body.blog strong{font-weight:700}
.blog .wrap{padding-top:84px;padding-bottom:4rem} /* le site ajoute déjà audience-h + 54px en haut du body sur ordinateur */
.blog h1,.blog h2,.blog h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:#fff}
.blog h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.12}
.blog main a{color:var(--accent)}

/* Sous-menu des thèmes */
.bnav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.4rem}
.blog .bnav a{padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);text-decoration:none;font-family:var(--display);font-size:.82rem;line-height:1.2;transition:border-color .2s,color .2s,background .2s}
.blog .bnav a:hover{border-color:rgba(52,216,255,.5);color:#fff}
.blog .bnav a[aria-current]{background:var(--grad);border-color:transparent;color:var(--accent-fg);font-weight:700}
.bnav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Titres de rubrique */
.blog .eyebrow{display:inline-block;padding:.45rem 1rem;border:1px solid rgba(52,216,255,.35);border-radius:999px;background:rgba(52,216,255,.08);color:var(--accent);font-size:.72rem;letter-spacing:.14em;margin-bottom:1.1rem}
.blog .crumb{font-size:.8rem}
.blog .crumb a{color:var(--muted);text-decoration:none}
.blog .crumb a:hover{color:var(--accent)}
.blog .lead{color:var(--muted);font-size:1.12rem;line-height:1.7}
.blog .byline,.blog .author{font-family:var(--display)}
.blog .byline small,.blog .author small{color:var(--muted)}
.blog .av,.blog .author img{border:2px solid rgba(52,216,255,.4)}

/* Accueil et pages de thème */
.blog .intro{margin-bottom:2.8rem}
.blog .choix{margin:0 0 3rem}
.blog .choix h2{color:var(--muted);font-size:.74rem}
.blog .choix a{background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog .choix a:hover,.blog .choix a:focus-visible{border-color:rgba(52,216,255,.55);box-shadow:0 18px 40px rgba(0,168,204,.14)}
.blog .choix strong{color:#fff}
.blog .theme{background:rgba(0,32,45,.35);border:1px solid rgba(52,216,255,.14);border-radius:24px;box-shadow:none}
.blog .theme .thead{border-left:0;padding-left:0}
.blog .thead h1,.blog .thead h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.blog .thead p{color:var(--muted)}
.blog .card,.blog .theme .card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:18px;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog .card:hover{border-color:rgba(52,216,255,.55);box-shadow:0 18px 40px rgba(0,168,204,.14)}
.blog .ct h3{color:#fff;font-size:1.02rem;line-height:1.3}
.blog .ct p{font-size:.9rem;line-height:1.55}
.blog .th{background:#04202c}

/* Article */
.blog .hero img,.blog .fig img{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.blog .cover{border-radius:16px;border:1px solid rgba(52,216,255,.2)}
.blog .chapo{font-style:normal;font-size:1.18rem;line-height:1.6;color:#dff8ff;border-left:3px solid var(--accent)}
.blog .prose h2{font-size:clamp(1.3rem,2.8vw,1.65rem);margin-top:2.6rem}
.blog .prose p,.blog .prose li{color:rgba(236,252,255,.86)}
.blog .prose blockquote{font-style:normal;border-left-color:rgba(52,216,255,.4)}
.blog .retenir{background:linear-gradient(180deg,rgba(52,216,255,.1),rgba(255,255,255,.03));border:1px solid rgba(52,216,255,.35);border-radius:18px}
.blog .retenir h2,.blog .rel h2{color:var(--accent);font-size:.82rem;letter-spacing:.14em}
.blog .cta{background:linear-gradient(180deg,rgba(52,216,255,.1),rgba(255,255,255,.03));border:1px solid rgba(52,216,255,.35);border-radius:20px;padding:1.6rem 1.8rem}
.blog .cta p{color:#fff;font-size:1.08rem}
.blog .cta .btn{background:var(--grad);color:var(--accent-fg);border-radius:999px;padding:.85rem 1.6rem;font-family:var(--display);font-weight:700;font-size:.95rem;box-shadow:0 10px 30px rgba(52,216,255,.25);border:0;cursor:pointer}
.blog .cta .btn:hover{filter:brightness(1.08)}
.blog .rel a{background:var(--surface);border:1px solid var(--line);border-radius:16px;color:#fff;font-weight:700;transition:border-color .2s}
.blog .rel a:hover{border-color:rgba(52,216,255,.55)}
.blog .author{border-top-color:var(--line)}
.footer__credits{margin:22px 0 0;font-size:.75rem;color:rgba(243,244,247,.35)}

@media (max-width:900px){ .blog .wrap{padding-top:calc(var(--audience-h) + 100px)} }
@media (max-width:600px){
  body.blog{font-size:1rem}
  .bnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 2rem;padding:0 16px}
  .bnav::-webkit-scrollbar{display:none}
  .bnav a{flex:0 0 auto;white-space:nowrap}
  .blog .theme{border-radius:18px}
  .blog .cta{padding:1.3rem}
}
@media (prefers-reduced-motion:reduce){.bnav a,.blog .card,.blog .choix a{transition:none}}