/* ===========================================================
   home_styles.css — lageniale · Luxe Edition 2026
   Premium · Minimal · Professionnel
   =========================================================== */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --gold: #E8B84B;
  --gold-d: #C49A30;
  --gold-l: #F5CE70;
  --gold-glow: rgba(232, 184, 75, .16);
  --gold-glow2: rgba(232, 184, 75, .06);
  --gold-line: rgba(232, 184, 75, .14);
  --ink: #030305;
  --ink2: #07070B;
  --ink3: #0D0D13;
  --ink4: #131319;
  --glass: rgba(255, 255, 255, 0.028);
  --glass2: rgba(255, 255, 255, 0.048);
  --border: rgba(255, 255, 255, 0.054);
  --border-s: rgba(255, 255, 255, 0.036);
  --border-h: rgba(255, 255, 255, 0.16);
  --text: #F0EEE8;
  --text2: rgba(240, 238, 232, 0.70);
  --muted: rgba(240, 238, 232, 0.70);
  --muted2: rgba(240, 238, 232, 0.90);
  --green: #22c55e;
  --green-g: rgba(34, 197, 94, .12);
  --red: #EF4444;
  --r-xs: 4px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;
  --t: all 0.28s cubic-bezier(.25, .46, .45, .94);
  --t-s: all 0.55s cubic-bezier(.22, .68, 0, 1.15);
  --max: 1340px;
  --gutter: clamp(20px, 5vw, 72px);
  --navbar-h: 62px;
}

/* font */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.lg-snap-section,
.lg-snap-section *,
.lg-nav {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SCROLL SNAP ─────────────────────────────────────────── */
body.lg-snap-page {
  overflow: hidden;
  height: 100svh;
  background: transparent !important;
}

body.lg-snap-page main {
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: transparent !important;
}

body.lg-snap-page main::-webkit-scrollbar {
  display: none;
}

/* ── Mobile ≤600px : le JS sort déjà (return) — on aligne le CSS ── */
@media (max-width: 600px) {
  body.lg-snap-page main {
    scroll-snap-type: none;
  }
}

.lg-snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--navbar-h);
}

.lg-hero.lg-snap-section {
  padding-top: 0;
}

/* ── NAV DOTS ────────────────────────────────────────────── */
.lg-nav-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lg-nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: none;
  cursor: pointer;
  transition: all .25s ease;
  padding: 0;
  outline: none;
}

.lg-nav-dot.active {
  background: var(--gold);
  transform: scale(1.8);
}

.lg-nav-dot:hover:not(.active) {
  background: rgba(255, 255, 255, .45);
}

.lg-nav-dots.dark .lg-nav-dot {
  background: rgba(0, 0, 0, .12);
}

.lg-nav-dots.dark .lg-nav-dot.active {
  background: var(--gold);
}

.lg-nav-dots.dark .lg-nav-dot:hover:not(.active) {
  background: rgba(0, 0, 0, .28);
}

/* ── FADE-UP ─────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, .68, 0, 1.15), transform .6s cubic-bezier(.22, .68, 0, 1.15);
}

.fade-up.visible {
  opacity: 1;
  transform: none;
}

.fade-up:nth-child(1) {
  transition-delay: .04s
}

.fade-up:nth-child(2) {
  transition-delay: .10s
}

.fade-up:nth-child(3) {
  transition-delay: .16s
}

.fade-up:nth-child(4) {
  transition-delay: .22s
}

/* ── SHARED ATOMS ────────────────────────────────────────── */
.lg-section-inner {
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.lg-section-header {
  margin-bottom: 18px;
}

.lg-section-header.lg-center {
  text-align: center;
}

.lg-section-header h2 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.03;
  color: var(--text);
  margin: 0 0 12px;
}

.lg-section-lead {
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--muted2);
  line-height: 1.8;
  margin: 0;
  max-width: 540px;
}

.lg-section-header.lg-center .lg-section-lead {
  margin: 0 auto;
}

.lg-kicker-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  opacity: .9;
}

.lg-kicker-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
  flex-shrink: 0;
}

.lg-accent {
  color: var(--gold);
}

/* BUTTONS */
.lg-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #000;
  font-size: 12px;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: none;
  transition: var(--t);
  letter-spacing: .5px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.lg-btn-primary:hover {
  background: var(--gold-l);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px var(--gold-glow);
  color: #000;
}

.lg-btn-primary.lg-btn-full {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.lg-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  color: var(--muted2);
  font-size: 12px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1px solid var(--border);
  transition: var(--t);
  white-space: nowrap;
}

.lg-btn-ghost:hover {
  border-color: rgba(255, 255, 255, .26);
  color: var(--text);
  background: var(--glass2);
  transform: translateY(-2px);
}

.lg-btn-ghost.lg-btn-full {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* ── CUSTOM NAVBAR ───────────────────────────────────────── */
.lg-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 60px);
  background: transparent;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}

.lg-nav.scrolled {
  background: rgba(3, 3, 5, .88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom-color: var(--border);
}

.lg-nav-brand {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lg-nav-brand-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--gold-glow);
}

.lg-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lg-nav-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted2);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color .2s;
}

.lg-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .28s cubic-bezier(.25, .46, .45, .94);
}

.lg-nav-link:hover {
  color: var(--text);
}

.lg-nav-link:hover::after {
  width: 100%;
}

.lg-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #000;
  font-size: 11.5px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: var(--t);
  letter-spacing: .3px;
}

.lg-nav-cta:hover {
  background: var(--gold-l);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--gold-glow);
  color: #000;
}

.lg-nav-cta-icon {
  font-style: normal;
  font-size: 10px;
}

/* Hamburger */
.lg-nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  z-index: 200;
}

.lg-nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--t);
}

.lg-nav-burger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}

.lg-nav-burger.open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-6px);
}

.lg-nav-burger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

.lg-nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--navbar-h);
  background: rgba(3, 3, 5, .97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 9980;
}

.lg-nav-mobile.open {
  display: flex;
}

.lg-nav-mobile .lg-nav-link {
  font-size: 22px;
  font-weight: 700;
}

.lg-nav-mobile .lg-nav-cta {
  font-size: 15px;
  padding: 14px 36px;
  margin-top: 8px;
}

/* ===========================================================
   S1 · HERO
   =========================================================== */
/* Hero section — transparent, video is global fixed */
.lg-hero {
  background: transparent;
}

/* subtle gold shimmer in top-left corner */
.lg-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 184, 75, .07) 0%, transparent 65%);
  z-index: 1;
  pointer-events: none;
}

.lg-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr clamp(220px, 22vw, 340px);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.lg-hero-text {
  max-width: 580px;
}

.lg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  opacity: 0;
  animation: aUp .6s ease .1s forwards;
}

.lg-kicker-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  animation: blink 2.4s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .15
  }
}

.lg-hero-h1 {
  font-size: clamp(36px, 5.6vw, 65px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -2.5px;
  color: var(--text);
  margin: 0 0 20px;
  opacity: 0;
  animation: aUp .65s ease .22s forwards;
}

/* ── ROTATING ACCENT LINES ── */
.lg-hero-rotate-wrap {
  position: relative;
  display: block;
  /* height:auto sur le wrapper + padding-bottom = réserve la place pour 2 lignes
     sans jamais couper le texte, quel que soit le viewport */
  min-height: 2.4em;
  overflow: visible;
}

/* Les deux lignes : absolute → ne poussent pas le layout */
.lg-line-a,
.lg-line-b {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  white-space: normal;
  width: 100%;
  line-height: 1.2;
}

/* Line A : visible en premier */
.lg-line-a {
  opacity: 1;
  animation: lineOut 8s ease-in-out 3.5s infinite;
}

/* Line B : cachée en premier */
.lg-line-b {
  opacity: 0;
  animation: lineIn 8s ease-in-out 3.5s infinite;
}

@keyframes lineOut {

  0%,
  5% {
    opacity: 1;
    transform: translateY(0);
  }

  15%,
  55% {
    opacity: 0;
    transform: translateY(-18px);
  }

  65%,
  95% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineIn {

  0%,
  5% {
    opacity: 0;
    transform: translateY(18px);
  }

  15%,
  55% {
    opacity: 1;
    transform: translateY(0);
  }

  65%,
  95% {
    opacity: 0;
    transform: translateY(-18px);
  }

  100% {
    opacity: 0;
    transform: translateY(18px);
  }
}


.lg-hero-desc {
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.8;
  color: var(--muted2);
  margin: 0 0 28px;
  max-width: 500px;
  opacity: 0;
  animation: aUp .65s ease .36s forwards;
}

/* metrics pill */
.lg-metrics-pill {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 32px;
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  padding: 14px 22px;
  opacity: 0;
  animation: aUp .65s ease .48s forwards;
}

.lg-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lg-metric-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.lg-metric-lbl {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.lg-metric-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, .07);
}

.lg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  animation: aUp .65s ease .58s forwards;
}

/* Email capture form in hero */
.lg-hero-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  animation: aUp .65s ease .58s forwards;
}

.lg-hero-email {
  flex: 1;
  min-width: 200px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .25s;
  font-family: inherit;
}

.lg-hero-email::placeholder {
  color: var(--muted);
}

.lg-hero-email:focus {
  border-color: rgba(232, 184, 75, .4);
}

