/* =========================================================================
   Lil Broker — feuille de style du site vitrine
   Charte reprise de l'app Flutter (lib/src/theme) :
   couleurs AppColors, typographies Kanit + Plus Jakarta Sans, fond « glow ».
   Thème sombre uniquement, comme l'application.
   ========================================================================= */

/* ----------  Polices (copiées depuis flutter/assets/fonts)  ------------- */
@font-face {
  font-family: 'Kanit';
  src: url('../assets/fonts/kanit/Kanit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../assets/fonts/kanit/Kanit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('../assets/fonts/kanit/Kanit-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../assets/fonts/jakarta/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../assets/fonts/jakarta/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../assets/fonts/jakarta/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../assets/fonts/jakarta/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../assets/fonts/jakarta/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/* ----------  Jetons de design (AppColors / AppSpacing)  ----------------- */
:root {
  --bg: #141318;
  --bg-gradient-top: #180e3f;
  --surface: #1f1d25;
  --surface-raised: #26232f;

  --primary: #ffb422;
  --primary-dark: #ee7c12;
  --on-primary: #141318;

  --text: #ffffff;
  --text-secondary: #92a0a9;

  --positive: #08a045;
  --negative: #ff3333;

  --border-decorative: #4421ce;
  --border-active: #7b5cf0;
  --glow: #7277f5;
  --glow-blue: #16009e;
  --glow-red: #9e0000;

  --radius-btn: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 64px;

  --maxw: 1120px;
  --font-body: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Kanit', 'Jakarta', system-ui, sans-serif;

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  /* Fond commun à tous les écrans de l'app : dégradé vertical violet profond
     -> presque noir, plus deux halos (bleu en haut à droite, rouge en bas à
     gauche), repris de AnimatedGlowBackground. */
  background-image:
    radial-gradient(60% 50% at 100% 0%, rgba(22, 0, 158, 0.55) 0%, rgba(22, 0, 158, 0) 60%),
    radial-gradient(55% 45% at 0% 100%, rgba(158, 0, 0, 0.28) 0%, rgba(158, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--bg) 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}
img,
video {
  height: auto;
  display: block;
}

/* Empêche les enfants de grille/flex (images, textes longs) d'imposer une
   largeur mini supérieure au conteneur — cause classique de débordement
   horizontal sur mobile. */
.hero__grid > *,
.steps > *,
.features > *,
.footer__grid > * {
  min-width: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--md);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2rem, 6.4vw, 4rem);
  font-weight: 900;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

p {
  margin: 0 0 var(--md);
}

:focus-visible {
  outline: 3px solid var(--border-active);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--sm) var(--md);
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus {
  left: var(--sm);
  top: var(--sm);
}

/* ----------  Utilitaires de mise en page  ----------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--lg);
}

.section {
  position: relative;
  padding-block: clamp(2.25rem, 5.5vw, 4.25rem);
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--lg);
}
.section__head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: var(--sm);
}

.lead {
  font-size: 1.15rem;
  color: var(--text-secondary);
}

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

/* ----------  Boutons (PrimaryButton / OutlineGradientButton)  -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-align: center;
  line-height: 1.2;
}
.btn:hover {
  text-decoration: none;
}

.btn--primary {
  /* Dégradé sombre -> clair de bas en haut, texte sombre : AppColors.primaryDecoration. */
  background-image: linear-gradient(0deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--on-primary);
  box-shadow: 0 10px 30px -10px rgba(255, 180, 34, 0.6);
}
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 40px -12px rgba(255, 180, 34, 0.7);
}


.btn--lg {
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}
.btn--block {
  width: 100%;
}

