/* En-tête standard + bandeau final (13/10/2026, audit « parcours d'achat »).
   Pour les pages autonomes qui n'utilisent PAS assets/styles.css
   (metiers/index.html, financement.html, whatsapp.html) : même rendu que
   l'en-tête de la home, sans importer toute la feuille de la home (qui
   restylerait leurs titres et leurs blocs). Tout est sous .site-header ou
   .bandeau-final : rien ne fuit sur le reste de la page. */
.site-header, .bandeau-final {
  --pin: #11504A; --pin-dark: #0B3733; --gold: #B97711; --gold-light: #D89A3D;
  --ivory: #FBFAF6; --ink: #1D2321; --line: #E4DFD0; --white: #FFFFFF;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-sm: 0 2px 8px rgba(29, 35, 33, 0.06);
  --shadow-md: 0 10px 30px rgba(17, 80, 74, 0.12);
  font-family: var(--sans);
}
header.site-header {
  position: sticky; top: 0; z-index: 100; height: auto; display: block;
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 0; margin: 0; color: var(--ink);
}
.site-header .container, .bandeau-final .container {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box;
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.25rem; gap: 1rem; position: relative;
}
.site-header .brand {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-family: var(--serif); font-weight: 700; font-size: 1.35rem; color: var(--pin-dark);
}
.site-header .brand-mark { width: 38px; height: 38px; flex: none; }
.site-header .main-nav { display: flex; align-items: center; gap: 1.4rem; }
.site-header .main-nav a { color: var(--ink); text-decoration: none; font-size: 0.96rem; font-weight: 500; }
.site-header .main-nav a:hover { color: var(--pin); }
.site-header .nav-links { display: flex; gap: 1.4rem; }
.site-header .nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.site-header .nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 0.5rem;
  color: var(--ink); min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.site-header .nav-toggle svg { width: 26px; height: 26px; }

.site-header .btn, .bandeau-final .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.3;
  padding: 0.85rem 1.6rem; min-height: 44px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.site-header .btn:hover, .bandeau-final .btn:hover { transform: translateY(-1px); }
.site-header .btn-primary, .bandeau-final .btn-primary { background: var(--gold); color: var(--white); box-shadow: var(--shadow-sm); }
.site-header .btn-primary:hover, .bandeau-final .btn-primary:hover { background: var(--gold-light); color: var(--white); }
.site-header .btn-secondary { background: transparent; border-color: var(--pin); color: var(--pin); }
.site-header .btn-secondary:hover { background: var(--pin); color: var(--white); }
.bandeau-final .btn-ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: var(--white); }
.bandeau-final .btn-ghost:hover { background: rgba(255,255,255,0.22); }
.site-header .btn-block { width: 100%; white-space: normal; }
/* dans le menu, « .main-nav a » (couleur du texte) ne doit pas l'emporter sur les boutons */
.site-header .main-nav a.btn-primary { color: var(--white); }
.site-header .main-nav a.btn-secondary { color: var(--pin); }

@media (max-width: 1180px) {
  .site-header .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--ivory);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    padding: 1rem 1.25rem 1.5rem; gap: 1rem; display: none; box-shadow: var(--shadow-md);
  }
  .site-header .main-nav.is-open { display: flex; }
  .site-header .main-nav .nav-links { flex-direction: column; gap: 0.9rem; }
  .site-header .main-nav .nav-links a { padding: 0.35rem 0; }
  .site-header .nav-cta { flex-direction: column; align-items: stretch; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .header-inner .nav-cta.desktop-only { display: none; }
}
@media (min-width: 1181px) {
  .site-header .main-nav .nav-cta.mobile-only { display: none; }
}

/* Bandeau final « Créer mon compte · Appeler la démo » */
.bandeau-final { background: var(--pin-dark); color: var(--white); padding: 3rem 0; margin-top: 2rem; text-align: center; }
.bandeau-final h2 { font-family: var(--serif); color: var(--white); font-size: clamp(1.4rem, 3.4vw, 2rem); margin: 0 0 0.6rem; text-wrap: balance; }
.bandeau-final p { color: rgba(255,255,255,0.85); margin: 0 auto; max-width: 60ch; }
.bandeau-final .bf-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.4rem 0 0.9rem; }
.bandeau-final .bf-essai { font-size: 0.92rem; }
@media (max-width: 480px) { .bandeau-final .bf-ctas .btn { width: 100%; white-space: normal; } }