/* =====================================================================
   Arts & Ménagers — Feuille de style d'article de blog PARTAGÉE
   Chargée sur TOUS les articles (single post) via mu-plugin am-article-styles.php
   Classes réutilisables par le pipeline marketing/wp :
     • FAQ accordéons : .am-faq > .am-faq__item(details) > .am-faq__q(summary)/.am-faq__a
       Air supplémentaire devant la section FAQ : <h2 class="am-faq-title">
     • CTA premium : .am-cta-group > .am-cta(.am-cta--sav) + boutons
       .am-btn / .am-btn--primary (plein anthracite), .am-btn--ghost / .am-btn--secondary (contour)
   Charte A&M : MONOCHROME — anthracite/noir #1a1a1a + blanc. Pas d'accent coloré.
   NB : on conserve le rythme par défaut du thème pour les H2/H3 (pas de margin générique).
   ===================================================================== */

/* ── Respiration UNIQUEMENT devant la section FAQ (le reste = défaut thème) ── */
.single-post .entry-content h2.am-faq-title{ margin-top:2.6em !important; }

/* ── Figures du corps : la légende respire sous l'image, puis écart NET avant le ──
   ── titre/paragraphe suivant. Cible UNIQUEMENT les figures (pas un margin H2 générique). ──
   ── La marge basse de la figure et la marge haute du titre suivant fusionnent (collapse) ──
   ── → on obtient ~1.9em sans sur-aérer le reste de l'article. ── */
.single-post .entry-content figure{ margin:1.4em 0 1.9em !important; }
.single-post .entry-content figure img{ display:block; margin:0; }
.single-post .entry-content figcaption{ margin-top:.6em; line-height:1.5; }

/* ── FAQ accordéons (natifs <details>/<summary>, monochrome) ── */
.am-faq{ margin:1.6em 0; border-top:1px solid #e0e0e0; }
.am-faq__item{ border-bottom:1px solid #e0e0e0; }
.am-faq__q{
  list-style:none; cursor:pointer; position:relative;
  padding:1.05em 2.4em 1.05em .2em;
  font-weight:600; color:#1a1a1a; font-size:1.05em; line-height:1.45;
  transition:color .2s ease; outline:none;
}
.am-faq__q::-webkit-details-marker{ display:none; }
.am-faq__q:hover,
.am-faq__q:focus-visible{ color:#000; }
.am-faq__q::after{
  content:""; position:absolute; right:.45em; top:50%;
  width:.6em; height:.6em; margin-top:-.42em;
  border-right:2px solid #b0b0b0; border-bottom:2px solid #b0b0b0;
  transform:rotate(45deg);
  transition:transform .25s ease, border-color .2s ease;
}
.am-faq__q:hover::after{ border-color:#1a1a1a; }
.am-faq__item[open] .am-faq__q::after{ transform:rotate(-135deg); margin-top:-.18em; border-color:#1a1a1a; }
.am-faq__a{ padding:0 .2em 1.15em; color:#444; line-height:1.65; }
.am-faq__a p{ margin:0; }

/* ── CTA : groupe (côte à côte desktop, empilé mobile) ── */
.single-post .entry-content .am-cta-group{
  display:flex; flex-wrap:wrap; gap:8px; margin:2.6rem 0;
}
/* wpautop insère un <br> entre les deux <a> (séparés par un saut de ligne dans le
   post_content) → il ajoutait une hauteur de ligne ENTIÈRE en plus du gap, d'où des
   boutons « trop éloignés ». On neutralise ce <br> : seul le gap:8px subsiste. */
.single-post .entry-content .am-cta-group br{ display:none; }
/* Aucune marge résiduelle sur les boutons du groupe (espacement = gap uniquement). */
.single-post .entry-content .am-cta-group a.am-btn{ margin:0; }
.single-post .entry-content .am-cta{
  flex:1 1 280px; margin:0;
  background:#f7f7f6; border:1px solid #ececea; border-radius:16px;
  padding:1.7rem 1.7rem 1.85rem;
  display:flex; flex-direction:column;
}
.single-post .entry-content .am-cta--sav{ background:#f5f5f4; border-color:#e6e6e4; }
.single-post .entry-content .am-cta p{ margin:0 0 1.1rem; line-height:1.6; }
.single-post .entry-content .am-cta p:last-child{ margin-top:auto; margin-bottom:0; }

/* ── Boutons premium (anthracite charte A&M) ── */
.single-post .entry-content a.am-btn{
  display:inline-block; text-decoration:none; text-align:center;
  background:#1a1a1a; color:#fff !important;
  padding:11px 24px; border-radius:11px;
  font-weight:600; font-size:1rem; line-height:1.3; letter-spacing:.2px;
  border:2px solid #1a1a1a; cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s, box-shadow .2s;
  box-shadow:0 2px 8px rgba(26,26,26,.18);
}
.single-post .entry-content a.am-btn:hover{
  background:#2a2a2a; border-color:#2a2a2a; color:#fff !important;
  transform:translateY(-1px); box-shadow:0 5px 14px rgba(26,26,26,.26);
}
.single-post .entry-content a.am-btn--primary{ background:#1a1a1a; border-color:#1a1a1a; color:#fff !important; }
/* Boutons du groupe CTA : MÊME largeur (remplissent leur carte, alignés) */
.single-post .entry-content .am-cta-group a.am-btn{ display:block; width:100%; }
/* secondaire / contour */
.single-post .entry-content a.am-btn--ghost,
.single-post .entry-content a.am-btn--secondary{
  background:transparent; color:#1a1a1a !important; border-color:#1a1a1a; box-shadow:none;
}
.single-post .entry-content a.am-btn--ghost:hover,
.single-post .entry-content a.am-btn--secondary:hover{
  background:#1a1a1a; color:#fff !important; border-color:#1a1a1a;
  transform:translateY(-1px); box-shadow:0 5px 14px rgba(26,26,26,.22);
}

/* ── Mobile : CTA empilés, boutons pleine largeur ── */
@media (max-width:782px){
  .single-post .entry-content .am-cta-group{ flex-direction:column; gap:8px; }
}