/* ----------  En-tête / navigation  ---------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(20, 19, 24, 0.72);
  border-bottom: 1px solid rgba(68, 33, 206, 0.4);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--text);
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border-decorative);
}
.brand span b {
  color: var(--primary);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: var(--text);
  font-weight: 500;
  font-size: 0.98rem;
}
.nav__links a:hover {
  color: var(--primary);
  text-decoration: none;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-decorative);
  border-radius: var(--radius-btn);
  width: 44px;
  height: 40px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.nav__toggle svg {
  width: 22px;
  height: 22px;
  margin: auto;
}

@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
    flex: none;
  }
  .nav__links {
    display: none;
  }
  .nav__cta {
    gap: 0.5rem;
  }
  .nav__cta .btn--primary {
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
  }
  .container {
    padding-inline: var(--md);
  }
  .brand span {
    font-size: 1rem;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .nav__links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-decorative);
    padding: var(--sm) var(--lg) var(--lg);
  }
  .nav__links.open {
    display: flex;
  }
  .nav__links a {
    padding-block: 0.85rem;
    border-top: 1px solid rgba(68, 33, 206, 0.35);
  }
}
@media (max-width: 480px) {
  .brand span {
    display: none;
  }
  .nav__cta .btn--primary {
    padding: 0.65rem 0.7rem;
    font-size: 0.82rem;
  }
}

/* ----------  Hero  ------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.25rem, 6.5vw, 4.5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-active);
  background: rgba(114, 119, 245, 0.12);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: var(--lg);
}
.hero__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 4px rgba(8, 160, 69, 0.25);
}
/* Texte en dégradé lumineux, repris des visuels App Store / Google Play
   (titres "entre potes", "Domine.", "en direct" ...). background-clip:text
   + filter:drop-shadow plutôt que text-shadow, qui ne peut pas se combiner
   avec un fond en dégradé sur du texte transparent. */
.accent,
.glow-text {
  background-image: linear-gradient(180deg, #ffe17a 0%, var(--primary) 45%, var(--primary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 180, 34, 0.55)) drop-shadow(0 4px 30px rgba(238, 124, 18, 0.3));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .accent,
  .glow-text {
    background-image: none;
    color: var(--primary);
    -webkit-text-fill-color: unset;
  }
}
.hero__sub {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 34ch;
}
.hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--lg);
}
.hero__stores--lg {
  gap: var(--md);
}
.hero__note {
  margin-top: var(--md);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.hero__art {
  position: relative;
}
.hero__art {
  min-width: 0;
}
.hero__art img,
.hero__art video {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(114, 119, 245, 0.35));
}
.hero__art video {
  border-radius: 28px;
  border: 1px solid var(--border-decorative);
  background: #000;
}

/* Vignette « store » réutilisable */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-decorative);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}
.store-badge small {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.store-badge svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Variante mise en avant : même habillage sombre que .store-badge, juste
   plus grande (les stores sont le seul appel à l'action du hero). Pas de
   dégradé « bouton » : l'app n'est pas encore en ligne, ces badges ne sont
   pas cliquables (ce sont des <span>, pas des liens). */
.store-badge--lg {
  padding: 1rem 1.5rem;
  gap: 0.85rem;
  font-size: 1.05rem;
  cursor: default;
}
.store-badge--lg svg {
  width: 28px;
  height: 28px;
}

/* ----------  Bandeau de chiffres  ------------------------------------ */
.stats {
  border-block: 1px solid rgba(68, 33, 206, 0.4);
  background: rgba(31, 29, 37, 0.5);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--md);
  padding-block: var(--lg);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  background-image: linear-gradient(180deg, #ffe17a 0%, var(--primary) 45%, var(--primary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 180, 34, 0.4));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num {
    background-image: none;
    color: var(--primary);
    -webkit-text-fill-color: unset;
  }
}
.stat__label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lg) var(--md);
  }
}

/* ----------  Cartes génériques  ------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-decorative);
  border-radius: var(--radius-lg);
  padding: var(--lg);
}

/* ----------  « Comment ça marche »  -------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lg);
  counter-reset: step;
}
.step {
  position: relative;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--on-primary);
  background-image: linear-gradient(0deg, var(--primary-dark), var(--primary));
  margin-bottom: var(--md);
}
.step h3 {
  margin-bottom: var(--sm);
}
.step p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  margin: 0;
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ----------  Grille de fonctionnalités  --------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lg);
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(114, 119, 245, 0.14);
  border: 1px solid var(--border-decorative);
  color: var(--glow);
}
.feature__icon svg {
  width: 26px;
  height: 26px;
}
.feature h3 {
  margin: 0;
  font-size: 1.15rem;
}
.feature p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}
@media (max-width: 900px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .features {
    grid-template-columns: 1fr;
  }
}

/* ----------  Décor flottant (avatars / courbes / valeurs)  ----------
   Purement décoratif (aria-hidden côté HTML) : avatars du jeu, mini-courbes
   et puces de valeurs façon ticker, posés en bordure des sections pour
   rappeler l'univers du jeu sans gêner la lecture. Masqué sous 760px pour
   ne pas encombrer les petits écrans. */
