/* ============================================================
   Atlantiq'Distrib — Design tokens
   ============================================================ */
:root {
  --navy-950: #060f20;
  --navy-900: #0a1830;
  --navy-800: #0f213f;
  --navy-700: #16305c;
  --navy-600: #223f74;
  --paper: #faf8f4;
  --paper-dim: #f1ede5;
  --ink: #0a1830;
  --ink-soft: #4a5568;
  --muted: #8891a3;
  --muted-on-dark: #93a0bd;
  --coral: #fd8202;
  --coral-light: #fd9931;
  --coral-dim: #aa6722;
  --coral-rgb: 253, 130, 2;
  --coral-light-rgb: 253, 153, 49;
  --coral-dim-rgb: 170, 103, 34;
  --text-on-dark: #f4f1ea;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  background: var(--paper);
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--coral); color: var(--paper); }

/* ============================================================
   Loader
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  background: var(--navy-950);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  transition: opacity 0.8s var(--ease-premium), visibility 0.8s;
}
#loader.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { width: 64px; height: 64px; display: flex; }
.loader-mark svg, .loader-mark img { width: 100%; height: 100%; object-fit: contain; }
#loader-bar-track {
  width: 220px;
  height: 1px;
  background: rgba(244, 241, 234, 0.15);
  position: relative;
}
#loader-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--coral);
  transition: width 0.25s ease-out;
}
#loader-percent {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--muted-on-dark);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Fixed Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
  transition: padding 0.4s var(--ease-premium), background 0.4s var(--ease-premium), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  padding: 1.05rem clamp(1.5rem, 4vw, 3.5rem);
  background: rgba(6, 15, 32, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}
/* At the top of the page the header shows a centered brand block (logo,
   wordmark, tagline) above the nav row. Scrolling collapses it away and
   swaps in the small inline logo on the nav row instead — the compact,
   single-row header everyone actually navigates with. */
