/**
 * Maison Drapée — Editorial styling for the SEO guide posts
 * (mosaique-salle-de-bain-guide, mur-vegetal-artificiel-installation,
 * papier-peint-chambre-idees-tendance, salle-de-bain-design,
 * mosaiques-de-marbre-revisitees, panneaux-muraux-a-lattes-...).
 *
 * The post_content of each guide uses semantic class names (guide-lead,
 * guide-figure, guide-faq, etc.) but until this stylesheet shipped
 * 2026-05-07 those classes had no CSS — the pages rendered with default
 * Blocksy single-post typography, which felt cramped and visually
 * unrelated to the home v2 design language.
 *
 * Brand palette mirrors the home-v2 React theme:
 *   --mdr-cream: #faf6ec
 *   --mdr-ink:   #14110d
 *   --mdr-terracotta: #c0775a
 *   --mdr-sable: #e6dfca
 */

:root {
  --mdr-cream: #faf6ec;
  --mdr-ink: #14110d;
  --mdr-terracotta: #c0775a;
  --mdr-sable: #e6dfca;
}

/* Scope to the WP entry-content so we don't bleed into header/footer */
.entry-content {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--mdr-ink);
  line-height: 1.75;
  font-size: 17px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.entry-content h1.page-title,
.entry-content h1.entry-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mdr-ink);
  font-weight: 400;
  margin: 0 0 32px;
}

.entry-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--mdr-ink);
  margin: 60px 0 20px;
  letter-spacing: -0.005em;
}

.entry-content h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mdr-ink);
  margin: 36px 0 12px;
}

.entry-content p {
  margin: 0 0 18px;
}

.entry-content a {
  color: var(--mdr-ink);
  text-decoration: underline;
  text-decoration-color: var(--mdr-terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease;
}

.entry-content a:hover {
  text-decoration-color: var(--mdr-ink);
}

.entry-content strong {
  font-weight: 600;
  color: var(--mdr-ink);
}

.entry-content em {
  font-style: italic;
}

.entry-content ul,
.entry-content ol {
  padding-left: 0;
  margin: 0 0 22px;
  list-style: none;
}

.entry-content ul li,
.entry-content ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.7;
}

.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 14px;
  height: 1px;
  background: var(--mdr-terracotta);
}

.entry-content ol {
  counter-reset: mdr-count;
}

.entry-content ol li {
  counter-increment: mdr-count;
}

.entry-content ol li::before {
  content: counter(mdr-count, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--mdr-terracotta);
  font-weight: 400;
  width: 28px;
}

.entry-content ol li {
  padding-left: 36px;
}

/* ==========================================================
 *  guide-lead — large editorial intro paragraph
 * ========================================================== */

.entry-content .guide-lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  color: var(--mdr-ink);
  margin: 0 0 6vh;
  max-width: 64ch;
  font-weight: 400;
}

.entry-content .guide-lead strong {
  font-style: normal;
  font-weight: 400;
  border-bottom: 1px solid var(--mdr-terracotta);
}

/* ==========================================================
 *  guide-figure — inline figure with caption
 * ========================================================== */

.entry-content .guide-figure {
  margin: 48px 0;
  padding: 0;
}

.entry-content .guide-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--mdr-cream);
}

.entry-content .guide-figure figcaption {
  font-size: 13px;
  line-height: 1.6;
  color: #5a5754;
  font-style: italic;
  margin-top: 14px;
  padding-left: 0;
  border-left: 2px solid var(--mdr-terracotta);
  padding-left: 14px;
}

.entry-content .guide-figure figcaption a {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* Hero figure — bigger, edge-to-edge feel */
.entry-content .guide-figure-hero {
  margin: 0 0 6vh;
}

.entry-content .guide-figure-hero img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ==========================================================
 *  guide-checklist — checklist with terracotta dashes
 * ========================================================== */

.entry-content .guide-checklist {
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.entry-content .guide-checklist li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  line-height: 1.7;
}

.entry-content .guide-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 22px;
  height: 1px;
  background: var(--mdr-terracotta);
}

.entry-content .guide-checklist li strong {
  display: inline;
  margin-right: 4px;
}

/* ==========================================================
 *  guide-formats / guide-zones — bullet variants with eyebrow
 * ========================================================== */

.entry-content .guide-formats,
.entry-content .guide-zones {
  margin: 28px 0;
  padding: 0;
  list-style: none;
}

.entry-content .guide-formats li,
.entry-content .guide-zones li {
  position: relative;
  padding: 18px 0 18px 56px;
  border-bottom: 1px solid var(--mdr-sable);
  line-height: 1.7;
}

.entry-content .guide-formats li:last-child,
.entry-content .guide-zones li:last-child {
  border-bottom: none;
}

.entry-content .guide-formats li::before,
.entry-content .guide-zones li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 40px;
  height: 1px;
  background: var(--mdr-terracotta);
}

/* When zones are an ordered list, replace dash with elegant number */
.entry-content ol.guide-zones {
  counter-reset: zone-count;
}

.entry-content ol.guide-zones li {
  counter-increment: zone-count;
  padding-left: 56px;
}

