/* ==================================================================
   bonhome. Thème Nuit pour les pages publiques (tarifs, FAQ, publier,
   pages légales). Chargé APRÈS brand.css, components.css et le style
   propre de chaque page : il redéfinit les tokens --bh-* et la typo.
   Validé le 6 septembre 2026 (voir mémoire « design Nuit »).
   ================================================================== */
:root {
  --bh-paper: #0C171B; --bh-paper-soft: #13252B; --bh-paper-sunk: #1B3036; --bh-paper-raised: #13252B;
  --bh-cream: #13252B;
  --bh-ink: #FFFFFF; --bh-ink-soft: #C9D2CF; --bh-ink-mute: #7E8C88; --bh-ink-disabled: #5C6B75;
  --bh-teal-soft: #1B3036; --bh-teal-tint: #13252B;
  --bh-sage-tint: rgba(143,167,128,0.14); --bh-sage-soft: #C2D1B3;
  --bh-terracotta-tint: rgba(201,106,68,0.16); --bh-terracotta-soft: #E8B9A3;
  --bh-line: rgba(255,255,255,0.12); --bh-line-soft: rgba(255,255,255,0.08); --bh-line-strong: rgba(255,255,255,0.22);
  --bh-bg: #0C171B; --bh-bg-alt: #13252B; --bh-bg-sunk: #1B3036; --bh-bg-raised: #13252B;
  --bh-text: #FFFFFF; --bh-text-soft: #C9D2CF; --bh-text-mute: #7E8C88;
  --bh-border: rgba(255,255,255,0.12); --bh-border-soft: rgba(255,255,255,0.08);
  --bh-font-serif: "Fraunces", Georgia, serif;
  --bh-font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --bh-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --paper: #0C171B; --cream: #13252B; --ink: #FFFFFF; --ink-soft: #C9D2CF; --ink-mute: #7E8C88;
  --line: rgba(255,255,255,0.12); --line-soft: rgba(255,255,255,0.08); --teal-soft: #1B3036;
}
html, body { background: #0C171B !important; color: #FFFFFF; }
body { font-family: var(--bh-font-sans) !important; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--bh-font-display) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #FFFFFF; font-variation-settings: normal !important; }
h4 { font-family: var(--bh-font-sans); }
p, li, td, th, label, span, div { border-color: var(--bh-line); }
a { color: #C2D1B3; }
.wordmark { color: #FFFFFF; }
.wordmark .wordmark__chevron { stroke: #8FA780; }
.wordmark .wordmark__point { color: #C96A44; }
/* boutons de la charte sur fond sombre */
.btn-primary, .plan-cta.primary, .cta-btn { background: #C96A44 !important; color: #FFFFFF !important; border-color: transparent !important; }
.btn-primary:hover, .plan-cta.primary:hover { background: #D4785A !important; box-shadow: 0 10px 30px rgba(201,106,68,0.3) !important; }
.btn-outline, .plan-cta.secondary { background: transparent !important; color: #FFFFFF !important; border: 1.5px solid rgba(255,255,255,0.22) !important; }
.btn-outline:hover, .plan-cta.secondary:hover { border-color: rgba(255,255,255,0.5) !important; }
.plan-cta.disabled { background: transparent !important; color: #7E8C88 !important; border: 1px dashed rgba(255,255,255,0.18) !important; cursor: default; }
/* cartes, encadrés, séparateurs des pages */
.plan, .faq-item, .card, .step, .legal, .box, section.hero { background-color: var(--bh-paper-raised); }
.plan.featured, .plan.highlight { border-color: #8FA780 !important; }
input, select, textarea { background: #1B3036 !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.14) !important; }
input::placeholder, textarea::placeholder { color: #7E8C88 !important; }
input:focus, select:focus, textarea:focus { border-color: #8FA780 !important; box-shadow: 0 0 0 3px rgba(143,167,128,0.2) !important; }
/* on masque la nav et le footer propres aux pages (remplacés par les partiels) */
nav.nav, footer.footer { display: none !important; }

/* Navigation partagée */
.bhwrap { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.bhnav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; position: relative; }
.bhnav-logo .wordmark { font-size: 26px; }
.bhnav-links { display: flex; align-items: center; gap: 28px; }
.bhnav-links a { color: #C9D2CF; font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s; }
.bhnav-links a:hover, .bhnav-links a.on { color: #FFFFFF; }
.bhbtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.bhbtn-teal { background: #2A6670; color: #FFFFFF !important; }
.bhbtn-teal:hover { background: #337985; }
.bhnav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; }
.bhnav-toggle span { display: block; width: 22px; height: 2px; background: #FFFFFF; border-radius: 2px; }
@media (max-width: 768px) {
  .bhnav-toggle { display: flex; }
  .bhnav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 20px; background: #13252B; border: 1px solid rgba(255,255,255,0.12); border-radius: 0 0 20px 20px; z-index: 50; }
  .bhnav-links.open { display: flex; }
  .bhnav-links a { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 16px; }
  .bhnav-links a:last-child { border-bottom: 0; }
  .bhnav-links a.bhbtn { margin: 10px 20px 0; }
}
/* Pied de page partagé */
.bhfoot { border-top: 1px solid rgba(255,255,255,0.12); padding: 56px 0 24px; color: #C9D2CF; margin-top: 60px; }
.bhfoot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.bhfoot-col h4 { color: #FFFFFF; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 14px; }
.bhfoot-col a { display: block; font-size: 14px; color: #C9D2CF; margin-bottom: 10px; text-decoration: none; }
.bhfoot-col a:hover { color: #FFFFFF; }
.bhfoot-brand .wordmark { font-size: 30px; }
.bhfoot-baseline { font-family: var(--bh-font-serif); font-weight: 300; font-size: 16px; color: #C9D2CF; margin: 8px 0 10px; }
.bhfoot-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0; }
.bhfoot-bottom { margin-top: 22px; text-align: center; font-size: 12px; color: #7E8C88; }
@media (max-width: 900px) { .bhfoot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 600px) { .bhfoot-grid { grid-template-columns: 1fr; } }