:root {
  --weda-blog-blue-900: #000000;
  --weda-blog-blue-700: #3843D0;
  --weda-blog-blue-100: #EBF0FA;
  --weda-blog-blue-50: #ECF1FB;
  --weda-blog-pink-100: #fff0f5;
  --weda-blog-warning-100: #fff7e6;
  --weda-blog-neutral-100: #F9FAFB;
  --weda-blog-text: #000000;
  --weda-blog-muted: #5E6075;
  --weda-blog-border: rgba(56, 67, 208, .14);
  --weda-blog-radius: 28.8px;
  --weda-blog-container: 1348px;
  --weda-blog-sidebar: 250px;
  --weda-blog-content: 860px;
  --weda-blog-gap: 72px;
}

/* Preview/all-in-one layout — mirrors the article desktop composition: left sticky menu + content column. */
.weda-blog-preview-page {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: var(--weda-blog-container);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 120px);
  display: flex;
  gap: var(--weda-blog-gap);
  align-items: flex-start;
  color: var(--weda-blog-text);
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.weda-blog-preview-sidebar {
  position: sticky;
  top: 120px;
  flex: 0 0 var(--weda-blog-sidebar);
  align-self: flex-start;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--weda-blog-border);
  box-shadow: 0 18px 48px rgba(7, 31, 95, .07);
}
.weda-blog-preview-sidebar__title {
  margin: 0 0 18px;
  color: var(--weda-blog-blue-900);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}
.weda-blog-preview-sidebar__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.weda-blog-preview-sidebar__list a {
  display: block;
  color: var(--weda-blog-muted);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.35;
}
.weda-blog-preview-sidebar__list a:hover,
.weda-blog-preview-sidebar__list a:focus {
  color: var(--weda-blog-blue-700);
  text-decoration: underline;
}
.weda-blog-preview-content {
  flex: 0 1 var(--weda-blog-content);
  min-width: 0;
  max-width: var(--weda-blog-content);
}
.weda-blog-preview-kicker {
  margin: 0 0 12px;
  color: var(--weda-blog-blue-700);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.weda-blog-preview-title {
  margin: 0 0 20px;
  color: var(--weda-blog-text);
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: 0;
}
.weda-blog-preview-intro {
  margin: 0 0 clamp(40px, 5vw, 64px);
  max-width: 760px;
  color: var(--weda-blog-muted);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}
.weda-blog-preview-section {
  scroll-margin-top: 120px;
  margin-block: clamp(44px, 5vw, 72px) 0;
}
.weda-blog-preview-section > h2 {
  margin: 0 0 20px;
  color: var(--weda-blog-text);
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  letter-spacing: 0;
}

.weda-blog-block {
  box-sizing: border-box;
  margin: clamp(24px, 4vw, 44px) 0;
  font-family: inherit;
  color: var(--weda-blog-text);
}

.weda-callout {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--weda-blog-radius);
  border: 1px solid rgba(18, 57, 166, .08);
}
.weda-callout--blue { background: var(--weda-blog-blue-50); }
.weda-callout--pink { background: var(--weda-blog-pink-100); }
.weda-callout--neutral { background: var(--weda-blog-neutral-100); }
.weda-callout--warning { background: var(--weda-blog-warning-100); }
.weda-callout__eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--weda-blog-blue-700);
}
.weda-callout__title,
.weda-cta__title {
  margin: 0 0 12px;
  color: var(--weda-blog-blue-900);
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
}
.weda-callout__content > :first-child { margin-top: 0; }
.weda-callout__content > :last-child { margin-bottom: 0; }

