/* Vendd — vendd.fr — design system « épicerie scandinave » (handoff Valkode) */

:root {
  --nm-topbar: #15181E; --nm-ink: #1C2028; --nm-ink-hover: #2C3240;
  --nm-bg: #F1EEE9; --nm-surface: #FFFFFF; --nm-soft: #FCFAF7; --nm-soft2: #FBF9F6;
  --nm-prune: #7B4F7B; --nm-green: #3E5238; --nm-green-bg: #E9F0E6;
  --nm-red: #B03A2E; --nm-orange: #C97A2B; --nm-amber: #8A5B08; --nm-blue: #1C4E80;
  --nm-border: #E7E1D8; --nm-line: #F1EDE7;
  --nm-t2: #5A5248; --nm-t3: #8B7E72; --nm-t4: #9C9184;
  --nm-sans: 'Jost', sans-serif; --nm-serif: 'Cormorant Garamond', serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nm-bg); font-family: var(--nm-sans); color: var(--nm-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--nm-prune); }
a:hover { color: #633F63; }

.msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-variation-settings: 'wght' 300, 'FILL' 0; user-select: none;
}
.num { font-variant-numeric: tabular-nums; }

/* Les ancres ciblées ne doivent pas passer sous le header sticky (62px) */
[id] { scroll-margin-top: 78px; }

/* ---- Boutons (équivalents des style-hover du prototype) ---- */
.btn-topbar {
  font-size: 13.5px; font-weight: 600; color: #fff; background: var(--nm-ink);
  padding: 9px 18px; border-radius: 7px; text-decoration: none;
}
.btn-topbar:hover { background: var(--nm-ink-hover); color: #fff; }

.btn-green {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--nm-green); padding: 13px 24px; border-radius: 7px; text-decoration: none;
}
.btn-green:hover { background: #33452E; color: #fff; }

.btn-green-block {
  display: block; text-align: center; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--nm-green); padding: 13px; border-radius: 7px; text-decoration: none;
}
.btn-green-block:hover { background: #33452E; color: #fff; }

.btn-neutral {
  font-size: 15px; font-weight: 600; color: var(--nm-ink); background: #fff;
  border: 1px solid var(--nm-border); padding: 13px 24px; border-radius: 7px; text-decoration: none;
}
.btn-neutral:hover { border-color: #D8D0C2; color: var(--nm-ink); }

.btn-white {
  text-align: center; font-size: 15px; font-weight: 600; color: var(--nm-ink);
  background: #fff; padding: 14px 26px; border-radius: 7px; text-decoration: none;
}
.btn-white:hover { background: #F1EEE9; color: var(--nm-ink); }

/* Badge « par VALKODE » : lien sans soulignement, couleurs héritées des spans */
.badge-valkode { text-decoration: none; }

/* ---- FAQ (details natif) ---- */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary .msr { transition: transform .15s ease; }
details[open] summary .msr { transform: rotate(45deg); }

/* ---- Responsive (le prototype n'embarque pas de media queries : grilles en 1 colonne) ---- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr !important; padding-top: 48px !important; }
  .tarif-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  .site-nav { gap: 14px !important; }
  .site-nav .nav-anchor { display: none; }
  .cta-grid { grid-template-columns: 1fr !important; padding: 36px 24px !important; }
  .bank-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .header-inner { padding: 0 18px !important; }
  .section-pad { padding-left: 18px !important; padding-right: 18px !important; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
}