@keyframes aUp {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ============================================================
   PHONE MOCKUP — Samsung Galaxy S25 Ultra
   ============================================================ */
.lg-hero-phone {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0;
  animation: aUp .9s ease .42s forwards;
}

/* Cadre principal — plus grand, coins quasi carrés S25 Ultra */
.lg-phone--s25 {
  /* Fluid sizing: responds to BOTH viewport width AND height */
  width: clamp(200px, min(22vw, 42vh), 340px);
  aspect-ratio: 330 / 680;
  /* Fond titanium anthracite */
  background: linear-gradient(160deg, #1a1a22 0%, #0e0e14 60%, #151520 100%);
  border-radius: clamp(18px, 1.8vw, 28px);
  position: relative;
  /* Double anneau + lueur or subtile */
  box-shadow:
    0 0 0 1px #2a2a38,
    0 0 0 2.5px #0a0a0f,
    0 50px 110px rgba(0, 0, 0, .95),
    0 0 90px rgba(232, 184, 75, .07);
  transform: rotateY(-8deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(.22, .68, 0, 1.2);
}

.lg-phone--s25:hover {
  transform: rotateY(-3deg) rotateX(1deg) translateY(-10px);
}

/* Flat sides titanium — S25 Ultra signature */
.lg-phone--s25::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: clamp(15px, 1.6vw, 25px);
  background: linear-gradient(135deg,
    rgba(255,255,255,.04) 0%,
    transparent 40%,
    rgba(255,255,255,.02) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Boutons volume (gauche) ── */
.lg-s25-btn-vol-up,
.lg-s25-btn-vol-dn {
  position: absolute;
  left: -3px;
  width: 3px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(180deg, #2e2e3e, #1a1a26);
}
.lg-s25-btn-vol-up { top: 110px; height: 42px; }
.lg-s25-btn-vol-dn { top: 164px; height: 42px; }

/* ── Bouton power (droite) ── */
.lg-s25-btn-power {
  position: absolute;
  right: -3px;
  top: 118px;
  width: 3px;
  height: 50px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #2e2e3e, #1a1a26);
}

/* ── Écran — épouse tout le cadre avec micro-bezel ── */
.lg-phone-screen {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: clamp(15px, 1.5vw, 24px);
  overflow: hidden;
  background: #000;
  z-index: 1;
}

/* ── Punch-hole camera — S25 Ultra style ── */
.lg-s25-camera {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  z-index: 30;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

/* ── Rail S-Pen — signature S25 Ultra ── */
.lg-s25-spen-rail {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 4px;
  height: 56px;
  border-radius: 3px;
  background: linear-gradient(180deg, #2a2a38 0%, #1a1a24 100%);
  z-index: 5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.lg-s25-spen-rail::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: rgba(232, 184, 75, .25);
  border-radius: 2px;
}

/* Video variant */
.lg-phone-screen--video {
  background: #000;
}

.lg-phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: clamp(15px, 1.5vw, 24px);
  animation: fadeIn 1s ease both;
}


/* MAP — dark slate, no green */
.lg-map-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0D1117 0%, #111827 100%);
  overflow: hidden;
}

.lg-map-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(99, 126, 175, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 126, 175, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.lg-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.lg-route-path {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: drawRoute 2.4s ease-out .5s forwards;
}

@keyframes drawRoute {
  to {
    stroke-dashoffset: 0
  }
}

.lg-origin-pin {
  position: absolute;
  bottom: 43%;
  left: 54%;
  z-index: 12;
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 6px var(--gold-glow);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 6px var(--gold-glow)
  }

  50% {
    box-shadow: 0 0 0 12px transparent
  }
}

.lg-car-icon {
  position: absolute;
  bottom: 41%;
  left: 51%;
  z-index: 14;
  width: 24px;
  height: 24px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.lg-dest-marker {
  position: absolute;
  top: 14%;
  left: 57%;
  z-index: 10;
  width: 9px;
  height: 9px;
  background: #EF4444;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pinIn .5s ease 3s both;
}

@keyframes pinIn {
  from {
    transform: scale(0);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

/* OFFER PANEL */
.lg-offer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8, 8, 14, .97);
  backdrop-filter: blur(20px);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 11px 14px 16px;
  z-index: 22;
  animation: panelUp .85s ease 2s both;
}

@keyframes panelUp {
  from {
    transform: translateY(100%)
  }

  to {
    transform: none
  }
}

.lg-op-handle {
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
  margin: 0 auto 9px;
}

.lg-op-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 7px;
}

.lg-op-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg-op-tag {
  font-size: 8px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lg-op-driver {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.lg-op-price {
  text-align: right;
}

.lg-op-amount {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.lg-op-ref {
  font-size: 8px;
  color: rgba(255, 255, 255, .2);
  text-decoration: line-through;
}

.lg-op-badges {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.lg-badge-green {
  font-size: 7px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.lg-badge-gold {
  font-size: 7px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(232, 184, 75, .1);
  color: var(--gold);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.lg-op-accept {
  width: 100%;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  padding: 9px;
  cursor: pointer;
  font-family: inherit;
}

.lg-phone-glow {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 12px;
  background: var(--gold-glow);
  border-radius: 50%;
  filter: blur(14px);
}

.lg-scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  animation: fadeIn 1s ease 2.2s forwards;
}

.lg-scroll-chevron {
  width: 16px;
  height: 16px;
  border-right: 1.5px solid rgba(255, 255, 255, .22);
  border-bottom: 1.5px solid rgba(255, 255, 255, .22);
  transform: rotate(45deg);
  animation: bounce .8s ease-in-out infinite alternate;
}

@keyframes fadeIn {
  to {
    opacity: 1
  }
}

@keyframes bounce {
  to {
    transform: rotate(45deg) translate(4px, 4px)
  }
}

/* ===========================================================
   S2 � LE MODELE � STATS
   =========================================================== */
.lg-stats {
  background: transparent;
  position: relative;
}

.lg-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 35%, rgba(232, 184, 75, .04) 0%, transparent 70%);
}

.lg-stats-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.lg-stats-inner .lg-section-header {
  margin-bottom: 4px;
}

.lg-stats-inner .lg-section-header h2 {
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: -2.5px;
  line-height: 1.02;
  margin-bottom: 6px;
}

.lg-stats-inner .lg-section-lead {
  font-size: clamp(12.5px, 1vw, 14.5px);
}

.lg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.lg-stat-card {
  position: relative;
  background: var(--ink3);
  border-radius: var(--r-lg);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--t);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* top border gold accent */
.lg-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .3), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

.lg-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(232, 184, 75, .07) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}

.lg-stat-card>* {
  position: relative;
  z-index: 1;
}

.lg-stat-card:hover {
  border-color: rgba(232, 184, 75, .2);
  transform: translateY(-4px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .55);
}

.lg-stat-card:hover::before,
.lg-stat-card:hover::after {
  opacity: 1;
}

.lg-stat-card--hero {
  border-color: rgba(232, 184, 75, .15);
  background: linear-gradient(145deg, rgba(232, 184, 75, .06) 0%, var(--ink3) 58%);
  box-shadow: 0 0 60px rgba(232, 184, 75, .07);
}

.lg-stat-card--hero::after {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .5), transparent);
}

.lg-stat-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}

.lg-stat-num {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 900;
  color: var(--text);
  line-height: .92;
  letter-spacing: -2.5px;
}

.lg-stat-num.gold {
  color: var(--gold);
}

.lg-stat-body {
  font-size: max(12px, clamp(11px, 0.85vw, 13.5px));
  color: var(--muted2);
  line-height: 1.68;
  margin: 0;
  flex: 1;
}

.lg-stat-compare {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lg-stat-compare span {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  display: inline-block;
  width: fit-content;
}

.lg-stat-compare .neg {
  background: rgba(239, 68, 68, .07);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, .12);
}

.lg-stat-compare .pos {
  background: rgba(34, 197, 94, .07);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .12);
}

.lg-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.lg-stat-pills span {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass);
  padding: 3px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-s);
}

.lg-comparison-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-bar-row span {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  min-width: 52px;
  white-space: nowrap;
}

.lg-bar-row.gold span {
  color: var(--gold);
}

.lg-bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .04);
  border-radius: 2px;
  overflow: hidden;
}

.lg-bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, .09);
  border-radius: 2px;
}

.lg-bar-fill.gold {
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
}

/* ===========================================================
   S3/S4 � SPLITS
   =========================================================== */
.lg-split-a {
  background: transparent;
}

.lg-split-b {
  background: transparent;
}

.lg-split-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

.lg-split-inner--rev {
  grid-template-columns: 400px 1fr;
}

.lg-split-h2 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.02;
  color: var(--text);
  margin: 0 0 12px;
}

.lg-split-lead {
  font-size: clamp(13px, 1vw, 15px);
  color: var(--muted2);
  line-height: 1.8;
  margin: 0 0 24px;
}

.lg-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 26px;
}

.lg-benefit {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  padding: 14px;
  transition: var(--t);
}

.lg-benefit:hover {
  border-color: rgba(232, 184, 75, .14);
  background: rgba(232, 184, 75, .022);
  transform: translateY(-2px);
}

.lg-benefit-num {
  font-size: 8px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1.5px;
  background: rgba(232, 184, 75, .08);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid rgba(232, 184, 75, .14);
}

.lg-benefit strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.lg-benefit p {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.62;
  margin: 0;
}

/* EARNINGS CARD */
.lg-earn-card {
  background: var(--ink3);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.lg-earn-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(232, 184, 75, .07) 0%, transparent 70%);
  pointer-events: none;
}