.header-brand-row {
  display: flex;
  justify-content: center;
  max-height: 155px;
  opacity: 1;
  overflow: hidden;
  margin-bottom: 1.3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(244, 241, 234, 0.12);
  transition: max-height 0.4s var(--ease-premium), opacity 0.3s ease,
    margin-bottom 0.4s var(--ease-premium), padding-bottom 0.4s var(--ease-premium),
    border-color 0.4s ease;
}
.site-header.scrolled .header-brand-row {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
/* Hard-hidden (not animated like the scrolled state above): opening the
   mobile panel is already an instant visual switch, and relying on the
   max-height/overflow collapse here left a brief/inconsistent moment on
   some mobile browsers where the brand row was still (partly) laid out,
   overlapping the first menu item underneath it. */
.site-header.mobile-nav-open .header-brand-row {
  display: none;
}
.header-brand { display: flex; align-items: center; }
.header-brand-img { height: clamp(48px, 16vw, 104px); width: auto; display: block; }
.site-header nav .logo { display: none; }
.site-header.scrolled nav .logo { display: flex; }
/* While the mobile panel is open, show nothing in the header but the
   close (X) button — no logo at all, so there is nothing left in the
   header that could ever visually land behind/overlap the panel's
   content, regardless of viewport-height quirks on any given browser. */
.site-header.mobile-nav-open nav .logo { display: none; }
/* See openMobileNav() in app.js: the header stays visually above the mobile
   panel (so the burger-turned-close-button remains reachable), but that means
   its own <nav> — an invisible area when unscrolled, taller now that it
   includes the brand row — would otherwise intercept taps meant for the menu
   items underneath it. */
.site-header.mobile-nav-open {
  pointer-events: none;
}
.site-header.mobile-nav-open .nav-burger {
  pointer-events: auto;
}
.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-on-dark);
}
.logo-mark { width: 44px; height: 44px; display: flex; }
.logo-mark svg, .logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-img { height: 60px; width: auto; display: block; }
.logo-word {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.logo-apostrophe, .logo-d { color: var(--coral); }
.nav-links {
  display: flex;
  gap: 1.7rem;
}
.nav-links a {
  font-size: 0.85rem;
  color: var(--muted-on-dark);
  transition: color 0.3s ease;
  position: relative;
}
.nav-links a:hover { color: var(--text-on-dark); }
/* Top-level items only (not the submenu links nested deeper inside) */
.nav-links > li > a {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-links li.has-submenu { position: relative; }
.nav-chevron {
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.7em;
  transition: transform 0.3s var(--ease-premium);
}
.has-submenu:hover .nav-chevron,
.has-submenu:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* No gap between the nav item and this box: with a margin/gap here, the
     mouse crosses a dead zone while moving down into it and :hover drops
     before the panel can be reached. Visual breathing room comes from
     padding-top instead, which is still part of this same hoverable box. */
  padding-top: 0.8rem;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
}
.nav-submenu-inner {
  background: var(--navy-900);
  border: 1px solid rgba(244, 241, 234, 0.1);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-6px);
  transition: transform 0.35s var(--ease-premium);
  box-shadow: 0 24px 55px -18px rgba(0, 0, 0, 0.55);
}
.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
}
.has-submenu:hover .nav-submenu-inner,
.has-submenu:focus-within .nav-submenu-inner {
  transform: translateY(0);
}
.nav-submenu-inner a {
  padding: 0.6rem 0.9rem;
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--muted-on-dark);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-submenu-inner a:hover { background: rgba(244, 241, 234, 0.07); color: var(--text-on-dark); }
.nav-cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-950);
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--coral-light) 0%, var(--coral) 48%, var(--coral-dim) 100%);
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -5px 7px -2px rgba(0, 0, 0, 0.35),
    0 4px 0 -1px rgba(0, 0, 0, 0.18),
    0 8px 16px -4px rgba(0, 0, 0, 0.5);
  transition: background 0.3s ease, transform 0.3s var(--ease-premium);
  white-space: nowrap;
}
.nav-cta:hover {
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--coral-light) 0%, var(--coral-light) 48%, var(--coral) 100%);
  transform: translateY(-1px);
}
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  z-index: 501;
}
.nav-burger span {
  height: 1.5px;
  width: 100%;
  background: var(--text-on-dark);
  transition: transform 0.35s var(--ease-premium), opacity 0.25s ease, width 0.3s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Dimmed backdrop behind the sliding panel */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: rgba(6, 15, 32, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Side-sliding mobile menu panel */
.nav-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 400px);
  background: var(--navy-950);
  z-index: 490;
  display: flex;
  flex-direction: column;
  /* Top-anchored, not centered: centering shifted the whole column (and
     therefore where the first item landed) whenever a submenu expanded
     changed its total height — on iOS Safari in particular, where 100vh-based
     sizing is notoriously inconsistent with the real visible viewport, this
     could land the first item behind the header. A fixed top anchor never
     moves regardless of how tall the expanded content gets; overflow-y
     handles the rare case where it doesn't fit. */
  justify-content: flex-start;
  overflow-y: auto;
  gap: 2.4rem;
  padding: 6.5rem clamp(2rem, 8vw, 3rem) 2.5rem;
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-premium);
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* No max-height/overflow of its own: nesting a second scroll container
     inside .nav-mobile's (which scrolls the whole panel) made touch-scrolling
     unreliable and could strand the CTA/contact/social rows below it out of
     reach. The whole panel scrolls as one piece instead. */
}
.nav-mobile-item {
  opacity: 0;
  transform: translateX(24px);
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  padding: 0.9rem 0;
}
.nav-mobile-item:first-child { padding-top: 0; }
.nav-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.nav-mobile-row a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-on-dark);
}
.nav-mobile-chevron {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-on-dark);
}
.nav-mobile-chevron svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.35s var(--ease-premium);
}
.nav-mobile-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-mobile-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-premium);
}
.nav-mobile-submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.nav-mobile-submenu.open {
  grid-template-rows: 1fr;
}
.nav-mobile-submenu-inner a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--muted-on-dark);
  padding-top: 0.9rem;
}
.nav-mobile-submenu-inner a:first-child { padding-top: 1.1rem; }
.nav-mobile-cta {
  color: var(--coral) !important;
  opacity: 0;
  transform: translateX(24px);
}
.nav-mobile-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(24px);
}
.nav-mobile-contact a {
  font-size: 0.95rem;
  color: var(--muted-on-dark);
  transition: color 0.3s ease;
}
.nav-mobile-contact a:hover { color: var(--coral-light); }

