/* ========================================
   PM-THEME — Article CSS
   Design complet pour les pages produit
   ======================================== */

/* ── Breadcrumb ── */
.pm-breadcrumb {
  background: var(--pm-gray-light);
  padding: 12px 0;
  font-size: 13px;
  color: var(--pm-gray);
  border-bottom: 1px solid #eee;
}
.pm-breadcrumb a { color: var(--pm-blue); }

/* ── Article Hero ── */
.pm-article-hero {
  background: var(--pm-gradient);
  padding: 48px 0 40px;
  color: #fff;
}

.pm-article-meta {
  display: inline-block;
  background: var(--pm-yellow);
  color: var(--pm-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 16px;
}

.pm-article-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
}

.pm-article-author-mini { font-size: 14px; opacity: .8; }

/* ── Featured Image ── */
.pm-article-featured {
  margin: -24px auto 32px;
  max-width: 800px;
  padding: 0 24px;
}

.pm-article-featured img {
  width: 100%;
  border: 2px solid var(--pm-dark);
  box-shadow: var(--pm-shadow);
}

/* ── Article Content ── */
.pm-article-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--pm-dark);
}

.pm-article-content h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 56px 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--pm-yellow);
  color: var(--pm-dark);
  line-height: 1.2;
}

.pm-article-content h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 36px 0 12px;
  color: var(--pm-blue);
}

.pm-article-content h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--pm-dark);
}

.pm-article-content p { margin-bottom: 18px; }

.pm-article-content a {
  color: var(--pm-blue);
  font-weight: 600;
  border-bottom: 1px solid rgba(10,77,140,.3);
  transition: border-color .2s;
}

.pm-article-content a:hover { border-color: var(--pm-yellow); color: var(--pm-blue); }

.pm-article-content ul, .pm-article-content ol { margin: 16px 0 24px; padding-left: 24px; }
.pm-article-content li { margin-bottom: 10px; line-height: 1.7; }

.pm-article-content strong { color: var(--pm-dark); }
.pm-article-content em { font-style: italic; color: var(--pm-gray); }

.pm-article-content img {
  margin: 28px 0;
  border: 2px solid var(--pm-dark);
  box-shadow: var(--pm-shadow);
}

/* ── TOC (Sommaire) ── */
.pm-article-content .pm-toc,
.pm-article-content div[class*="toc"] {
  background: var(--pm-gray-light);
  border: 2px solid var(--pm-dark);
  box-shadow: var(--pm-shadow);
  padding: 24px 28px;
  margin: 0 0 36px;
}

.pm-article-content .pm-toc h3,
.pm-article-content .pm-toc strong,
.pm-article-content div[class*="toc"] h3,
.pm-article-content div[class*="toc"] strong {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--pm-dark);
  margin: 0 0 12px;
  display: block;
}

.pm-article-content .pm-toc ul,
.pm-article-content div[class*="toc"] ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pm-article-content .pm-toc li,
.pm-article-content div[class*="toc"] li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  margin: 0;
}

.pm-article-content .pm-toc li:last-child,
.pm-article-content div[class*="toc"] li:last-child { border-bottom: none; }

.pm-article-content .pm-toc a,
.pm-article-content div[class*="toc"] a {
  color: var(--pm-blue);
  font-weight: 600;
  font-size: 14px;
  border-bottom: none;
}

.pm-article-content .pm-toc a:hover,
.pm-article-content div[class*="toc"] a:hover { color: var(--pm-yellow-dark); }

/* ── Tables (specs) ── */
.pm-article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
  border: 2px solid var(--pm-dark);
}

.pm-article-content th {
  background: var(--pm-dark);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pm-article-content td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.pm-article-content tr:hover td { background: var(--pm-blue-light); }

/* ── Pros / Cons ── */
.pm-article-content .pm-pros-cons,
.pm-article-content div[style*="display:grid"][style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px;
  margin: 28px 0;
}

.pm-article-content h4:has(+ ul) { margin-bottom: 8px; }

/* Pros styling - target h4 with "fort" or "plus" */
.pm-article-content ul + h4,
.pm-article-content .pm-pros ul,
.pm-article-content .pm-cons ul {
  padding: 0;
  list-style: none;
}

/* Generic pros/cons by content pattern */
.pm-article-content li:has(> strong:first-child) { padding-left: 0; }

/* ── Verdict Box ── */
.pm-article-content .pm-verdict,
.pm-article-content div[style*="background"][style*="border-left"] {
  background: var(--pm-blue-light) !important;
  border: none !important;
  border-left: 4px solid var(--pm-blue) !important;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 15px;
  line-height: 1.8;
}

/* ── Update Banner (inline styled from PHP) ── */
.pm-article-content div[style*="linear-gradient"] {
  border-radius: 0;
  margin-bottom: 36px !important;
}

/* ── Comparison mini-table (inline from PHP) ── */
.pm-article-content div[style*="background:#f5f5f3"] {
  margin: 36px 0 !important;
}

/* ── Related Articles ── */
.pm-article-content div[style*="background:#f5f5f3"][style*="border:2px"] {
  margin: 48px 0 0 !important;
}

.pm-article-content div[style*="background:#f5f5f3"] h3 {
  font-size: 14px !important;
  color: var(--pm-dark);
  border-bottom: none;
  margin: 0 0 16px;
}

.pm-article-content div[style*="background:#f5f5f3"] ul {
  list-style: none;
  padding: 0;
}

.pm-article-content div[style*="background:#f5f5f3"] li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.pm-article-content div[style*="background:#f5f5f3"] li:last-child { border-bottom: none; }

/* ── Blockquote ── */
.pm-article-content blockquote {
  border-left: 4px solid var(--pm-yellow);
  background: var(--pm-gray-light);
  padding: 20px 24px;
  margin: 24px 0;
  font-style: italic;
}

/* ── Author Box ── */
.pm-author-box {
  background: var(--pm-gray-light);
  padding: 48px 0;
  border-top: 2px solid var(--pm-dark);
}

.pm-author-box-inner { max-width: 800px; margin: 0 auto; }

.pm-author-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }

.pm-author-box-title {
  font-size: 14px;
  color: var(--pm-blue);
  font-weight: 600;
  margin-bottom: 12px;
}

.pm-author-box-creds {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pm-author-box-creds span {
  background: var(--pm-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── CTA Bar ── */
.pm-cta-bar {
  background: var(--pm-gradient);
  padding: 48px 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pm-article-hero { padding: 32px 0; }
  .pm-article-title { font-size: 26px; }
  .pm-article-content { padding: 24px 16px 32px; }
  .pm-article-content h2 { font-size: 22px; margin-top: 40px; }
  .pm-author-box-creds { gap: 8px; }
  .pm-article-content .pm-pros-cons,
  .pm-article-content div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}