:root{
  --bg:#0a0a0a;/* page */
  --ink:#e50914;/* bandeau */
  --text:#f6f6f6;/* texte principal */
  --muted:#a9a9a9;/* texte secondaire */
  --card:#121212;/* cartes */
  --line:#2a2a2a;/* séparateurs */
}

@font-face {
  font-family: 'TanWaverly';
  src: url('/Sources/TAN-WAVERLY.910cccb9.otf') format('opentype');
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  background: var(--bg);
}

/* Font harmonisation */
h1, h2, h3, strong, .btn, .pay-btn, .payment-module h2, .mono {
  font-family: TanWaverly, serif !important;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Header */
.banner{position:sticky; top:0; z-index:50; background:var(--ink);}
.banner-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:10px 16px}
nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: TanWaverly, serif;
  text-decoration: none;
  color: #fff;
  letter-spacing: .3px;
  font-size: 22px;
  opacity: .95;
  transition: opacity .18s;
}
nav .nav-text {
  position: relative;
  display: inline-block;
}
nav .nav-text::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
nav a:hover .nav-text::after,
nav a:focus .nav-text::after {
  transform: scaleX(1);
}
nav a:hover {
  opacity: 1;
  text-decoration:underline
}
nav a img {
  height:1em;
  width:1em;
  vertical-align:-0.1em;
  margin-right:0.18em;
  opacity:.8;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  display:inline-block;
}
nav a:hover img {
  transform: rotate(-32deg) scale(1.08);
}
.logo{display:flex; justify-content:center}
.logo img{height:clamp(72px, 9vw, 140px); width:auto; display:block; filter:brightness(0) invert(1)}
.spacer{justify-self:end;}

