/*
Theme Name:  Astra Child — Webmarketing Conseil (Noir & Jaune)
Description: Child theme Astra pour le blog Webmarketing Conseil. Design noir / jaune-vert aligné sur la nouvelle homepage. Priorité : lisibilité des articles (colonne 720px).
Author:      Webmarketing Conseil
Template:    astra
Version:     1.0.0
Text Domain: astra-child-wmc
*/

/* Polices importees DIRECTEMENT dans le CSS (robuste : marche meme si WP Rocket
   retire la feuille Google Fonts chargee par functions.php) */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:ital,opsz,wght@1,8..60,400;1,8..60,600&display=swap');

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  --wmc-black:       #161410;  /* fond principal sombre */
  --wmc-black-soft:  #1e1b15;  /* cartes sur fond sombre */
  --wmc-black-line:  #2c2820;  /* bordures sur fond sombre */
  --wmc-lime:        #c8f231;  /* accent jaune-vert */
  --wmc-cream:       #f2efe4;  /* texte sur fond sombre */
  --wmc-paper:       #faf8f1;  /* fond zone de lecture */
  --wmc-ink:         #1b1812;  /* texte sur fond clair */
  --wmc-ink-soft:    #5f594a;  /* texte secondaire sur clair */
  --wmc-muted-dark:  #a59f8e;  /* texte secondaire sur sombre */
  --wmc-paper-line:  #e4dfd0;  /* bordures sur fond clair */

  --wmc-font-sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wmc-font-serif: "Source Serif 4", Georgia, serif;
  --wmc-font-mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --wmc-content-width: 900px;
}

html, body { overflow-x: clip; }

body {
  font-family: var(--wmc-font-sans);
  font-size: 19px;
  line-height: 1.75;
  color: var(--wmc-ink);
  background: var(--wmc-paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--wmc-lime); color: var(--wmc-black); }

/* =========================================================
   POLICE FORCEE (bat la typographie globale d'Astra qui s'impose sinon)
   ========================================================= */
body,
h1, h2, h3, h4, h5, h6,
p, li, blockquote,
.entry-title, .ast-archive-title, .page-title,
.entry-content, .entry-content p, .entry-content li,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.ast-article-post .entry-title, .ast-article-post p,
.main-header-menu .menu-link, .ast-builder-menu .menu-link, .ast-hfb-menu .menu-link {
  font-family: var(--wmc-font-sans) !important;
}
/* Exceptions serif (apres, donc gagnent) */
.entry-content blockquote, .entry-content blockquote p, .entry-content em {
  font-family: var(--wmc-font-serif) !important;
}
/* Exceptions mono (labels, meta, code) */
.entry-meta, .entry-meta *, .wmc-kicker, .ast-breadcrumbs, .ast-breadcrumbs *,
.cat-links a, .widget-title, .footer-copyright, .ast-pagination .page-numbers,
.read-more, .read-more a, .entry-content figcaption, .entry-content th,
.entry-content code, .entry-content pre, .entry-content blockquote cite,
.site-description {
  font-family: var(--wmc-font-mono) !important;
}

a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wmc-font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: inherit;
}

/* Labels monospace réutilisables (kickers, méta) */
.entry-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

.wmc-kicker,
.entry-meta,
.ast-breadcrumbs,
.cat-links a {
  font-family: var(--wmc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 500;
}

/* =========================================================
   2. HEADER (surcharges couleurs Astra)
   ========================================================= */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
  background-color: var(--wmc-black) !important;
  border-bottom: 1px solid var(--wmc-black-line);
}

.site-title a,
.site-title a:hover,
.site-description { color: var(--wmc-cream) !important; }

/* MENU : on force police + couleur + taille quelle que soit la structure
   d'Astra (header builder, layout 1/2, menu desktop ou builder). */