.entry-content ol.guide-zones li::before {
  content: counter(zone-count, decimal-leading-zero);
  width: auto;
  height: auto;
  background: transparent;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--mdr-terracotta);
  top: 14px;
}

/* ==========================================================
 *  guide-steps — numbered DIY steps
 * ========================================================== */

.entry-content .guide-steps {
  margin: 28px 0;
  padding: 0;
  list-style: none;
  counter-reset: step-count;
}

.entry-content .guide-steps li {
  counter-increment: step-count;
  position: relative;
  padding: 20px 0 20px 60px;
  border-bottom: 1px solid var(--mdr-sable);
  line-height: 1.7;
}

.entry-content .guide-steps li::before {
  content: counter(step-count, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  color: var(--mdr-terracotta);
  width: auto;
  height: auto;
  background: transparent;
}

.entry-content .guide-steps li:last-child {
  border-bottom: none;
}

/* ==========================================================
 *  guide-mistakes — 5 erreurs à éviter
 * ========================================================== */

.entry-content .guide-mistakes {
  margin: 28px 0;
  padding: 32px 32px 16px;
  background: rgba(192, 119, 90, 0.06);
  list-style: none;
  counter-reset: mistake-count;
  border-left: 3px solid var(--mdr-terracotta);
}

.entry-content .guide-mistakes li {
  counter-increment: mistake-count;
  position: relative;
  padding: 0 0 16px 36px;
  margin-bottom: 16px;
  border-bottom: 1px dashed rgba(20, 17, 13, 0.12);
  line-height: 1.65;
}

.entry-content .guide-mistakes li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.entry-content .guide-mistakes li::before {
  content: counter(mistake-count) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--mdr-terracotta);
  font-weight: 400;
  width: auto;
  height: auto;
  background: transparent;
}

/* ==========================================================
 *  guide-pricing — bullet list of typical budgets
 * ========================================================== */

.entry-content .guide-pricing {
  margin: 28px 0;
  padding: 32px;
  background: var(--mdr-cream);
  list-style: none;
}

.entry-content .guide-pricing li {
  position: relative;
  padding: 12px 0 12px 0;
  border-bottom: 1px solid var(--mdr-sable);
  line-height: 1.6;
}

.entry-content .guide-pricing li:last-child {
  border-bottom: none;
}

.entry-content .guide-pricing li::before {
  display: none;
}

/* ==========================================================
 *  guide-faq — definition list with elegant disclosure
 * ========================================================== */

.entry-content .guide-faq {
  margin: 32px 0;
  padding: 0;
}

.entry-content .guide-faq dt {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  color: var(--mdr-ink);
  margin: 28px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--mdr-sable);
  position: relative;
}

.entry-content .guide-faq dt:first-child {
  border-top: none;
  padding-top: 0;
}

.entry-content .guide-faq dt::before {
  content: 'Q.';
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mdr-terracotta);
  font-style: normal;
  font-weight: 600;
  margin-right: 12px;
  vertical-align: middle;
}

.entry-content .guide-faq dd {
  margin: 0 0 16px 0;
  padding-left: 32px;
  line-height: 1.7;
  color: #2a2826;
  font-size: 16px;
}

/* ==========================================================
 *  guide-cta-block — final big CTA to category
 * ========================================================== */

.entry-content .guide-cta-block {
  text-align: center;
  margin: 8vh 0 4vh;
  padding-top: 6vh;
  border-top: 1px solid var(--mdr-sable);
}

.entry-content .guide-cta {
  display: inline-block;
  padding: 18px 36px;
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    background 220ms ease,
    transform 220ms ease;
  min-height: 52px;
  line-height: 1.2;
}

.entry-content .guide-cta:hover {
  background: var(--mdr-terracotta);
  transform: translateX(4px);
  text-decoration: none;
}

/* ==========================================================
 *  guide-table — comparison tables
 * ========================================================== */

.entry-content .guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 14px;
}

.entry-content .guide-table thead th {
  text-align: left;
  padding: 14px 16px;
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 11px;
  text-transform: uppercase;
}

.entry-content .guide-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mdr-sable);
  vertical-align: top;
}

.entry-content .guide-table tbody tr:last-child td {
  border-bottom: none;
}

.entry-content .guide-table tbody tr:hover {
  background: rgba(192, 119, 90, 0.04);
}

/* ==========================================================
 *  Responsive
 * ========================================================== */

@media (max-width: 760px) {
  .entry-content {
    font-size: 16px;
    padding: 0 5vw;
  }

  .entry-content .guide-lead {
    font-size: 18px;
  }

  .entry-content h2 {
    margin-top: 48px;
  }

  .entry-content .guide-figure {
    margin: 32px 0;
  }

  .entry-content .guide-mistakes {
    padding: 20px 20px 8px;
  }

  .entry-content .guide-pricing {
    padding: 20px;
  }

  .entry-content .guide-faq dt {
    font-size: 17px;
  }

  .entry-content .guide-faq dd {
    padding-left: 0;
  }

  .entry-content .guide-cta {
    padding: 16px 24px;
    font-size: 11px;
  }

  .entry-content .guide-table {
    font-size: 13px;
  }

  .entry-content .guide-table thead th,
  .entry-content .guide-table tbody td {
    padding: 10px 8px;
  }
}