.lg-earn-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, .015);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border-s);
}

.lg-earn-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lg-earn-vstext {
  font-size: 8px;
  font-weight: 900;
  color: rgba(255, 255, 255, .1);
  text-align: center;
  letter-spacing: .5px;
}

.lg-earn-platform {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.lg-earn-platform.gold {
  color: var(--gold);
}

.lg-earn-ca {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted2);
}

.lg-earn-cut {
  font-size: 10px;
  color: rgba(239, 68, 68, .55);
  font-weight: 500;
}

.lg-earn-cut.gold {
  color: rgba(232, 184, 75, .45);
}

.lg-earn-net {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}

.lg-earn-net.gold {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -.5px;
}

.lg-earn-gain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(34, 197, 94, .045);
  border: 1px solid rgba(34, 197, 94, .1);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.lg-earn-gain span {
  font-size: 10px;
  color: var(--muted);
}

.lg-earn-gain strong {
  font-size: 16px;
  font-weight: 900;
  color: #4ade80;
  letter-spacing: -.5px;
}

.lg-earn-annual {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.6;
}

.lg-earn-annual strong {
  color: var(--gold);
  font-weight: 700;
}

.lg-earn-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.lg-earn-tags span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-s);
  text-align: center;
  transition: var(--t);
}

.lg-earn-tags span:hover {
  color: var(--gold);
  border-color: rgba(232, 184, 75, .12);
}

/* OFFERS CARD */
.lg-offers-card {
  background: var(--ink3);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.lg-oc-route {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-s);
  background: var(--glass);
}

.lg-oc-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3.5px 0;
}

.lg-oc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lg-oc-dot.origin {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}

.lg-oc-dot.dest {
  background: #EF4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, .22);
}

.lg-oc-line {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin-left: 3.5px;
}

.lg-oc-point span:last-child {
  font-size: 11px;
  color: var(--muted2);
  font-weight: 500;
}

.lg-oc-meta {
  font-size: 9px;
  color: var(--muted);
  margin-top: 7px;
  font-weight: 500;
  letter-spacing: .2px;
}

.lg-oc-list {
  display: flex;
  flex-direction: column;
}

.lg-oc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-s);
  position: relative;
  transition: var(--t);
}

.lg-oc-item:hover {
  background: rgba(255, 255, 255, .02);
}

.lg-oc-item--fav {
  border-left: 2px solid var(--gold);
  background: rgba(232, 184, 75, .022);
}

.lg-oc-fav-tag {
  position: absolute;
  top: 0;
  left: 18px;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: var(--gold);
  color: #000;
  padding: 2px 8px;
  border-radius: 0 0 6px 6px;
}

.lg-oc-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}

.lg-oc-avatar.fav {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.lg-oc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg-oc-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lg-oc-rating {
  font-size: 9px;
  color: var(--gold);
  font-weight: 700;
}

.lg-oc-count {
  font-size: 9px;
  color: var(--muted);
  font-weight: 500;
}

.lg-oc-vehicle {
  font-size: 9.5px;
  color: var(--muted);
}

.lg-oc-tags {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.lg-oc-tags span {
  font-size: 7.5px;
  font-weight: 700;
  background: var(--glass);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-s);
}

.lg-oc-price {
  text-align: right;
  flex-shrink: 0;
}

.lg-oc-amount {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.5px;
}

.lg-oc-saving {
  font-size: 9px;
  font-weight: 700;
  color: #4ade80;
}

.lg-oc-footer {
  padding: 11px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  background: var(--glass);
}

.lg-oc-footer strong {
  color: #4ade80;
  font-weight: 700;
}

.lg-client-feats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lg-cfeat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: var(--t);
}

.lg-cfeat:hover {
  border-color: rgba(232, 184, 75, .12);
  background: rgba(232, 184, 75, .018);
}

.lg-cfeat-num {
  font-size: 8.5px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(232, 184, 75, .08);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid rgba(232, 184, 75, .14);
}

.lg-cfeat strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.lg-cfeat p {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ===========================================================
   S5 � COMMENT CA MARCHE
   =========================================================== */
.lg-how {
  background: transparent;
  position: relative;
}

.lg-how::before {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(232, 184, 75, .03) 0%, transparent 65%);
  pointer-events: none;
}

.lg-how-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

.lg-how-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lg-how-h2 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.02;
  color: var(--text);
  margin: 4px 0 10px;
}

.lg-how-lead {
  font-size: clamp(12px, 1vw, 14px);
  color: var(--muted2);
  line-height: 1.78;
  max-width: 420px;
  margin: 0;
}

.lg-how-tabs {
  display: flex;
  background: rgba(255, 255, 255, .035);
  border-radius: var(--r-sm);
  padding: 3px;
  max-width: 240px;
  border: 1px solid var(--border);
}

.lg-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 18px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: var(--t);
  letter-spacing: .2px;
}

.lg-tab.active {
  background: var(--ink2);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.lg-tab:hover:not(.active) {
  color: var(--muted2);
}

.lg-how-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.lg-step {
  flex: 1;
  position: relative;
  background: var(--glass);
  border: 1px solid var(--border-s);
  border-radius: var(--r-lg);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
  transition: var(--t);
  overflow: hidden;
}

.lg-step::after {
  content: attr(data-step);
  position: absolute;
  bottom: -8px;
  right: 10px;
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  color: rgba(232, 184, 75, .035);
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  letter-spacing: -4px;
  user-select: none;
}

.lg-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .38), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

.lg-step:hover {
  border-color: rgba(232, 184, 75, .2);
  background: rgba(232, 184, 75, .022);
  transform: translateY(-3px);
}

.lg-step:hover::before {
  opacity: 1;
}

.lg-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(232, 184, 75, .07);
  border: 1px solid rgba(232, 184, 75, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lg-step-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--gold);
}

.lg-step-num {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--gold);
  background: rgba(232, 184, 75, .07);
  border-radius: 20px;
  padding: 3px 12px;
  border: 1px solid rgba(232, 184, 75, .12);
}

.lg-step h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.lg-step p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.68;
  margin: 0;
  flex: 1;
}

.lg-step-note {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(232, 184, 75, .06);
  padding: 4px 11px;
  border-radius: var(--r-xs);
  letter-spacing: .3px;
}

.lg-step-arrow {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .12);
}

.lg-step-arrow svg path {
  stroke-dasharray: 4;
  animation: slideDashes 20s linear infinite;
}

@keyframes slideDashes {
  to {
    stroke-dashoffset: -100
  }
}

.lg-how-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===========================================================
   S6 � TEMOIGNAGES
   =========================================================== */
.lg-testi {
  background: transparent;
  position: relative;
}

.lg-testi::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(232, 184, 75, .03) 0%, transparent 70%);
  pointer-events: none;
}

.lg-testi-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.lg-testi-inner .lg-section-header {
  margin-bottom: 0;
}

.lg-testi-inner .lg-section-header h2 {
  font-size: clamp(32px, 5vw, 60px);
  letter-spacing: -2.5px;
  line-height: 1.02;
  margin-bottom: 6px;
}

.lg-testi-inner .lg-section-lead {
  font-size: clamp(12.5px, 1vw, 14.5px);
}

.lg-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lg-testi-card {
  background: var(--ink3);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--t-s);
  position: relative;
  overflow: hidden;
}

.lg-testi-card::after {
  content: '\201C';
  position: absolute;
  top: -14px;
  right: 16px;
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  color: rgba(232, 184, 75, .045);
  pointer-events: none;
  font-family: Georgia, serif;
}

.lg-testi-card:hover {
  border-color: rgba(232, 184, 75, .18);
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .58);
}

.lg-testi-card--feat {
  border-color: rgba(232, 184, 75, .15);
  background: linear-gradient(145deg, rgba(232, 184, 75, .05) 0%, var(--ink3) 56%);
  box-shadow: 0 0 50px rgba(232, 184, 75, .06);
}

.lg-testi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lg-testi-stars {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 1;
}

.lg-testi-role {
  font-size: 7.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.lg-testi-role.driver {
  background: rgba(232, 184, 75, .1);
  color: var(--gold);
  border: 1px solid rgba(232, 184, 75, .15);
}

.lg-testi-role.client {
  background: rgba(59, 130, 246, .1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, .15);
}

.lg-testi-card blockquote {
  font-size: 13px;
  line-height: 1.78;
  color: var(--muted2);
  margin: 0;
  font-style: italic;
  flex: 1;
}

.lg-testi-metrics {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--border-s);
  border-bottom: 1px solid var(--border-s);
}

.lg-testi-metrics div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg-testi-metrics .val {
  font-size: 15px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -.8px;
}

.lg-testi-metrics .lbl {
  font-size: 7.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.lg-testi-author {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* SVG Avatar */
.lg-testi-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  overflow: hidden;
  background: rgba(232, 184, 75, .08);
}

.lg-testi-card--feat .lg-testi-av {
  box-shadow: 0 0 0 2px var(--gold-d), 0 0 14px rgba(232, 184, 75, .2);
}

.lg-testi-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 7.5px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .12);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

.lg-testi-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lg-testi-author strong {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}

.lg-testi-author span.lg-testi-sub {
  font-size: 8.5px;
  color: var(--muted);
}

/* ===========================================================
   S7 � CTA REJOINDRE
   =========================================================== */
.lg-cta {
  background: transparent;
  position: relative;
}

