/* ==========================================================================
   MATISSE BLOG ARTICLE STYLESHEET
   Matches the design system of matisse-dentaire.com
   Colors: Navy #0B2353, Teal #55C6BF, Coral #E8A398, Gold #FFBD6D
   Fonts: Manrope (headings), DM Sans (body)
   ========================================================================== */

/* --- LAYOUT --- */
.blog-article { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; }
.blog-header { margin-bottom: 2.5rem; text-align: center; }
.blog-category {
  display: inline-block; background: #55C6BF; color: #0B2353;
  padding: 6px 16px; border-radius: 20px; font-size: 0.875rem;
  font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.blog-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: #0B2353; line-height: 1.15; margin-bottom: 1.5rem; }
.blog-meta { display: flex; justify-content: center; gap: 1.5rem; color: #64748b; font-size: 0.9rem; flex-wrap: wrap; }
.blog-meta-item { display: flex; align-items: center; gap: 0.4rem; }

/* --- ARTICLE CONTENT --- */
.blog-content { font-size: 1.0625rem; line-height: 1.8; color: #333; }
.blog-content h2 { font-size: 1.625rem; font-weight: 700; color: #0B2353; margin: 2.5rem 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 3px solid #55C6BF; }
.blog-content h3 { font-size: 1.25rem; font-weight: 600; color: #0B2353; margin: 2rem 0 0.75rem; }
.blog-content h4 { font-size: 1.1rem; font-weight: 600; color: #0B2353; margin: 1.5rem 0 0.5rem; }
.blog-content p { margin-bottom: 1.25rem; }
.blog-content ul, .blog-content ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.blog-content li { margin-bottom: 0.6rem; line-height: 1.7; }
.blog-content strong { color: #0B2353; }
.blog-content a { color: #55C6BF; text-decoration: none; font-weight: 500; }
.blog-content a:hover { color: #0B2353; text-decoration: underline; }

/* --- TABLE OF CONTENTS --- */
.table-of-contents {
  background: #f8f9fa; border-radius: 12px; padding: 1.5rem 2rem; margin: 2rem 0;
  border: 1px solid #e5e7eb;
}
.table-of-contents h4 { color: #0B2353; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.table-of-contents ol { padding-left: 1.25rem; margin: 0; }
.table-of-contents li { margin-bottom: 0.5rem; }
.table-of-contents a { color: #55C6BF; text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.table-of-contents a:hover { color: #0B2353; }

/* --- BREADCRUMB --- */
.breadcrumb { font-size: 0.875rem; color: #64748b; margin-bottom: 2rem; text-align: center; }
.breadcrumb a { color: #55C6BF; text-decoration: none; }
.breadcrumb a:hover { color: #0B2353; }

/* --- DATA CARDS (replaces emoji grids) --- */
.data-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.data-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem;
  text-align: center; transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(11,35,83,0.04);
}
.data-card:hover { box-shadow: 0 4px 16px rgba(11,35,83,0.08); transform: translateY(-2px); }
.data-card.included { border-color: #55C6BF; background: #f0f9f8; }
.data-card.partial { border-color: #E8A398; background: #fdf5f3; }
.data-icon {
  font-size: 1.5rem; width: 48px; height: 48px; margin: 0 auto 0.75rem;
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.data-card h5 { color: #0B2353; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.95rem; }
.data-card p { color: #64748b; font-size: 0.8rem; margin: 0; line-height: 1.4; }

/* --- STRATEGY CARDS --- */
.strategy-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.strategy-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem;
  transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(11,35,83,0.04);
}
.strategy-card:hover { box-shadow: 0 4px 16px rgba(11,35,83,0.08); transform: translateY(-2px); }
.strategy-icon {
  font-size: 1.25rem; width: 44px; height: 44px; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.strategy-card h4 { color: #0B2353; font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; }
.strategy-card p { color: #64748b; font-size: 0.9rem; margin: 0; line-height: 1.6; }

/* --- TIMELINE --- */
.timeline-migration { position: relative; margin: 2rem 0; }
.timeline-step { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; position: relative; }
.timeline-marker {
  width: 44px; height: 44px; background: #0B2353; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; flex-shrink: 0; position: relative; z-index: 2;
}
.timeline-step:not(:last-child)::after {
  content: ''; position: absolute; left: 21px; top: 44px; width: 2px;
  height: calc(100% - 16px); background: #e5e7eb;
}
.timeline-content {
  flex: 1; background: #f8f9fa; border-radius: 12px; padding: 1.25rem 1.5rem;
  border-left: 3px solid #55C6BF;
}
.timeline-content h4 { color: #0B2353; font-weight: 700; margin-bottom: 0.5rem; font-size: 1.05rem; }
.timeline-content p { color: #64748b; margin: 0; font-size: 0.95rem; line-height: 1.6; }
.timeline-duration {
  display: inline-block; background: #0B2353; color: white;
  padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem;
}

/* --- TIP BOX --- */
.tip-box {
  background: #f0f9f8; border-left: 3px solid #55C6BF;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 12px 12px 0;
}
.tip-box h4 { color: #0B2353; font-weight: 700; margin-bottom: 0.4rem; font-size: 1rem; }
.tip-box p, .tip-box ul { color: #334155; margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- WARNING BOX --- */
.warning-box {
  background: #fdf5f3; border-left: 3px solid #E8A398;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 12px 12px 0;
}
.warning-box h4 { color: #0B2353; font-weight: 700; margin-bottom: 0.4rem; font-size: 1rem; }
.warning-box p, .warning-box ul { color: #334155; margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- HIGHLIGHT BOX --- */
.stat-highlight, .highlight-box {
  background: linear-gradient(135deg, #f0faf9 0%, #e8f7f6 100%);
  border-left: 3px solid #55C6BF; padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 12px 12px 0;
}
.stat-highlight p, .highlight-box p { margin: 0; font-weight: 500; }
.big-number { font-size: 2rem; font-weight: 700; color: #55C6BF; }

/* --- CTA BOX (in-article) --- */
.cta-box {
  background: linear-gradient(135deg, #0B2353 0%, #1a3a6c 100%);
  border-radius: 16px; padding: 2.5rem; margin: 2.5rem 0; text-align: center; color: white;
}
.cta-box h3 { color: white; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.cta-box p { font-size: 1.05rem; margin-bottom: 1.25rem; opacity: 0.9; color: white; }
.cta-button {
  display: inline-block; background: white; color: #0B2353;
  padding: 0.9rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1rem;
  text-decoration: none; transition: all 0.3s ease; border: 2px solid white;
}
.cta-button:hover { background: transparent; color: white; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

/* --- FAQ SECTION --- */
.faq-section { background: #f8f9fa; padding: 3rem 1.5rem; margin-top: 2.5rem; border-radius: 16px; }
.faq-section h2 { text-align: center; color: #0B2353; margin-bottom: 2rem; border: none; padding: 0; }
.faq-item {
  background: white; border-radius: 12px; margin-bottom: 0.75rem; overflow: hidden;
  box-shadow: 0 2px 8px rgba(11,35,83,0.05); border: 1px solid #e5e7eb;
}
.faq-question {
  padding: 1.25rem 1.5rem; font-weight: 600; color: #0B2353; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; font-size: 1rem;
}
.faq-question:hover { background: #f8f9fa; }
.faq-answer { padding: 0 1.5rem 1.25rem; color: #555; line-height: 1.7; font-size: 0.95rem; }

/* --- CHECKLIST --- */
.checklist { background: #f8f9fa; padding: 1.5rem 2rem; border-radius: 12px; margin: 1.5rem 0; }
.checklist h4 { font-size: 1.1rem; font-weight: 700; color: #0B2353; margin-bottom: 1rem; }
.checklist-item {
  display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem;
  padding: 0.75rem 1rem; background: white; border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.checklist-icon { color: #55C6BF; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.checklist-content { color: #334155; font-size: 0.95rem; line-height: 1.5; }

/* --- SOCIAL PROOF / STATS --- */
.social-proof, .social-proof-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.stat-item, .social-proof-item {
  text-align: center; padding: 1.25rem; background: #f8f9fa; border-radius: 12px;
  border: 1px solid #e5e7eb;
}
.stat-number, .social-proof-number { font-size: 1.75rem; font-weight: 700; color: #55C6BF; line-height: 1; }
.stat-label, .social-proof-label { font-size: 0.8rem; color: #64748b; margin-top: 0.4rem; }

/* --- COMPARISON BOXES --- */
.comparison-box { padding: 1.25rem 1.5rem; margin: 1rem 0; border-radius: 12px; }
.comparison-good { background: #f0f9f8; border-left: 3px solid #55C6BF; }
.comparison-bad { background: #fdf5f3; border-left: 3px solid #E8A398; }

/* --- TABLES --- */
.blog-content table, .duration-table, .comparison-table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem;
}
.blog-content table th, .duration-table th, .comparison-table th {
  background: #0B2353; color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600;
}
.blog-content table td, .duration-table td, .comparison-table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb;
}
.blog-content table tr:nth-child(even), .duration-table tr:nth-child(even), .comparison-table tr:nth-child(even) { background: #f8f9fa; }
.duration-badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600;
}

/* --- AUTHOR BOX --- */
.author-box {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
  background: #f8f9fa; border-radius: 12px; margin-top: 2.5rem; border: 1px solid #e5e7eb;
}
.author-avatar, .author-box > div:first-child {
  width: 56px; height: 56px; border-radius: 50%; background: #0B2353;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.25rem; font-weight: 700; flex-shrink: 0;
}
.author-info h4, .author-box h4 { font-size: 1rem; font-weight: 700; color: #0B2353; margin-bottom: 0.2rem; }
.author-info p, .author-box p { font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.4; }

/* --- RELATED ARTICLES --- */
.related-articles { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #e5e7eb; }
.related-articles h3 { color: #0B2353; margin-bottom: 1.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.related-grid a {
  display: block; padding: 1.5rem; background: #f8f9fa; border-radius: 12px;
  text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease;
}
.related-grid a:hover { box-shadow: 0 4px 16px rgba(11,35,83,0.08); transform: translateY(-2px); }
.related-grid h4 { color: #0B2353; font-size: 1rem; margin: 0.5rem 0 0.4rem; }
.related-grid p { color: #64748b; font-size: 0.85rem; margin: 0; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .blog-article { padding: 1rem; }
  .blog-title { font-size: 1.75rem; }
  .data-grid, .strategy-grid { grid-template-columns: 1fr 1fr; }
  .social-proof, .social-proof-stats { grid-template-columns: repeat(3, 1fr); }
  .cta-box { padding: 1.5rem; }
  .cta-box h3 { font-size: 1.25rem; }
  .timeline-step { gap: 0.75rem; }
  .timeline-marker { width: 36px; height: 36px; font-size: 0.85rem; }
  .timeline-step:not(:last-child)::after { left: 17px; top: 36px; }
  .timeline-content { padding: 1rem; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .data-grid, .strategy-grid { grid-template-columns: 1fr; }
  .social-proof, .social-proof-stats { grid-template-columns: 1fr; }
  .blog-meta { flex-direction: column; gap: 0.5rem; }
  .author-box { flex-direction: column; text-align: center; }
}