:root {
   --bg: #FDFBF7;
   --bg-alt: #F8F4ED;
   --surface: #FFFFFF;
   --text: #2B2520;
   --text-secondary: #5C554D;
   --text-muted: #7A7268;
   --accent: #1E4A3B;
   --accent-light: #E6F0EC;
   --gold: #B8935A;
   --gold-light: #F7F1E4;
   --border: #E5E0D8;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --font-display: 'Playfair Display', Georgia, serif;
   --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   --transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
 }

 body {
   font-family: var(--font-body);
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
   overflow-x: hidden;
 }

 .container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .container-narrow {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .container-offer {
   max-width: 700px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(253, 251, 247, 0.85);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
   padding: 14px 0;
 }

 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .logo {
   font-weight: 600;
   font-size: 1.1rem;
   color: var(--accent);
   text-decoration: none;
   letter-spacing: -0.02em;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .logo-dot {
   width: 10px;
   height: 10px;
   background: var(--accent);
   border-radius: 50%;
   display: inline-block;
 }

 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--accent);
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 0.9rem;
   text-decoration: none;
   cursor: pointer;
   transition: var(--transition);
   letter-spacing: -0.01em;
 }

 .btn:hover {
   background: #16382C;
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }

 .btn-gold {
   background: var(--gold);
   color: white;
 }

 .btn-gold:hover {
   background: #A57E48;
 }

 /* Boutons spécifiques */
 .btn-hero {
   padding: 16px 32px;
   font-size: 1rem;
 }

 .btn-lg {
   font-size: 1.1rem;
 }

 .btn-lg-cta {
   font-size: 1.1rem;
 }

 .section {
   padding: 80px 0;
 }

 .section-bg {
   background: var(--bg-alt);
 }

 .section-label {
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--accent);
   font-weight: 600;
   margin-bottom: 16px;
 }

 .section-title {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 2.8rem);
   font-weight: 600;
   line-height: 1.15;
   color: var(--text);
   margin-bottom: 20px;
   letter-spacing: -0.02em;
 }

 .section-subtitle {
   font-size: 1.1rem;
   color: var(--text-secondary);
   max-width: 600px;
   line-height: 1.6;
 }

 .reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }

 .reveal-delay-1 {
   transition-delay: 0.1s;
 }

 .reveal-delay-2 {
   transition-delay: 0.2s;
 }

 .reveal-delay-3 {
   transition-delay: 0.3s;
 }

 .reveal-delay-4 {
   transition-delay: 0.4s;
 }

 /* Hero */
 .hero {
   padding: 60px 0 80px;
   display: flex;
   align-items: center;
   min-height: 85vh;
 }

 .hero-grid {
   display: flex;
   align-items: center;
   gap: 60px;
   flex-wrap: wrap;
 }

 .hero-content {
   flex: 1 1 400px;
 }

 .hero-badge {
   display: inline-block;
   background: var(--accent-light);
   color: var(--accent);
   font-weight: 600;
   font-size: 0.8rem;
   padding: 6px 16px;
   border-radius: 20px;
   margin-bottom: 24px;
   letter-spacing: 0.03em;
 }

 .hero-title {
   font-family: var(--font-display);
   font-size: clamp(2.5rem, 5vw, 3.5rem);
   font-weight: 600;
   line-height: 1.1;
   color: var(--text);
   margin-bottom: 20px;
 }

 .hero-title span {
   color: var(--accent);
 }

 .hero-text {
   font-size: 1.1rem;
   color: var(--text-secondary);
   line-height: 1.7;
   margin-bottom: 28px;
   max-width: 500px;
 }

 .price-block {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 8px;
   flex-wrap: wrap;
 }

 .price-block-centered {
   justify-content: center;
   margin-bottom: 20px;
 }

 .price {
   font-size: 2.4rem;
   font-weight: 700;
   color: var(--accent);
   letter-spacing: -0.02em;
 }

 .price-large {
   font-size: 3rem;
 }

 .price-old {
   font-size: 1rem;
   color: #A99B8C;
   text-decoration: line-through;
 }

 .price-old-large {
   font-size: 1.4rem;
 }

 .price-note {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin-bottom: 24px;
 }

 .countdown-block {
   margin-bottom: 16px;
 }

 .countdown-label {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin-bottom: 4px;
 }

 .countdown-timer {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--gold);
   letter-spacing: 0.05em;
 }

 .hero-guarantee {
   margin-top: 12px;
   font-size: 0.8rem;
   color: var(--text-muted);
 }

 .hero-visual {
   flex: 0 0 320px;
   display: flex;
   justify-content: center;
 }

 .hero-book-wrapper {
   position: relative;
   perspective: 1200px;
 }

 .hero-book {
   width: 300px;
   max-width: 100%;
   display: block;

   border-radius: 18px;

   box-shadow:
     0 30px 60px rgba(0, 0, 0, 0.18),
     0 10px 20px rgba(0, 0, 0, 0.08);

   transform:
     rotateY(-10deg) rotateX(4deg);

   animation: floatingBook 6s ease-in-out infinite;

   transition:
     transform 0.4s ease,
     box-shadow 0.4s ease;
 }

 @keyframes floatingBook {

   0%,
   100% {
     transform:
       rotateY(-10deg) rotateX(4deg) translateY(0px);
   }

   50% {
     transform:
       rotateY(-8deg) rotateX(4deg) translateY(-10px);
   }
 }


 /* Trust strip */
 .trust-strip {
   background: var(--accent-light);
   padding: 16px 0;
   text-align: center;
   font-size: 0.9rem;
   color: var(--accent);
   font-weight: 500;
 }

 /* Problem */
 .problem-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 24px;
   margin-top: 40px;
 }

 .problem-card {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 28px 24px;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--border);
   transition: var(--transition);
 }

 .problem-card:hover {
   box-shadow: var(--shadow-md);
 }

 .problem-icon {
   font-size: 1.8rem;
   margin-bottom: 16px;
 }

 .problem-card h3 {
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 8px;
 }

 /* Transformation */
 .transform-duo {
   display: flex;
   gap: 32px;
   flex-wrap: wrap;
   margin-top: 40px;
 }

 .transform-box {
   flex: 1;
   padding: 32px;
   border-radius: var(--radius-lg);
 }

 .before {
   background: #FFF5F3;
   border: 1px solid #FCD9D4;
 }

 .after {
   background: #EFF8F3;
   border: 1px solid #C8E6D4;
 }

 .transform-box h3 {
   font-family: var(--font-display);
   font-size: 1.4rem;
   margin-bottom: 20px;
 }

 .transform-list {
   list-style: none;
 }

 .transform-list li {
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 0.95rem;
 }

 /* Learn grid */
 .learn-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   margin-top: 40px;
 }

 .learn-item {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 24px;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--border);
   transition: var(--transition);
 }

 .learn-item:hover {
   border-color: var(--accent);
   box-shadow: var(--shadow-md);
 }

 .learn-icon {
   font-size: 1.8rem;
   margin-bottom: 12px;
 }

 .learn-item h4 {
   font-weight: 600;
   margin-bottom: 6px;
 }

 /* Chapters */
 .chapter-list {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .chapter {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 20px 24px;
   display: flex;
   gap: 20px;
   align-items: center;
   border: 1px solid var(--border);
   transition: var(--transition);
 }

 .chapter:hover {
   box-shadow: var(--shadow-md);
 }

 .chapter-num {
   font-family: var(--font-display);
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--accent);
   min-width: 40px;
 }

 .chapter-content h4 {
   font-weight: 600;
   margin-bottom: 4px;
 }

 .chapter-content p {
   font-size: 0.9rem;
   color: var(--text-secondary);
 }

 /* Case study */
 .case-steps {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .case-step {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   background: var(--surface);
   padding: 24px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
 }

 .step-num {
   background: var(--accent-light);
   color: var(--accent);
   font-weight: 700;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 /* Bonus */
 .bonus-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 24px;
   margin-top: 40px;
 }

 .bonus-card {
   background: var(--gold-light);
   border-radius: var(--radius-md);
   padding: 24px;
   border: 1px solid #E7D7B8;
   text-align: center;
 }

 .bonus-card h4 {
   font-weight: 600;
   margin-bottom: 8px;
 }

 /* Why different */
 .diff-grid {
   display: flex;
   gap: 32px;
   flex-wrap: wrap;
   margin-top: 40px;
 }

 .diff-item {
   background: var(--surface);
   padding: 32px;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--border);
 }

 /* Testimonials */
 .testimonial-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   margin-top: 40px;
 }

 .testimonial-card {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 24px;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--border);
   font-style: italic;
 }

 .testimonial-card span {
   display: block;
   margin-top: 12px;
   font-weight: 600;
   font-style: normal;
   color: var(--text);
 }

 /* Offre card */
 .offer-card {
   background: var(--surface);
   border-radius: var(--radius-xl);
   padding: 40px;
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--border);
   text-align: center;
 }

 .offer-card-lead {
   font-size: 1.1rem;
   color: var(--text-secondary);
   margin-bottom: 20px;
 }

 .offer-list {
   list-style: none;
   text-align: left;
   max-width: 300px;
   margin: 0 auto 24px;
 }

 .offer-guarantee {
   margin-top: 16px;
   font-size: 0.85rem;
   color: var(--text-muted);
 }

 /* FAQ */
 .faq-item {
   border-bottom: 1px solid var(--border);
   padding: 20px 0;
   cursor: pointer;
 }

 .faq-question {
   font-weight: 600;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
   color: var(--text-secondary);
   font-size: 0.95rem;
 }

 .faq-item.open .faq-answer {
   max-height: 300px;
   margin-top: 12px;
 }

 /* CTA final */
 .cta-final {
   background: var(--accent);
   color: white;
   border-radius: var(--radius-xl);
   padding: 60px 40px;
   text-align: center;
 }

 .cta-final h2 {
   font-family: var(--font-display);
   font-size: 2.2rem;
   margin-bottom: 16px;
 }

 .cta-final .price {
   color: white;
 }

 .cta-final .price-old {
   color: rgba(255, 255, 255, 0.7);
 }

 .cta-final-text {
   max-width: 500px;
   margin: 0 auto 24px;
   opacity: 0.9;
 }

 .cta-final-note {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.8rem;
   margin-bottom: 20px;
 }

 .cta-final-guarantee {
   margin-top: 16px;
   font-size: 0.85rem;
   opacity: 0.8;
 }

 .footer {
   text-align: center;
   padding: 32px 24px;
   font-size: 0.85rem;
   color: var(--text-muted);
   border-top: 1px solid var(--border);
 }

 @media (max-width: 768px) {
   .hero-grid {
     flex-direction: column;
     text-align: center;
   }

   .hero-content {
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .hero-text {
     max-width: 100%;
   }

   .book-mockup {
     background-image: url(./ebook-cover.jpg);
     width: 200px;
     height: 260px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .reveal {
     transition: none;
   }
 }