/* ==========================================================================
   AI TALKS — mise en page des pages articles (s'ajoute à styles.css)
   ========================================================================== */

/* Nav simplifiée : pas de JS sur les pages articles → état « scrolled » figé */
.article-page .nav{background:rgba(8,18,34,.95);box-shadow:0 6px 30px rgba(0,0,0,.25)}
.article-page .nav-toggle{display:none}
@media (max-width:960px){
  /* Menu en ligne dans la barre fixe (76 px) : la rangée ne doit JAMAIS
     déborder verticalement — sinon les liens compressés passent sur deux
     lignes et restent « figés » par-dessus le contenu pendant le scroll
     (bug vu sur mobile, page parcours cybersécurité). La rangée défile donc
     horizontalement au doigt, sans barre de défilement visible. */
  .article-page .nav-inner{gap:.9rem}
  .article-page .brand{flex-shrink:0}
  .article-page .nav-links{
    position:static;flex-direction:row;transform:none;background:none;padding:0;gap:1rem;
    min-width:0;flex-wrap:nowrap;overflow-x:auto;max-height:var(--nav-h);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .article-page .nav-links::-webkit-scrollbar{display:none}
  .article-page .nav-links li{flex-shrink:0}
  .article-page .nav-links a{white-space:nowrap;font-size:.8rem}
}

/* Bandeau d'en-tête */
.article-hero{
  background:radial-gradient(900px 400px at 80% 0%,#1d3a60,var(--bleu-nuit) 70%);
  color:#dbe4f0;padding:calc(var(--nav-h) + 4rem) 0 3.2rem;
}
.article-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);max-width:820px;margin:.9rem 0 .7rem;font-weight:800}
.article-hero .cat{margin-bottom:.2rem}
.article-meta{font-size:.82rem;color:#8fa1ba;letter-spacing:.06em}

/* Corps de l'article */
.article-body{max-width:720px;padding:3.2rem 0 4.5rem}
.article-body .chapo{font-size:1.12rem;font-weight:500;color:var(--bleu-nuit);margin-bottom:2rem;line-height:1.7}
.article-body h2{font-size:1.45rem;margin:2.6rem 0 .9rem}
.article-body h3{font-size:1.1rem;margin:1.8rem 0 .6rem}
.article-body p{margin-bottom:1.1rem;font-size:.98rem}
.article-body ul,.article-body ol{margin:0 0 1.1rem 1.3rem;font-size:.98rem;display:grid;gap:.45rem}
.article-body blockquote{
  border-left:4px solid var(--jaune);padding:.6rem 0 .6rem 1.4rem;margin:1.8rem 0;
  font-style:italic;color:var(--bleu-nuit);font-weight:500;font-size:1.05rem;
}
.article-body .sovereignty{margin:2.4rem 0;grid-template-columns:1fr;gap:1.4rem;padding:2rem}

/* Encadré CTA newsletter en fin d'article */
.article-cta{
  margin-top:3rem;background:linear-gradient(120deg,var(--vert),#00713a);color:#fff;
  border-radius:22px;padding:2.2rem;display:grid;gap:.6rem;justify-items:start;
}
.article-cta h3{color:#fff;font-size:1.25rem}
.article-cta p{color:#e3f5ea;font-size:.9rem;margin:0}
.article-cta .btn{margin-top:.6rem}

.article-foot-note{font-size:.8rem;color:#5c6b83;border-top:1px solid #e5e9f0;margin-top:2.6rem;padding-top:1rem}