.lg-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 100%, rgba(232, 184, 75, .04) 0%, transparent 70%);
}

.lg-cta .lg-section-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.lg-cta .lg-section-inner .lg-section-header {
  margin-bottom: 0;
}

.lg-cta .lg-section-inner .lg-section-header h2 {
  font-size: clamp(32px, 5vw, 64px);
  margin-bottom: 0;
  letter-spacing: -2.5px;
  line-height: 1.02;
}

.lg-cta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lg-cta-card {
  border-radius: var(--r-xl);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}

.lg-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.lg-cta-card--driver {
  background: var(--ink3);
  border: 1px solid var(--border);
}

.lg-cta-card--driver::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .52), transparent);
}

.lg-cta-card--client {
  background: var(--ink4);
  border: 1px solid rgba(232, 184, 75, .09);
}

.lg-cta-card--client::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .24), transparent);
}

.lg-cta-card-label {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}

.lg-cta-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lg-cta-card-pill {
  font-size: 8.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: rgba(34, 197, 94, .1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, .15);
}

.lg-cta-card-pill.soon {
  background: rgba(232, 184, 75, .08);
  color: var(--gold);
  border-color: rgba(232, 184, 75, .15);
}

.lg-cta-card-actions {
  margin-top: auto;
  padding-top: 6px;
}

.lg-cta-card h3 {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 900;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.3px;
}

.lg-cta-card>p {
  font-size: 11.5px;
  color: var(--muted2);
  line-height: 1.65;
  margin: 0;
}

.lg-cta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lg-cta-list li {
  font-size: 11px;
  color: var(--muted2);
  display: flex;
  align-items: center;
  gap: 7px;
}

.lg-cta-list li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* Email form capture inline */
.lg-cta-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.lg-cta-email {
  width: 100%;
  background: rgba(255, 255, 255, .058);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color .25s;
  font-family: inherit;
}

.lg-cta-email::placeholder {
  color: var(--muted);
}

.lg-cta-email:focus {
  border-color: rgba(232, 184, 75, .4);
}


/* ===========================================================
   FOOTER — PREMIUM REDESIGN
   =========================================================== */
.lg-footer {
  background: rgba(3, 3, 5, .92);
  overflow: hidden;
  border-top: 1px solid rgba(232, 184, 75, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.lg-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* ── TOP ROW ── */
.lg-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px 0 36px;
}

.lg-footer-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg-footer-brand {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.9px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lg-footer-brand-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold-glow);
}

.lg-footer-tagline {
  text-align: left;
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.72;
  margin: 0;
  font-weight: 400;
}

.lg-footer-sub {
  text-align: left;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .28);
  margin: 0;
  letter-spacing: .2px;
}

/* ── RIGHT: Download Badges ── */
.lg-footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.lg-footer-cta-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .75;
  margin: 0;
}

.lg-footer-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  transition: background .22s, border-color .22s, transform .22s;
  min-width: 130px;
}

.lg-badge:hover {
  background: rgba(232, 184, 75, .08);
  border-color: rgba(232, 184, 75, .28);
  transform: translateY(-2px);
}

.lg-badge svg {
  flex-shrink: 0;
  opacity: .85;
}

.lg-badge span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lg-badge small {
  font-size: 9px;
  color: rgba(255, 255, 255, .42);
  font-weight: 500;
  line-height: 1;
}

.lg-badge strong {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

/* ── DIVIDER ── */
.lg-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, .18) 30%, rgba(232, 184, 75, .18) 70%, transparent);
}

/* ── BOTTOM ROW ── */
.lg-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.lg-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.lg-footer-legal a {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .32);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}

.lg-footer-legal a:hover {
  color: rgba(255, 255, 255, .75);
}

.lg-footer-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, .18);
  margin: 0;
  white-space: nowrap;
}

.lg-footer-admin-link {
  font-size: 11px;
  color: rgba(255, 255, 255, .15);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: .2px;
  transition: color .25s;
  white-space: nowrap;
}

.lg-footer-admin-link:hover {
  color: rgba(255, 255, 255, .45);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (min-width:1400px) {
  :root {
    --max: 1400px
  }

  .lg-hero-inner {
    grid-template-columns: 1fr 320px;
    gap: 76px
  }

  .lg-stats-inner {
    gap: 28px
  }

  .lg-stats-grid {
    gap: 14px
  }

  .lg-split-inner {
    grid-template-columns: 1fr 440px;
    gap: 76px
  }

  .lg-split-inner--rev {
    grid-template-columns: 440px 1fr
  }
}

@media (max-width:1200px) {
  .lg-hero-inner {
    grid-template-columns: 1fr
  }

  .lg-hero-phone {
    display: none
  }

  .lg-stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .lg-split-inner,
  .lg-split-inner--rev {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .lg-testi-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto
  }

  .lg-cta-cards {
    grid-template-columns: 1fr
  }
}

@media (max-width:900px) {
  .lg-how-steps {
    flex-direction: column
  }

  .lg-step-arrow {
    display: none
  }

  .lg-benefits {
    grid-template-columns: 1fr
  }

  .lg-testi-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .lg-how-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px
  }

  .lg-how-lead {
    max-width: 100%
  }

  .lg-section-header h2,
  .lg-split-h2,
  .lg-how-h2,
  .lg-stats-inner .lg-section-header h2,
  .lg-testi-inner .lg-section-header h2,
  .lg-cta .lg-section-inner .lg-section-header h2 {
    font-size: clamp(28px, 5vw, 50px);
  }
}

@media (max-width:600px) {
  :root {
    --gutter: 16px
  }

  .lg-snap-section {
    overflow-y: visible;
    height: auto;
    min-height: 100svh;
    scroll-snap-align: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--navbar-h) + 16px);
    padding-bottom: 24px;
  }

  body.lg-snap-page {
    overflow: auto;
    height: auto
  }

  body.lg-snap-page main {
    height: auto;
    overflow-y: visible;
    scroll-snap-type: none
  }

  .lg-section-header h2,
  .lg-stats-inner .lg-section-header h2,
  .lg-testi-inner .lg-section-header h2,
  .lg-cta .lg-section-inner .lg-section-header h2 {
    font-size: clamp(26px, 8vw, 36px);
    letter-spacing: -2px;
    line-height: 1.06;
  }

  .lg-split-h2,
  .lg-how-h2 {
    font-size: clamp(26px, 8vw, 36px);
    letter-spacing: -2px;
    line-height: 1.06;
  }

  .lg-hero.lg-snap-section {
    align-items: flex-start;
    padding-top: calc(var(--navbar-h)+20px);
    padding-bottom: 28px
  }

  .lg-hero-h1 {
    font-size: clamp(28px, 9vw, 40px);
    letter-spacing: -2px;
    line-height: 1.08
  }

  .lg-hero-desc {
    font-size: 14px;
    line-height: 1.72;
    margin-bottom: 20px
  }

  .lg-metric-sep {
    display: none
  }

  .lg-metric-val {
    font-size: 19px
  }

  .lg-metric-lbl {
    font-size: 8px
  }

  .lg-hero-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%
  }

  .lg-hero-form {
    flex-direction: column;
    gap: 8px;
    width: 100%
  }

  .lg-hero-email {
    min-width: unset;
    width: 100%
  }

  .lg-btn-primary,
  .lg-btn-ghost {
    width: 100%;
    justify-content: center;
    font-size: 13px
  }

  .lg-section-lead {
    font-size: 13px
  }

  .lg-section-header {
    margin-bottom: 14px
  }

  .lg-stats-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .lg-stat-card {
    padding: 16px
  }

  .lg-stat-num {
    font-size: 42px;
    letter-spacing: -2px
  }

  .lg-split-inner,
  .lg-split-inner--rev {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .lg-split-visual {
    display: none
  }

  /* Footer mobile overrides */
  .lg-footer-top { flex-direction: column; align-items: flex-start; gap: 32px; padding: 30px 0 24px; }
  .lg-footer-left { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
  .lg-footer-tagline, .lg-footer-sub { text-align: left !important; width: 100%; }
  .lg-footer-right { align-items: flex-start; width: 100%; }
  .lg-footer-badges { justify-content: flex-start; }
  .lg-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lg-footer-legal { justify-content: flex-start; flex-wrap: wrap; }

  .lg-split-lead {
    font-size: 13.5px;
    margin-bottom: 16px
  }

  .lg-benefits {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px
  }

  .lg-benefit {
    padding: 11px 12px
  }

  .lg-how-inner {
    gap: 14px
  }

  .lg-how-steps {
    flex-direction: column;
    gap: 10px
  }

  .lg-step {
    padding: 18px 16px;
    gap: 8px
  }

  .lg-step-icon {
    width: 40px;
    height: 40px
  }

  .lg-step h3 {
    font-size: 14px
  }

  .lg-step p {
    font-size: 12px
  }

  .lg-how-tabs {
    max-width: 100%;
    width: 100%
  }

  .lg-how-cta {
    flex-direction: column;
    gap: 10px
  }

  .lg-how-cta .lg-btn-primary,
  .lg-how-cta .lg-btn-ghost {
    width: 100%;
    justify-content: center
  }

  .lg-testi-grid {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .lg-testi-card {
    padding: 16px 14px;
    gap: 10px
  }

  .lg-testi-card blockquote {
    font-size: 12px
  }

  .lg-cta-cards {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .lg-cta-card {
    padding: 20px 16px;
    gap: 8px
  }

  .lg-cta-card h3 {
    font-size: 18px
  }

  .lg-traction {
    flex-direction: column;
    align-items: flex-start
  }

  .lg-nav-dots {
    display: none
  }

  .lg-kicker-label {
    font-size: 8px;
    letter-spacing: 2.5px
  }

  .lg-nav-links {
    display: none
  }

  .lg-nav-burger {
    display: flex
  }

  /* Footer mobile overrides */
  .lg-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 0 24px
  }

  .lg-footer-left {
    align-items: flex-start;
    text-align: left
  }

  .lg-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .lg-footer-legal {
    justify-content: flex-start
  }
}

@media (max-width:390px) {
  :root {
    --gutter: 14px
  }

  .lg-hero-h1 {
    font-size: 26px
  }

  .lg-section-header h2,
  .lg-split-h2,
  .lg-how-h2,
  .lg-stats-inner .lg-section-header h2,
  .lg-testi-inner .lg-section-header h2,
  .lg-cta .lg-section-inner .lg-section-header h2 {
    font-size: 24px;
    letter-spacing: -1.5px
  }
}

@media (max-height:640px) {
  .lg-snap-section {
    overflow-y: auto
  }
}


/* admin_web/static/admin_web/css/page_avenir_styles.css */
/* MISSION SECTION - MINIMALISTE PREMIUM */

/* ——— Section : fond noir ——— */
.lg-split-mission {
  background: transparent;
}

/* ——— Layout principal ——— */
.lg-mission-inner {
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: stretch;
  /* Both columns same height */
}

/* ——— Colonne gauche ——— */
.lg-mission-text {
  display: flex;
  flex-direction: column;
}


/* ——— Panneau droit : transparent, no border ——— */
.lg-mission-panel-wrap {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  /* Vertically center the content within the right column */
}

.lg-mission-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s;
}

.lg-mission-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0s;
  position: relative;
}