.main-header-menu .menu-link,
.main-header-menu a,
.ast-builder-menu .menu-link,
.ast-builder-menu-1 .menu-link,
.header-main-layout-1 .main-header-menu .menu-link,
.ast-hfb-menu .menu-link,
#ast-hf-menu-1 .menu-link,
nav.site-navigation .menu-link,
nav.main-navigation a,
.ast-header-account-link {
  color: var(--wmc-cream) !important;
  font-family: var(--wmc-font-sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

.main-header-menu .menu-link:hover,
.main-header-menu a:hover,
.ast-builder-menu .menu-link:hover,
.ast-hfb-menu .menu-link:hover,
nav.main-navigation a:hover,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.ast-hfb-menu .current-menu-item > .menu-link,
.current-menu-item > .menu-link {
  color: var(--wmc-lime) !important;
}

/* Sous-menus deroulants : fond sombre */
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu,
.ast-hfb-menu .sub-menu {
  background: var(--wmc-black-soft) !important;
  border: 1px solid var(--wmc-black-line) !important;
}

.ast-mobile-menu-trigger-minimal,
.menu-toggle { color: var(--wmc-cream) !important; }

/* =========================================================
   3. BOUTONS
   ========================================================= */
.ast-custom-button,
.ast-button,
.wp-block-button__link,
button:not(.menu-toggle):not(.ast-mobile-menu-trigger-minimal),
input[type="submit"],
input[type="button"] {
  font-family: var(--wmc-font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--wmc-lime) !important;
  color: var(--wmc-black) !important;
  border: none;
  border-radius: 6px;
  padding: 15px 24px;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}

.ast-custom-button:hover,
.ast-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: var(--wmc-black) !important;
}

/* =========================================================
   4. FIL D'ARIANE
   ========================================================= */
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper { color: var(--wmc-muted-dark); }
.ast-breadcrumbs a { color: var(--wmc-muted-dark); text-decoration: none; }
.ast-breadcrumbs a:hover { color: var(--wmc-lime); }
.ast-breadcrumbs .separator { opacity: .5; margin: 0 6px; }

/* =========================================================
   5. INDEX DU BLOG / ARCHIVES (fond sombre)
   ========================================================= */
body.blog,
body.archive,
body.search {
  background: var(--wmc-black);
  color: var(--wmc-cream);
}

body.blog .site-content,
body.archive .site-content,
body.search .site-content { background: var(--wmc-black); }

/* Bandeau titre d'archive */
.ast-archive-description {
  max-width: 880px;
  margin: 40px auto 24px;
  padding: 24px 0 8px;
  text-align: left;
}

.ast-archive-description .page-title,
.ast-archive-title {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  color: var(--wmc-cream);
  line-height: 1.05;
}

.ast-archive-description .page-title em,
.ast-archive-title em {
  font-family: var(--wmc-font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--wmc-lime);
}

.ast-archive-description p { color: var(--wmc-muted-dark); font-size: 19px; }

/* Grille de cartes (1 colonne : la sidebar Astra reste active) */
body.blog .site-main,
body.archive .site-main,
body.search .site-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 64px;
}

@media (max-width: 820px) {
  body.blog .site-main,
  body.archive .site-main,
  body.search .site-main { gap: 22px; }
}

/* Carte article — specificite renforcee pour battre les regles d'Astra
   (.ast-separate-container .ast-article-post { background:#fff }) */
body.blog .ast-article-post,
body.archive .ast-article-post,
body.search .ast-article-post,
.ast-separate-container .site-main .ast-article-post {
  background: var(--wmc-black-soft) !important;
  border: 1px solid var(--wmc-black-line) !important;
  border-radius: 12px;
  padding: 28px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.blog .ast-article-post:hover,
body.archive .ast-article-post:hover {
  border-color: var(--wmc-lime) !important;
  transform: translateY(-2px);
}

/* Image a la une dans la carte : dans le padding, coins arrondis (pas de marge
   negative — elle coupait les titres des cartes SANS image) */
.ast-article-post .post-thumb,
.ast-article-post .ast-blog-featured-section {
  margin: 0 0 8px;
}
.ast-article-post .post-thumb img,
.ast-article-post .ast-blog-featured-section img {
  width: 100%;
  display: block;
  border-radius: 9px;
}

.ast-article-post .entry-meta,
.ast-article-post .entry-meta a { color: var(--wmc-lime) !important; text-decoration: none; }
.ast-article-post .entry-meta .posted-on,
.ast-article-post .entry-meta .byline { color: var(--wmc-muted-dark); }

.ast-article-post .entry-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}