/* Hero */
.hero{
  position:relative;
  width:100vw;
  min-height:100vh;
  max-width:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:1;
  overflow:hidden;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 80%, var(--bg) 100%);
}
.hero-bg-img {
  position:absolute;
  top:0; left:50%;
  width:100vw; height:100%;
  min-height:320px;
  max-height:none;
  transform:translateX(-50%);
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.hero-title{
  font-family: TanWaverly, serif;
  font-size: 72px;
  letter-spacing: .3px;
  color: #fff;
  font-weight: normal;
  margin: 0;
  opacity: 0.95;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  mix-blend-mode: difference;
  transition: filter 0.25s cubic-bezier(.4,2,.6,1), text-shadow 0.25s cubic-bezier(.4,2,.6,1);
  cursor: pointer;
  user-select: none;
}
.hero-title:hover {
  filter: brightness(1.2);
  text-shadow: 2px 0 0 #fff, -2px 0 0 #000, 0 2px 0 #fff, 0 -2px 0 #000;
  opacity: 1;
}
.title-block{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
  padding-top:calc(40vh);
  background:none;
  overflow:visible;
}
.title-block h1,
.title-block .subtitle,
.title-block .cta {
  position:relative;
  z-index:2;
}

h1{font-size: clamp(32px, 5vw, 56px); margin:0 0 6px}
.subtitle{color:var(--muted); font-size: clamp(14px, 2.2vw, 18px)}

/* CTA */
.cta{display:flex; gap:12px; justify-content:center; margin:24px 0 40px}
.btn{appearance:none; border:1px solid #fff; color:#fff; background:transparent; padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none}
.btn:hover{background:#fff; color:#000}
.btn.secondary{border-color:var(--muted); color:var(--muted)}
.btn.secondary:hover{background:var(--card); color:#fff; border-color:#fff}

/* Sections */
section{max-width:1200px; margin:0 auto; padding:40px 16px; border-top:1px solid var(--line)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.feature{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px}
.k{font-size:28px; margin-bottom:6px}
.feature h3{margin:0 0 6px; font-size:20px}
.feature p{margin:0; color:var(--muted)}

/* Specs */
.specs{display:grid; grid-template-columns:1.1fr 1.2fr; gap:20px}
@media (max-width:900px){.specs{grid-template-columns:1fr}}
.specs-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px}
.specs h3{margin:0 0 10px}
.specs dl{display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0}
.specs dt{color:var(--muted)}
.specs dd{margin:0}

/* Testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{font-size:16px; color:#eaeaea; background:var(--card); border:1px solid var(--line); padding:18px; border-radius:8px}
.who{color:var(--muted); margin-top:8px; font-size:14px}

/* FAQ */
details{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
details+details{margin-top:12px}
summary{cursor:pointer; font-weight:600}
summary::-webkit-details-marker{display:none}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:28px 16px 60px;
  color:#fff;
  background: var(--ink);
}
footer .inner{max-width:1200px; margin:0 auto; display:flex; gap:16px; align-items:center; justify-content:space-between}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Floating Buy Bar */
.floating-buy-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(20,20,20,0.82);
  box-shadow: 0 4px 32px #0008;
  border-radius: 18px;
  padding: 12px 24px 12px 20px;
  backdrop-filter: blur(16px);
  mix-blend-mode: difference;
  border: 1.5px solid #fff2;
  min-width: 210px;
  max-width: 90vw;
  font-family: TanWaverly, serif;
  font-size: 1.05rem;
  color: #fff;
  animation: fadeinbuybar .7s cubic-bezier(.4,2,.6,1);
  overflow: hidden;
  transition: padding .45s cubic-bezier(.4,0,.2,1), font-size .45s cubic-bezier(.4,0,.2,1), border-radius .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.floating-buy-bar-bg {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s cubic-bezier(.4,0,.2,1);
  border-radius: inherit;
}
.floating-buy-bar.hero-active .floating-buy-bar-bg {
  opacity: 1;
}
.floating-buy-bar.hero-active {
  padding: 18px 36px 18px 30px;
  font-size: 1.45rem;
  min-width: 300px;
  border-radius: 24px;
  box-shadow: 0 8px 48px #000b;
  transition: padding .45s cubic-bezier(.4,0,.2,1), font-size .45s cubic-bezier(.4,0,.2,1), border-radius .45s cubic-bezier(.4,0,.2,1), box-shadow .45s cubic-bezier(.4,0,.2,1);
  mix-blend-mode: unset;
}
.floating-buy-bar .btn {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  padding: 10px 26px;
  border-radius: 8px;
  background: #fff !important;
  color: var(--ink) !important;
  border: none;
  font-family: TanWaverly, serif;
  font-weight: 600;
  box-shadow: 0 2px 12px #0002;
  transition: background .18s, color .18s, box-shadow .18s, font-size .45s cubic-bezier(.4,0,.2,1), padding .45s cubic-bezier(.4,0,.2,1), border-radius .45s cubic-bezier(.4,0,.2,1);
}
.floating-buy-bar .btn:hover {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px #e5091440;
}
.floating-buy-bar.hero-active .btn {
  font-size: 1.32rem;
  padding: 15px 36px;
  border-radius: 12px;
}

/* Payment Module */
.payment-module {
  max-width: 370px;
  margin: 60px auto 48px auto;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 6px 32px #0007;
  padding: 32px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.payment-module h2 {
  font-family: TanWaverly, serif;
  font-size: 28px;
  margin: 0 0 10px 0;
  color: #fff;
  text-align: center;
  letter-spacing: .2px;
  font-weight: normal;
}
.payment-module label {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 500;
}
.payment-module input {
  background: #181818;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
}
.payment-module input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #e5091440;
}
.payment-module .pay-btn {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-family: TanWaverly, serif;
  font-weight: 600;
  padding: 13px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
  box-shadow: 0 2px 12px #e5091420;
  letter-spacing: .5px;
}
.payment-module .pay-btn:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 24px #e5091440;
  transform: translateY(-2px) scale(1.03);
}

/* Payment Overlay */
.payment-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(10,10,10,0.82);
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.payment-overlay.active {
  display: flex;
}
.payment-module {
  max-width: 370px;
  margin: 0;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 6px 32px #0007;
  padding: 32px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.payment-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
  transition: color .18s;
  border-radius: 8px;
}
.payment-close:hover {
  color: var(--ink);
}

/* MODULE DE PAIEMENT (nouveau) */
.payment-module-overlay {
  position: fixed;
  z-index: 2000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(10,10,10,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
  backdrop-filter: blur(6px);
}
.payment-module-new {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 40px #000b;
  padding: 36px 32px 28px 32px;
  min-width: 320px;
  max-width: 95vw;
  width: 370px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  border: 1.5px solid var(--line);
  position: relative;
  font-family: TanWaverly, serif;
  color: #fff;
  animation: fadeinpaymod .5s cubic-bezier(.4,2,.6,1);
}
@keyframes fadeinpaymod {
  from { opacity: 0; transform: translateY(32px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.payment-close-new {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 32px;
  cursor: pointer;
  z-index: 10;
  transition: color .18s;
  border-radius: 8px;
}
.payment-close-new:hover {
  color: var(--ink);
}
.payment-module-new h2 {
  font-size: 2rem;
  margin: 0 0 8px 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: .2px;
}
.payment-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #181818;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 1.13em;
  margin-bottom: 8px;
  border: 1px solid var(--line);
}
.payment-summary .product { font-weight: 600; }
.payment-summary .price { color: var(--ink); font-weight: 600; font-size: 1.1em; }
.payment-fields label {
  display: block;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 500;
}
.payment-fields input {
  background: #181818;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  padding: 10px 12px;
  margin-top: 4px;
  margin-bottom: 0;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.payment-fields input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #e5091440;
}
.payment-fields .row {
  display: flex;
  gap: 12px;
}
.pay-btn-new {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-family: TanWaverly, serif;
  font-weight: 600;
  padding: 13px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .18s;
  box-shadow: 0 2px 12px #e5091420;
  letter-spacing: .5px;
}
.pay-btn-new:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 24px #e5091440;
  transform: translateY(-2px) scale(1.03);
}
.payment-success {
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  padding: 18px 12px;
  margin-top: 18px;
  text-align: center;
  font-size: 1.1em;
  border: 1px solid var(--ink);
  animation: fadeinpaymod .5s cubic-bezier(.4,2,.6,1);
}

/* SPLASH LOADER */
#splash-loader {
  position:fixed;
  z-index:3000;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .4s;
  backdrop-filter:blur(10px);
}

/* Burger menu styles */
.burger {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1002;
  margin-right: 8px;
}
.burger span {
  display: block;
  width: 28px;
  height: 3.5px;
  background: #fff;
  margin: 4px 0;
  border-radius: 2px;
  transition: all .25s cubic-bezier(.4,2,.6,1);
}
.burger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 700px) {
  .burger {
    display: flex !important;
  }
  #main-nav ul {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,10,10,0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 1001;
    padding: 0;
    margin: 0;
    font-size: 2rem;
    transform: translateY(-100vh);
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  #main-nav.open ul {
    transform: translateY(0);
    pointer-events: auto;
  }
  #main-nav ul li {
    width: 100%;
    text-align: center;
  }
  #main-nav ul li a {
    font-size: 1.5rem;
    padding: 18px 0;
    display: block;
  }
}

