/* ═══════════════════════════════════════════════
   ARSHMAN Blog CMS — blog.css
   Étend assets/css/style.css du site principal.
   Aucune redéfinition de variable — on réutilise --ink, --blue, --amber, etc.
═══════════════════════════════════════════════ */

/* ── Contenu d'article (HTML injecté depuis l'éditeur/l'IA) ── */
.contenu-article h2 {
  font-family: var(--hf);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin: 2rem 0 1rem;
}
.contenu-article h3 {
  font-family: var(--hf);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.6rem 0 .8rem;
}
.contenu-article p { margin-bottom: 1.2rem; }
.contenu-article ul, .contenu-article ol { margin: 0 0 1.2rem 1.4rem; }
.contenu-article li { margin-bottom: .4rem; }
.contenu-article img {
  width: 100%;
  border-radius: var(--rl);
  margin: 1.5rem 0;
}
.contenu-article a { color: var(--blue); text-decoration: underline; }
.contenu-article blockquote {
  border-left: 3px solid var(--amber);
  padding-left: 1rem;
  color: var(--muted);
  font-style: italic;
  margin: 1.5rem 0;
}

/* ── Contenus auto-embed (YouTube, TikTok, X, Instagram...) ── */
/* aspect-ratio fixé pour ne jamais déborder ni casser le responsive */
.embed-responsive {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rl);
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--soft);
}
.embed-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* TikTok est en format portrait — ratio différent */
.tiktok-embed { max-width: 340px; margin: 1.5rem auto; }

/* ── Zones publicitaires ── */
.ad-zone { margin: 1.5rem 0; text-align: center; }
.ad-zone--sidebar { position: sticky; top: 90px; }

/* ── Recherche live (barre du header) ── */
#resultatsRechercheLive {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shl);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
#resultatsRechercheLive.actif { display: block; }
#resultatsRechercheLive a {
  display: block;
  padding: 10px 16px;
  font-size: .85rem;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
#resultatsRechercheLive a:hover { background: var(--soft); }

/* ── Menu burger mobile (caché sur desktop) ── */
.blog-burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.blog-burger-btn span {
  display: block;
  width: 16px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: transform .2s, opacity .2s;
}
.blog-burger-btn.actif span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.blog-burger-btn.actif span:nth-child(2) { opacity: 0; }
.blog-burger-btn.actif span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .blog-burger-btn { display: flex; }
  .blog-liens-rapides { display: none !important; }
  .blog-nav-categories {
    flex-direction: column;
    gap: 4px !important;
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    transition: max-height .25s ease;
  }
  .blog-nav-categories.ouvert {
    max-height: 400px;
    padding: 10px 0 !important;
    border-top: 0.5px solid rgba(255,255,255,.12) !important;
  }
  .blog-nav-categories a { padding: 8px 0; }
}

/* ── Responsive : grille d'articles/outils 3 → 2 → 1 colonnes ── */
@media (max-width: 1024px) {
  .why-grid[style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .why-grid[style*="repeat(3,1fr)"],
  .why-grid[style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* Topbar blog : recherche + liens passent sous le logo sur mobile */
  .topbar .container:first-child { flex-direction: column; align-items: stretch; }

  /* Zones publicitaires larges masquées sur mobile si trop contraignantes */
  .ad-zone--large-format { display: none; }
}

/* ── Fiche livre blanc : formulaire 2 colonnes → 1 colonne mobile ── */
@media (max-width: 768px) {
  .hero-inner-2col { grid-template-columns: 1fr !important; }
}