/* ============================================================
   Marvin.ai — Blog
   Styles partagés par tous les articles du blog.
   Palette (alignée sur le brand Marvin) :
     --violet        #8759FF   = --marvin-violet, accents, CTA, blockquote
     --violet-light  #EDE9FE   fond .cta-block
     --gris-fonce    #1F1F2E   titres
     --gris-texte    #374151   corps de texte
   Polices Poppins déjà chargées par marvin.css.
   ============================================================ */

:root {
  --violet: #8759FF;
  --violet-light: #EDE9FE;
  --gris-fonce: #1F1F2E;
  --gris-texte: #374151;
}

/* ---------- Page wrapper ---------- */
.blog-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 130px 28px 64px;
  color: var(--gris-texte);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 400;
}

/* ---------- Breadcrumb / meta haut de page ---------- */
.blog-article .breadcrumb {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin-bottom: 28px;
}
.blog-article .breadcrumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(31,31,46,0.2);
  transition: color .2s ease;
}
.blog-article .breadcrumb a:hover { color: var(--violet); }

.blog-article .eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 500;
  margin-bottom: 14px;
}

/* ---------- Titres ---------- */
.blog-article h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.18;
  font-weight: 500;
  color: var(--gris-fonce);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.blog-article h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--gris-fonce);
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
}
.blog-article h3 {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--gris-fonce);
  margin: 32px 0 12px;
}

/* ---------- Meta : auteur + date ---------- */
.blog-article .article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 24px;
  border-bottom: 1px solid rgba(31,31,46,0.1);
  margin-bottom: 36px;
  font-size: 14px;
}
.blog-article .article-meta .author-name {
  color: var(--gris-fonce);
  font-weight: 500;
}
.blog-article .article-meta .author-role {
  color: var(--gris-texte);
  font-size: 13px;
}
.blog-article .article-meta .meta-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(31,31,46,0.25);
  display: inline-block;
}

/* ---------- Corps de texte ---------- */
.blog-article p {
  font-size: 16px;
  line-height: 1.72;
  margin: 0 0 18px;
}
.blog-article p strong { color: var(--gris-fonce); font-weight: 500; }

.blog-article .lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--gris-fonce);
  font-weight: 400;
  margin: 0 0 24px;
}

/* ---------- Listes à puces ---------- */
.blog-article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.blog-article ul li {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
}
.blog-article ul li::before {
  content: '';
  position: absolute;
  top: 11px; left: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--violet);
}

/* ---------- Stat highlights (gros chiffres) ---------- */
.blog-article .stat {
  margin: 28px 0;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(135,89,255,0.05) 0%, rgba(135,89,255,0.01) 100%);
  border-radius: 12px;
  border-left: 4px solid var(--violet);
}
.blog-article .stat-num {
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
  font-weight: 500;
  color: var(--violet);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.blog-article .stat-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texte);
  margin: 0;
}

/* ---------- Citation (blockquote) ---------- */
.blog-article blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  background: #F5F3FF;
  border-left: 4px solid var(--violet);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--gris-fonce);
  border-radius: 0 8px 8px 0;
}
.blog-article blockquote p { margin: 0 0 8px; }
.blog-article blockquote p:last-child { margin: 0; }
.blog-article blockquote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--gris-texte);
}

/* ---------- CTA block (selon brief : palette violet-light) ---------- */
.blog-article .cta-block {
  background: var(--violet-light);
  border-left: 4px solid var(--violet);
  padding: 24px 28px;
  border-radius: 0 10px 10px 0;
  margin: 36px 0;
  font-weight: 500;
  color: var(--violet);
}
.blog-article .cta-block p {
  margin: 0 0 10px;
  color: var(--violet);
  font-weight: 500;
  font-size: 16px;
}
.blog-article .cta-block p:last-child { margin: 0; }
.blog-article .cta-block .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  background: var(--violet);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(135,89,255,0.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-article .cta-block .cta-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(135,89,255,0.40);
}

/* ---------- Section FAQ ---------- */
.blog-article .faq {
  margin: 48px 0 32px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(31,31,46,0.1);
}
.blog-article .faq h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--gris-fonce);
  margin: 28px 0 10px;
  position: relative;
  padding-left: 28px;
}
.blog-article .faq h3::before {
  content: '?';
  position: absolute;
  left: 0; top: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blog-article .faq p {
  margin: 0 0 16px;
  padding-left: 28px;
  font-size: 15.5px;
}

/* ---------- Liens utiles ---------- */
.blog-article .related-links {
  margin: 40px 0;
  padding: 24px 26px;
  background: rgba(31,31,46,0.03);
  border-radius: 12px;
}
.blog-article .related-links h2 {
  font-size: 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  margin: 0 0 16px !important;
  font-weight: 500;
}
.blog-article .related-links ul { margin: 0; }
.blog-article .related-links ul li { padding-left: 20px; margin: 0 0 10px; }
.blog-article .related-links ul li::before {
  content: '\2192';
  position: absolute;
  top: 0; left: 0;
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  color: var(--violet);
  font-weight: 500;
}
.blog-article .related-links ul li a {
  color: var(--gris-fonce);
  text-decoration: none;
  border-bottom: 1px solid rgba(135,89,255,0.3);
  font-size: 15px;
  transition: color .2s ease, border-color .2s ease;
}
.blog-article .related-links ul li a:hover {
  color: var(--violet);
  border-bottom-color: var(--violet);
}

/* ---------- Bottom : retour au blog ---------- */
.blog-article .back-to-blog {
  margin-top: 32px;
  font-size: 14px;
  color: var(--gris-texte);
}
.blog-article .back-to-blog a {
  color: var(--gris-fonce);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid var(--violet);
  padding-bottom: 2px;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .blog-article {
    padding: 100px 20px 56px;
  }
  .blog-article h1 { font-size: 26px; }
  .blog-article h2 { font-size: 21px; margin: 40px 0 14px; }
  .blog-article h3 { font-size: 17px; }
  .blog-article p, .blog-article ul li { font-size: 15.5px; }
  .blog-article .lead { font-size: 17px; }
  .blog-article .cta-block { padding: 20px 22px; }
  .blog-article .related-links { padding: 22px 20px; }
  .blog-article blockquote { padding: 16px 20px; }
  .blog-article .stat { padding: 18px 22px; }
}

/* ============================================================
   Blog hub : /blog/index.html — listing des articles
   ============================================================ */
.blog-hub {
  max-width: 980px;
  margin: 0 auto;
  padding: 130px 28px 80px;
  color: var(--gris-texte);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}
.blog-hub h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.12;
  font-weight: 500;
  color: var(--gris-fonce);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.blog-hub .hub-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--gris-texte);
  margin: 0 0 48px;
  max-width: 640px;
}
.blog-hub .article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.blog-hub .article-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid rgba(31,31,46,0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-hub .article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(31,31,46,0.08);
  border-color: rgba(135,89,255,0.3);
}
.blog-hub .article-card .tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 500;
  margin-bottom: 12px;
}
.blog-hub .article-card h2 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--gris-fonce);
  margin: 0 0 14px;
}
.blog-hub .article-card .excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gris-texte);
  margin: 0 0 18px;
  flex: 1;
}
.blog-hub .article-card .read-more {
  font-size: 14px;
  color: var(--violet);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 768px) {
  .blog-hub { padding: 100px 20px 64px; }
  .blog-hub h1 { font-size: 30px; }
  .blog-hub .article-grid { grid-template-columns: 1fr; gap: 16px; }
}