.nav-mobile-socials {
  display: flex;
  gap: 1.1rem;
  opacity: 0;
  transform: translateX(24px);
}
.nav-mobile-socials a {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 50%;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.nav-mobile-socials a:hover { color: var(--coral-light); border-color: var(--coral-light); }
.nav-mobile-socials svg { width: 1.1rem; height: 1.1rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero-standalone {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--navy-950);
  display: flex;
  align-items: flex-end;
  z-index: 10;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,15,32,0.55) 0%, rgba(6,15,32,0.35) 35%, rgba(6,15,32,0.55) 68%, rgba(6,15,32,0.96) 100%),
    linear-gradient(90deg, rgba(6,15,32,0.65) 0%, rgba(6,15,32,0.1) 45%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem) 6.5rem;
  max-width: 900px;
}
.hero-label {
  color: var(--coral-light);
  display: inline-block;
  margin-bottom: 1.6rem;
}
.hero-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.8rem, 7.4vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin-bottom: 1.8rem;
}
.hero-heading .line { display: block; overflow: hidden; }
.hero-heading .word { display: inline-block; will-change: transform; }
.hero-tagline {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted-on-dark);
  max-width: 34rem;
  margin-bottom: 2.6rem;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-actions .btn {
  justify-content: center;
  min-width: 10.2rem;
  padding: 0.65rem 1.4rem;
  font-size: 0.8rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* transform is deliberately excluded: GSAP's scroll-driven entrance animation also
     sets transform on every .btn (it's part of the stagger-reveal target list), and a
     CSS transition on that same property fights it — every scrubbed scroll update
     restarts a 0.35s tween toward the new value, which never catches up and renders
     as a lagging "ghost" copy of the button trailing its real position. */
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
/* Skeuomorphic 3D pill: a top-left radial highlight layered over a vertical
   "dome" gradient (light -> base -> dim) reads as a convex, lit surface; the
   box-shadow stack adds an inner bevel (light rim top, dark rim bottom) plus
   a solid "edge" a few px down (the button's visible thickness) and a soft
   blurred shadow underneath for lift. Layered backgrounds paint behind the
   text by spec, so no pseudo-element/stacking tricks are needed. */
.btn-primary {
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--coral-light) 0%, var(--coral) 48%, var(--coral-dim) 100%);
  color: var(--navy-950);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -5px 7px -2px rgba(0, 0, 0, 0.35),
    0 5px 0 -1px rgba(0, 0, 0, 0.18),
    0 10px 20px -4px rgba(0, 0, 0, 0.5);
}
.btn-primary:hover {
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--coral-light) 0%, var(--coral-light) 48%, var(--coral) 100%);
  transform: translateY(-2px);
}
.btn-ghost {
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(244, 241, 234, 0.4);
  border-bottom-color: rgba(244, 241, 234, 0.15);
  color: var(--text-on-dark);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -5px 7px -2px rgba(0, 0, 0, 0.3),
    0 10px 20px -6px rgba(0, 0, 0, 0.5);
}
.btn-ghost:hover {
  border-color: var(--coral);
  color: var(--coral-light);
  transform: translateY(-2px);
}

.scroll-indicator {
  position: absolute;
  bottom: 2.4rem;
  right: clamp(1.5rem, 5vw, 4.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted-on-dark);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-indicator svg { animation: bob 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================================================
   Canvas (video-scrub) + overlays
   ============================================================ */
.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 42%);
  background: var(--navy-950);
}
#canvas { width: 100%; height: 100%; display: block; }

#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--navy-950);
  opacity: 0;
  pointer-events: none;
}

#dark-overlay-soft,
#dark-overlay-soft-2 {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(6,15,32,0.35) 0%, rgba(6,15,32,0.6) 45%, rgba(6,15,32,0.75) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Scroll container + sections
   ============================================================ */
#scroll-container {
  position: relative;
  height: 1300vh;
  z-index: 5;
}
.scroll-section {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}
.section-inner { max-width: 1440px; margin: 0 auto; position: relative; }

.align-left .section-inner,
.align-right .section-inner { max-width: 30rem; }
.align-left { text-align: left; }
.align-left .section-inner { margin-left: 0; padding-right: 50vw; }
.align-right { text-align: left; }
.align-right .section-inner { margin-left: auto; padding-left: 50vw; }
.align-center .section-inner { max-width: 1200px; text-align: center; margin: 0 auto; }