@media (max-width: 700px) {
  .banner-inner {
    grid-template-columns: 44px 1fr 1fr;
    gap: 0;
    padding: 8px 6px;
  }
  .logo {
    justify-content: flex-end;
  }
  .logo img, #lottie-logo {
    height: 60px !important;
    width: 120px !important;
    min-width: 80px;
    max-width: 140px;
  }
  .spacer {
    display: none;
  }
}
@media (max-width: 480px) {
  .banner-inner {
    grid-template-columns: 1fr;
    padding: 6px 2vw;
  }
  nav ul {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .logo {
    justify-content: center;
    margin: 0 auto;
  }
  .logo img, #lottie-logo {
    height: 44px !important;
    width: 80px !important;
    min-width: 60px;
    max-width: 100px;
  }
}

/* Responsive offre de lancement & 360° */
@media (max-width: 900px) {
  #offre-360 {
    flex-direction: column;
    gap: 32px;
    padding: 40px 6vw 40px 6vw;
  }
  #offre-360 > div {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }
  #product-360-view {
    width: 100vw !important;
    max-width: 420px !important;
    height: 320px !important;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  #offre-360 {
    padding: 24px 2vw 24px 2vw;
    gap: 18px;
  }
  #product-360-view {
    max-width: 98vw !important;
    height: 180px !important;
  }
}

/* Haptic Block */
.haptic-block {
  background: linear-gradient(120deg, #18181a 60%, #1a0a0f 100%);
  border-radius: 18px;
  margin: 48px auto 36px auto;
  max-width: 900px;
  box-shadow: 0 6px 32px #0007;
  padding: 38px 28px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid var(--line);
  position: relative;
}
.haptic-inner {
  display: flex;
  align-items: center;
  gap: 38px;
  width: 100%;
  max-width: 720px;
}
.haptic-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #181818;
  border-radius: 50%;
  box-shadow: 0 2px 16px #e5091420;
  padding: 18px;
  margin-right: 8px;
}
.haptic-content {
  flex: 1;
}
.haptic-block h2 {
  font-family: TanWaverly, serif;
  font-size: 2rem;
  margin: 0 0 10px 0;
  color: #fff;
  letter-spacing: .2px;
  font-weight: 600;
}
.haptic-lead {
  font-size: 1.18rem;
  color: #f6f6f6;
  line-height: 1.7;
  margin-bottom: 0;
}
.haptic-highlight {
  color: #e50914;
  font-family: TanWaverly, serif;
  font-size: 1.13em;
  font-weight: 600;
  display: inline-block;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .haptic-inner {
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }
  .haptic-icon {
    margin: 0 0 8px 0;
    padding: 10px;
  }
  .haptic-block {
    padding: 24px 8px 18px 8px;
  }
  .haptic-block h2 {
    font-size: 1.3rem;
  }
  .haptic-lead {
    font-size: 1rem;
  }
}
nav a,
nav .nav-text,
nav li,
nav ul {
  text-decoration: none !important;
  box-shadow: none !important;
}