/* OCTOPUS — page d'accueil « épurée » : claire, minimaliste, accent violet.
   Chargée UNIQUEMENT sur index.html, après styles.css, pour surcharger le thème
   sombre sans toucher aux autres pages (app, subscribe, pages de contenu). */

:root {
  --lp-accent: #7c3aed;
  --lp-accent-dark: #6d28d9;
  --lp-accent-soft: #f3f0fd;
  --lp-accent-text: #6d3fd6;
  --lp-ink: #16161d;
  --lp-muted: #6b6b7a;
  --lp-faint: #8a8a97;
  --lp-border: #ececf1;
  --lp-bg-alt: #fafafb;
}

/* Fond clair, texte sombre */
body.landing {
  background: #ffffff;
  color: var(--lp-ink);
}

/* On retire les halos lumineux animés (le « superflu ») */
.landing .bg-orbs {
  display: none;
}

/* En-tête */
.landing .landing-topbar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 40px;
}
.landing .brand {
  color: var(--lp-ink);
  font-weight: 600;
  letter-spacing: -0.2px;
}
.landing .lang-select {
  background: #ffffff;
  border: 0.5px solid var(--lp-border);
  color: var(--lp-ink);
  border-radius: 8px;
}

/* Hero : plus d'air */
.landing .hero {
  padding: 60px 40px 72px;
  gap: 56px;
}
.landing .pill {
  background: var(--lp-accent-soft);
  border: none;
  color: var(--lp-accent-text);
  font-weight: 500;
  padding: 6px 13px;
}
/* Titre : solide, net, sans dégradé multicolore */
.landing .hero-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--lp-ink);
  letter-spacing: -1.2px;
  font-weight: 600;
}
.landing .hero-sub {
  color: var(--lp-muted);
}
.landing .hero-feats li {
  color: var(--lp-ink);
}
.landing .feat-ico {
  background: var(--lp-accent-soft);
  border: none;
  color: var(--lp-accent-text);
}
.landing .hero-trust {
  color: var(--lp-faint);
  opacity: 1;
}

/* Carte d'inscription : blanche, sobre */
.landing .card,
.landing .auth-card {
  background: #ffffff;
  border: 0.5px solid var(--lp-border);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.05);
  border-radius: 14px;
}
.landing .auth-card h2 {
  color: var(--lp-ink);
}
.landing .trial-hook {
  color: var(--lp-accent-text);
  font-weight: 500;
}
.landing .muted {
  color: var(--lp-muted);
}

/* Onglets connexion / inscription */
.landing .tab {
  background: var(--lp-bg-alt);
  border: 0.5px solid var(--lp-border);
  color: var(--lp-muted);
}
.landing .tab.active {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
  color: #ffffff;
}

/* Champs */
.landing .field span {
  color: var(--lp-muted);
}
.landing input {
  background: #ffffff;
  border: 0.5px solid var(--lp-border);
  color: var(--lp-ink);
}
.landing input:focus {
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 3px var(--lp-accent-soft);
}

/* Boutons */
.landing .btn.primary {
  background: var(--lp-accent);
  color: #ffffff;
}
.landing .btn.primary:hover {
  background: var(--lp-accent-dark);
}
.landing .btn.glow {
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.25);
}
.landing .btn.glow:hover {
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.32);
}

/* Séparateur « ou » + boutons sociaux */
.landing .divider {
  color: var(--lp-faint);
}
.landing .divider::before,
.landing .divider::after {
  background: var(--lp-border);
}
.landing .btn.social {
  background: #ffffff;
  color: var(--lp-ink);
  border: 0.5px solid var(--lp-border);
}
.landing .btn.social:hover {
  background: var(--lp-bg-alt);
}

/* Section « Comment ça marche » */
.landing .how {
  padding: 64px 40px 20px;
}
.landing .how-title {
  color: var(--lp-ink);
  font-weight: 600;
  letter-spacing: -0.5px;
}
.landing .step {
  background: var(--lp-bg-alt);
  border: 0.5px solid var(--lp-border);
  border-radius: 14px;
}
.landing .step-num {
  background: var(--lp-accent);
  color: #ffffff;
}
.landing .step h3 {
  color: var(--lp-ink);
}
.landing .step p {
  color: var(--lp-muted);
}

/* Section réassurance + exemple */
.landing .trust {
  padding: 72px 40px 20px;
}
.landing .trust-title {
  color: var(--lp-ink);
  font-weight: 600;
  letter-spacing: -0.5px;
}
.landing .trust-lead {
  color: var(--lp-muted);
}
.landing .trust-card {
  background: #ffffff;
  border: 0.5px solid var(--lp-border);
  border-radius: 14px;
}
.landing .trust-ico {
  background: var(--lp-accent-soft);
  border: none;
}
.landing .trust-card h3 {
  color: var(--lp-ink);
}
.landing .trust-card p {
  color: var(--lp-muted);
}
.landing .example-card {
  background: #ffffff;
  border: 0.5px solid var(--lp-border);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.05);
  border-radius: 14px;
}
.landing .example-tag {
  background: var(--lp-accent-soft);
  border: none;
  color: var(--lp-accent-text);
}
.landing .example-chart {
  background: conic-gradient(var(--lp-accent) 0 61%, #eeeef2 61% 100%);
}
.landing .example-chart::before {
  background: #ffffff;
}
.landing .example-pct,
.landing .example-q {
  color: var(--lp-ink);
}
.landing .example-meta,
.landing .example-note {
  color: var(--lp-faint);
}

/* Pied de page */
.landing .landing-footer {
  border-top: 0.5px solid var(--lp-border);
  color: var(--lp-muted);
}
.landing .footer-links a {
  color: var(--lp-muted);
}
.landing .footer-links a:hover {
  color: var(--lp-ink);
}