.section-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coral-dim);
  margin-bottom: 1.4rem;
  font-weight: 700;
}
.section-label-dark { color: var(--coral-light); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.section-heading-dark { color: var(--text-on-dark); }

.section-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  font-weight: 400;
}
.align-center .section-body { margin-left: auto; margin-right: auto; max-width: 42rem; }

.section-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 1.1rem;
  border-left: 2px solid var(--coral);
  margin: 1.6rem 0;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.product-tags span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 1px solid rgba(10,24,48,0.18);
  padding: 0.5rem 1rem;
  border-radius: 100px;
}

/* Product / distributeur sections need readable text over the video canvas */
#produit .section-inner,
#distributeur .section-inner {
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: blur(6px);
  padding: 2.6rem clamp(1.6rem, 3vw, 3rem);
  border-radius: 4px;
}

/* Product visual — original unbranded plaques, right-hand zone of "Le produit" */
.product-visual {
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  z-index: 1;
}
.product-visual-plaque {
  width: 16rem;
  background: rgba(250, 248, 244, 0.95);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  border: 1px solid rgba(10, 24, 48, 0.08);
  overflow: hidden;
  box-shadow: 0 20px 45px -20px rgba(6, 15, 32, 0.35);
}
.product-visual-plaque img {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  display: block;
}
.product-visual-plaque figcaption {
  padding: 1rem 1.2rem 1.2rem;
}
.product-visual-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.product-visual-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   Nos marchés — full width block grid
   ============================================================ */
.markets-inner { max-width: 1240px; }
.markets-inner .section-label,
.markets-inner .section-heading { color: var(--text-on-dark); }
.markets-inner .section-label { color: var(--coral-light); }
.markets-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(244,241,234,0.16);
}
.market {
  padding: 2.4rem 1.6rem 0;
  border-right: 1px solid rgba(244,241,234,0.16);
  text-align: left;
}
.market:last-child { border-right: none; }
.market-index {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--coral);
  margin-bottom: 1.2rem;
}
.market h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text-on-dark);
  margin-bottom: 0.9rem;
}
.market p {
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--muted-on-dark);
}
#marches .section-inner { background: none; }
#comment .section-inner { background: none; }

.steps-visual {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.steps-visual img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 30px 70px -30px rgba(6, 15, 32, 0.55);
}

/* ============================================================
   Nos modèles — 3-card lineup grid
   ============================================================ */
.lineup-inner { max-width: 1240px; }
.lineup-inner .section-label,
.lineup-inner .section-heading {
  color: var(--text-on-dark);
  text-shadow: 0 4px 28px rgba(6, 15, 32, 0.7);
}
.lineup-inner .section-label { color: var(--coral-light); }
#modeles .section-inner { background: none; }

.lineup-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.lineup-card {
  background: var(--paper);
  border-radius: 10px;
  padding: 1.6rem 1.6rem 1.8rem;
  text-align: left;
  box-shadow: 0 30px 70px -30px rgba(6, 15, 32, 0.45);
}
.lineup-media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 1.3rem;
  background: linear-gradient(135deg, #dbe6f2, #f3ddc9);
}
.lineup-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lineup-media.contain {
  background: linear-gradient(135deg, #dbe6f2, #f3ddc9);
}
.lineup-media.contain img {
  object-fit: contain;
}
.lineup-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  background: var(--navy-950);
  color: var(--text-on-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
}
.lineup-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.lineup-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}
.lineup-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.lineup-tags span {
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
}
.lineup-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--coral-dim);
  transition: gap 0.3s ease, color 0.3s ease;
}
.lineup-link:hover { gap: 0.65rem; color: var(--coral); }

/* ============================================================
   Stats
   ============================================================ */
.stats-grid {
  margin: 3rem auto 2.2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-suffix {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--coral-light);
  margin-top: 0.3rem;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--muted-on-dark);
  margin-top: 0.9rem;
  line-height: 1.5;
  max-width: 14rem;
}
.stats-note {
  color: var(--muted-on-dark);
  max-width: 38rem;
  font-size: 0.95rem;
}

/* ============================================================
   Le distributeur — feature list + framed video
   ============================================================ */
