/* ================= BLOG /articles-et-conseils — VERSION ÉPURÉE ================= */

/* Variables (si le thème les supporte, sinon elles sont ignorées sans effet) */
:root {
  --blog-max: 740px;
  --blog-gutter: 24px;
  --brand: #006C5B;
}

/* 0) Afficher le contenu et forcer l’alignement à gauche */
#thememaincontent .theme-blog-post-content {
  display: block !important;
  text-align: left !important;
  padding-left: var(--blog-gutter);
  padding-right: var(--blog-gutter);
}

/* 1) Même cadre pour le H1 (header) et le contenu */
#thememaincontent .theme-blog-post-header-area .zpcontainer,
#thememaincontent .theme-blog-post-header-area .zpcontainer-fluid,
#thememaincontent .theme-blog-post-content .zpcontainer,
#thememaincontent .theme-blog-post-content .zpcontainer-fluid {
  max-width: var(--blog-max);
  margin: 0 auto;
  padding-left: var(--blog-gutter) !important;
  padding-right: var(--blog-gutter) !important;
}

/* 2) Neutraliser le padding/marge internes des rangées/colonnes du thème */
#thememaincontent .theme-blog-post-content .zpcontainer-fluid,
#thememaincontent .theme-blog-post-content .zprow,
#thememaincontent .theme-blog-post-content .zpcol,
#thememaincontent .theme-blog-post-content [class*="column"],
#thememaincontent .theme-blog-post-content [class*="col"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Et si un style inline impose un padding-left, on l’annule */
#thememaincontent .theme-blog-post-content [style*="padding-left"] {
  padding-left: 0 !important;
}

/* 3) Titre de la page d’article */
#thememaincontent .theme-blog-post-header-area h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 60px;
  margin-bottom: 32px;
  text-align: left;
}

/* 4) Typo interne du billet (couleurs laissées au thème) */
#thememaincontent .theme-blog-post-content h1 {
  font-size: 30px;
  line-height: 1.3;
  margin-top: 48px;
  margin-bottom: 20px;
  font-weight: 600;
}
#thememaincontent .theme-blog-post-content h2 {
  font-size: 24px;
  line-height: 1.4;
  margin-top: 36px;
  margin-bottom: 16px;
  font-weight: 500;
}
#thememaincontent .theme-blog-post-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 500;
}
#thememaincontent .theme-blog-post-content p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}
#thememaincontent .theme-blog-post-content ul,
#thememaincontent .theme-blog-post-content ol {
  margin: 0 0 20px 24px;
}

/* 5) Aligner à gauche tous les éléments éditoriaux usuels */
#thememaincontent .theme-blog-post-content .zpelem-heading,
#thememaincontent .theme-blog-post-content .zpelem-text,
#thememaincontent .theme-blog-post-content h1,
#thememaincontent .theme-blog-post-content h2,
#thememaincontent .theme-blog-post-content h3,
#thememaincontent .theme-blog-post-content p,
#thememaincontent .theme-blog-post-content ul,
#thememaincontent .theme-blog-post-content ol {
  text-align: left !important;
  margin-left: 0 !important;
}

/* 6) Enlever uniquement les CTA injectés par le modèle (sans toucher au contenu) */
#thememaincontent .theme-blog-post-content .zpelem-button,
#thememaincontent .theme-blog-post-content [class*="btn"],
#thememaincontent .theme-blog-post-content [class*="button"],
#thememaincontent .theme-blog-post-content [class*="cta"] {
  display: none !important;
}

/* 7) Page LISTE du blogue — couleur de marque sur les titres */
#thememaincontent .theme-blog-post-list-area .zpelem-blog-title a,
#thememaincontent .theme-blog-post-list-area .blog-post-title a,
#thememaincontent .theme-blog-list .zpelem-heading a,
#thememaincontent .blog-post-item .blog-post-title a,
#thememaincontent a[class*="blog"][class*="title"] {
  color: var(--brand) !important;
  text-decoration: none;
}
#thememaincontent .theme-blog-post-list-area .zpelem-blog-title a:hover,
#thememaincontent .theme-blog-post-list-area .blog-post-title a:hover,
#thememaincontent .theme-blog-list .zpelem-heading a:hover,
#thememaincontent .blog-post-item .blog-post-title a:hover,
#thememaincontent a[class*="blog"][class*="title"]:hover {
  color: var(--brand) !important;
  text-decoration: underline;
}

/* 8) Mobile */
@media (max-width: 768px) {
  #thememaincontent .theme-blog-post-header-area h1 {
    font-size: 28px;
    margin-top: 36px;
    margin-bottom: 20px;
  }
  #thememaincontent .theme-blog-post-content .zpcontainer,
  #thememaincontent .theme-blog-post-header-area .zpcontainer {
    max-width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #thememaincontent .theme-blog-post-content h1 { font-size: 24px; }
  #thememaincontent .theme-blog-post-content h2 { font-size: 20px; }
  #thememaincontent .theme-blog-post-content h3 { font-size: 18px; }
}
/* ===== PANIC FIX: aligner TOUT à gauche sous le titre, quoi qu'il arrive ===== */

/* Cadre commun pour le titre de l'article et le contenu */
#thememaincontent .theme-blog-post-header-area,
#thememaincontent .theme-blog-post-content {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
  text-align: left !important;
}

/* Tous les conteneurs internes: aucune marge/padding à gauche */
#thememaincontent .theme-blog-post-content .zpcontainer,
#thememaincontent .theme-blog-post-content .zpcontainer-fluid,
#thememaincontent .theme-blog-post-content .zprow,
#thememaincontent .theme-blog-post-content .zpcol,
#thememaincontent .theme-blog-post-content [class*="container"],
#thememaincontent .theme-blog-post-content [class*="row"],
#thememaincontent .theme-blog-post-content [class*="col"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Si le thème injecte des styles inline, on les annule */
#thememaincontent .theme-blog-post-content [style*="padding-left"],
#thememaincontent .theme-blog-post-content [style*="margin-left"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Tout le contenu éditorial aligné à gauche sans indentation parasite */
#thememaincontent .theme-blog-post-content h1,
#thememaincontent .theme-blog-post-content h2,
#thememaincontent .theme-blog-post-content h3,
#thememaincontent .theme-blog-post-content p,
#thememaincontent .theme-blog-post-content .zpelem-heading,
#thememaincontent .theme-blog-post-content .zpelem-text,
#thememaincontent .theme-blog-post-content div,
#thememaincontent .theme-blog-post-content img {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* On restitue UNIQUEMENT l'indentation des listes pour la lisibilité */
#thememaincontent .theme-blog-post-content ul,
#thememaincontent .theme-blog-post-content ol {
  padding-left: 24px !important;
  margin-left: 0 !important;
}

/* Supprimer les CTA du modèle uniquement */
#thememaincontent .theme-blog-post-content .zpelem-button,
#thememaincontent .theme-blog-post-content [class*="btn"],
#thememaincontent .theme-blog-post-content [class*="button"],
#thememaincontent .theme-blog-post-content [class*="cta"] {
  display: none !important;
}

/* Mobile: même logique, gutter réduit */
@media (max-width: 768px) {
  #thememaincontent .theme-blog-post-header-area,
  #thememaincontent .theme-blog-post-content {
    max-width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}