/* Site public. Hérite des variables et composants de style.css : la vitrine et
   l'application partagent la même langue visuelle, ce qui évite l'effet de bascule
   entre la page de vente et le produit. */

.site { background: var(--surface); }
.site-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }

/* Bandeau et hero sur fond encre : le lime ne devient franc que posé sur du
   sombre. Sur blanc il vire au jaune sale, sur encre il éclate. L'en-tête reste
   sombre sur toute la page pour ne pas clignoter au défilement. */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(15, 26, 13, .92);
               backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid #263021; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.site-nav .logo { height: auto; padding: 0; color: #fff; }
.site-nav .logo .logo-text { color: #fff; }
.site-links { display: flex; gap: 1.5rem; margin-left: 1rem; flex: 1; }
.site-links a { color: #c3cdc1; font-size: .9375rem; font-weight: 500; text-decoration: none; }
.site-links a:hover { color: #fff; }
.site-actions { display: flex; gap: .5rem; align-items: center; }
.site-header .button:not(.primary) { background: transparent; border-color: #5c6b5a; color: #e6ebe4; }
.site-header .button:not(.primary):hover { background: #1c261a; border-color: #74846f; }

.eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
           text-transform: uppercase; color: var(--accent-600); margin-bottom: .875rem; }
.display { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em;
           font-weight: 800; margin: 0 0 1.25rem; }
.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-600); max-width: 56ch; margin: 0; }
.section-h { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.2; letter-spacing: -.028em;
             font-weight: 750; text-align: center; max-width: 22ch; margin: 0 auto; }

.hero { padding: 5rem 0 4.5rem; background: #0f1a0d; color: #fff;
        background-image: radial-gradient(120% 90% at 88% -20%, rgba(166, 224, 34, .22) 0%, transparent 62%); }
.hero .eyebrow { color: var(--accent-400); }
.hero .display { color: #fff; }
.hero .lead { color: #b9c4b8; }
.hero .fineprint, .hero .hero-note { color: #8c9a8b; }
.hero .button:not(.primary) { background: transparent; border-color: #5c6b5a; color: #e6ebe4; }
.hero .button:not(.primary):hover { background: #1c261a; border-color: #74846f; }
.hero-shot img { border-color: #2b3628; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-shot { margin: 0; }
.hero-shot img, .feature-grid figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.feature-grid figure.phone { display: flex; justify-content: center; }
.feature-grid figure.phone img { max-width: 300px; border-radius: 26px; }

.band { padding: 4.5rem 0; }
.pain { text-align: center; padding: 1.5rem 1rem; }
.pain .icon { color: var(--accent-600); margin-bottom: .875rem; }
.pain h3 { font-size: 1rem; margin-bottom: .4rem; }
.pain p { color: var(--ink-600); font-size: .9375rem; }

.feature { padding: 4.5rem 0; }
.feature.alt { background: var(--ground); border-block: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.feature-grid.reverse figure { order: 2; }
.feature h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; letter-spacing: -.026em;
              font-weight: 750; margin-bottom: .875rem; }
.feature p { color: var(--ink-600); font-size: 1rem; line-height: 1.65; }

.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .625rem; }
.ticks li { display: flex; gap: .625rem; align-items: flex-start; color: var(--ink-700); font-size: .9375rem; }
.ticks li::before {
  content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
  background: var(--ok-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

.split-cta { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }

/* Le seul aplat de lime plein de la page. Il ouvre après une longue section
   claire et referme juste avant le pied encre : hero sombre, corps clair, lime,
   pied sombre — c'est ce rythme qui fait respirer l'acidulé au lieu de le noyer. */
.final-cta { background: linear-gradient(160deg, var(--accent-300), var(--accent-500));
             color: var(--on-accent); padding: 4.5rem 0; text-align: center; }
.final-cta h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.028em; font-weight: 750;
                max-width: 24ch; margin: 0 auto .75rem; }
.final-cta p { color: rgba(21, 34, 12, .76); margin-bottom: 2rem; }
.final-cta .button { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent-300); font-weight: 650; }
.final-cta .button:hover { background: #223610; border-color: #223610; }

/* ------------------------------------------------------------------ tarifs */

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
           gap: 1.25rem; margin-top: 2.5rem; align-items: start; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
              padding: 1.75rem; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent-600); box-shadow: var(--shadow-lg);
                       position: relative; }
.price-card .tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
                   background: var(--accent-400); color: var(--on-accent); font-size: .6875rem; font-weight: 700;
                   letter-spacing: .04em; text-transform: uppercase; padding: .25rem .75rem;
                   border-radius: 999px; white-space: nowrap; }
.price-amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; margin: .75rem 0 .25rem; }
.price-amount span { font-size: .875rem; font-weight: 500; color: var(--ink-500); letter-spacing: 0; }
.price-card .ticks { flex: 1; }

.faq { max-width: 760px; margin: 3rem auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.125rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
               display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.375rem; color: var(--ink-400); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: .875rem; color: var(--ink-600); font-size: .9375rem; line-height: 1.65; }

/* ------------------------------------------------------------------- texte */

.prose { max-width: 720px; margin: 0 auto; padding: 3.5rem 0; }
.prose h1 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .5rem; }
.prose h2 { font-size: 1.1875rem; margin: 2.25rem 0 .625rem; }
.prose h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; }
.prose p, .prose li { color: var(--ink-700); line-height: 1.7; font-size: .9375rem; }
.prose p { margin-bottom: .875rem; }
.prose ul { padding-left: 1.25rem; margin-bottom: .875rem; }
.prose li { margin-bottom: .35rem; }
.prose code { background: var(--surface-sunken); padding: .12rem .35rem; border-radius: 5px;
              font-size: .875em; }
.prose .todo { background: var(--warn-50); border: 1px solid var(--warn-200); color: var(--warn-700);
               border-radius: var(--r); padding: .75rem .875rem; font-size: .875rem; margin: 1rem 0; }
.prose pre { background: var(--ink-900); color: #e2e8f0; padding: 1rem 1.125rem; border-radius: var(--r);
             overflow-x: auto; font-size: .8125rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; color: inherit; }

/* ------------------------------------------------------------------- pied */

.site-footer { border-top: 1px solid #263021; background: #0f1a0d; color: #b9c4b8;
               padding: 3rem 0 1.5rem; }
.site-footer .logo .logo-text { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
                  color: #8c9a8b; margin-bottom: .75rem; }
.footer-grid a { display: block; color: #b9c4b8; font-size: .875rem; text-decoration: none;
                 margin-bottom: .45rem; }
.footer-grid a:hover { color: var(--accent-400); }
.footer-grid .logo { height: auto; padding: 0; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
                 margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #263021; }

@media (max-width: 900px) {
  .hero-grid, .feature-grid, .split-cta { grid-template-columns: 1fr; gap: 2.5rem; }
  .feature-grid.reverse figure { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-links { display: none; }
  .hero { padding: 3rem 0; }
  .band, .feature { padding: 3rem 0; }
}

@media (max-width: 560px) {
  .site-actions .button:not(.primary) { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}