/* Titre des cartes : couleur creme forcee (bat la couleur sombre d'Astra) */
body.blog .ast-article-post .entry-title,
body.blog .ast-article-post .entry-title a,
body.archive .ast-article-post .entry-title,
body.archive .ast-article-post .entry-title a,
body.search .ast-article-post .entry-title,
body.search .ast-article-post .entry-title a {
  color: var(--wmc-cream) !important;
  text-decoration: none;
}
body.blog .ast-article-post .entry-title a:hover,
body.archive .ast-article-post .entry-title a:hover { color: var(--wmc-lime) !important; }

body.blog .site-main > .ast-article-post:first-of-type .entry-title { font-size: clamp(24px, 2.4vw, 30px); }

.ast-article-post .entry-title a { color: var(--wmc-cream); text-decoration: none; }
.ast-article-post .entry-title a:hover { color: var(--wmc-lime); }

.ast-article-post p,
.ast-article-post .ast-excerpt-container { color: var(--wmc-muted-dark); font-size: 16.5px; line-height: 1.65; margin: 0; }

.ast-article-post .read-more,
.ast-article-post .more-link,
.ast-article-post .ast-the-content + p a {
  font-family: var(--wmc-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ast-article-post .read-more a,
.ast-article-post a.more-link { color: var(--wmc-lime) !important; text-decoration: none; }
.ast-article-post .read-more a:hover,
.ast-article-post a.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Pagination */
.ast-pagination { padding: 24px 0; }
.ast-pagination .page-numbers {
  font-family: var(--wmc-font-mono);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  margin: 0 4px;
  border: 1px solid var(--wmc-black-line);
  border-radius: 6px;
  color: var(--wmc-cream);
  background: transparent;
  text-decoration: none;
}
.ast-pagination .page-numbers.current,
.ast-pagination .page-numbers:hover {
  background: var(--wmc-lime);
  border-color: var(--wmc-lime);
  color: var(--wmc-black);
}

/* =========================================================
   6. ARTICLE (single) — TOUT SOMBRE (noir + texte creme + lime)
   ========================================================= */
body.single-post { background: var(--wmc-black); color: var(--wmc-cream); }

/* Force brute : tous les conteneurs possibles d'Astra passent en NOIR pour
   qu'aucune boite claire ne subsiste, peu importe la structure. */
body.single-post,
body.single-post .site-content,
body.single-post #content,
body.single-post #content > .ast-container,
body.single-post .content-area,
body.single-post .ast-content-area,
body.single-post #primary,
body.single-post #main,
body.single-post .site-main,
body.single-post article.post,
body.single-post .ast-article-post,
body.single-post .ast-separate-container .ast-article-post,
body.single-post .entry-content {
  background: var(--wmc-black) !important;
  background-color: var(--wmc-black) !important;
  box-shadow: none !important;
  border: none !important;
}
body.single-post .ast-article-post { padding: 0 !important; }

/* Reduit le grand espace vide entre le header et le debut de l'article */
body.single-post .site-content { padding-top: 14px !important; }
body.single-post #primary,
body.single-post #main,
body.single-post .ast-article-post,
body.single-post .ast-article-single { padding-top: 0 !important; margin-top: 0 !important; }
body.single-post .ast-breadcrumbs-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
/* Tue tout padding/margin lateral des wrappers Astra (source du decalage gauche du heros) */
body.single-post .ast-article-post,
body.single-post .ast-single-post-order,
body.single-post .ast-single-post-featured-section,
body.single-post .entry-header,
body.single-post .entry-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Heros : titre directement sur le fond noir (pas de boite, comme l'index) */
body.single-post .entry-header {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--wmc-cream);
  border-radius: 0;
  padding: 0;
  margin: 16px 0 36px;
}

body.single-post .entry-header .ast-breadcrumbs { margin-bottom: 18px; display: block; }

body.single-post h1.entry-title {
  font-size: clamp(26px, 2.8vw, 40px) !important;
  font-weight: 800;
  line-height: 1.14;
  color: var(--wmc-cream);
  margin: 6px 0 18px;
}

body.single-post .entry-meta,
body.single-post .entry-meta a { color: var(--wmc-muted-dark) !important; text-decoration: none; }
body.single-post .entry-meta a:hover { color: var(--wmc-lime) !important; }
body.single-post .entry-meta .cat-links a,
body.single-post .cat-links a { color: var(--wmc-lime) !important; }

/* Image à la une */
body.single-post .ast-article-single > .post-thumb,
body.single-post .post-thumb,
body.single-post .ast-single-post-featured-image {
  margin: 0 0 40px;
}
body.single-post .post-thumb img,
body.single-post .ast-single-post-featured-image img { border-radius: 10px; width: 100%; display: block; }

/* ---------- Zone de lecture sombre : le coeur du template ---------- */
.entry-content { color: var(--wmc-cream); }

/* Largeur de lecture : on contraint les enfants, pas le conteneur.
   margin-right:auto seulement (aligne a gauche dans une colonne avec sidebar) */
.entry-content > * {
  max-width: var(--wmc-content-width);
}
.entry-content > .alignwide { max-width: 100%; }
.entry-content > .alignfull { max-width: 100%; }

.entry-content p { margin-bottom: 1.5em; }

.entry-content a {
  color: var(--wmc-cream);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--wmc-lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
.entry-content a:hover { background: var(--wmc-lime); color: var(--wmc-black); text-decoration-color: var(--wmc-black); }

/* === Chips IA (boutons "Synthese ChatGPT / Grok / Gemini / Perplexity / Claude") ===
   Tous ne partagent pas le meme attribut : ChatGPT/Claude ont onclick=swaiCopyThenOpen,
   les autres sont de simples liens. On cible donc par DOMAINE + par onclick. */
.entry-content a[onclick*="swaiCopyThenOpen"],
.entry-content a[href*="claude.ai"],
.entry-content a[href*="chatgpt.com"],
.entry-content a[href*="chat.openai.com"],
.entry-content a[href*="openai.com"],
.entry-content a[href*="x.com/i/grok"],
.entry-content a[href*="grok.com"],
.entry-content a[href*="grok.x.ai"],
.entry-content a[href*="perplexity.ai"],
.entry-content a[href*="gemini.google.com"],
.entry-content a[href*="bard.google.com"],
.entry-content a[href*="google.com/search?udm"],
a[onclick*="swaiCopyThenOpen"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--wmc-black-soft) !important;
  color: var(--wmc-cream) !important;
  border: 1px solid var(--wmc-black-line) !important;
  border-radius: 10px !important;
  padding: 9px 15px !important;
  margin: 0 8px 10px 0 !important;
  font-family: var(--wmc-font-sans) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.entry-content a[onclick*="swaiCopyThenOpen"]:hover,
.entry-content a[href*="claude.ai"]:hover,
.entry-content a[href*="chatgpt.com"]:hover,
.entry-content a[href*="chat.openai.com"]:hover,
.entry-content a[href*="openai.com"]:hover,
.entry-content a[href*="x.com/i/grok"]:hover,
.entry-content a[href*="grok.com"]:hover,
.entry-content a[href*="grok.x.ai"]:hover,
.entry-content a[href*="perplexity.ai"]:hover,
.entry-content a[href*="gemini.google.com"]:hover,
.entry-content a[href*="bard.google.com"]:hover,
.entry-content a[href*="google.com/search?udm"]:hover,
a[onclick*="swaiCopyThenOpen"]:hover {
  background: var(--wmc-lime) !important;
  color: var(--wmc-black) !important;
  border-color: var(--wmc-lime) !important;
}

.entry-content em { font-family: var(--wmc-font-serif); font-style: italic; font-size: 1.02em; }
.entry-content strong { font-weight: 700; }

/* Titres de section : couleur creme forcee (Astra les met en sombre) */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  color: var(--wmc-cream) !important;
}

/* Titres de section avec tiret lime (rappel homepage) */
.entry-content h2 {
  font-size: clamp(28px, 3.2vw, 34px);
  margin: 2.2em auto 0.8em;
  line-height: 1.18;
}
.entry-content h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  background: var(--wmc-lime);
  margin-bottom: 16px;
}

.entry-content h3 { font-size: 24px; margin: 1.8em auto 0.7em; }
.entry-content h4 { font-size: 20px; margin: 1.6em auto 0.6em; }

/* Listes */
.entry-content ul, .entry-content ol { padding-left: 26px; margin-bottom: 1.5em; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content ul > li::marker { color: var(--wmc-lime); content: "■  "; font-size: 0.7em; }
.entry-content ol > li::marker { font-family: var(--wmc-font-mono); font-weight: 700; color: var(--wmc-cream); }

/* Citation : carte legerement plus claire + filet lime (sur fond noir) */
.entry-content blockquote,
.entry-content .wp-block-quote {
  background: var(--wmc-black-soft);
  color: var(--wmc-cream);
  border: 1px solid var(--wmc-black-line);
  border-left: 5px solid var(--wmc-lime);
  border-radius: 10px;
  padding: 30px 36px 28px;
  margin: 2.2em 0;
  font-family: var(--wmc-font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.55;
  position: relative;
}
.entry-content blockquote::before {
  content: "“";
  font-family: var(--wmc-font-serif);
  color: var(--wmc-lime);
  font-size: 64px;
  line-height: 0;
  display: block;
  margin: 18px 0 6px;
}
.entry-content blockquote p { margin-bottom: 0.6em; }
.entry-content blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--wmc-font-mono);
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wmc-lime);
}

