/* ============================================================
   Website.sarl — Couche OpenAI-inspired (haut du cascade)
   ------------------------------------------------------------
   Ces règles écrasent tout héritage "warm/Claude" pour ancrer
   l'ensemble du site dans une identité monochromatique sobre.
   ============================================================ */

/* Reset typographique — Inter tight, headings sans-serif tight */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: #0d0d0d;
  background: #ffffff;
}

/* Titres H1-H2 gardent la serif éditoriale (Newsreader) pour
   l'aura "OpenAI blog/paper", mais avec un poids modéré */
h1, h2, .v2h1, .v2h2, .section-head h2 {
  font-family: 'Newsreader', 'Charter', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #0d0d0d;
}

/* H3-H6 restent sans-serif tight */
h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d0d0d;
}

.v2serif, .v2serif--italic {
  font-family: 'Newsreader', 'Charter', Georgia, serif;
  font-weight: 500;
}
.v2serif--italic {
  font-style: italic;
  color: #0d0d0d;
}

/* Section spacing — plus contenu, respiration éditoriale */
.section, .v2pricing, .v2features, .v2magic, .v2steps,
.v2dream, .v2social, .v2faq, .v2cta, .v2proof {
  padding-block: 6rem;
}
@media (max-width: 640px) {
  .section, .v2pricing, .v2features, .v2magic, .v2steps,
  .v2dream, .v2social, .v2faq, .v2cta, .v2proof {
    padding-block: 4rem;
  }
}

