/*
Theme Name: Le Bailleur Privé
Theme URI: https://le-bailleur-prive.org
Author: Le Bailleur Privé
Description: Thème d'affiliation pour le statut du bailleur privé. Direction institutionnelle : bleu nuit, vert confiance, composants de conversion (simulateur, classements, CTA, encarts).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: le-bailleur-prive
*/

/* ===== Variables ===== */
:root {
  --bp-navy: #14273D;
  --bp-blue: #14406B;
  --bp-green: #1C7C54;
  --bp-green-dark: #14603F;
  --bp-green-soft: #E7F3ED;
  --bp-green-light: #7FD1A8;
  --bp-bg: #F4F7FA;
  --bp-border: #E3E9F0;
  --bp-border-strong: #D4DEE8;
  --bp-text: #14273D;
  --bp-text-soft: #3E5871;
  --bp-text-mute: #8296AB;
  --bp-gold: #C89B3C;
  --bp-serif: 'Source Serif 4', Georgia, serif;
  --bp-sans: 'Public Sans', system-ui, sans-serif;
  --bp-display: 'Archivo', system-ui, sans-serif;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--bp-sans); color: var(--bp-text); background: #fff; font-size: 16px; line-height: 1.6; }
a { color: var(--bp-green); text-decoration: none; }
a:hover { color: var(--bp-blue); text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--bp-display); font-weight: 800; letter-spacing: -.5px; line-height: 1.15; color: var(--bp-text); text-wrap: pretty; }
.bp-container { max-width: 1168px; margin: 0 auto; padding: 0 24px; }

