/* Affreta — affreta.com — tokens & base (source : Affreta.dc.html) */
:root {
  --lf-bg: #F4F4F1;
  --lf-surface: #fff;
  --lf-border: #ECEBE6;
  --lf-accent: #0E7A5F;
  --lf-accent-hover: #0A5C47;
  --lf-accent-tint: rgba(14,122,95,.08);
  --lf-signal: #E4622E;
  --lf-ink: #18191B;
  --lf-text2: #5B6066;
  --lf-text3: #8A9099;
  --lf-title: 'Space Grotesk', system-ui, sans-serif;
  --lf-body: 'Geist', system-ui, sans-serif;
  --lf-mono: 'Geist Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lf-bg);
  font-family: var(--lf-body);
  color: var(--lf-ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lf-accent); }
a:hover { color: var(--lf-accent-hover); }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .faq-marker::before { content: "\2212"; }
details:not([open]) > summary .faq-marker::before { content: "+"; }

section[id] { scroll-margin-top: 80px; }

/* Navigation */
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-link { font-size: 13.5px; font-weight: 500; color: var(--lf-text2); text-decoration: none; }
.nav-link:hover { color: var(--lf-text2); }

/* Boutons (style-hover du prototype -> classes) */
.btn { text-decoration: none; font-weight: 600; text-align: center; display: inline-block; }
.btn-nav { font-size: 13.5px; color: #fff; background: var(--lf-accent); padding: 9px 18px; border-radius: 9px; }
.btn-nav:hover { background: var(--lf-accent-hover); color: #fff; }
.btn-hero-primary { font-size: 15px; color: #fff; background: var(--lf-accent); padding: 13px 26px; border-radius: 11px; }
.btn-hero-primary:hover { background: var(--lf-accent-hover); color: #fff; }
.btn-hero-secondary { font-size: 15px; color: var(--lf-ink); background: #fff; border: 1px solid var(--lf-border); padding: 13px 26px; border-radius: 11px; }
.btn-hero-secondary:hover { border-color: #D8D6CE; color: var(--lf-ink); }
.btn-plan { display: block; margin-top: auto; font-size: 14px; padding: 12px; border-radius: 10px; }
.btn-plan-neutral { color: var(--lf-ink); background: #fff; border: 1px solid var(--lf-border); }
.btn-plan-neutral:hover { border-color: #D8D6CE; color: var(--lf-ink); }
.btn-plan-accent { color: #fff; background: var(--lf-accent); }
.btn-plan-accent:hover { background: var(--lf-accent-hover); color: #fff; }
.btn-cta-white { font-size: 15px; color: var(--lf-accent); background: #fff; padding: 14px 26px; border-radius: 11px; }
.btn-cta-white:hover { background: #F1F5F3; color: var(--lf-accent-hover); }

/* Grilles deux colonnes (inline dans le prototype, ici en classes pour le responsive) */
.grid-hero { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1fr); gap: 56px; align-items: center; }
.grid-steps { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(260px, .9fr); gap: 56px; align-items: center; }
.grid-integrations { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 48px; align-items: center; }
.grid-cta { display: grid; grid-template-columns: minmax(280px, 1.2fr) minmax(220px, .8fr); gap: 40px; align-items: center; }

/* Tableaux larges : défilement horizontal interne en mobile */
.scroll-x { overflow-x: auto; }
.compare-table { min-width: 640px; }
.dash-table { min-width: 560px; }

@media (max-width: 900px) {
  .grid-hero, .grid-steps, .grid-integrations, .grid-cta { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-links { gap: 14px; }
  .nav-links .nav-link { display: none; }
}

@media (max-width: 480px) {
  .cta-band { padding: 40px 24px !important; }
}