/* Header — clair, sobre, jamais "glassy dark" */
.site-header {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
.site-header .nav__link {
  color: #0d0d0d !important;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.75;
}
.site-header .nav__link:hover,
.site-header .nav__link.is-active {
  opacity: 1;
  color: #0d0d0d !important;
}

/* Le logo header est maintenant en version sombre, plus le blanc */
.site-header .brand__logo {
  filter: none !important;
}

/* Boutons — carrés (radius sobre), typographie tight */
.btn,
.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-login,
.v2plan__cta--pop, .v2plan__cta--ghost, .v2prompt__btn {
  border-radius: 0.5rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease !important;
  padding: 0.6rem 1.1rem !important;
  font-size: 0.9rem !important;
}
.btn-lg,
.btn-primary.btn-lg,
.v2plan__cta--pop.btn-lg {
  padding: 0.85rem 1.4rem !important;
  font-size: 1rem !important;
}
.btn-sm {
  padding: 0.5rem 0.9rem !important;
  font-size: 0.85rem !important;
}

/* Primaire — noir profond, blanc dessus. Vert accent uniquement
   pour les CTA les plus importants (hero, pricing populaire) */
.btn-primary,
.btn-login,
.v2plan__cta--pop,
.v2prompt__btn {
  background: #0d0d0d !important;
  border: 1px solid #0d0d0d !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-login:hover,
.v2plan__cta--pop:hover,
.v2prompt__btn:hover {
  background: #262626 !important;
  border-color: #262626 !important;
}

/* Variante accent (utilisée avec parcimonie sur le hero prompt) */
.btn-accent {
  background: #10a37f !important;
  border: 1px solid #10a37f !important;
  color: #ffffff !important;
}
.btn-accent:hover {
  background: #0e8f6d !important;
  border-color: #0e8f6d !important;
}

/* Outline / ghost / secondary — trait fin, monochrome */
.btn-outline, .btn-ghost, .btn-secondary,
.v2plan__cta--ghost {
  background: transparent !important;
  border: 1px solid #e5e5e5 !important;
  color: #0d0d0d !important;
}
.btn-outline:hover, .btn-ghost:hover, .btn-secondary:hover,
.v2plan__cta--ghost:hover {
  border-color: #0d0d0d !important;
  background: #f7f7f8 !important;
}

/* Eyebrow / badges — tight, uppercase, très sobres */
.v2eyebrow, .eyebrow, .badge {
  background: transparent;
  border: 1px solid #e5e5e5;
  color: #6e6e80;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 0.3rem 0.75rem;
  font-family: 'Inter', sans-serif;
}

/* Cards — hairline border, no shadow, hover subtle */
.v2plan, .feature-card, .card, .pricing-card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, transform 0.18s ease !important;
}
.v2plan:hover, .feature-card:hover, .card:hover {
  border-color: #d1d1d6 !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Plan populaire — bordure noir accentué, pas de vert au top */
.v2plan--pop {
  border: 1.5px solid #0d0d0d !important;
  border-top: 1.5px solid #0d0d0d !important;
}
.v2plan__badge {
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid #0d0d0d !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem !important;
}

/* Footer — noir profond, sobre */
.site-footer {
  background: #0d0d0d !important;
  color: #a1a1aa !important;
  border-top: 1px solid #262626 !important;
}
.site-footer a { color: #a1a1aa !important; }
.site-footer a:hover { color: #ffffff !important; }
.site-footer h2 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* CTA / sections sombres */
.section--dark, .v2cta {
  background: #0d0d0d !important;
  color: #f7f7f8 !important;
}

/* Newsletter — carré, minimal */
.newsletter {
  background: #f7f7f8 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.75rem !important;
  padding: 2rem !important;
}
.newsletter-form input {
  border: 1px solid #d1d1d6 !important;
  border-radius: 0.5rem !important;
  padding: 0.65rem 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
}

/* Trust bar — visible, pas de dégradation opacité forte */
.v2trust {
  opacity: 0.85 !important;
  color: #6e6e80;
  font-size: 0.85rem;
}

/* Hero prompt input — clair, structuré */
.v2prompt__field {
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.75rem !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.v2prompt__field:focus-within {
  border-color: #0d0d0d !important;
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.06) !important;
}
.v2prompt__field textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  color: #0d0d0d !important;
}

/* Chips — pill fine, hover sobre */
.v2chip {
  background: transparent !important;
  border: 1px solid #e5e5e5 !important;
  color: #6e6e80 !important;
  border-radius: 9999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.85rem !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
}
.v2chip:hover {
  border-color: #0d0d0d !important;
  color: #0d0d0d !important;
  background: #ffffff !important;
}

/* Language switcher — sobre monochrome */
.lang-switch__toggle {
  background: transparent !important;
  border: 1px solid #e5e5e5 !important;
  color: #0d0d0d !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 0.5rem !important;
}
.lang-switch__menu {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
}

/* Links par défaut — noir, souligné sur hover uniquement */
a:hover {
  color: #0d0d0d;
}
.prose a {
  color: #0d0d0d;
  text-decoration: underline;
  text-decoration-color: #d1d1d6;
  text-underline-offset: 3px;
}
.prose a:hover {
  text-decoration-color: #0d0d0d;
}

/* Focus ring — vert accent, discret */
:focus-visible {
  outline: 2px solid #10a37f !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Feature checks — vert accent (rare) */
.v2plan__features li svg,
.feature-check svg,
.check {
  color: #10a37f !important;
}

/* Blobs décoratifs hero — désactivés, pas d'ambiance chaude */
.v2hero__blobs,
.v2hero__scrim,
.v2hero__bg {
  display: none !important;
}

/* Placeholder visuels — bordure sobre, contenu neutre */
.v-placeholder {
  background: #f7f7f8;
  border: 1px dashed #d1d1d6;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e6e80;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  min-height: 12rem;
  text-align: center;
  padding: 2rem;
}
.v-placeholder svg {
  opacity: 0.35;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
}

/* ============================================================
   Website.sarl — Design system (aesthetic sobre)
   Monochromatique, éditorial, sérieux. Pas de dégradés.
   Vert #10a37f uniquement en accent utilitaire.
   ============================================================ */

/* -- Global resets for Claude aesthetic -- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* -- Serif headings (editorial feel) -- */
h1, h2, .v2h1, .v2h2, .section-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.v2serif, .v2serif--italic {
  font-family: var(--font-serif);
}
.v2serif--italic {
  font-style: italic;
  color: var(--primary);
}

/* -- Navigation (dark glass to carry the white wordmark) --
   v7.5: header runs on a dark glass panel so the white logo reads.
   The rgba() ink stays translucent enough to blend into the hero
   below without a hard edge. */
.site-header {
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Nav links inherit their dark-header colors from style.css already
   (rgba white .78 -> #fff on hover). Mega/dropdown panels stay light. */

/* -- Buttons (Claude: dark fill primary, ghost outlines) -- */
.btn-primary,
.v2plan__cta--pop,
.v2prompt__btn {
  background: #0d0d0d !important;
  border-color: #0d0d0d !important;
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: background 0.15s ease, opacity 0.15s ease;
  letter-spacing: 0;
}
.btn-primary:hover,
.v2plan__cta--pop:hover,
.v2prompt__btn:hover {
  background: #262626 !important;
  border-color: #262626 !important;
}

.btn-ghost,
.btn-outline,
.v2plan__cta--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--foreground);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover,
.btn-outline:hover,
.v2plan__cta--ghost:hover {
  border-color: var(--foreground);
  background: var(--muted);
}

/* -- Cards (Claude: subtle border, no heavy shadow) -- */
.v2plan,
.feature-card,
.card,
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.v2plan:hover,
.card:hover {
  border-color: #d1d1d6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.feature-card:hover {
  border-color: #d1d1d6;
}

/* Popular plan - warm coral top border (Claude-style accent line) */
.v2plan--pop {
  border-color: var(--border);
  border-top: 3px solid var(--primary);
}

/* v7.5: feature-card icon wrapper. Hairline square, coral stroke.
   No fill so the card stays neutral and the accent stays subtle. */
.feature-card__icon svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.75; }

/* -- Eyebrow badges (minimal, Claude-style) -- */
.v2eyebrow,
.eyebrow,
.badge {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
}

.badge--solid {
  background: #0d0d0d;
  color: #fff;
  border-color: #0d0d0d;
}

.v2plan__badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
}

/* -- Sections (lots of whitespace, Claude-like) -- */
.section,
.v2pricing,
.v2features,
.v2magic,
.v2steps,
.v2dream,
.v2social,
.v2faq,
.v2cta,
.v2proof {
  padding-block: 7rem;
}
@media (max-width: 640px) {
  .section,
  .v2pricing,
  .v2features,
  .v2magic,
  .v2steps,
  .v2dream,
  .v2social,
  .v2faq,
  .v2cta,
  .v2proof {
    padding-block: 4.5rem;
  }
}

/* -- Hero (clean white, editorial) -- */
.v2hero {
  padding-block: 5rem 4rem;
  background: var(--background);
}
.v2hero__bg,
.v2hero__scrim {
  display: none !important;
}

/* -- Dark sections (warm charcoal) -- */
.section--dark,
.v2cta {
  background: #0d0d0d;
  color: #f7f7f8;
}
.section--dark a,
.v2cta a {
  color: #f7f7f8;
}

/* -- Footer (Claude: dark, organized) -- */
.site-footer {
  background: #0d0d0d;
  color: #a1a1aa;
  border-top: none;
}
.site-footer a {
  color: #a1a1aa;
  transition: color 0.15s ease;
}
.site-footer a:hover {
  color: #FFFFFF;
}
.site-footer h2 {
  color: #f7f7f8;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -- Newsletter (warm accent background) -- */
.newsletter {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -- Links -- */
a:hover {
  color: var(--primary);
}

/* -- Muted sections -- */
.section--muted,
.section--muted-soft {
  background: var(--muted);
}

/* -- Feature list checks -- */
.v2plan__features li svg,
.feature-check svg {
  color: var(--primary);
}

/* -- Trust bar (faded, minimal) -- */
.v2trust {
  opacity: 0.5;
}

/* -- Prompt box (Claude-style input) -- */
.v2prompt__field {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  transition: border-color 0.2s ease;
}
.v2prompt__field:focus-within {
  border-color: #B8B8B3;
}

/* -- Pricing toggle -- */
.v2toggle button.is-active {
  background: #0d0d0d;
  color: #fff;
}

/* -- Remove all gradients except functional masks -- */
.v2hero::before,
.v2hero::after {
  display: none !important;
}

/* -- Icon tiles (Claude: warm background) -- */
.icon-tile {
  background: var(--muted);
  border: 1px solid var(--border);
}

/* -- Tabular numbers for prices -- */
.v2plan__amt,
.v2plan__meta strong {
  font-variant-numeric: tabular-nums;
}

/* -- Mega menu and dropdown panels (cleaner) -- */
.nav__mega-inner,
.nav__dropdown-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.nav__mega,
.nav__dropdown {
  border: none;
  box-shadow: none;
}

/* -- Inner hero for subpages -- */
.inner-hero {
  background: var(--muted);
  padding-block: 4rem 3rem;
}

/* -- Feature page card styling -- */
.fv2-demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* -- Breadcrumb bar -- */
.site-breadcrumb {
  background: var(--muted);
  border-top: 1px solid var(--border);
}

/* -- Blog cards -- */
.blog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blog-card:hover {
  border-color: #d1d1d6;
}

/* -- Magic/Why section: override dark bg (now light section) -- */
.v2magic {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
.v2magic h2,
.v2magic h3,
.v2magic__title {
  color: var(--foreground) !important;
}
.v2magic p,
.v2magic__sub {
  color: var(--muted-foreground) !important;
}

/* -- btn-secondary: visible on light backgrounds -- */
.btn-secondary {
  background: var(--background) !important;
  color: var(--foreground) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius);
  font-weight: 600;
}
.btn-secondary:hover {
  background: var(--muted) !important;
  border-color: var(--foreground) !important;
}

/* -- Ghost/outline buttons: ensure visible on light bg -- */
.btn-ghost,
.btn-outline {
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
.btn-ghost:hover,
.btn-outline:hover {
  border-color: var(--foreground) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
}

/* Ghost buttons inside dark sections keep white text */
.section--dark .btn-ghost,
.v2cta .btn-ghost {
  color: #f7f7f8 !important;
  border-color: rgba(255,255,255,0.25) !important;
}
.section--dark .btn-ghost:hover,
.v2cta .btn-ghost:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

/* -- Newsletter: ensure readable text on light bg inside dark footer -- */
.newsletter h2 {
  color: var(--foreground) !important;
  font-family: var(--font-serif) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 1.25rem !important;
}
.newsletter p {
  color: var(--muted-foreground) !important;
}
.newsletter input[type="email"] {
  color: var(--foreground);
  border-color: var(--border);
}