.feature-list { margin: 1.6rem 0 2rem; }
.feature-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  background: var(--coral);
  border-radius: 50%;
}
.device-video-frame {
  margin-top: 2rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(10, 24, 48, 0.35);
  aspect-ratio: 16/10;
}
.device-video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ============================================================
   Contact / CTA
   ============================================================ */
.section-cta { z-index: 20; }
.section-cta .section-inner {
  background: var(--paper);
  padding: 2.6rem clamp(1.4rem, 3vw, 3rem);
  border-radius: 6px;
  box-shadow: 0 40px 100px -30px rgba(10, 24, 48, 0.25);
}
/* Two classes each, matching (not just outweighing) .align-center .section-inner's
   specificity — since #contact also carries align-center, that rule's max-width:1200px
   would otherwise win (same specificity, but declared earlier in the file) and silently
   override the value below, ballooning this panel and everything sized relative to it. */
.section-cta .cta-inner { max-width: 640px; }
.section-cta .cta-inner-wide { max-width: 980px; }

/* ============================================================
   Quote form — multi-step
   ============================================================ */
.quote-header { max-width: 560px; margin: 0 auto; text-align: center; }
.quote-header .section-heading { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.quote-header .section-body { font-size: 0.95rem; }

.quote-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.8rem;
  text-align: left;
  align-items: start;
}

.quote-form-panel {
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 1.5rem clamp(1.2rem, 2.5vw, 1.7rem);
}

.quote-steps {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.quote-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.quote-step.active,
.quote-step.done { opacity: 1; }
.quote-step-num {
  width: 2rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid rgba(10, 24, 48, 0.15);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.quote-step.active .quote-step-num,
.quote-step.done .quote-step-num {
  background: var(--navy-950);
  color: var(--text-on-dark);
  border-color: var(--navy-950);
}
.quote-step-text {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.quote-step-text small {
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  margin-top: 0.1rem;
}
.quote-step-line {
  flex: 1;
  height: 1.5px;
  background: rgba(10, 24, 48, 0.12);
  margin-top: 0.8rem;
}
.quote-progress { height: 3px; background: rgba(10, 24, 48, 0.08); border-radius: 3px; margin-bottom: 1.5rem; overflow: hidden; }
.quote-progress-bar { height: 100%; width: 33.33%; background: var(--coral); border-radius: 3px; transition: width 0.4s var(--ease-premium); }

.quote-form-panel .contact-form { margin-top: 0; }
.quote-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.quote-fieldset[hidden] { display: none; }
.quote-field-group { display: flex; flex-direction: column; gap: 0.8rem; }
.quote-field-group > label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.req { color: var(--coral); }
.field-hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.7;
}

.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  background: var(--paper);
  border: 1.5px solid rgba(10, 24, 48, 0.12);
  border-radius: 8px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-soft);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.quote-card:hover { border-color: rgba(255, 107, 71, 0.5); transform: translateY(-1px); }
.quote-card svg { width: 1.3rem; height: 1.3rem; color: var(--navy-700); }
.quote-card.selected {
  border-color: var(--coral);
  background: rgba(255, 107, 71, 0.07);
  color: var(--ink);
}
.quote-card.selected svg { color: var(--coral); }
.quote-card.selected::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--coral);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}
.quote-card-wide { grid-column: span 3; flex-direction: row; }
.quote-cards-error .quote-card { border-color: var(--coral-dim); animation: quote-shake 0.4s ease; }
@keyframes quote-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.quote-radio-row { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.quote-radio { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; }
.quote-radio input { accent-color: var(--coral); width: 1.05rem; height: 1.05rem; }

.quote-charcount { align-self: flex-end; font-size: 0.72rem; color: var(--muted); margin-top: -0.3rem; }

.quote-consent { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.quote-consent input { margin-top: 0.2rem; accent-color: var(--coral); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

/* All three steps share one min-height so the panel doesn't resize as you move
   between them, and the nav row's auto margins center it in whatever leftover
   space that leaves, instead of it sitting flush under the last field. */
.quote-fieldset { min-height: 28rem; }
.quote-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  margin-bottom: auto;
}
.quote-fieldset[data-fieldset="1"] .quote-nav-buttons { justify-content: flex-end; }
.quote-nav-buttons .quote-next,
.quote-nav-buttons .quote-prev,
.quote-nav-buttons .cta-button {
  padding: 0.6rem 1.2rem;
  font-size: 0.78rem;
}
.btn-ghost-dark {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.9rem 1.2rem;
  border-radius: 100px;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-ghost-dark:hover { background: rgba(10, 24, 48, 0.06); color: var(--ink); }
.quote-trust { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; }
.quote-honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.quote-error {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(217, 86, 58, 0.08);
  border: 1px solid rgba(217, 86, 58, 0.25);
  border-radius: 6px;
  color: var(--coral-dim);
  font-size: 0.85rem;
}

.quote-visual {
  background: var(--navy-950);
  border-radius: 10px;
  padding: 1.5rem 1.3rem;
  color: var(--text-on-dark);
}
.quote-visual h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.quote-visual-icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.quote-visual-icons > div { display: flex; flex-direction: column; gap: 0.4rem; }
.quote-visual-icons svg { width: 1.3rem; height: 1.3rem; color: var(--coral-light); }
.quote-visual-icons span { font-size: 0.72rem; color: var(--muted-on-dark); }
.quote-visual-media { border-radius: 8px; overflow: hidden; margin-bottom: 1.3rem; background: rgba(255,255,255,0.03); }
.quote-visual-media img { width: 100%; display: block; }
.quote-visual-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 241, 234, 0.12);
}
.quote-visual-badges > div { display: flex; align-items: center; gap: 0.5rem; }
.quote-visual-badges svg { width: 1.1rem; height: 1.1rem; color: var(--coral-light); flex-shrink: 0; }
.quote-visual-badges span { font-size: 0.72rem; color: var(--muted-on-dark); }
.contact-form { margin-top: 2.4rem; text-align: left; display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
  border: none;
  border-bottom: 1.5px solid rgba(10,24,48,0.18);
  padding: 0.7rem 0.1rem;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  transition: border-color 0.3s ease;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--coral);
}
.cta-button { align-self: flex-start; margin-top: 0.6rem; }
.form-success {
  display: none;
  margin-top: 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255,107,71,0.08);
  border-radius: 6px;
}
.form-success.visible { display: flex; }
.form-success p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.contact-form.hidden { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 30;
  background: var(--navy-950);
  padding: 5rem clamp(1.5rem, 5vw, 4.5rem) 2.5rem;
}
.footer-inner { max-width: 1440px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
  text-align: left;
}

