/* ============================================================
   CréditOptimisé — CSS Public
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #1a56db; --blue-dark: #1e40af; --blue-light: #eff6ff;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
  --gray-600: #4b5563; --gray-800: #1f2937;
  --green: #0e9f6e; --green-light: #f3faf7;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; color: var(--gray-800); line-height: 1.7; }
.container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--gray-200); padding: 12px 0; position: sticky; top: 0; z-index: 10; }
.site-header .container { display: flex; align-items: center; gap: 2rem; }
.logo { font-size: 18px; font-weight: 700; color: var(--blue); text-decoration: none; flex-shrink: 0; }
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a { font-size: 14px; color: var(--gray-600); text-decoration: none; }
.site-header nav a:hover { color: var(--blue); }

/* Breadcrumb */
.breadcrumb { margin: 1rem 0; }
.breadcrumb ol { display: flex; gap: 8px; list-style: none; font-size: 13px; color: var(--gray-600); flex-wrap: wrap; }
.breadcrumb li::after { content: '›'; margin-left: 8px; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--blue); text-decoration: none; }

/* Article */
.article-page { padding: 1.5rem 0 3rem; }
.article-header { margin-bottom: 1.5rem; }
.category-badge { display: inline-block; background: var(--blue-light); color: var(--blue); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; }
h1 { font-size: 2rem; font-weight: 700; line-height: 1.3; color: var(--gray-800); margin-bottom: 12px; }
.article-meta { font-size: 13px; color: var(--gray-600); display: flex; gap: 8px; flex-wrap: wrap; }
.article-intro { background: var(--gray-50); border-left: 3px solid var(--blue); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin-bottom: 1.5rem; font-size: 15px; color: var(--gray-800); }
.article-content h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--gray-800); }
.article-content h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.article-content p  { margin-bottom: 1rem; color: var(--gray-800); }

/* CTA */
.cta-box { background: var(--blue); color: #fff; border-radius: 12px; padding: 1.5rem; text-align: center; margin: 2rem 0; }
.cta-desc { font-size: 15px; margin-bottom: 1rem; opacity: 0.9; }
.btn-cta { display: inline-block; background: #fff; color: var(--blue-dark); padding: 12px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity 0.12s; }
.btn-cta:hover { opacity: 0.92; }
.btn-cta-large { font-size: 16px; padding: 14px 32px; }
.cta-partner { font-size: 12px; margin-top: 10px; opacity: 0.7; }
.cta-legal { font-size: 11px; opacity: 0.6; margin-top: 8px; }

/* FAQ */
.faq-section { margin: 2.5rem 0; }
.faq-section h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--gray-200); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 10px; }
.faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.faq-item p  { font-size: 14px; color: var(--gray-600); }

/* Internal links */
.internal-links { margin: 2rem 0; }
.internal-links h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.internal-links ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.internal-links a { background: var(--gray-100); color: var(--blue); padding: 6px 14px; border-radius: 20px; font-size: 13px; text-decoration: none; }
.internal-links a:hover { background: var(--blue-light); }

/* Footer */
.site-footer { background: var(--gray-800); color: #fff; padding: 2rem 0; margin-top: 3rem; }
.site-footer p { font-size: 13px; color: #9ca3af; margin-bottom: 8px; }
.footer-nav { display: flex; gap: 1.5rem; margin-top: 12px; }
.footer-nav a { font-size: 13px; color: #9ca3af; text-decoration: none; }
.footer-nav a:hover { color: #fff; }