.weda-cta {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 28.8px;
  background: var(--weda-blog-blue-50);
  border: 1px solid rgba(18, 57, 166, .08);
}
.weda-cta--blue {
  background: var(--weda-blog-blue-900);
  color: #fff;
}
.weda-cta--blue .weda-cta__title,
.weda-cta--blue .weda-cta__text { color: #fff; }
.weda-cta--compact { padding: 22px 26px; border-radius: 22px; }
.weda-cta__body { min-width: 0; }
.weda-cta__text { margin: 0; color: var(--weda-blog-muted); font-size: 18px; line-height: 1.55; }
.weda-cta__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--weda-blog-blue-700);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.weda-cta--blue .weda-cta__button { background: #fff; color: var(--weda-blog-blue-900); }

@media (max-width: 1023px) {
  .weda-blog-preview-page {
    display: block;
    width: calc(100% - 48px);
    max-width: 760px;
  }
  .weda-blog-preview-sidebar {
    position: static;
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .weda-blog-preview-page { width: calc(100% - 32px); max-width: 390px; padding-top: 36px; }
  .weda-blog-preview-sidebar { display: none; }
  .weda-cta { display: block; }
  .weda-cta__button { margin-top: 20px; width: 100%; }
}

/* Generic design-system preview elements */
.weda-blog-preview-token-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}
.weda-blog-preview-token-card {
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--weda-blog-border);
  box-shadow: 0 12px 34px rgba(7, 31, 95, .05);
}
.weda-blog-preview-token-label {
  margin: 0 0 8px;
  color: var(--weda-blog-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.weda-blog-preview-color {
  display: flex;
  gap: 12px;
  align-items: center;
}
.weda-blog-preview-swatch {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(7, 31, 95, .08);
}
.weda-blog-preview-h1,
.weda-blog-preview-h2,
.weda-blog-preview-h3,
.weda-blog-preview-h4 {
  color: var(--weda-blog-blue-900);
  letter-spacing: -.035em;
}
.weda-blog-preview-h1 { font-size: 40px; line-height: 48px; font-weight:500; margin: 0 0 18px; }
/* Specimen aligné sur le rendu réel des articles (BugHerd #31) : H2 bleu, H3/H4 noirs. */
.weda-blog-preview-h2 { font-size: 40px; line-height: 48px; font-weight:500; margin: 28px 0 16px; color: var(--weda-blog-blue-700); }
.weda-blog-preview-h3 { font-size: 32px; line-height: 38px; font-weight:500; margin: 24px 0 12px; color: #000; }
.weda-blog-preview-h4 { font-size: 26px; line-height: 36.4px; font-weight:500; margin: 20px 0 10px; color: #000; }
.weda-blog-preview-p-large { font-size: 20px; line-height: 30px; color: var(--weda-blog-muted); margin: 0 0 18px; }
.weda-blog-preview-p { font-size: 20px; line-height: 29px; letter-spacing:-0.2px; color: var(--weda-blog-text); margin: 0 0 18px; }
.weda-blog-preview-small { font-size: 14px; line-height: 1.5; color: var(--weda-blog-muted); margin: 0 0 18px; }
.weda-blog-preview-link { color: var(--weda-blog-blue-700); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.weda-blog-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 30px;
}
.weda-btn-preview {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
}
.weda-btn-preview--primary { background: var(--weda-blog-blue-700); color: #fff; }
.weda-btn-preview--secondary { background: var(--weda-blog-blue-50); color: var(--weda-blog-blue-900); border-color: var(--weda-blog-border); }
.weda-btn-preview--outline { background: #fff; color: var(--weda-blog-blue-700); border-color: var(--weda-blog-blue-700); }
.weda-blog-preview-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
.weda-badge-preview {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--weda-blog-blue-50);
  color: var(--weda-blog-blue-700);
  font-size: 13px;
  font-weight: 800;
}
.weda-blog-preview-list {
  margin: 0 0 28px;
  padding-left: 1.25em;
  color: var(--weda-blog-text);
  font-size: 18px;
  line-height: 1.65;
}
.weda-blog-preview-list li + li { margin-top: 8px; }

@media (max-width: 767px) {
  .weda-blog-preview-token-grid { grid-template-columns: 1fr; }
  .weda-blog-preview-actions { display: grid; }
  .weda-btn-preview { width: 100%; }
}


/* Pixel-pass refinements and P1/P2 editorial blocks */
.weda-blog-preview-page * { box-sizing: border-box; }
.weda-blog-preview-kicker,
.weda-blog-preview-token-label { font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; line-height: 15.6px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.weda-blog-preview-sidebar { border-radius: 28.8px; box-shadow: none; background: var(--weda-blog-neutral-100); }
.weda-blog-preview-sidebar__title { font-size: 20px; line-height: 29px; font-weight: 500; }
.weda-blog-preview-sidebar__list a { font-family: 'Outfit', system-ui, sans-serif; font-size: 16px; line-height: 19.2px; }
.weda-blog-preview-meta { display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 28px; color: var(--weda-blog-muted); font-size:14px; line-height:18.2px; }
.weda-blog-preview-meta span { display:inline-flex; align-items:center; gap:8px; }
.weda-blog-preview-divider { height:1px; background: var(--weda-blog-blue-100); margin: 32px 0; }
.weda-blog-preview-share { display:flex; gap:10px; margin: 18px 0 32px; }
.weda-blog-preview-share a { width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--weda-blog-border); color:var(--weda-blog-blue-700); text-decoration:none; font-weight:600; }
.weda-btn-preview { font-family:'Outfit',system-ui,sans-serif; font-size:18px; line-height:27px; font-weight:500; min-height:56px; padding:0 24px; }
.weda-btn-preview--compact { min-height:38px; padding:0 16px; font-size:16px; line-height:16px; }
.weda-badge-preview { font-size:16px; line-height:16px; font-weight:600; padding: 11px 18px; min-height:38px; }
.weda-blog-preview-list { font-family:'Outfit',system-ui,sans-serif; font-size:20px; line-height:29px; letter-spacing:-0.2px; }
.weda-callout__content,
.weda-cta__text { font-size:20px; line-height:29px; letter-spacing:-0.2px; }
.weda-cta__button { min-height:56px; padding:0 24px; font-size:18px; line-height:27px; }

.weda-checklist,
.weda-pros-cons,
.weda-comparison-table,
.weda-faq,
.weda-rich-image,
.weda-summary {
  border-radius: var(--weda-blog-radius);
}
.weda-checklist,
.weda-summary { padding: 32px; background: var(--weda-blog-blue-50); }
.weda-checklist__title,
.weda-pros-cons__title,
.weda-comparison-table__title,
.weda-faq__title,
.weda-summary__title {
  margin: 0 0 20px; color: var(--weda-blog-text); font-size:32px; line-height:38px; font-weight:500;
}
.weda-checklist__list,
.weda-summary__list { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
/* BugHerd #34 : texte de la checklist en gris plus clair (était noir) + taille alignée sur la réduction #33. */
.weda-checklist__item { display:flex; gap:14px; align-items:flex-start; font-size:18px; line-height:26px; letter-spacing:-0.2px; color:rgba(0,0,0,.7); }
.weda-checklist__icon { flex:0 0 28px; width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--weda-blog-blue-700); font-size:16px; line-height:1; margin-top:1px; }
.weda-summary__list { counter-reset:weda-summary; }
.weda-summary__list li { counter-increment:weda-summary; display:grid; grid-template-columns:32px 1fr; gap:14px; font-size:20px; line-height:29px; letter-spacing:-0.2px; }
.weda-summary__list li::before { content: counter(weda-summary); width:32px; height:32px; border-radius:999px; background:#fff; color:var(--weda-blog-blue-700); display:inline-flex; align-items:center; justify-content:center; font-weight:600; }

.weda-pros-cons { padding:32px; background:#fff; border:1px solid var(--weda-blog-border); }
.weda-pros-cons__grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px; }
.weda-pros-cons__col { padding:24px; border-radius:24px; background:var(--weda-blog-neutral-100); }
.weda-pros-cons__col--pros { background:var(--weda-blog-blue-50); }
.weda-pros-cons__col h4 { margin:0 0 16px; font-size:26px; line-height:36.4px; font-weight:500; }
.weda-pros-cons__col ul { margin:0; padding-left:1.1em; font-size:18px; line-height:25.2px; }
.weda-pros-cons__col li + li { margin-top:10px; }

.weda-comparison-table { padding:32px; background:#fff; border:1px solid var(--weda-blog-border); overflow:hidden; }
.weda-comparison-table__scroll { overflow-x:auto; border-radius:20px; border:1px solid var(--weda-blog-blue-100); }
.weda-comparison-table table { width:100%; border-collapse:collapse; min-width:680px; font-size:18px; line-height:25.2px; }
.weda-comparison-table th,
.weda-comparison-table td { padding:18px 20px; text-align:left; border-bottom:1px solid var(--weda-blog-blue-100); vertical-align:top; }
.weda-comparison-table thead th { background:var(--weda-blog-blue-50); color:var(--weda-blog-text); font-weight:600; }
.weda-comparison-table tbody th { font-weight:600; color:var(--weda-blog-text); }
.weda-comparison-table tr:last-child th,
.weda-comparison-table tr:last-child td { border-bottom:0; }

.weda-faq {
  width: 100%;
  max-width: 998px;
  padding: 33px 0;
  background: transparent;
  border-radius: 10px;
}
.weda-faq__title {
  margin: 0 0 24px;
  color: #000;
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 26px;
  line-height: 36.4px;
  font-weight: 500;
  letter-spacing: 0;
}
.weda-faq__items {
  display: block;
}
.weda-faq__item {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0 0 16px;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.weda-faq__item:last-child { margin-bottom: 0; }
.weda-faq__item summary {
  cursor: pointer;
  padding: 0;
  min-height: 30px;
  position: relative;
  display: block;
  padding-right: 49px;
  color: #000;
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  list-style: none;
}
.weda-faq__item summary::-webkit-details-marker { display: none; }
.weda-faq__question {
  display: block;
}
.weda-faq__icon {
  position: absolute;
  right: 0;
  top: 2.5px;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: rgba(236, 241, 251, .5);
}
.weda-faq__icon::before,
.weda-faq__icon::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 12px;
  width: 7px;
  height: 1px;
  background: #000;
  transform-origin: center;
}
.weda-faq__icon::after { transform: rotate(90deg); }
.weda-faq__item[open] .weda-faq__icon::after { transform: rotate(0deg); opacity: 0; }
.weda-faq__answer {
  max-width: 998px;
  margin: 16px 0 0;
  padding: 0;
  color: #5E6075;
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 22.68px;
  font-weight: 400;
}
.weda-faq__answer > :first-child { margin-top: 0; }
.weda-faq__answer > :last-child { margin-bottom: 0; }

.weda-rich-image { margin: 36px 0; }
.weda-rich-image__frame { overflow:hidden; border-radius:28.8px; background:var(--weda-blog-blue-50); aspect-ratio: 16 / 9; }
.weda-rich-image img { width:100%; height:100%; object-fit:cover; display:block; }
.weda-rich-image figcaption { margin-top:12px; color:var(--weda-blog-muted); font-size:14px; line-height:18.2px; }
.weda-rich-image figcaption span { color:var(--weda-blog-blue-700); }

@media (max-width: 767px) {
  .weda-blog-preview-title { font-size:40px; line-height:48px; }
  .weda-blog-preview-section > h2 { font-size:32px; line-height:38px; }
  .weda-pros-cons__grid { grid-template-columns:1fr; }
  .weda-checklist,.weda-pros-cons,.weda-comparison-table,.weda-faq,.weda-summary { padding:24px; }
  .weda-comparison-table table { min-width:620px; }
  .weda-blog-preview-meta { display:grid; gap:8px; }
}

.weda-rich-image__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, #ECF1FB, #F9FAFB); color:#3843D0; font-size:20px; line-height:29px; font-weight:500; }

/* =====================================================================
 * Override Breakdance : `.breakdance a` (0,1,1) écrase la couleur des CTA
 * sur les vraies URLs (body.breakdance). On repasse au-dessus (0,2,0+).
 * ===================================================================== */
.weda-blog-block .weda-cta__button { color: #fff; }
.weda-blog-block .weda-cta--blue .weda-cta__button { color: var(--weda-blog-blue-900); }

/* Boutons preview (design system) : battre `.breakdance a` / `.breakdance a:hover`
   sur la page all-in-one (sinon ancre illisible sur fond bleu). */
.weda-blog-preview-page .weda-btn-preview--primary,
.weda-blog-preview-page .weda-btn-preview--primary:hover { color: #fff; }
.weda-blog-preview-page .weda-btn-preview--secondary,
.weda-blog-preview-page .weda-btn-preview--secondary:hover { color: var(--weda-blog-blue-900); }
.weda-blog-preview-page .weda-btn-preview--outline,
.weda-blog-preview-page .weda-btn-preview--outline:hover { color: var(--weda-blog-blue-700); }
.weda-blog-preview-page .weda-blog-preview-link,
.weda-blog-preview-page .weda-blog-preview-link:hover { color: var(--weda-blog-blue-700); }