/* Le panneau sans fond, sans bordure — juste du texte */
.lg-mission-panel-inner {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
}

.lg-mission-panel-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg-mission-panel-tag::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

.lg-mission-panel-title {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--text);
  line-height: 1.05;
  margin: 0 0 28px;
}

.lg-mission-panel-sep {
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 184, 75, 0.5), transparent);
  width: 60px;
  margin-bottom: 28px;
}

.lg-mission-panel-inner p {
  font-size: clamp(15px, 1.25vw, 18.5px);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.95;
  margin: 0 0 20px;
}

.lg-mission-panel-inner p:last-child {
  margin-bottom: 0;
}

.lg-mission-panel-inner strong {
  color: #fff;
  font-weight: 700;
}

/* ——— RESPONSIVE ——— */
@media (max-width: 1200px) {
  .lg-mission-inner {
    grid-template-columns: 1fr 1.2fr;
    gap: 52px;
  }
}

@media (max-width: 991px) {
  .lg-split-mission {
    overflow-y: auto;
  }

  .lg-mission-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lg-mission-panel {
    position: relative;
    min-height: unset;
  }

  .lg-mission-panel-wrap {
    min-height: unset;
  }
}

/* ── S-SIM · SIMULATEUR PREMIUM (2026 EDITION) ─────────────────────────── */
.lg-simulator-section {
  background: transparent;
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  /* Ensures inner content never hits the top/bottom edges tightly */
}

.lg-simulator-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.lg-simulator-section .lg-section-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Dual Layout */
.simulator-dual-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Avoid any outer expansion */
}

/* SIDEBAR (Inputs) */
body.lg-snap-page main {
  height: 100% !important;
}

.simulator-sidebar {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 16px rgba(0, 0, 0, .2);
  overflow-y: auto;
  min-height: 0;
  box-sizing: border-box;
  scrollbar-width: none;
  /* Firefox */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.simulator-sidebar::-webkit-scrollbar {
  display: none;
}

/* Chrome */

.sidebar-hero-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-hero-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
  letter-spacing: -1px;
}

.sidebar-hero-subtitle {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.35;
  margin: 0 0 4px 0;
}

/* TOGGLE TABS */
.simulator-toggle {
  display: flex;
  background: var(--ink2);
  border: 1px solid var(--border-s);
  border-radius: 5px;
  padding: 4px;
  gap: 4px;
}

.toggle-option {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  border-radius: 5px;
  cursor: pointer;
  transition: var(--t);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.toggle-option input[type="radio"] {
  display: none;
}

.toggle-option.active {
  background: var(--gold);
  color: #000;
  box-shadow: 0 4px 12px var(--gold-glow);
}

.toggle-option:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

/* INPUT PANELS */
.input-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn .4s ease;
}

.input-panel.active {
  display: flex;
}

.input-panel>p {
  font-size: 10.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
  border-bottom: 1px solid var(--border-s);
  padding-bottom: 6px;
}

.sidebar-title-params {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text);
  margin: 0;
  padding-top: 2px;
}

/* RANGE SLIDERS */
.big-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.slider-header label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
}

.big-value-display {
  font-size: 14px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.5px;
}

/* Custom Thumb Range */
.big-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--glass);
  border-radius: 5px;
  border: 1px solid var(--border-s);
  outline: none;
  transition: var(--t);
}

.big-slider:hover {
  background: rgba(255, 255, 255, 0.08);
}

.big-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--gold-glow);
  border: 2px solid var(--gold);
  transition: var(--t);
}

.big-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #fff;
  box-shadow: 0 0 0 8px var(--gold-glow2);
}

.big-slider::-moz-range-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--gold-glow);
  transition: var(--t);
}

.big-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: #fff;
  box-shadow: 0 0 0 8px var(--gold-glow2);
}

/* MAIN CONTENT (Results) */
.simulator-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  height: 100%;
  scrollbar-width: none;
  padding-right: 4px;
  /* for scroll breathing room */
}

.simulator-content::-webkit-scrollbar {
  display: none;
}

.dashboard-panel {
  display: none;
  animation: fadeUp .5s cubic-bezier(0.22, 0.68, 0, 1.15);
  min-height: 0;
  flex: 1;
}

.dashboard-panel.active {
  display: flex;
  flex-direction: column;
}

.sim-grid-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.sim-grid-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* Flex Grow Card Utility */
.flex-grow-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* CARDS */
.dash-card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.054);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 5px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}

.dash-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.dash-card::before {
  display: none;
}

.kpi-label {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.kpi-label .text-danger {
  color: rgba(239, 68, 68, 0.6);
  margin-left: 4px;
}

.kpi-value {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  letter-spacing: -1px;
  margin-bottom: 12px;
  display: block;
}

.kpi-value.positive {
  color: var(--text);
}

.kpi-delta-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.kpi-delta {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
}

.kpi-delta.positive {
  background: rgba(34, 197, 94, 0.08);
  /* Vert succès */
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.kpi-delta-label {
  font-size: 9.5px;
  color: var(--muted);
}

.kpi-calculation {
  font-size: 9.5px;
  color: var(--muted);
  margin-top: auto;
}

/* PNL TABLE */
.pnl-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  height: 300px;
  flex: 0 0 300px;
}

.card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.pnl-table {
  width: 100%;
  border-collapse: collapse;
}

.pnl-table th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  text-align: right;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-s);
}

.pnl-table th:first-child {
  text-align: left;
}

.pnl-table td {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted2);
  text-align: right;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.pnl-table td:first-child {
  text-align: left;
  color: var(--text);
}

/* Highlight specific lines */
.pnl-commission td {
  color: rgba(239, 68, 68, 0.8) !important;
}

#pnl-comm-k {
  color: var(--gold) !important;
  font-weight: 800;
}

/* Katira Comm is highlighted */
.pnl-net-result td {
  font-size: 14px;
  font-weight: 800;
  color: var(--text) !important;
  padding-top: 16px;
  border-bottom: none;
}

#pnl-net-k {
  color: #4ade80 !important;
  font-size: 16px;
}

#pnl-net-o {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* CHARTS */
.chart-container {
  flex: 1;
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  margin-top: 12px;
}

/* MERGED ACTION CARD */
.merged-card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.054);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.merged-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Centrage vertical */
}

.kpi-label.highlight {
  color: var(--gold);
}

.merged-card .kpi-value {
  font-size: clamp(48px, 5vw, 72px);
  margin-bottom: 6px;
  color: var(--text);
}

.pnl-col-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  height: 100%;
}

/* NOUVELLES CLASSES POUR REMPLACER LES INLINE STYLES */
.sim-merged-body {
  margin-top: 20px;
  text-align: center;
}

.sim-vehicle-title {
  margin-bottom: 12px;
  color: var(--gold);
}

.sim-vehicle-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 10px;
}

.sim-vehicle-value {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}

.sim-cta-spacer {
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
}