.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.floater {
  position: absolute;
  animation: floater-bob 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.92;
}
@keyframes floater-bob {
  0%,
  100% {
    transform: translateY(0) rotate(var(--tilt, -3deg));
  }
  50% {
    transform: translateY(-12px) rotate(var(--tilt, -3deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .floater {
    animation: none;
  }
}

.floater--avatar {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-decorative);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
  --tilt: -4deg;
}
.floater--avatar:nth-of-type(even) {
  --tilt: 5deg;
}
.floater--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.floater--avatar.floater--sm {
  width: 50px;
  height: 50px;
  border-radius: 14px;
}

.floater--chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(20, 19, 24, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-decorative);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
  --tilt: 3deg;
}
.floater--chip span {
  font-family: var(--font-body);
  font-weight: 700;
}
.floater--chip.floater--up span {
  color: var(--positive);
}
.floater--chip.floater--down span {
  color: var(--negative);
}

.floater--chart {
  width: 76px;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  background: rgba(20, 19, 24, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-decorative);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
  --tilt: -2deg;
}
.floater--chart svg {
  width: 100%;
  height: 22px;
  overflow: visible;
}
.floater--chart polyline {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floater--chart.floater--up polyline {
  stroke: var(--positive);
  filter: drop-shadow(0 0 4px rgba(8, 160, 69, 0.6));
}
.floater--chart.floater--down polyline {
  stroke: var(--negative);
  filter: drop-shadow(0 0 4px rgba(255, 51, 51, 0.5));
}

@media (max-width: 760px) {
  .floaters {
    display: none;
  }
}

/* ----------  Cartes bonus  ------------------------------------------ */
.bonus {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--md);
}
.bonus__card {
  background: var(--surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  padding: var(--md);
  text-align: center;
}
.bonus__card img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: var(--sm);
}
.bonus__card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}
.bonus__card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 900px) {
  .bonus {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .bonus {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------  Aperçu (mockups) — carousel  -------------------------- */
.carousel {
  position: relative;
}
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 240px);
  gap: var(--lg);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-block: var(--sm) var(--md);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lg);
  /* Cache la scrollbar native : la navigation passe par les flèches/points. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shots::-webkit-scrollbar {
  display: none;
}
.shots figure {
  margin: 0;
  scroll-snap-align: start;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.shots img {
  width: 100%;
  border-radius: 26px;
  border: 1px solid var(--border-decorative);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.shots figure:hover img {
  border-color: var(--border-active);
  box-shadow: 0 24px 60px -16px rgba(114, 119, 245, 0.45);
}
.shots figcaption {
  margin-top: var(--sm);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Voile de dégradé aux bords, pour signaler qu'il y a plus de contenu. */
.carousel::before,
.carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(var(--md) + 2rem);
  width: clamp(16px, 4vw, 48px);
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(20, 19, 24, 0.95), rgba(20, 19, 24, 0));
}
.carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(20, 19, 24, 0.95), rgba(20, 19, 24, 0));
}
.carousel.at-start::before,
.carousel.at-end::after {
  opacity: 0;
}
.carousel:not(.is-scrollable)::before,
.carousel:not(.is-scrollable)::after {
  display: none;
}

.carousel__btn {
  position: absolute;
  top: calc(50% - 1.1rem);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 19, 24, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-active);
  color: var(--text);
  cursor: pointer;
  z-index: 4;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.2s ease, box-shadow 0.15s ease;
}
.carousel__btn:hover {
  background: var(--surface-raised);
  box-shadow: 0 8px 24px -8px rgba(114, 119, 245, 0.6);
}
.carousel__btn:active {
  transform: translateY(-50%) scale(0.92);
}
.carousel__btn svg {
  width: 20px;
  height: 20px;
}
.carousel__btn--prev {
  left: -6px;
}
.carousel__btn--next {
  right: -6px;
}
.carousel__btn[disabled] {
  opacity: 0;
  pointer-events: none;
}
.carousel:not(.is-scrollable) .carousel__btn {
  display: none;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sm);
}
.carousel:not(.is-scrollable) .carousel__dots {
  display: none;
}
.carousel__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-decorative);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.carousel__dots button.active {
  background-image: linear-gradient(90deg, var(--primary-dark), var(--primary));
  width: 20px;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .carousel__btn {
    width: 38px;
    height: 38px;
  }
  .carousel__btn svg {
    width: 17px;
    height: 17px;
  }
  .carousel__btn--prev {
    left: 2px;
  }
  .carousel__btn--next {
    right: 2px;
  }
}