.footer-brand-img { height: 58px; width: auto; display: block; margin-bottom: 0.9rem; }
.footer-tagline { color: var(--muted-on-dark); font-size: 0.9rem; max-width: 20rem; }

.footer-col h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral-light);
  font-weight: 700;
  margin-bottom: 1.3rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col a { color: var(--muted-on-dark); font-size: 0.88rem; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--coral-light); }

.footer-info li {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(147, 160, 189, 0.6);
}
.footer-info li span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted-on-dark);
}
.footer-info li span a {
  color: inherit;
  transition: color 0.3s ease;
}
.footer-info li span a:hover { color: var(--coral-light); }
.footer-info li + li { margin-top: 1.1rem; }

.footer-socials { display: flex; gap: 0.8rem; }
.footer-socials a {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 50%;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.footer-socials a:hover { color: var(--coral-light); border-color: var(--coral-light); }
.footer-socials svg { width: 1.05rem; height: 1.05rem; }

.footer-bottom { padding-top: 2rem; text-align: center; }
.footer-copy { color: rgba(147,160,189,0.5); font-size: 0.78rem; }

/* ============================================================
   Reveal helpers (JS toggles)
   ============================================================ */
.scroll-section { opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1300px) {
  .nav-links { gap: 1.1rem; }
  .nav-links > li > a { font-size: 0.72rem; }
  .nav-cta { padding: 0.6rem 1.05rem; font-size: 0.75rem; }
}

@media (max-width: 1024px) {
  .markets-grid { grid-template-columns: repeat(2, 1fr); }
  .market { border-bottom: 1px solid rgba(244,241,234,0.16); padding-bottom: 2rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
  .lineup-grid .lineup-card:last-child { grid-column: span 2; max-width: 50%; margin: 0 auto; }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; row-gap: 2.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }
  .quote-layout { grid-template-columns: 1fr; }
  .quote-visual-media { max-width: 22rem; margin-left: auto; margin-right: auto; }
}

/* The 6-item nav (with its longer labels) needs more room than the content
   breakpoints below — it switches to the mobile burger menu earlier, while
   section/content layout keeps following max-width: 768px. */
@media (max-width: 1225px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }

  .align-left .section-inner,
  .align-right .section-inner,
  .align-center .section-inner { max-width: 100%; }
  .align-left .section-inner { padding-right: 0; }
  .align-right .section-inner { padding-left: 0; margin-left: 0; }

  #produit .section-inner,
  #distributeur .section-inner { background: rgba(250, 248, 244, 0.94); }

  .product-visual {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    gap: 0.8rem;
  }
  .product-visual-plaque { width: calc(50% - 0.4rem); flex: none; }

  .markets-grid { grid-template-columns: 1fr; }
  .market { border-right: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .lineup-grid { grid-template-columns: 1fr; }
  .lineup-grid .lineup-card:last-child { grid-column: auto; max-width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .hero-heading { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .section-cta .section-inner { padding: 2.2rem 1.4rem; }

  .quote-step-text { display: none; }
  .quote-step-line { margin-top: 0; }
  .quote-cards { grid-template-columns: 1fr 1fr; }
  .quote-card-wide { grid-column: span 2; }
  .quote-form-panel { padding: 1.4rem 1.1rem; }
  .quote-visual-icons { grid-template-columns: 1fr 1fr; }
  .quote-visual-badges { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Chatbot — scripted FAQ widget (no API, no backend)
   ============================================================ */
.chatbot {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* Clears the hero's "Faites défiler" indicator (bottom: 2.4rem + its own
     text/icon height), which sits at a similar bottom-right spot but only
     while the hero is in view — the chatbot stays fixed everywhere else. */
  bottom: 4.8rem;
  z-index: 600;
}
/* Hidden while the mobile nav panel is open — both are fixed bottom-right-ish
   elements and the chatbot's z-index would otherwise float on top of it. */
#nav-mobile.open ~ .chatbot { display: none; }

.chatbot-toggle {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 65% at 24% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--coral-light) 0%, var(--coral) 48%, var(--coral-dim) 100%);
  color: var(--navy-950);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -5px 7px -2px rgba(0, 0, 0, 0.35),
    0 5px 0 -1px rgba(0, 0, 0, 0.18),
    0 10px 20px -4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.3s var(--ease-premium);
}
.chatbot-toggle:hover { transform: translateY(-2px); }
.chatbot-icon { display: flex; }
.chatbot-icon svg { width: 26px; height: 26px; }
.chatbot-icon-close { display: none; position: absolute; }
.chatbot-toggle.open .chatbot-icon-chat { display: none; }
.chatbot-toggle.open .chatbot-icon-close { display: flex; }
.chatbot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--text-on-dark);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
}
.chatbot-toggle.open .chatbot-badge { display: none; }

