/* Vitrine (partie 1) : en-tête, sections de la landing page, pied de page. */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header-inner { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) 0; }
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; }
.site-nav a { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.site-nav a:hover { color: var(--color-accent); }
.nav-toggle { display: none; margin-left: auto; }

.hero { padding: var(--space-8) 0 var(--space-7); background: linear-gradient(160deg, var(--color-accent-soft), var(--color-lilac)); }
.hero-inner { max-width: 760px; }
.hero-kicker { color: var(--color-accent-strong); font-weight: 600; letter-spacing: 0.05em; }
.hero-lead { font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.section { padding: var(--space-8) 0; }
.section-alt { background: var(--color-surface); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.grid-3 .card h3 { margin-bottom: var(--space-2); }

.faq-item { border-bottom: 1px solid var(--color-line); padding: var(--space-3) 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: var(--space-3) 0 0; }

.site-footer { padding: var(--space-6) 0; color: var(--color-ink-soft); font-size: var(--font-size-small); }
.site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.site-footer nav { display: flex; gap: var(--space-4); }
.site-footer a { color: var(--color-ink-soft); }

/* Pages légales */
.legal h2 { margin-top: var(--space-6); font-size: 1.3rem; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-header-inner { flex-wrap: wrap; }
  .site-nav {
    display: none; order: 3; width: 100%; flex-direction: column; gap: var(--space-2);
    margin: 0; padding-bottom: var(--space-3);
  }
  .site-nav.is-open { display: flex; }
}