/* ----------  Badges  --------------------------------------------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg);
  justify-content: center;
}
.badge-item {
  width: 130px;
  text-align: center;
}
.badge-item img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-decorative);
}
.badge-item span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ----------  FAQ  ---------------------------------------------------- */
.faq {
  max-width: 820px;
  margin-inline: auto;
}
.faq details {
  border: 1px solid var(--border-decorative);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0 var(--lg);
  margin-bottom: var(--sm);
}
.faq details[open] {
  border-color: var(--border-active);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: var(--md) 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--primary);
  flex: none;
}
.faq details[open] summary::after {
  content: '\2013';
}
.faq details > p {
  margin-top: 0;
  padding-bottom: var(--md);
  color: var(--text-secondary);
}

/* ----------  Bandeau CTA final  ----------------------------------- */
.cta-band {
  position: relative;
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(114, 119, 245, 0.25), rgba(114, 119, 245, 0) 70%),
    var(--surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 3.5rem);
}
.cta-band h2 {
  margin-bottom: var(--sm);
}
.cta-band p {
  color: var(--text-secondary);
  max-width: 46ch;
  margin-inline: auto;
}
.cta-band .hero__stores {
  justify-content: center;
}

/* ----------  Pied de page  --------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(68, 33, 206, 0.4);
  padding-block: var(--xl) var(--lg);
  margin-top: var(--lg);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--lg);
  margin-bottom: var(--lg);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.footer__disclaimer {
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(68, 33, 206, 0.3);
  padding-top: var(--md);
  line-height: 1.6;
}

/* ----------  Animations d'apparition  --------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------  Responsive hero  ---------------------------------- */
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__sub {
    margin-inline: auto;
  }
  .hero__stores {
    justify-content: center;
  }
  .hero__art {
    order: -1;
  }
}

.hero__art {
  will-change: transform;
}
.hero__art img,
.hero__art video {
  transition: transform 0.25s ease;
}

/* ----------  Ticker (bandeau de marché décoratif)  ------------------- */
.ticker {
  border-block: 1px solid rgba(68, 33, 206, 0.4);
  background: rgba(31, 29, 37, 0.5);
  overflow: hidden;
  padding-block: 0.85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  animation: ticker-scroll 38s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
  .ticker {
    overflow-x: auto;
  }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ticker__item b {
  color: var(--text);
  font-weight: 700;
}
.ticker__item .chg {
  font-weight: 700;
  font-family: var(--font-body);
  transition: color 0.3s ease;
}
.ticker__item .chg.up {
  color: var(--positive);
}
.ticker__item .chg.down {
  color: var(--negative);
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ----------  Pages légales (confidentialité / suppression de compte)  -- */
.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.legal__back {
  display: inline-block;
  margin-bottom: var(--lg);
  font-size: 0.95rem;
}
.legal__intro {
  max-width: 760px;
  color: var(--text-secondary);
}
.legal__updated {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--lg);
}
.legal__content {
  max-width: 760px;
}
.legal__content h2 {
  margin-top: var(--xl);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.legal__content h3 {
  margin-top: var(--lg);
  font-size: 1.15rem;
}
.legal__content ul {
  margin: 0 0 var(--md);
  padding-left: 1.3em;
}
.legal__content li {
  margin-bottom: var(--xs);
}
.legal__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--lg);
}
.legal__content th,
.legal__content td {
  text-align: left;
  padding: var(--sm);
  border-bottom: 1px solid var(--border-decorative);
  vertical-align: top;
  font-size: 0.95rem;
}
.legal__content th {
  color: var(--text-secondary);
  font-weight: 600;
}
.legal__content .card {
  margin-top: var(--xl);
}
.legal__content .card p:last-child {
  margin-bottom: 0;
}

/* ----------  Compteurs animés  ---------------------------------------- */
.stat__num .count {
  font-variant-numeric: tabular-nums;
}