.chatbot-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: min(370px, calc(100vw - 2rem));
  max-height: min(70vh, 560px);
  background: var(--navy-950);
  border-radius: 18px;
  border: 1px solid rgba(244, 241, 234, 0.12);
  box-shadow: 0 24px 55px -18px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chatbot-panel[hidden] { display: none; }
.chatbot-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: rgba(244, 241, 234, 0.04);
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
  flex-shrink: 0;
}
.chatbot-avatar { width: 34px; height: 34px; object-fit: contain; }
.chatbot-header-text { display: flex; flex-direction: column; }
.chatbot-header-text strong { color: var(--text-on-dark); font-size: 0.9rem; }
.chatbot-header-text span { color: var(--muted-on-dark); font-size: 0.72rem; }

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chatbot-msg-bot {
  align-self: flex-start;
  max-width: 88%;
  background: rgba(244, 241, 234, 0.07);
  color: var(--text-on-dark);
  padding: 0.65rem 0.9rem;
  border-radius: 12px 12px 12px 3px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.chatbot-msg-user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--coral);
  color: var(--navy-950);
  padding: 0.55rem 0.85rem;
  border-radius: 12px 12px 3px 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
.chatbot-replies {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.chatbot-reply {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(244, 241, 234, 0.25);
  background: rgba(244, 241, 234, 0.04);
  color: var(--text-on-dark);
  font-size: 0.8rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.chatbot-reply:hover { border-color: var(--coral); background: rgba(244, 241, 234, 0.09); }