.sim-merged-flex {
  flex: 1;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .simulator-dual-layout {
    grid-template-columns: 1fr;
    max-height: none;
    height: auto;
  }

  .simulator-sidebar,
  .simulator-content {
    height: auto;
    overflow-y: visible;
  }

  .simulator-sidebar {
    padding: 24px 20px;
    box-shadow: none;
  }

  .sim-grid-kpi {
    grid-template-columns: 1fr 1fr;
  }

  .sim-grid-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .sim-grid-kpi {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   MOBILE RESPONSIVE FIXES — lageniale 2026
   Ajouts uniquement — zero regression desktop
   =========================================================== */

/* ── FIX 1 : Mission panels — position:absolute cache le contenu sous 991px ── */
@media (max-width: 991px) {
  .lg-mission-panel {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    display: none;
  }

  .lg-mission-panel.active {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .lg-mission-panel-wrap {
    min-height: unset !important;
    position: relative !important;
    align-items: flex-start;
  }

  .lg-mission-panel-title {
    font-size: clamp(24px, 6vw, 34px) !important;
    margin-bottom: 16px !important;
  }

  .lg-mission-panel-inner p {
    font-size: clamp(14px, 3.5vw, 16px) !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
  }

  .lg-mission-panel-tag {
    margin-bottom: 14px !important;
  }

  .lg-mission-panel-sep {
    margin-bottom: 16px !important;
  }

  .lg-split-mission.lg-snap-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: visible !important;
    padding-bottom: 40px !important;
  }

  .lg-mission-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .lg-mission-tab {
    padding: 12px 4px !important;
    gap: 12px !important;
  }

  .lmt-title {
    font-size: 13px !important;
  }

  .lg-mission-tabs {
    margin-top: 16px !important;
  }
}

/* ── FIX 2 : Simulateur — conflits hauteur/overflow sur mobile ── */
@media (max-width: 991px) {
  .lg-simulator-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    padding-top: calc(var(--navbar-h) + 16px) !important;
    padding-bottom: 48px !important;
    scroll-snap-align: none !important;
  }

  .lg-simulator-section .lg-section-inner {
    flex: unset !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 24px !important;
  }

  .simulator-dual-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 16px !important;
    grid-template-columns: 1fr !important;
  }

  .simulator-sidebar {
    max-width: 100% !important;
    height: auto !important;
    overflow-y: visible !important;
    align-self: unset !important;
    min-height: 0 !important;
  }

  .simulator-content {
    height: auto !important;
    overflow-y: visible !important;
    min-height: 0 !important;
  }

  .dashboard-panel,
  .dashboard-panel.active {
    height: auto !important;
    overflow: visible !important;
    flex: unset !important;
  }

  .pnl-col-wrapper {
    height: auto !important;
  }

  .flex-grow-card {
    min-height: 220px !important;
  }

  .chart-container {
    height: 180px !important;
    min-height: 180px !important;
    flex-grow: 0 !important;
  }
}

/* ── FIX 3 : Simulateur KPI + tables sur petit écran ── */
@media (max-width: 600px) {
  .sim-grid-kpi {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .sim-grid-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .kpi-value {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px !important;
  }

  .kpi-label {
    font-size: 8px !important;
  }

  .kpi-delta {
    font-size: 9px !important;
  }

  .kpi-delta-label {
    font-size: 9px !important;
  }

  .dash-card {
    padding: 14px !important;
  }

  .pnl-card {
    height: auto !important;
    flex: unset !important;
    padding: 16px !important;
  }

  .merged-card .kpi-value {
    font-size: 32px !important;
    letter-spacing: -1.5px !important;
  }

  .card-title {
    font-size: 11px !important;
  }

  .chart-container {
    height: 150px !important;
    min-height: 150px !important;
  }

  .pnl-table {
    font-size: 9px !important;
  }

  .pnl-table th,
  .pnl-table td {
    padding: 6px 0 !important;
    font-size: 9px !important;
  }

  .pnl-net-result td {
    font-size: 11px !important;
  }

  #pnl-net-k {
    font-size: 13px !important;
  }
}

/* ── FIX 4 : Hero — hauteur auto + formulaire mobile ── */
@media (max-width: 600px) {
  .lg-hero.lg-snap-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: visible !important;
    padding-bottom: 36px !important;
  }

  .lg-hero-form {
    width: 100% !important;
  }

  .lg-hero-email {
    width: 100% !important;
    min-width: unset !important;
    font-size: 14px !important;
  }

  .lg-metrics-pill {
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    padding: 12px 16px !important;
  }

  .lg-metric-sep {
    display: none !important;
  }
}

/* ── FIX 5 : Sections générales — hauteur auto sur mobile ── */
@media (max-width: 600px) {

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body.lg-snap-page {
    overflow: visible !important;
    height: auto !important;
  }

  body.lg-snap-page main {
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  .lg-snap-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: visible !important;
    padding-bottom: 36px !important;
  }

  /* Hero garde son alignement flex-start */
  .lg-hero.lg-snap-section {
    align-items: flex-start !important;
  }
}

/* ── FIX 6 : Section stats — cards ── */
@media (max-width: 600px) {
  .lg-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .lg-stat-card {
    padding: 16px 14px !important;
  }

  .lg-stat-num {
    font-size: 38px !important;
    letter-spacing: -2px !important;
  }

  .lg-stat-body {
    font-size: 12px !important;
  }
}