/* ===== Topbar ===== */
.bp-topbar { background: var(--bp-navy); color: #9FB3C8; font-size: 12.5px; padding: 8px 0; }
.bp-topbar .bp-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bp-topbar-badge { color: var(--bp-green-light); font-weight: 700; }

/* ===== Header ===== */
.bp-header { border-bottom: 1px solid var(--bp-border); background: #fff; position: relative; z-index: 50; }
.bp-header .bp-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.bp-logo { font-family: var(--bp-display); font-weight: 800; font-size: 20px; letter-spacing: -.3px; color: var(--bp-text); text-decoration: none; }
.bp-logo:hover { text-decoration: none; color: var(--bp-text); }
.bp-logo span { color: var(--bp-green); }
.bp-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.bp-nav a { font-size: 14px; font-weight: 600; color: var(--bp-text-soft); }
.bp-nav a:hover { color: var(--bp-blue); text-decoration: none; }
.bp-nav .current-menu-item > a { color: var(--bp-blue); border-bottom: 2px solid var(--bp-green); padding-bottom: 3px; }
.bp-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.bp-burger span { display: block; width: 20px; height: 2px; background: var(--bp-navy); margin: 4px 0; }

/* ===== Boutons ===== */
.bp-btn { display: inline-block; background: var(--bp-green); color: #fff; font-family: var(--bp-sans); font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 8px; border: 2px solid var(--bp-green); cursor: pointer; text-align: center; white-space: nowrap; }
.bp-btn:hover { background: var(--bp-green-dark); border-color: var(--bp-green-dark); color: #fff; text-decoration: none; }
.bp-btn-outline { background: #fff; color: var(--bp-green); }
.bp-btn-outline:hover { background: var(--bp-green-soft); color: var(--bp-green-dark); }
.bp-btn-lg { font-size: 15.5px; padding: 14px 28px; }

/* ===== Badges ===== */
.bp-badge { display: inline-block; background: var(--bp-green-soft); color: var(--bp-green-dark); font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 6px; letter-spacing: .3px; }
.bp-badge-reco { background: var(--bp-green-soft); color: var(--bp-green-dark); font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 4px; vertical-align: 2px; }

/* ===== Hero ===== */
.bp-hero { background: linear-gradient(180deg, var(--bp-bg) 0%, #fff 100%); padding: 60px 0 48px; text-align: center; }
.bp-hero h1 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -1px; max-width: 840px; margin: 20px auto 0; }
.bp-hero-sub { font-size: 17px; color: var(--bp-text-soft); max-width: 640px; margin: 18px auto 0; }

/* ===== Simulateur ===== */
.bp-sim { background: #fff; border: 1px solid var(--bp-border-strong); border-radius: 14px; box-shadow: 0 16px 40px rgba(20,39,61,.10); padding: 26px 30px; }
.bp-sim-hero { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 24px; align-items: end; }
.bp-sim-field label, .bp-sim-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--bp-text-soft); margin-bottom: 8px; letter-spacing: .3px; }
.bp-sim-field select { width: 100%; padding: 11px 12px; border: 1px solid #C4D2DF; border-radius: 8px; font-size: 14px; font-family: var(--bp-sans); color: var(--bp-text); background: #fff; }
.bp-sim-range-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--bp-text-soft); margin-bottom: 8px; }
.bp-sim-range-head output { color: var(--bp-blue); }
.bp-sim input[type=range] { width: 100%; accent-color: var(--bp-blue); }
.bp-sim-result { background: var(--bp-blue); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bp-sim-result-label { color: #9FB3C8; font-size: 11.5px; font-weight: 700; }
.bp-sim-result-value { color: #fff; font-family: var(--bp-display); font-size: 24px; font-weight: 800; }
.bp-sim-note { text-align: center; font-size: 12px; color: var(--bp-text-mute); padding-top: 10px; }
.bp-sim-note strong { color: #B4531F; }
/* variante sidebar */
.bp-sim-side { padding: 22px; }
.bp-sim-side .bp-sim-grid { display: flex; flex-direction: column; gap: 14px; }
.bp-sim-side .bp-sim-result { flex-direction: column; align-items: flex-start; gap: 2px; }
.bp-sim-side .bp-btn { width: 100%; }

/* ===== Chiffres clés ===== */
.bp-keyfigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bp-keyfig { border: 1px solid var(--bp-border); border-radius: 12px; padding: 20px 22px; }
.bp-keyfig-value { font-family: var(--bp-display); font-size: 26px; font-weight: 800; color: var(--bp-blue); }
.bp-keyfig-label { font-size: 13px; color: var(--bp-text-soft); margin-top: 4px; }

/* ===== Section classement ===== */
.bp-section { padding: 44px 0; }
.bp-section-alt { background: var(--bp-bg); }
.bp-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.bp-section-head h2 { font-size: 28px; margin: 0; }
.bp-section-head .bp-methodo-link { font-size: 13px; color: var(--bp-text-soft); }

.bp-rank-list { display: flex; flex-direction: column; gap: 12px; }
.bp-rank-row { background: #fff; border: 1px solid var(--bp-border-strong); border-radius: 12px; padding: 20px 26px; display: grid; grid-template-columns: 44px 1.3fr 2fr auto auto; gap: 22px; align-items: center; }
.bp-rank-row.is-first { background: #F2F8F5; }
.bp-rank-num { width: 40px; height: 40px; border-radius: 8px; background: var(--bp-border); color: var(--bp-blue); display: flex; align-items: center; justify-content: center; font-family: var(--bp-display); font-weight: 800; font-size: 18px; }
.is-first .bp-rank-num { background: var(--bp-blue); color: #fff; }
.bp-rank-name { font-weight: 800; font-size: 16.5px; }
.bp-rank-type { font-size: 12.5px; color: var(--bp-text-mute); }
.bp-rank-forces { font-size: 13px; color: var(--bp-text-soft); line-height: 1.5; }
.bp-rank-score { text-align: right; }
.bp-rank-stars { color: var(--bp-gold); font-size: 13px; }
.bp-rank-note { font-weight: 800; font-size: 14px; }

/* ===== Tableau comparatif / taux ===== */
.bp-table { border: 1px solid var(--bp-border-strong); border-radius: 12px; overflow: hidden; margin: 18px 0; }
.bp-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bp-table th { background: var(--bp-bg); padding: 12px 20px; font-size: 12px; font-weight: 800; color: var(--bp-text-soft); text-align: left; letter-spacing: .4px; }
.bp-table td { padding: 14px 20px; border-top: 1px solid var(--bp-border); }
.bp-table td:first-child { font-weight: 700; }
.bp-table .bp-highlight { color: var(--bp-green); font-weight: 800; }
.bp-table tr.bp-row-alt td { background: var(--bp-bg); }

/* ===== CTA bandeau ===== */
.bp-cta-band { background: var(--bp-blue); border-radius: 14px; padding: 22px 28px; display: flex; align-items: center; gap: 22px; margin: 28px 0; }
.bp-cta-band-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bp-green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--bp-display); font-weight: 800; font-size: 20px; flex-shrink: 0; }
.bp-cta-band-body { flex: 1; }
.bp-cta-band-title { color: #fff; font-weight: 700; font-size: 16px; }
.bp-cta-band-text { color: #9FB3C8; font-size: 13px; margin-top: 2px; }

/* ===== CTA inline ===== */
.bp-cta-inline { border: 2px solid var(--bp-green); border-radius: 12px; padding: 18px 22px; margin: 24px 0; display: flex; align-items: center; gap: 18px; background: #fff; }
.bp-cta-inline-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bp-green-soft); color: var(--bp-green-dark); display: flex; align-items: center; justify-content: center; font-family: var(--bp-display); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.bp-cta-inline-body { flex: 1; }
.bp-cta-inline-title { font-weight: 800; font-size: 14.5px; }
.bp-cta-inline-text { font-size: 12.5px; color: var(--bp-text-soft); margin-top: 2px; }

/* ===== Encarts ===== */
.bp-callout { background: var(--bp-green-soft); border-radius: 12px; padding: 20px 24px; margin: 22px 0; }
.bp-callout-title { font-family: var(--bp-display); font-weight: 800; font-size: 14px; color: var(--bp-green-dark); margin-bottom: 8px; letter-spacing: .4px; }
.bp-callout ul { margin: 0; padding: 0; list-style: none; }
.bp-callout li { font-size: 14px; color: #14403A; line-height: 1.55; padding: 3px 0; }
.bp-callout-warn { background: #FBF1E8; }
.bp-callout-warn .bp-callout-title { color: #B4531F; }
.bp-callout-warn li { color: #5C3A21; }

/* ===== Méthodologie ===== */
.bp-methodo { background: var(--bp-bg); border-radius: 14px; padding: 30px 34px; margin: 28px 0; }
.bp-methodo h2, .bp-methodo h3 { font-size: 22px; margin: 0 0 18px; }
.bp-methodo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bp-methodo-pct { font-family: var(--bp-display); font-size: 24px; font-weight: 800; color: var(--bp-green); }
.bp-methodo-item p { font-size: 13px; color: var(--bp-text-soft); line-height: 1.5; margin: 4px 0 0; }
.bp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bp-step-num { font-family: var(--bp-display); font-size: 15px; font-weight: 800; color: var(--bp-green); margin-bottom: 6px; letter-spacing: .4px; }
.bp-step p { font-size: 13.5px; color: var(--bp-text-soft); line-height: 1.6; margin: 0; }

/* ===== FAQ ===== */
.bp-faq { display: flex; flex-direction: column; gap: 10px; }
.bp-faq details { border: 1px solid var(--bp-border); border-radius: 10px; }
.bp-faq summary { padding: 16px 22px; font-weight: 700; font-size: 14.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after { content: '+'; color: var(--bp-green); font-weight: 800; font-size: 18px; }
.bp-faq details[open] summary::after { content: '\2013'; }
.bp-faq-body { padding: 0 22px 16px; font-size: 14px; color: var(--bp-text-soft); line-height: 1.65; }

/* ===== Article ===== */
.bp-article-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 44px; padding: 44px 0 56px; }
.bp-breadcrumb { font-size: 12.5px; color: var(--bp-text-mute); margin-bottom: 12px; }
.bp-article h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.8px; margin: 0; }
.bp-article-meta { display: flex; gap: 14px; margin: 14px 0 22px; font-size: 12.5px; color: var(--bp-text-mute); align-items: center; }
.bp-article-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bp-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.bp-content { font-family: var(--bp-serif); font-size: 17px; line-height: 1.75; color: #2B3D50; }
.bp-content h2 { font-size: 24px; margin: 30px 0 12px; }
.bp-content h3 { font-size: 19px; margin: 24px 0 10px; }
.bp-content > p:first-of-type { font-size: 17.5px; }
.bp-content table { font-family: var(--bp-sans); }

/* Sommaire */
.bp-toc { border-left: 2px solid var(--bp-border); font-size: 13px; align-self: start; position: sticky; top: 24px; }
.bp-toc-title { font-size: 11.5px; font-weight: 800; color: var(--bp-text-mute); letter-spacing: .5px; padding: 6px 16px; }
.bp-toc a { display: block; padding: 7px 16px; color: var(--bp-text-soft); }
.bp-toc a:hover { color: var(--bp-green); text-decoration: none; }
.bp-toc a.is-active { color: var(--bp-green); font-weight: 700; border-left: 2px solid var(--bp-green); margin-left: -2px; }

/* Sidebar */
.bp-sidebar { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 24px; }
.bp-sidebar-card { border: 1px solid var(--bp-border-strong); border-radius: 14px; padding: 22px; box-shadow: 0 10px 28px rgba(20,39,61,.08); background: #fff; }
.bp-sidebar-select { background: var(--bp-bg); border-radius: 14px; padding: 20px; }
.bp-sidebar-select-title { font-size: 11.5px; font-weight: 800; color: var(--bp-text-mute); letter-spacing: .5px; margin-bottom: 10px; }
.bp-mini-partner { background: #fff; border: 1px solid var(--bp-border); border-radius: 10px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bp-mini-partner:last-child { margin-bottom: 0; }
.bp-mini-partner-name { font-weight: 800; font-size: 13.5px; }
.bp-mini-partner-note { font-size: 11.5px; color: var(--bp-gold); }
.bp-mini-partner a { font-weight: 800; font-size: 12.5px; }

/* ===== Sticky CTA ===== */
.bp-sticky { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bp-blue); padding: 12px 0; z-index: 100; transform: translateY(110%); transition: transform .3s ease; }
.bp-sticky.is-visible { transform: translateY(0); }
.bp-sticky .bp-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bp-sticky-text { font-size: 14px; font-weight: 600; color: #D6E2EE; }
.bp-sticky-text strong { color: #fff; font-size: 16px; }

/* ===== Footer ===== */
.bp-footer { background: var(--bp-navy); color: #9FB3C8; padding: 26px 0; font-size: 12.5px; margin-top: 48px; }
.bp-footer .bp-container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bp-footer-brand { color: #fff; font-family: var(--bp-display); font-weight: 800; }
.bp-footer-menu ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.bp-footer a { color: #9FB3C8; }
.bp-footer a:hover { color: #fff; }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .bp-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--bp-border); padding: 12px 24px 20px; }
  .bp-nav.is-open { display: block; }
  .bp-nav ul { flex-direction: column; gap: 4px; }
  .bp-nav a { display: block; padding: 12px 0; font-size: 15px; }
  .bp-burger { display: block; }
  .bp-sim-hero { grid-template-columns: 1fr 1fr; }
  .bp-keyfigs, .bp-methodo-grid { grid-template-columns: 1fr 1fr; }
  .bp-steps { grid-template-columns: 1fr; }
  .bp-article-layout { grid-template-columns: 1fr; gap: 28px; }
  .bp-toc { display: none; }
  .bp-sidebar { position: static; }
  .bp-rank-row { grid-template-columns: 44px 1fr auto; }
  .bp-rank-forces { grid-column: 1 / -1; }
  .bp-rank-row .bp-btn { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .bp-sim-hero { grid-template-columns: 1fr; }
  .bp-sim { padding: 18px; }
  .bp-keyfigs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bp-keyfig { padding: 14px; }
  .bp-keyfig-value { font-size: 19px; }
  .bp-cta-band, .bp-cta-inline { flex-direction: column; align-items: flex-start; }
  .bp-sticky .bp-container { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
  .bp-methodo-grid { grid-template-columns: 1fr; }
  .bp-topbar .bp-container { justify-content: center; text-align: center; }
}