/* Section reglages : titres / blocs alignes a gauche (max 720, pas de centrage) */
.entry-content h2 { margin-left: 0; margin-right: 0; }
.entry-content h3, .entry-content h4 { margin-left: 0; margin-right: 0; }

/* Images + légendes */
.entry-content img { border-radius: 8px; height: auto; }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption,
.entry-content .wp-caption-text {
  font-family: var(--wmc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wmc-muted-dark);
  text-align: left;
  margin-top: 10px;
}

/* Tableaux (sombre) */
.entry-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 16.5px; color: var(--wmc-cream); }
.entry-content th {
  font-family: var(--wmc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  background: var(--wmc-lime);
  color: var(--wmc-black);
  padding: 12px 16px;
}
.entry-content th:first-child { border-radius: 6px 0 0 6px; }
.entry-content th:last-child { border-radius: 0 6px 6px 0; }
.entry-content td { padding: 14px 16px; border-bottom: 1px solid var(--wmc-black-line); vertical-align: top; }

/* Code (sombre, avec filet) */
.entry-content pre, .entry-content .wp-block-code {
  background: var(--wmc-black-soft);
  color: var(--wmc-cream);
  font-family: var(--wmc-font-mono);
  font-size: 15px;
  border: 1px solid var(--wmc-black-line);
  border-radius: 8px;
  padding: 22px 26px;
  overflow-x: auto;
  margin: 2em 0;
}
.entry-content code { font-family: var(--wmc-font-mono); font-size: 0.88em; background: rgba(200, 242, 49, 0.16); color: var(--wmc-lime); padding: 2px 6px; border-radius: 4px; }
.entry-content pre code { background: none; padding: 0; color: var(--wmc-cream); }

/* Séparateur */
.entry-content hr, .entry-content .wp-block-separator {
  border: none;
  width: 64px;
  height: 5px;
  background: var(--wmc-lime);
  margin: 3em 0;
}

/* =========================================================
   7. BOÎTE AUTEUR + ARTICLES SIMILAIRES (Astra)
   ========================================================= */
/* Boite auteur : carte plus claire sur fond noir */
.ast-author-box,
.ast-single-author-box {
  max-width: var(--wmc-content-width);
  margin: 48px 0;
  background: var(--wmc-black-soft);
  color: var(--wmc-cream);
  border: 1px solid var(--wmc-black-line);
  border-radius: 12px;
  padding: 32px 36px;
}
.ast-author-box img.avatar { border-radius: 50%; border: 3px solid var(--wmc-lime); }
.ast-author-box .author-title,
.ast-author-box h4 { color: var(--wmc-cream); }
.ast-author-box p { color: var(--wmc-muted-dark); font-size: 16.5px; }
.ast-author-box a { color: var(--wmc-lime); }

/* Articles similaires : panneau contenu (compatible sidebar, pas de 100vw) */
.ast-single-related-posts-container {
  background: var(--wmc-black-soft);
  border: 1px solid var(--wmc-black-line);
  border-radius: 14px;
  padding: 40px clamp(24px, 4vw, 44px) 44px;
  margin: 48px 0 0;
}
.ast-related-posts-title-section .ast-related-posts-title,
.ast-single-related-posts-container .ast-related-posts-title { color: var(--wmc-cream); font-weight: 900; }
.ast-related-post-content .entry-title a { color: var(--wmc-cream); }
.ast-related-post-content .entry-title a:hover { color: var(--wmc-lime); }
/* Cartes "a lire ensuite" : un cran plus clair que le panneau pour ressortir */
body.single-post .ast-single-related-posts-container .ast-article-post {
  background: var(--wmc-black) !important;
  border: 1px solid var(--wmc-black-line) !important;
}

/* =========================================================
   8. COMMENTAIRES + FORMULAIRES
   ========================================================= */
.comments-area { max-width: var(--wmc-content-width); margin: 48px 0; color: var(--wmc-cream); }
.comments-area .comments-title,
.comments-area .comment-reply-title { font-weight: 800; font-size: 26px; color: var(--wmc-cream); }
.comments-area .comment-body { border: 1px solid var(--wmc-black-line); border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.comments-area .comment-meta { font-family: var(--wmc-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

input[type="text"], input[type="email"], input[type="url"],
input[type="search"], textarea {
  font-family: var(--wmc-font-sans);
  font-size: 16px;
  border: 2px solid var(--wmc-black-line);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--wmc-black-soft);
  color: var(--wmc-cream);
}
input::placeholder, textarea::placeholder { color: var(--wmc-muted-dark); }
input:focus, textarea:focus {
  outline: 3px solid var(--wmc-lime);
  outline-offset: 1px;
  border-color: var(--wmc-lime);
}

/* =========================================================
   9. SIDEBAR (si activée quelque part)
   ========================================================= */
.widget-area .widget {
  background: var(--wmc-black-soft);
  border: 1px solid var(--wmc-black-line);
  border-radius: 12px;
  padding: 24px;
  color: var(--wmc-cream);
}
.widget-area .widget-title {
  font-family: var(--wmc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wmc-lime);
}
.widget-area a { color: var(--wmc-cream); }
.widget-area a:hover { color: var(--wmc-lime); }

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer,
.ast-builder-footer,
.site-footer .ast-builder-grid-row-container {
  background: var(--wmc-black) !important;
  color: var(--wmc-muted-dark);
  border-top: 1px solid var(--wmc-black-line);
}
.site-footer a { color: var(--wmc-cream); text-decoration: none; }
.site-footer a:hover { color: var(--wmc-lime); }
.site-footer .widget-title { color: var(--wmc-cream); }
.site-footer .ast-footer-copyright,
.site-footer .footer-copyright {
  font-family: var(--wmc-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  body { font-size: 17.5px; }
  body.single-post .entry-header { padding-top: 44px; padding-bottom: 40px; }
  .entry-content blockquote { padding: 28px 24px 24px; font-size: 19px; }
  .ast-article-post { padding: 22px; }
  .ast-article-post .post-thumb img { width: calc(100% + 44px); max-width: calc(100% + 44px); margin: -22px 0 6px -22px; }
}