:root {
      --dark-primary: #1A2233;
      --dark-secondary: #263149;
      --accent-gold: #CBB98E;
      --accent-hover: #D8C79C;
      --light-ivory: #F6F2E9;
      --muted-gray: #B6BDC7;
      --very-dark: #0F151F;
      --white: #FFFFFF;
      --text-dark: #1A2233;
      --text-light: #555555;
      --font-heading: 'Cormorant Garamond', serif;
      --font-body: 'DM Sans', sans-serif;
      --transition: all 0.3s ease;
      --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      --box-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.16);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body { font-family: var(--font-body); color: var(--text-dark); line-height: 1.6; background: var(--white); }

    .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
    .section-tag { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold); margin-bottom: 16px; }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--text-dark); line-height: 1.2; }
    h1 { font-size: 56px; } h2 { font-size: 44px; } h3 { font-size: 32px; } h4 { font-size: 24px; } h5 { font-size: 18px; }

    .btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; padding: 16px 32px; border-radius: 4px; border: none; cursor: pointer; transition: var(--transition); display: inline-block; text-decoration: none; }
    .btn-primary { background: var(--accent-gold); color: var(--dark-primary); }
    .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 8px 24px rgba(203, 185, 142, 0.3); }
    .btn-secondary { background: transparent; color: var(--accent-gold); border: 2px solid var(--accent-gold); }
    .btn-secondary:hover { background: var(--accent-gold); color: var(--dark-primary); }
    .btn-dark { background: var(--dark-primary); color: var(--white); }
    .btn-dark:hover { background: var(--dark-secondary); }

    /* NAVIGATION */
    nav { position: fixed; top: 0; left: 0; right: 0; height: 80px; background: var(--white); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-shadow: none; transition: box-shadow 0.3s ease; }
    nav.scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
    .nav-brand { display: flex; align-items: center; gap: 16px; cursor: pointer; text-decoration: none; color: var(--text-dark); }
    .nav-logo { width: 50px; height: 58px; object-fit: contain; }
    .nav-text h1 { font-size: 20px; font-weight: 700; margin-bottom: 2px; color: var(--text-dark); }
    .nav-text p { font-size: 10px; letter-spacing: 1px; color: var(--muted-gray); text-transform: uppercase; }
    .nav-menu { display: flex; align-items: center; gap: 40px; list-style: none; }
    .nav-menu a { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 14px; transition: color 0.3s ease; }
    .nav-menu a:hover { color: var(--accent-gold); }
    .nav-actions { display: flex; align-items: center; gap: 24px; }
    .lang-toggle { font-size: 13px; font-weight: 600; display: flex; gap: 8px; color: var(--text-dark); }
    .lang-toggle a { text-decoration: none; color: var(--muted-gray); cursor: pointer; transition: color 0.3s ease; }
    .lang-toggle a.active { color: var(--accent-gold); }
    .hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; background: none; border: none; }
    .hamburger span { width: 24px; height: 2px; background: var(--text-dark); transition: all 0.3s ease; }

    .mobile-menu { display: none; position: fixed; top: 80px; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 24px 40px; gap: 16px; z-index: 999; border-bottom: 1px solid #efefef; }
    .mobile-menu a { text-decoration: none; color: var(--text-dark); font-weight: 500; padding: 12px 0; border-bottom: 1px solid #efefef; }

    /* HERO */
    .hero { margin-top: 80px; background: linear-gradient(135deg, rgba(26, 34, 51, 0.88) 0%, rgba(26, 34, 51, 0.4) 100%), url('/assets/img/11062b_42019dfb241c4d819a98672c3d3e01bb-mv2.jpg') center 35%/cover;  display: flex; align-items: center; justify-content: center; color: var(--white); text-align: center; position: relative; overflow: hidden; padding: 120px 40px; }
    .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(203, 185, 142, 0.08) 0%, transparent 50%); pointer-events: none; }
    .hero-content { position: relative; z-index: 2; max-width: 800px; animation: fadeInUp 1s ease forwards; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .breadcrumb { font-size: 13px; color: #d0d0d0; margin-bottom: 32px; text-transform: uppercase; letter-spacing: 1px; }
    .breadcrumb a { color: var(--accent-gold); text-decoration: none; transition: color 0.3s ease; }
    .breadcrumb a:hover { color: var(--accent-hover); }
    .hero h1 { color: var(--white); font-size: 52px; margin-bottom: 24px; line-height: 1.15; }
    .hero p { font-size: 17px; color: #e0e0e0; line-height: 1.8; max-width: 680px; margin: 0 auto; }

    /* PRICING */
    .pricing { background: var(--light-ivory); padding: 100px 40px; }
    .pricing h2 { text-align: center; margin-bottom: 16px; }
    .pricing-subtitle { text-align: center; font-size: 15px; color: var(--text-light); max-width: 600px; margin: 0 auto 60px; line-height: 1.7; }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
    .pricing-card { background: var(--white); border: 1px solid #e8e8e8; padding: 48px 36px; border-radius: 6px; text-align: center; transition: var(--transition); position: relative; }
    .pricing-card:hover { box-shadow: var(--box-shadow-hover); border-color: var(--accent-gold); transform: translateY(-8px); }
    .pricing-card.featured { border: 2px solid var(--accent-gold); }
    .pricing-card.featured::before { content: 'RECOMMANDÉ'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent-gold); color: var(--dark-primary); font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 6px 20px; border-radius: 20px; }
    .pricing-icon { width: 56px; height: 56px; margin: 0 auto 24px; color: var(--accent-gold); }
    .pricing-card h3 { font-size: 26px; margin-bottom: 8px; }
    .pricing-duration { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }
    .pricing-amount { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--accent-gold); margin-bottom: 8px; }
    .pricing-currency { font-size: 14px; color: var(--text-light); margin-bottom: 32px; }
    .pricing-features { list-style: none; text-align: left; margin-bottom: 36px; }
    .pricing-features li { font-size: 14px; color: var(--text-light); padding: 10px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 12px; }
    .pricing-features li::before { content: '✓'; color: var(--accent-gold); font-weight: 700; flex-shrink: 0; }
    .pricing-card .btn { width: 100%; text-align: center; }

    /* CONTACT FORM */
    .contact-section { background: var(--dark-primary); color: var(--white); padding: 100px 40px; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1100px; margin: 0 auto; align-items: start; }
    .contact-info h2 { color: var(--white); margin-bottom: 24px; }
    .contact-info .section-tag { color: var(--accent-gold); }
    .contact-intro { font-size: 15px; color: #d0d0d0; line-height: 1.8; margin-bottom: 40px; }
    .contact-detail { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
    .contact-icon { width: 44px; height: 44px; border: 1px solid rgba(203, 185, 142, 0.3); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-gold); }
    .contact-icon svg { width: 20px; height: 20px; }
    .contact-detail-text h5 { color: var(--white); font-size: 16px; margin-bottom: 4px; }
    .contact-detail-text p { font-size: 14px; color: #d0d0d0; }
    .contact-detail-text a { color: var(--accent-gold); text-decoration: none; transition: color 0.3s ease; }
    .contact-detail-text a:hover { color: var(--accent-hover); }

    .contact-form-wrapper { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(203, 185, 142, 0.2); padding: 48px; border-radius: 6px; }
    .contact-form-wrapper h3 { color: var(--white); margin-bottom: 8px; }
    .form-subtitle { font-size: 14px; color: #d0d0d0; margin-bottom: 32px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--accent-gold); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(203, 185, 142, 0.3); border-radius: 4px; color: var(--white); font-family: var(--font-body); font-size: 14px; transition: border-color 0.3s ease; }
    .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-gold); }
    .form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23CBB98E' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
    .form-group select option { background: var(--dark-primary); color: var(--white); }
    .form-group textarea { height: 120px; resize: vertical; }
    .form-submit { width: 100%; }

    /* MAP */
    .map-section { background: var(--light-ivory); padding: 80px 40px; }
    .map-content { max-width: 1100px; margin: 0 auto; }
    .map-content h2 { text-align: center; margin-bottom: 16px; }
    .map-subtitle { text-align: center; font-size: 15px; color: var(--text-light); margin-bottom: 40px; }
    .map-wrapper { border-radius: 6px; overflow: hidden; box-shadow: var(--box-shadow); height: 400px; background: #e0e0e0; display: flex; align-items: center; justify-content: center; }
    .map-placeholder { text-align: center; padding: 60px; }
    .map-placeholder svg { width: 64px; height: 64px; color: var(--accent-gold); margin-bottom: 24px; }
    .map-placeholder h4 { margin-bottom: 12px; }
    .map-placeholder p { font-size: 14px; color: var(--text-light); line-height: 1.6; }

    /* PROCESS */
    .process { background: var(--white); padding: 100px 40px; }
    .process h2 { text-align: center; margin-bottom: 60px; }
    .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
    .process-step { text-align: center; position: relative; }
    .process-step::after { content: '→'; position: absolute; right: -20px; top: 36px; font-size: 24px; color: var(--accent-gold); }
    .process-step:last-child::after { display: none; }
    .step-circle { width: 72px; height: 72px; border: 2px solid var(--accent-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--accent-gold); margin: 0 auto 24px; }
    .process-step h4 { margin-bottom: 12px; font-size: 20px; }
    .process-step p { font-size: 14px; color: var(--text-light); line-height: 1.7; }

    /* FAQ */
    .faq-section { background: var(--light-ivory); padding: 100px 40px; }
    .faq-section h2 { text-align: center; margin-bottom: 60px; }
    .faq-container { max-width: 800px; margin: 0 auto; }
    .faq-item { background: var(--white); border: 1px solid #e8e8e8; border-radius: 6px; margin-bottom: 12px; overflow: hidden; transition: var(--transition); }
    .faq-item:hover { border-color: var(--accent-gold); }
    .faq-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; cursor: pointer; }
    .faq-header h4 { font-size: 18px; flex: 1; padding-right: 20px; }
    .faq-toggle { width: 32px; height: 32px; border: 1px solid var(--accent-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
    .faq-toggle::after { content: '+'; color: var(--accent-gold); font-size: 18px; font-weight: 300; }
    .faq-item.open .faq-toggle { background: var(--accent-gold); transform: rotate(45deg); }
    .faq-item.open .faq-toggle::after { color: var(--dark-primary); }
    .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    .faq-item.open .faq-body { max-height: 500px; }
    .faq-body-content { padding: 0 32px 24px; font-size: 15px; line-height: 1.8; color: var(--text-light); }

    /* FOOTER */
    footer { background: var(--very-dark); color: var(--white); padding: 80px 40px 0; }
    .footer-content { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 48px; max-width: 1200px; margin: 0 auto; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .footer-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
    .footer-logo img { width: 50px; height: 58px; object-fit: contain; }
    .footer-logo-text h3 { color: var(--white); font-size: 22px; margin-bottom: 4px; }
    .footer-tagline { font-size: 11px; color: var(--muted-gray); text-transform: uppercase; letter-spacing: 1px; }
    .footer-section h3 { font-size: 16px; color: var(--accent-gold); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; }
    .footer-links { list-style: none; }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a { color: #d0d0d0; text-decoration: none; font-size: 14px; transition: color 0.3s ease; }
    .footer-links a:hover { color: var(--accent-gold); }
    .footer-contact { font-size: 14px; color: #d0d0d0; line-height: 1.8; }
    .footer-contact a { color: var(--accent-gold); text-decoration: none; }
    .footer-contact a:hover { color: var(--accent-hover); }
    .footer-contact strong { color: var(--white); }
    .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted-gray); }
    .footer-bottom a { color: var(--muted-gray); text-decoration: none; margin: 0 8px; }
    .footer-bottom a:hover { color: var(--accent-gold); }

    /* EMAIL */

    /* FLOATING BAR */
    .floating-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--dark-primary); padding: 12px 16px; z-index: 100; justify-content: center; gap: 12px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); }

    

    /* REVEAL */
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .reveal.active { opacity: 1; transform: translateY(0); }

    /* RESPONSIVE */
    @media (max-width: 960px) {
      nav { padding: 0 24px; }
      .nav-menu { display: none; }
      .hamburger { display: flex; }
      .mobile-menu.active { display: flex; }
      .hero h1 { font-size: 40px; }
      h2 { font-size: 36px; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
      .contact-grid { grid-template-columns: 1fr; }
      .process-steps { grid-template-columns: repeat(2, 1fr); }
      .process-step::after { display: none; }
      .footer-content { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .hero { padding: 80px 24px; }
      .hero h1 { font-size: 36px; }
      .pricing { padding: 60px 24px; }
      .contact-section { padding: 60px 24px; }
      .contact-form-wrapper { padding: 32px 24px; }
      .form-row { grid-template-columns: 1fr; }
      .process { padding: 60px 24px; }
      .faq-section { padding: 60px 24px; }
      .footer-content { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .hero h1 { font-size: 30px; }
      .pricing-card { padding: 36px 24px; }
      .pricing-amount { font-size: 40px; }
      .process-steps { grid-template-columns: 1fr; }
    }
  
/* FLOATING CTA */
.float-cta{position:fixed;bottom:0;left:0;right:0;z-index:500;display:flex;background:rgba(26,34,51,.98);backdrop-filter:blur(10px);border-top:1px solid rgba(203,185,142,.25);transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);padding:0}
.float-cta.visible{transform:translateY(0)}
.float-phone{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:14px 18px;color:var(--accent-gold);font-size:.82rem;font-weight:400;border-right:1px solid rgba(255,255,255,.08);transition:background .2s;text-decoration:none}
.float-phone:hover{background:rgba(255,255,255,.05)}
.float-phone svg{flex-shrink:0}
.float-book{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:var(--accent-gold);color:var(--dark-primary);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .2s;text-decoration:none}
.float-book:hover{background:var(--accent-hover)}
@media(min-width:961px){.float-cta{left:auto;right:24px;bottom:24px;width:auto;flex-direction:column;border-top:none;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.25);overflow:hidden;max-width:260px}.float-phone{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 20px;justify-content:center}.float-book{padding:14px 24px}}
/* CTA PULSE */
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(203,185,142,.4)}70%{box-shadow:0 0 0 12px rgba(203,185,142,0)}100%{box-shadow:0 0 0 0 rgba(203,185,142,0)}}
.float-book,.btn-primary{animation:ctaPulse 2.5s infinite}
.float-book:hover,.btn-primary:hover{animation:none}
/* BACK TO TOP */
.btt{position:fixed;bottom:80px;right:24px;z-index:400;width:40px;height:40px;background:var(--dark-primary);color:var(--accent-gold);border:1px solid rgba(203,185,142,.25);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none;text-decoration:none}
.btt.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.btt:hover{background:var(--accent-gold);color:var(--dark-primary)}
@media(max-width:960px){.btt{bottom:70px;right:16px}}

    /* === v14 additions === */
    /* Sticky mobile CTA */
    .sticky-cta-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--accent-gold, #CBB98E); color: var(--dark-primary, #1A2233); padding: 14px 20px; text-align: center; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 -4px 12px rgba(0,0,0,0.18); letter-spacing: 0.5px; }
    .sticky-cta-mobile:hover { background: var(--accent-hover, #D8C79C); color: var(--dark-primary, #1A2233); }
    @media (max-width: 768px) { .sticky-cta-mobile { display: block; } body { padding-bottom: 56px; } }
    /* Exit Tax nav highlight */
    .nav-menu .nav-exit-tax { font-weight: 700; color: var(--accent-gold, #CBB98E) !important; }
    /* Sub-page silo navigation */
    .silo-nav { background: var(--light-ivory, #F6F2E9); border-top: 1px solid #e6dfd0; border-bottom: 1px solid #e6dfd0; padding: 16px 0; margin: 32px 0 24px; }
    .silo-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .silo-nav-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-gold, #CBB98E); margin-right: 8px; }
    .silo-nav a { font-size: 13px; color: var(--text-dark, #1A2233); text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: background 0.2s; }
    .silo-nav a:hover, .silo-nav a.active { background: var(--accent-gold, #CBB98E); color: var(--dark-primary, #1A2233); }

  
    .bk-tunnel { background: #F8F4EE; border-radius: 12px; padding: 50px; }
    .bk-progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; gap: 8px; }
    .bk-step-pill { display: flex; align-items: center; gap: 12px; flex: 1; padding: 12px 18px; background: #fff; border-radius: 100px; font-size: 13px; color: #6a6a6a; transition: all 0.3s; }
    .bk-step-pill span { width: 28px; height: 28px; border-radius: 50%; background: #d4c7b0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .bk-step-pill.active { background: #1A2233; color: #fff; }
    .bk-step-pill.active span { background: #CBB98E; color: #1A2233; }
    .bk-step-pill.done span { background: #2A6B4A; color: #fff; }
    .bk-step-pill div { font-weight: 600; }
    .bk-step { display: none; animation: bkFade 0.3s ease; }
    .bk-step.active { display: block; }
    @keyframes bkFade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
    .bk-step-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #1A2233; margin: 0 0 24px; }
    .bk-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .bk-format { background: #fff; border: 2px solid #e6dfd0; border-radius: 8px; padding: 24px; text-align: left; cursor: pointer; transition: all 0.2s; font-family: inherit; }
    .bk-format:hover { border-color: #CBB98E; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
    .bk-format.selected { border-color: #1A2233; background: #1A2233; color: #fff; }
    .bk-format.selected .bk-format-name, .bk-format.selected .bk-format-price { color: #fff; }
    .bk-format.selected .bk-format-desc { color: rgba(255,255,255,0.78); }
    .bk-format-icon { font-size: 32px; margin-bottom: 8px; }
    .bk-format-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #1A2233; margin-bottom: 6px; }
    .bk-format-price { font-size: 18px; font-weight: 700; color: #B8935A; margin-bottom: 12px; }
    .bk-format-desc { font-size: 13.5px; color: #6a6a6a; line-height: 1.55; }
    .bk-actions { display: flex; justify-content: space-between; margin-top: 32px


<!-- v14 Phase 3: Booking tunnel ready for Stripe integration -->
<section class="booking-tunnel" style="padding: 80px 0; background: #fff;">
  <div class="container" style="max-width: 1100px; margin: 0 auto; padding: 0 40px;">
    <div style="text-align: center; max-width: 720px; margin: 0 auto 50px;">
      <span style="display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #B8935A; margin-bottom: 14px;">Réservation en ligne</span>
      <h2 style="font-family: 'Cormorant Garamond', serif; font-size: 38px; line-height: 1.15; color: #1A2233; margin: 0 0 16px;">Réservez votre audit en quatre étapes</h2>
      <p style="color: #6a6a6a; font-size: 16px; line-height: 1.7;">Visioconférence 60 minutes — demande de créneau en ligne. Le rendez-vous n’est confirmé qu’après validation du créneau et du paiement.</p>
    </div>

    <div class="bk-tunnel">

      <!-- Progress -->
      <div class="bk-progress">
        <div class="bk-step-pill active" data-step="1"><span>1</span><div>Format</div></div>
        <div class="bk-step-pill" data-step="2"><span>2</span><div>Créneau</div></div>
        <div class="bk-step-pill" data-step="3"><span>3</span><div>Coordonnées</div></div>
        <div class="bk-step-pill" data-step="4"><span>4</span><div>Paiement</div></div>
      </div>

      <!-- Step 1: Format -->
      <div class="bk-step active" data-step="1">
        <h3 class="bk-step-title">Choisissez votre format</h3>
        <div class="bk-formats">
          <button type="button" class="bk-format" data-format="visio">
            <div class="bk-format-icon">💻</div>
            <div class="bk-format-name">Visioconférence</div>
            <div class="bk-format-price">2 000 AED <span style="color:#6a6a6a;font-weight:400;font-size:13px;">≈ 470 €</span></div>
            <div class="bk-format-desc">60 minutes Google Meet · réservable en ligne · disponible mondialement.</div>
          </button>
          <button type="button" class="bk-format" data-format="cabinet">
            <div class="bk-format-icon">🏛️</div>
            <div class="bk-format-name">Cabinet à Dubaï</div>
            <div class="bk-format-price">2 500 AED <span style="color:#6a6a6a;font-weight:400;font-size:13px;">≈ 590 €</span></div>
            <div class="bk-format-desc">60 minutes en cabinet WAFI Residence · sur demande, sous réserve d'agenda.</div>
          </button>
          <button type="button" class="bk-format bk-format-free" data-format="contact">
            <div class="bk-format-icon">📞</div>
            <div class="bk-format-name">Appel découverte</div>
            <div class="bk-format-price">Gratuit</div>
            <div class="bk-format-desc">10 minutes téléphone · qualification du dossier et orientation vers le bon format.</div>
          </button>
        </div>
        <div class="bk-actions">
          <button type="button" id="bk-next-1" class="bk-btn-next" disabled>Continuer →</button>
        </div>
      </div>

      <!-- Step 2: Slot picker -->
      <div class="bk-step" data-step="2">
        <h3 class="bk-step-title">Indiquez votre créneau souhaité</h3>
        <p style="color: #6a6a6a; font-size: 14px;">Indiquez une préférence de date et d'horaire (Dubaï, GMT+4). Cette sélection ne consulte pas l'agenda en temps réel et sera confirmée par le cabinet.</p>
        <div class="bk-calendar">
          <div class="bk-cal-header">
            <button type="button" id="bk-cal-prev" class="bk-cal-arrow">‹</button>
            <span id="bk-cal-month"></span>
            <button type="button" id="bk-cal-next" class="bk-cal-arrow">›</button>
          </div>
          <div class="bk-cal-days">
            <span>Dim</span><span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span>
          </div>
          <div id="bk-cal-grid" class="bk-cal-grid"></div>
        </div>
        <div id="bk-slots" class="bk-slots" style="display:none;">
          <h4 style="margin-top:24px;font-size:15px;color:#1A2233;">Horaires souhaités</h4>
          <div class="bk-slots-grid" id="bk-slots-grid"></div>
        </div>
        <div class="bk-actions">
          <button type="button" id="bk-back-2" class="bk-btn-back">← Retour</button>
          <button type="button" id="bk-next-2" class="bk-btn-next" disabled>Continuer →</button>
        </div>
      </div>

      <!-- Step 3: Coordonnées -->
      <div class="bk-step" data-step="3">
        <h3 class="bk-step-title">Vos coordonnées</h3>
        <div class="bk-form">
          <div class="bk-row">
            <div class="bk-field">
              <label>Prénom *</label>
              <input type="text" id="bk-fn" required>
            </div>
            <div class="bk-field">
              <label>Nom *</label>
              <input type="text" id="bk-ln" required>
            </div>
          </div>
          <div class="bk-row">
            <div class="bk-field">
              <label>Email *</label>
              <input type="email" id="bk-em" required>
            </div>
            <div class="bk-field">
              <label>Téléphone *</label>
              <input type="tel" id="bk-ph" required placeholder="+33 6 ...">
            </div>
          </div>
          <div class="bk-field">
            <label>Sujet principal de la consultation *</label>
            <select id="bk-topic" required>
              <option value="">Sélectionnez votre problématique</option>
              <option value="exit-tax">Exit tax / Départ vers Dubaï</option>
              <option value="residence">Résidence fiscale UAE</option>
              <option value="ct">Corporate Tax UAE / QFZP</option>
              <option value="creation">Création de société à Dubaï</option>
              <option value="convention">Convention France-EAU</option>
              <option value="immobilier">Acquisition immobilière à Dubaï</option>
              <option value="audit">Contrôle ou contentieux fiscal</option>
              <option value="patrimoine">Structuration patrimoniale</option>
              <option value="autre">Autre</option>
            </select>
          </div>
          <div class="bk-field">
            <label>Bref descriptif de votre situation (facultatif)</label>
            <textarea id="bk-msg" rows="4" placeholder="Quelques lignes pour préparer la consultation..."></textarea>
          </div>
          <div class="bk-checkbox">
            <input type="checkbox" id="bk-consent" required>
            <label for="bk-consent" style="font-size:13px;color:#6a6a6a;">J'accepte que mes données soient utilisées dans le cadre de cette consultation, dans le respect du secret professionnel et de la politique de confidentialité.</label>
          </div>
        </div>
        <div class="bk-actions">
          <button type="button" id="bk-back-3" class="bk-btn-back">← Retour</button>
          <button type="button" id="bk-next-3" class="bk-btn-next">Continuer →</button>
        </div>
      </div>

      <!-- Step 4: Paiement -->
      <div class="bk-step" data-step="4">
        <h3 class="bk-step-title">Récapitulatif de la demande</h3>
        <div class="bk-summary" id="bk-summary"></div>
        <div class="bk-payment-block">
          <h4>Validation de la demande</h4>
          <p>Votre demande et le créneau souhaité seront transmis au cabinet. Ce créneau n'est pas réservé tant que le cabinet ne l'a pas confirmé. Si le paiement en ligne est disponible pour le format choisi, vous serez ensuite redirigé vers Stripe.</p>
          <p style="font-size:12px;color:#6a6a6a;margin-top:12px;">Annulation gratuite jusqu'à 7 jours avant le rendez-vous. Au-delà, des frais de 25 % du montant peuvent s'appliquer.</p>
        </div>
        <div class="bk-actions">
          <button type="button" id="bk-back-4" class="bk-btn-back">← Retour</button>
          <button type="button" id="bk-checkout" class="bk-btn-checkout">Envoyer ma demande →</button>
        </div>
      </div>

      <!-- Confirmation -->
      <div class="bk-step" data-step="5">
        <div style="text-align:center;padding:40px 20px;">
          <div style="width:80px;height:80px;border-radius:50%;background:#2A6B4A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;margin:0 auto 24px;">✓</div>
          <h3 style="font-family:'Cormorant Garamond',serif;font-size:30px;color:#1A2233;margin:0 0 12px;">Demande reçue</h3>
          <p style="color:#2c2c2c;line-height:1.7;font-size:16px;max-width:520px;margin:0 auto;">Votre demande a été transmise. Aucun rendez-vous ni paiement n’est confirmé à ce stade : le cabinet vous contactera pour valider le créneau et les modalités. N’envoyez pas de document fiscal ou d’information hautement sensible par email avant l’ouverture du dossier et la mise à disposition d’un canal sécurisé.</p>
        </div>
      </div>

    </div>
  </div>
</section>

; gap: 12px; }
    .bk-btn-next, .bk-btn-checkout { background: #1A2233; color: #fff; border: none; padding: 14px 28px; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; font-family: inherit; }
    .bk-btn-next:hover, .bk-btn-checkout:hover { background: #263149; }
    .bk-btn-next:disabled { background: #d4c7b0; cursor: not-allowed; }
    .bk-btn-back { background: transparent; color: #1A2233; border: 1px solid #d4c7b0; padding: 14px 24px; border-radius: 4px; font-size: 14px; cursor: pointer; font-family: inherit; }
    .bk-btn-back:hover { border-color: #1A2233; }
    .bk-btn-checkout { background: #CBB98E; color: #1A2233; }
    .bk-btn-checkout:hover { background: #D8C79C; }
    .bk-calendar { background: #fff; border-radius: 8px; padding: 24px; margin-top: 18px; }
    .bk-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .bk-cal-header span { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #1A2233; font-weight: 600; text-transform: capitalize; }
    .bk-cal-arrow { background: #F8F4EE; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; color: #1A2233; }
    .bk-cal-arrow:hover { background: #CBB98E; color: #fff; }
    .bk-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
    .bk-cal-days span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #6a6a6a; padding: 8px 0; }
    .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .bk-cal-grid button { background: #fff; border: 1px solid transparent; padding: 12px 0; border-radius: 4px; cursor: pointer; font-size: 14px; color: #1A2233; font-family: inherit; transition: all 0.15s; }
    .bk-cal-grid button:hover:not(:disabled) { background: #F2ECDF; border-color: #CBB98E; }
    .bk-cal-grid button.selected { background: #1A2233; color: #fff; border-color: #1A2233; }
    .bk-cal-grid button:disabled { color: #c9c1b1; cursor: not-allowed; }
    .bk-cal-grid button.empty { visibility: hidden; }
    .bk-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
    .bk-slots-grid button { background: #fff; border: 1px solid #d4c7b0; padding: 12px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; color: #1A2233; font-family: inherit; }
    .bk-slots-grid button:hover { background: #F2ECDF; border-color: #CBB98E; }
    .bk-slots-grid button.selected { background: #1A2233; color: #fff; border-color: #1A2233; }
    .bk-form { display: flex; flex-direction: column; gap: 16px; }
    .bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .bk-field { display: flex; flex-direction: column; gap: 6px; }
    .bk-field label { font-weight: 600; font-size: 13px; color: #1A2233; }
    .bk-field input, .bk-field select, .bk-field textarea { padding: 12px 14px; border: 1px solid #d4c7b0; border-radius: 4px; font-size: 14.5px; font-family: inherit; background: #fff; color: #1A2233; }
    .bk-field textarea { resize: vertical; min-height: 80px; }
    .bk-checkbox { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
    .bk-checkbox input { margin-top: 3px; }
    .bk-summary { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 24px; }
    .bk-summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0e9d8; font-size: 14.5px; }
    .bk-summary-row:last-child { border-bottom: none; padding-top: 16px; font-weight: 700; font-size: 18px; color: #1A2233; }
    .bk-summary-row .bk-label { color: #6a6a6a; }
    .bk-payment-block { background: #fff; border-radius: 8px; padding: 24px; }
    .bk-payment-block h4 { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #1A2233; margin: 0 0 12px; }
    .bk-payment-block p { color: #2c2c2c; font-size: 13.5px; line-height: 1.65; margin: 0 0 8px; }
    @media (max-width: 768px) {
      .bk-tunnel { padding: 28px 20px; }
      .bk-progress { gap: 4px; }
      .bk-step-pill { padding: 8px 10px; font-size: 11px; }
      .bk-step-pill div { display: none; }
      .bk-step-pill.active div { display: block; }
      .bk-row { grid-template-columns: 1fr; }
    }

  
    /* CMP v2 — granular consent */
    .cmp-banner { position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 1100px; margin: 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); border: 1px solid #e6dfd0; z-index: 9999; padding: 24px; }
    .cmp-banner-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
    .cmp-banner-text strong { display: block; color: #1A2233; font-size: 15px; margin-bottom: 6px; }
    .cmp-banner-text p { color: #2c2c2c; font-size: 13px; line-height: 1.6; margin: 0; }
    .cmp-banner-text a { color: #8A6E3F; text-decoration: underline; }
    .cmp-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .cmp-btn { padding: 10px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }
    .cmp-btn-primary { background: #1A2233; color: #fff; }
    .cmp-btn-primary:hover { background: #263149; }
    .cmp-btn-secondary { background: #fff; color: #1A2233; border: 1px solid #d4c7b0; }
    .cmp-btn-secondary:hover { border-color: #1A2233; }
    .cmp-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .cmp-modal-backdrop { position: absolute; inset: 0; background: rgba(12,27,56,0.7); }
    .cmp-modal-content { position: relative; background: #fff; border-radius: 8px; max-width: 640px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
    .cmp-modal-header { padding: 24px 28px; border-bottom: 1px solid #e6dfd0; display: flex; justify-content: space-between; align-items: center; }
    .cmp-modal-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #1A2233; margin: 0; }
    .cmp-modal-close { background: transparent; border: none; font-size: 28px; color: #1A2233; cursor: pointer; padding: 0 8px; line-height: 1; }
    .cmp-modal-body { padding: 24px 28px; overflow-y: auto; }
    .cmp-modal-footer { padding: 18px 28px; border-top: 1px solid #e6dfd0; display: flex; justify-content: flex-end; gap: 10px; }
    .cmp-category { background: #F8F4EE; border-radius: 6px; padding: 18px 20px; margin-bottom: 14px; }
    .cmp-cat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .cmp-cat-head strong { color: #1A2233; font-size: 15px; }
    .cmp-category p { color: #2c2c2c; font-size: 13px; line-height: 1.55; margin: 0; }
    .cmp-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
    .cmp-toggle input { opacity: 0; width: 0; height: 0; }
    .cmp-toggle span { position: absolute; cursor: pointer; inset: 0; background: #d4c7b0; border-radius: 12px; transition: 0.3s; }
    .cmp-toggle span:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
    .cmp-toggle input:checked + span { background: #2A6B4A; }
    .cmp-toggle input:checked + span:before { transform: translateX(20px); }
    .cmp-toggle input:disabled + span { background: #d4c7b0; opacity: 0.7; cursor: not-allowed; }
    @media (max-width: 768px) {
      .cmp-banner-inner { grid-template-columns: 1fr; }
      .cmp-banner-actions { flex-wrap: wrap; }
      .cmp-banner-actions .cmp-btn { flex: 1; min-width: 100px; }
    }