/* ── FIX 7 : Section chauffeurs — earn card ── */
@media (max-width: 600px) {
  .lg-earn-vs {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .lg-earn-vstext {
    display: none !important;
  }

  .lg-earn-net.gold {
    font-size: 14px !important;
  }

  .lg-benefits {
    grid-template-columns: 1fr !important;
  }

  .lg-benefit strong {
    font-size: 12px !important;
  }

  .lg-benefit p {
    font-size: 11px !important;
  }
}

/* ── FIX 8 : How section — steps ── */
@media (max-width: 600px) {
  .lg-how-steps {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .lg-step {
    padding: 18px 14px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .lg-step-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .lg-step h3 {
    font-size: 14px !important;
  }

  .lg-step p {
    font-size: 12px !important;
  }

  .lg-step-arrow {
    display: none !important;
  }

  .lg-how-tabs {
    width: 100% !important;
    max-width: 100% !important;
  }

  .lg-tab {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* ── FIX 9 : Témoignages ── */
@media (max-width: 600px) {
  .lg-testi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .lg-testi-card {
    padding: 16px !important;
    gap: 10px !important;
  }

  .lg-testi-card blockquote {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  .lg-testi-metrics .val {
    font-size: 14px !important;
  }

  .lg-testi-metrics .lbl {
    font-size: 7px !important;
  }
}

/* ── FIX 10 : CTA rejoindre — cards ── */
@media (max-width: 600px) {
  .lg-cta-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .lg-cta-card {
    padding: 20px 16px !important;
  }

  .lg-cta-card h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .lg-cta-card>p {
    font-size: 12px !important;
  }

  .lg-cta-list li {
    font-size: 11px !important;
  }

  .lg-cta-email {
    font-size: 13px !important;
    padding: 11px 12px !important;
  }
}

/* ── FIX 11 : Footer ── */
@media (max-width: 600px) {
  .lg-footer.lg-snap-section {
    height: auto !important;
    min-height: auto !important;
    padding: calc(var(--navbar-h) + 16px) 20px 32px !important;
    overflow: visible !important;
  }

  .lg-footer-inner {
    gap: 14px !important;
  }

  .lg-footer-tagline {
    font-size: 12px !important;
    text-align: left !important;
  }

  .lg-footer-sub {
    text-align: left !important;
  }

  .lg-footer-nav {
    gap: 4px 16px !important;
  }

  .lg-footer-nav a {
    font-size: 12px !important;
  }
}

/* ── FIX 12 : Burger nav ── */
@media (max-width: 600px) {
  .lg-nav-burger {
    display: flex !important;
    z-index: 10000 !important;
    min-width: 32px !important;
    min-height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .lg-nav-links {
    display: none !important;
  }
}

/* ── FIX 13 : iPhone SE (375–390px) ── */
@media (max-width: 390px) {
  .lg-hero-h1 {
    font-size: 26px !important;
    letter-spacing: -1.5px !important;
    line-height: 1.1 !important;
  }

  .lg-hero-desc {
    font-size: 13px !important;
  }

  .lg-split-h2,
  .lg-how-h2,
  .lg-stats-inner .lg-section-header h2,
  .lg-section-header h2 {
    font-size: 24px !important;
    letter-spacing: -1.5px !important;
  }

  .lg-mission-panel-title {
    font-size: 22px !important;
  }

  .lg-testi-card blockquote {
    font-size: 11.5px !important;
  }

  .lg-cta-card h3 {
    font-size: 16px !important;
  }

  .kpi-value {
    font-size: 22px !important;
  }

  .merged-card .kpi-value {
    font-size: 28px !important;
  }
}

/* ===========================================================
   FIX SIMULATEUR MOBILE — iPhone / Android (≤ 768px)
   Cible : débordement graphique, zone blanche, cards trop larges
   =========================================================== */

/* ── Fond global : s'assurer qu'aucun fond blanc ne transparaît ── */
@media (max-width: 768px) {

  /* Section entière : fond et containment */
  .lg-simulator-section,
  .lg-simulator-section .lg-section-inner,
  .simulator-dual-layout,
  .simulator-sidebar,
  .simulator-content,
  .dashboard-panel,
  .dashboard-panel.active {
    background: transparent;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Force layout colonne unique pour le dual layout */
  .simulator-dual-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  /* Sidebar : pleine largeur, hauteur auto */
  .simulator-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    border-radius: 10px !important;
    padding: 16px !important;
  }

  /* Content zone : pleine largeur */
  .simulator-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  /* Dashboard panels */
  .dashboard-panel,
  .dashboard-panel.active {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    overflow: visible !important;
  }

  /* ── KPI grid : 1 colonne sur iPhone ── */
  .sim-grid-kpi {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }

  /* KPI à 2 colonnes si l'écran le permet (≥ 400px) */
  @media (min-width: 400px) {
    .sim-grid-kpi {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  /* ── Main grid : colonne unique absolue ── */
  .sim-grid-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  /* ── PNL col wrapper : colonne unique ── */
  .pnl-col-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
  }

  /* ── Dash cards : largeur contrainte, pas de min-width fixe ── */
  .dash-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    overflow: hidden !important;
  }

  /* PNL card : on enlève la hauteur fixe */
  .pnl-card {
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    padding: 14px !important;
  }

  /* Flex-grow card : hauteur fixe pour le graphique */
  .flex-grow-card {
    height: auto !important;
    min-height: 220px !important;
    flex: none !important;
  }

  /* Merged card */
  .merged-card {
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
    padding: 16px !important;
  }

  /* ── GRAPHIQUE CHART.JS : LE COUPABLE PRINCIPAL ── */
  /* Le conteneur doit avoir une taille fixe connue */
  .chart-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Le canvas lui-même ne doit JAMAIS dépasser son conteneur */
  .chart-container canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 200px !important;
    display: block !important;
  }

  /* ── Table PNL : empêcher le débordement horizontal ── */
  .pnl-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
    font-size: 9px !important;
  }

  .pnl-table th,
  .pnl-table td {
    font-size: 9px !important;
    padding: 5px 2px !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Première colonne peut prendre plus de place */
  .pnl-table th:first-child,
  .pnl-table td:first-child {
    width: 42% !important;
    white-space: normal !important;
  }

  .pnl-table thead th {
    font-size: 8px !important;
  }

  .pnl-table tfoot td {
    font-size: 10px !important;
    padding-top: 8px !important;
  }

  #pnl-net-k {
    font-size: 11px !important;
  }

  /* ── KPI values ── */
  .kpi-value {
    font-size: clamp(20px, 6vw, 28px) !important;
    letter-spacing: -0.5px !important;
  }

  .kpi-label {
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
  }

  .kpi-delta {
    font-size: 10px !important;
  }

  .kpi-delta-label {
    font-size: 9px !important;
  }

  /* ── Merged card KPI ── */
  .merged-card .kpi-value {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  .merged-top {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* ── Sliders : zone tactile plus grande sur mobile ── */
  .big-slider {
    height: 6px !important;
  }

  .big-slider::-webkit-slider-thumb {
    width: 22px !important;
    height: 22px !important;
  }

  .big-slider::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
  }

  /* ── Toggle tabs : plus grand pour les doigts ── */
  .toggle-option {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  /* ── Card title ── */
  .card-title {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }

  /* ── Bouton CTA dans merged card ── */
  .merged-card .lg-btn-primary,
  .merged-card a.lg-btn-primary {
    padding: 13px 16px !important;
    font-size: 13px !important;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }
}

/* ── Très petit écran (iPhone SE 375px) ── */
@media (max-width: 390px) {
  .sim-grid-kpi {
    grid-template-columns: 1fr !important;
  }

  .kpi-value {
    font-size: 20px !important;
  }

  .merged-card .kpi-value {
    font-size: 26px !important;
  }

  .chart-container {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }

  .pnl-table th,
  .pnl-table td {
    font-size: 8px !important;
  }
}

/* ===========================================================
   MISSION H2 NAV — Phrases cliquables animées
   Remplace les tabs redondants par les phrases du H2 elles-mêmes
   =========================================================== */

/* Conteneur vertical des 3 phrases */
.lg-mission-h2-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0 24px;
}

/* Chaque ligne-bouton : style H2 taille-titre */
.lg-mission-h2-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 18px 0 18px 4px;
  cursor: pointer;
  text-align: left;
  position: relative;
  outline: none;
  transition: none;
  /* On gère la couleur nous-mêmes */
}

.lg-mission-h2-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Le texte principal — taille H2 exacte */
.lmh-line {
  display: block;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -2.5px;
  line-height: 1.02;
  transition: color 0.6s ease;
  /* Par défaut : gris très atténué */
  color: rgba(240, 238, 232, 0.14);
  /* Le mot accentué suit la même couleur par défaut */
}

/* Mot accentué (pouvoir / route / métier) */
.lmh-accent {
  transition: color 0.6s ease;
  color: rgba(232, 184, 75, 0.18);
  /* or très atténué quand inactif */
}

/* ── État ACTIF : phrase illuminée ── */
.lg-mission-h2-item.active .lmh-line {
  color: var(--text);
  /* blanc/crème éclatant */
}

.lg-mission-h2-item.active .lmh-accent {
  color: var(--gold);
  /* or vif */
}

/* ── Hover non-actif : légère révélation ── */
.lg-mission-h2-item:not(.active):hover .lmh-line {
  color: rgba(240, 238, 232, 0.38);
}

.lg-mission-h2-item:not(.active):hover .lmh-accent {
  color: rgba(232, 184, 75, 0.45);
}

/* ── Barre de progression en bas de la ligne active ── */
.lmh-progress {
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  border-radius: 2px;
  opacity: 0;
  transition: width linear;
  /* durée gérée dynamiquement en JS */
}

.lg-mission-h2-item.active .lmh-progress {
  opacity: 1;
}

/* Lead text (sous les phrases) */
.lg-mission-lead {
  margin-top: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

/* ── Responsive mobile ── */
@media (max-width: 991px) {
  .lg-mission-h2-nav {
    margin: 12px 0 16px;
  }

  .lg-mission-h2-item {
    padding: 14px 0 14px 2px;
  }

  .lmh-line {
    font-size: clamp(26px, 7vw, 38px) !important;
    letter-spacing: -2px !important;
  }
}

@media (max-width: 600px) {
  .lmh-line {
    font-size: clamp(22px, 8.5vw, 32px) !important;
    letter-spacing: -1.5px !important;
  }

  .lg-mission-h2-item {
    padding: 12px 0 !important;
  }
}

@media (max-width: 390px) {
  .lmh-line {
    font-size: 22px !important;
    letter-spacing: -1px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   AMBASSADOR — classes partagées (utilisées par la v5)
   ══════════════════════════════════════════════════════════════ */

.lg-ambassador-section {
  background: var(--ink2);
}

/* Diamant doré dans le kicker */
.lg-amb-diamond {
  color: var(--gold);
  margin-right: 6px;
  font-size: 9px;
  vertical-align: middle;
}

/* Pilier / tab : reset bouton — styles visuels gérés par .lg-amb-c-tab */
.lg-amb-pillar {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
}

/* Panel de contenu — override complet par .lg-amb-c-panel (tout en !important) */
.lg-amb-panel {
  display: none;
  flex-direction: column;
}

.lg-amb-panel.active {
  display: flex;
}

@keyframes lgAmbFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL FIXED VIDEO BACKGROUND
   La vidéo Paris est fixe derrière toutes les sections du home.
   Les sections scrollent par-dessus avec un overlay semi-opaque.
   ══════════════════════════════════════════════════════════════ */

/* ── Conteneur vidéo fixe ── */
.lg-global-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* derrière tout : sections z-index 1+ */
  pointer-events: none;
  overflow: hidden;
}

.lg-global-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  /* encore plus visible */
}

.lg-global-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(3, 3, 5, 0.25) 0%,
      rgba(3, 3, 5, 0.05) 55%,
      rgba(3, 3, 5, 0.20) 100%);
}

/* ── Sections transparentes avec tint individuel ── */
/* On retire les fonds solides des sections et on pose un pseudo-overlay */
.lg-snap-page .lg-snap-section {
  background: transparent !important;
  position: relative;
  z-index: 1;
  /* au-dessus de la vidéo fixe */
}

/* Tint individuel par section — ajuster au goût */
.lg-hero {
  --sec-tint: rgba(3, 3, 5, 0.48);
}


.lg-stats {
  --sec-tint: rgba(3, 3, 5, 0.52);
}

.lg-split-a {
  --sec-tint: rgba(3, 3, 5, 0.48);
}

.lg-split-b {
  --sec-tint: rgba(3, 3, 5, 0.56);
}


.lg-how {
  --sec-tint: rgba(3, 3, 5, 0.58);
}

.lg-testi {
  --sec-tint: rgba(3, 3, 5, 0.50);
}

.lg-cta {
  --sec-tint: rgba(3, 3, 5, 0.52);
}

.lg-amb {
  --sec-tint: rgba(3, 3, 5, 0.54);
}

.lg-footer {
  --sec-tint: rgba(3, 3, 5, 0.92);
}

/* footer quasi-opaque */

/* Overlay via ::after sur chaque section.
   ::before est réservé aux décorations radiales existantes. */
.lg-snap-page .lg-snap-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sec-tint, rgba(3, 3, 5, 0.48));
  z-index: 1;
  /* au-dessus du ::before décoratif */
  pointer-events: none;
}

/* Le contenu des sections doit passer au-dessus du tint ::after */
.lg-snap-page .lg-snap-section>* {
  position: relative;
  z-index: 2;
}


/* ══════════════════════════════════════════════════════════════
   AMBASSADOR v5 — LAYOUT CENTRÉ MINIMALISTE
   Remplace entièrement le layout split gauche/droite.
   Toutes les règles anciennes restent mais ne s'appliquent plus
   (lg-amb-left / lg-amb-right absents du nouveau HTML).
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper principal : colonne centrée ── */
.lg-amb-center-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 56px 32px !important;
  gap: 0 !important;
}

/* ── En-tête centré ── */
.lg-amb-c-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 52px;
}

.lg-amb-c-h2 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -2.8px;
  line-height: 1.04;
  color: var(--text);
  margin: 0;
}

