/* ==========================================================================
   etude-de-cas.css — Utilise les variables de theme.css
   ========================================================================== */

.case-study-container { max-width: 820px; margin: 0 auto; }

.case-study-container h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--text-primary);
  margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.case-study-container h3 {
  font-size: 1.15rem; font-weight: 600; color: var(--accent-orange);
  margin-top: 2rem; margin-bottom: 0.5rem;
}
.case-study-container p { margin-bottom: 1rem; line-height: 1.75; }
.case-study-container ul, .case-study-container ol { margin: 0.75rem 0 1.25rem 1.5rem; }
.case-study-container li { margin-bottom: 0.5rem; }
.case-study-container strong { color: var(--text-primary); }

.callout {
  background: var(--callout-bg); border: 1px solid var(--callout-border);
  border-left: 4px solid var(--accent-orange); border-radius: 6px;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.callout.warning { border-left-color: var(--accent-red); }
.callout.tip     { border-left-color: var(--accent-green); }
.callout-title { font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; font-size: 15px; }
.callout p:last-child { margin-bottom: 0; }

.timeline {
  position: relative; margin: 1.5rem 0 2rem 1.25rem;
  padding-left: 1.5rem; border-left: 2px solid var(--timeline-line);
}
.timeline-step { position: relative; margin-bottom: 1.75rem; }
.timeline-step:last-child { margin-bottom: 0; }
.timeline-step::before {
  content: ''; position: absolute; left: -2rem; top: 6px;
  width: 12px; height: 12px; background: var(--accent-orange);
  border-radius: 50%; border: 2px solid var(--timeline-dot-border);
}
.timeline-step .step-title { font-weight: 700; color: var(--text-primary); font-size: 15px; margin-bottom: 0.25rem; }
.timeline-step .step-duration { font-size: 13px; color: var(--text-muted); margin-bottom: 0.4rem; }
.timeline-step p { font-size: 15px; margin-bottom: 0; }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
.comparison-card {
  background: var(--comparison-bg); border: 1px solid var(--comparison-border);
  border-radius: 8px; padding: 1.5rem;
}
.comparison-card.before { border-top: 3px solid var(--accent-red); }
.comparison-card.after  { border-top: 3px solid var(--accent-green); }
.comparison-card h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
.comparison-card.before h4 { color: var(--accent-red); }
.comparison-card.after h4  { color: var(--accent-green); }
.comparison-card ul { margin: 0 0 0 1rem; font-size: 15px; }
.comparison-card li { margin-bottom: 0.4rem; }

.case-study-author {
  border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; margin-top: 2.5rem;
}
.case-study-author a { color: var(--accent-orange); text-decoration: none; }
.case-study-author a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .comparison { grid-template-columns: 1fr; }
  .case-study-container h2 { font-size: 1.3rem; }
}