.lg-amb-c-lead {
  font-size: 16px;
  color: rgba(240, 238, 232, 0.55);
  max-width: 540px;
  line-height: 1.7;
  margin: 0;
}

/* ── Tabs — 5 piliers en ligne ── */
.lg-amb-c-tabs {
  display: flex;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 48px;
  overflow: hidden;
}

.lg-amb-c-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 2.5px solid transparent;
  padding: 18px 8px 16px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: background 0.3s ease, border-bottom-color 0.3s ease;
}

.lg-amb-c-tab:last-child {
  border-right: none;
}

.lg-amb-c-tab:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Numéro */
.lg-amb-c-num {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.18);
  transition: color 0.4s ease;
  line-height: 1;
}

/* Label */
.lg-amb-c-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(240, 238, 232, 0.26);
  letter-spacing: -0.1px;
  line-height: 1.3;
  transition: color 0.4s ease;
}

/* ── État ACTIF du tab ── */
.lg-amb-pillar.active.lg-amb-c-tab {
  border-bottom-color: var(--gold) !important;
  background: rgba(232, 184, 75, 0.04) !important;
}

.lg-amb-pillar.active .lg-amb-c-num {
  color: var(--gold) !important;
}

.lg-amb-pillar.active .lg-amb-c-lbl {
  color: var(--text) !important;
}

/* Hover non-actif */
.lg-amb-pillar:not(.active).lg-amb-c-tab:hover .lg-amb-c-num {
  color: rgba(255, 255, 255, 0.42);
}

.lg-amb-pillar:not(.active).lg-amb-c-tab:hover .lg-amb-c-lbl {
  color: rgba(240, 238, 232, 0.5);
}

/* ── Zone de contenu ── */
.lg-amb-c-content {
  width: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}

/* ── Panels — override COMPLET des anciens styles ── */
.lg-amb-c-panel {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  animation: lgAmbCFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.lg-amb-c-panel.active {
  display: flex !important;
}

@keyframes lgAmbCFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── KPI principal ── */
.lg-amb-c-kpi-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1;
}

.lg-amb-c-kpi {
  font-size: clamp(52px, 8vw, 80px);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -4px;
  line-height: 1;
  display: inline-block;
}

.lg-amb-c-kpi-sup {
  font-size: 0.45em;
  letter-spacing: -1px;
  vertical-align: super;
}

.lg-amb-c-kpi-unit {
  font-size: 14px;
  color: rgba(240, 238, 232, 0.45);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── Description ── */
.lg-amb-c-desc {
  font-size: 15px;
  color: rgba(240, 238, 232, 0.68);
  line-height: 1.78;
  max-width: 580px;
  margin: 0;
}

.lg-amb-c-desc strong {
  color: var(--text);
  font-weight: 700;
}

/* ── CTA centré ── */
.lg-amb-c-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lg-amb-c-cta .lg-btn-primary {
  min-width: 220px;
  justify-content: center;
}

.lg-amb-c-hint {
  font-size: 11px;
  color: rgba(240, 238, 232, 0.28);
  letter-spacing: 0.5px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Ambassador centré
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .lg-amb-center-wrap {
    padding: 44px 20px !important;
  }

  .lg-amb-c-header {
    margin-bottom: 36px;
  }

  .lg-amb-c-h2 {
    font-size: clamp(34px, 8vw, 54px);
    letter-spacing: -2px;
  }

  .lg-amb-c-lead {
    font-size: 14px;
  }

  /* Tabs : scroll horizontal sur mobile tablette */
  .lg-amb-c-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 36px;
  }

  .lg-amb-c-tabs::-webkit-scrollbar {
    display: none;
  }

  .lg-amb-c-tab {
    min-width: 110px;
    flex-shrink: 0;
    padding: 14px 6px 12px;
  }

  .lg-amb-c-lbl {
    font-size: 10.5px;
  }

  .lg-amb-c-kpi {
    font-size: clamp(44px, 12vw, 64px);
    letter-spacing: -3px;
  }

  .lg-amb-c-kpi-unit {
    font-size: 13px;
  }

  .lg-amb-c-desc {
    font-size: 14px;
  }

  .lg-amb-c-content {
    margin-bottom: 36px;
  }
}

@media (max-width: 480px) {
  .lg-amb-center-wrap {
    padding: 32px 16px !important;
  }

  .lg-amb-c-h2 {
    font-size: clamp(30px, 10vw, 44px);
    letter-spacing: -1.5px;
  }

  .lg-amb-c-tab {
    min-width: 88px;
    padding: 12px 4px 10px;
  }

  .lg-amb-c-num {
    font-size: 8px;
  }

  .lg-amb-c-lbl {
    font-size: 9.5px;
  }

  .lg-amb-c-kpi {
    font-size: clamp(40px, 14vw, 56px);
    letter-spacing: -2px;
  }

  .lg-amb-c-desc {
    font-size: 13.5px;
    line-height: 1.72;
  }

  .lg-amb-c-cta .lg-btn-primary {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   AMBASSADOR — CORRECTIFS MOBILE
   5 bugs identifiés et corrigés pour iPhone SE → iPhone 14
   ══════════════════════════════════════════════════════════════ */

/* ── Fix 1 : libérer le scroll (overflow: hidden de .lg-snap-section
   coupe le CTA sur petits écrans ≤600px) ── */
@media (max-width: 600px) {
  .lg-ambassador-section {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Garder le snap align pour la nav dots */
    scroll-snap-align: start;
  }
}

/* ── Fix DOUBLE AFFICHAGE résolu via JS (accordion désactivé pour
   le nouveau layout centré). On s'assure que .lg-amb-c-content
   est visible sur mobile et bien stylisé ── */
@media (max-width: 991px) {

  /* L'accordion JS ne crée plus rien : le conteneur desktop reste actif */
  .lg-ambassador-section .lg-amb-c-content {
    display: flex !important;
  }

  /* Layout global mobile : colonne serrée */
  .lg-amb-center-wrap {
    padding: 24px 0 32px !important;
    gap: 0 !important;
  }

  /* Header : espacements réduits */
  .lg-amb-c-header {
    padding: 0 20px;
    margin-bottom: 28px !important;
    gap: 12px !important;
  }

  /* H2 : compact mais impactant */
  .lg-amb-c-h2 {
    font-size: clamp(32px, 8vw, 50px) !important;
    letter-spacing: -2px !important;
  }

  /* Lead text : visible sur ≥431px, caché en dessous */
  .lg-amb-c-lead {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  /* Tabs : scroll horizontal sans scrollbar visible */
  .lg-amb-c-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin-bottom: 24px !important;
    border-left: none !important;
    border-right: none !important;
  }

  .lg-amb-c-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .lg-amb-c-tab {
    min-width: 100px !important;
    flex-shrink: 0 !important;
    padding: 14px 6px 12px !important;
  }

  /* Contenu du panel actif : centré, padding horizontal */
  .lg-amb-c-content {
    padding: 0 20px !important;
    margin-bottom: 24px !important;
    min-height: 120px !important;
  }

  /* Panel : bien centré */
  .lg-amb-c-panel {
    padding: 0 !important;
    gap: 12px !important;
  }

  /* KPI + unité sur la même ligne */
  .lg-amb-c-kpi-line {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: center !important;
  }

  .lg-amb-c-kpi {
    font-size: clamp(42px, 10vw, 60px) !important;
    letter-spacing: -2.5px !important;
    flex-shrink: 0 !important;
  }

  .lg-amb-c-kpi-unit {
    font-size: 12px !important;
    max-width: 110px !important;
    text-align: left !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .lg-amb-c-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }

  /* CTA : full width */
  .lg-amb-c-cta {
    padding: 0 20px !important;
    gap: 8px !important;
  }

  .lg-amb-c-cta .lg-btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}



/* ── Fix 2+3 : compacter paddings et marges sur très petit écran ── */
@media (max-width: 480px) {
  .lg-amb-center-wrap {
    padding: 20px 16px 28px !important;
  }

  .lg-amb-c-header {
    margin-bottom: 20px !important;
    gap: 10px !important;
  }

  .lg-amb-c-content {
    margin-bottom: 20px !important;
    min-height: 100px !important;
  }

  .lg-amb-c-tabs {
    margin-bottom: 20px !important;
  }

  .lg-amb-c-cta {
    gap: 8px !important;
  }
}

/* ── Fix 4 : lead text trop long sur très petit écran
   Les panels texte fournissent déjà l'explication ── */
@media (max-width: 430px) {
  .lg-amb-c-lead {
    display: none !important;
  }
}

/* ── Fix 5 : KPI trop grand + kpi-unit qui wrap sur 2 lignes ── */
@media (max-width: 480px) {
  .lg-amb-c-kpi-line {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .lg-amb-c-kpi {
    font-size: clamp(36px, 11vw, 48px) !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    flex-shrink: 0;
  }

  .lg-amb-c-kpi-unit {
    font-size: 11px !important;
    white-space: normal !important;
    max-width: 100px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
}

/* ── Bonus : H2 encore plus compact sur iPhone SE ── */
@media (max-width: 390px) {
  .lg-amb-c-h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
    letter-spacing: -1.2px !important;
  }

  .lg-amb-c-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .lg-amb-c-tab {
    min-width: 76px !important;
    padding: 10px 3px 9px !important;
  }

  .lg-amb-c-lbl {
    font-size: 9px !important;
  }
}