/* ============================================================
   BLAZE — Landing page
   Système visuel : "rétro thermique"
   - Dégradé heatmap rouge→magenta→bleu (comme l'app)
   - Trame de points (halftone) en surimpression
   - Cartes crème, contours noirs épais, ombres dures
   - Accent vert citron, flamme orange
   - Type : Fredoka (display rond/chunky) + Mulish (texte)
   ============================================================ */

:root {
  /* Thermique */
  --red:        #FF4E1A;
  --red-deep:   #E5331A;
  --ember:      #FF6A2C;
  --magenta:    #9B2FB0;
  --violet:     #5B2FD6;
  --blue:       #2733E8;
  --blue-deep:  #161B7A;

  /* Neutres chauds */
  --cream:      #F6EFDE;
  --cream-2:    #ECE3CC;
  --ink:        #15121B;
  --ink-soft:   #2a2530;

  /* Accent */
  --lime:       #C7F23C;
  --lime-deep:  #A9D826;

  /* tokens */
  --maxw: 1240px;
  --radius: 30px;
  --radius-sm: 18px;
  --border: 3px solid var(--ink);
  --shadow-hard: 0 7px 0 var(--ink);
  --shadow-hard-lg: 0 12px 0 var(--ink);
  --shadow-soft: 0 24px 60px -20px rgba(0,0,0,.55);

  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-back-hard: cubic-bezier(.22, 1.7, .36, 1);

  --accent: var(--lime);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Mulish", system-ui, sans-serif;
  color: var(--cream);
  background: #0a0a1f;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, h3, h4, .display {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  line-height: .98;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* halftone trame réutilisable */
.dots {
  background-image: radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.3px);
  background-size: 22px 22px;
}

/* ============================================================
   NAVBAR flottante
   ============================================================ */
.nav {
  position: fixed;
  top: 16px; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: top .35s var(--ease-back);
}
.nav-inner {
  pointer-events: auto;
  width: min(1180px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 22px;
  border-radius: 999px;
  border: 3px solid transparent;
  background: transparent;
  transition: background .4s ease, border-color .4s ease,
              box-shadow .4s ease, padding .35s var(--ease-back), transform .35s var(--ease-back);
}
.nav.scrolled { top: 10px; }
.nav.scrolled .nav-inner {
  background: rgba(20,17,28,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-color: rgba(246,239,222,.14);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
  padding: 9px 14px 9px 18px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 34px; transition: height .35s var(--ease-back); }
.nav.scrolled .nav-logo img { height: 28px; }

.nav-links {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.nav-links a {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: rgba(246,239,222,.82);
  padding: 9px 15px;
  border-radius: 999px;
  position: relative;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--cream); background: rgba(246,239,222,.1); }

.btn {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: var(--border);
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .18s var(--ease-back), box-shadow .18s ease, filter .2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: var(--cream);
  box-shadow: 0 5px 0 var(--ink);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); filter: saturate(1.1) brightness(1.05); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-lime { background: var(--accent); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn-lime:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn-lime:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-ghost {
  background: rgba(246,239,222,.08);
  color: var(--cream);
  border-color: rgba(246,239,222,.45);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(246,239,222,.18); transform: translateY(-2px); }
.nav .btn { padding: 11px 22px; font-size: 15px; }

.nav-burger,
.nav-mobile { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 150px 0 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -8% -4% -4% -4%;
  background: url("assets/hero-bg.png") center/cover no-repeat;
  z-index: -3;
  will-change: transform;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, transparent 40%, rgba(10,10,31,.35) 100%),
    linear-gradient(to bottom, transparent 60%, #0a0a1f 99%);
}
.hero-flame {
  position: absolute;
  z-index: -2;
  width: 540px;
  left: 50%; top: 50%;
  transform: translate(-50%,-46%);
  opacity: .9;
  filter: drop-shadow(0 0 60px rgba(255,90,30,.55));
  will-change: transform;
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: left;
  z-index: 5;
  max-width: 620px;
  margin-left: clamp(64px, 9vw, 150px);
  margin-right: auto;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border: var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
}
.hero h1 {
  font-size: clamp(54px, 9vw, 124px);
  font-weight: 600;
  margin: 26px 0 0;
  text-shadow: 0 6px 0 rgba(0,0,0,.28), 0 0 50px rgba(255,90,30,.35);
}
.hero h1 .em { color: var(--ember); }
.hero-sub {
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: rgba(246,239,222,.92);
  max-width: 560px;
  margin: 24px 0 0;
  font-weight: 500;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(246,239,222,.6);
  font-family: "Fredoka", sans-serif;
}

/* mains qui sortent des côtés */
.hand {
  position: absolute;
  bottom: -2%;
  width: min(30vw, 430px);
  z-index: 4;
  will-change: transform;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
.hand-left  { left: -3%;  transform-origin: bottom left; }
.hand-right { right: -3%; transform-origin: bottom right; }

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: "Fredoka", sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246,239,222,.7);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue .mouse {
  width: 24px; height: 38px;
  border: 2px solid rgba(246,239,222,.6);
  border-radius: 14px;
  position: relative;
}
.scroll-cue .mouse::after {
  content: ""; position: absolute; top: 7px; left: 50%;
  width: 4px; height: 7px; border-radius: 3px;
  background: var(--accent);
  transform: translateX(-50%);
  animation: wheel 1.5s infinite;
}
@keyframes wheel { 0%{opacity:1;top:7px} 70%{opacity:0;top:18px} 100%{opacity:0} }

.hero > .hand-left { display: none; }
.hero > .hand-right {
  bottom: -6%; right: -1%;
  width: min(34vw, 470px);
}
.hero > .hero-flame { left: 74%; width: 480px; }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
section { position: relative; }
.section {
  padding: 110px 0;
  position: relative;
}
.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember);
  display: inline-block;
  margin-bottom: 16px;
}
.section h2 {
  font-size: clamp(38px, 5.5vw, 72px);
  color: var(--cream);
}
.section h2 .accent { color: var(--accent); }
.section-sub {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(246,239,222,.72);
  font-weight: 500;
}

.bg-thermal {
  background: url("assets/hero-bg.png") center/cover fixed no-repeat;
}
.bg-blue {
  background: url("assets/bg-blue.png") center/cover no-repeat;
}
.bg-dark { background: #0a0a1f; }
.tint-dark::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(10,10,31,.5); z-index: 0;
}
.section > .wrap { position: relative; z-index: 1; }

/* ============================================================
   ACTIVITÉS (tuiles icônes)
   ============================================================ */
.activities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.act-card {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow-hard-lg);
  overflow: hidden;
  transition: transform .25s var(--ease-back), box-shadow .25s ease;
}
.act-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 20px 0 var(--ink); }
.act-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.act-card .label {
  padding: 16px 18px 20px;
  background: var(--cream);
}
.act-card .label h4 { font-size: 22px; color: var(--ink); }
.act-card .label p { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; font-weight: 600; }

/* ============================================================
   SHOWCASE (texte + téléphone)
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}
.showcase.flip .showcase-text { order: 2; }
.cardio-showcase .showcase-text { grid-column: 2; }
.showcase-text h3 { font-size: clamp(30px, 4vw, 50px); color: var(--cream); }
.showcase-text .lead { margin-top: 18px; font-size: 18px; line-height: 1.55; color: rgba(246,239,222,.78); font-weight: 500; }
.feature-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.feature-list li {
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16.5px;
  font-weight: 600;
  color: rgba(246,239,222,.9);
}
.feature-list .tick {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--accent);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 3px 0 var(--ink);
}

/* téléphone */
.phone {
  width: min(330px, 76%);
  margin: 0 auto;
  border: 8px solid var(--ink);
  border-radius: 46px;
  background: var(--ink);
  box-shadow: var(--shadow-soft), 0 0 0 3px rgba(246,239,222,.1);
  overflow: hidden;
  position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 22px; border-radius: 0 0 14px 14px;
  background: var(--ink); z-index: 3;
}
.phone img { width: 100%; display: block; }
.phone-wrap { position: relative; }
.phone-glow {
  position: absolute; inset: -8% -8% -12%;
  background: radial-gradient(circle at 50% 40%, rgba(255,80,30,.45), transparent 62%);
  z-index: -1; filter: blur(20px);
}

/* mains qui sortent des coins inférieurs des showcases */
.showcase-hand {
  position: absolute;
  bottom: 0;
  width: min(27vw, 390px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateX(112%) translateY(14%) rotate(13deg);
  transform-origin: bottom right;
  transition: transform 1.15s var(--ease-back-hard), opacity .48s ease;
  will-change: transform, opacity;
}
.showcase-hand-right {
  right: 0;
  transform: translateX(112%) translateY(14%) rotate(13deg);
  transform-origin: bottom right;
}
.showcase-hand-left {
  left: 0;
  transform: translateX(-112%) translateY(14%) rotate(-13deg);
  transform-origin: bottom left;
}
.showcase-hand img {
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
  transform-origin: bottom right;
  animation: showcase-hand-float 4.6s ease-in-out infinite;
  animation-play-state: paused;
}
.showcase-hand-left img { transform-origin: bottom left; }
.showcase-hand.show {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(0);
}
.showcase-hand.show img { animation-play-state: running; }
@keyframes showcase-hand-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(-1.8deg); }
}

/* deux téléphones (partage + chat) */
.phone-duo { position: relative; min-height: 540px; display: flex; justify-content: center; align-items: center; }
.phone-duo .phone { width: min(290px, 64%); position: absolute; }
.phone-duo .phone-back {
  transform: translate(-34%, -8%) rotate(-8deg) scale(.92);
  z-index: 1; opacity: .97;
}
.phone-duo .phone-front {
  transform: translate(26%, 7%) rotate(6deg);
  z-index: 2;
}

/* ============================================================
   STATS / streak / trophées
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 26px;
}
.stat-grid.two { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
.stat-side { display: flex; flex-direction: column; gap: 26px; }
.stat-side .card { flex: none; }
.card {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-hard-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.card.dark { background: var(--ink); color: var(--cream); }
.card h3 { font-size: 26px; }
.card.dark h3 { color: var(--cream); }

.streak-card {
  grid-row: span 2;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(21,18,27,.13) 1px, transparent 1.25px);
  background-size: 14px 14px;
}
.streak-card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  top: -82px;
  right: -56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,44,.25), rgba(255,106,44,0) 70%);
  pointer-events: none;
}
.streak-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.streak-flame {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 4px 0 var(--ink);
}
.streak-flame img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(255,78,26,.25));
}
.streak-num { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 64px; color: var(--red); line-height: 1; }
.streak-title { align-self: center; max-width: 88px; font-weight: 800; line-height: 1.05; }
.streak-cal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 9px;
  margin-top: 26px;
  padding: 14px;
  border: 2px solid rgba(21,18,27,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.44);
}
.streak-cal .cell {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1px solid rgba(21,18,27,.07);
  background: rgba(21,18,27,.09);
  transition: transform .3s var(--ease-back);
}
.streak-cal .cell.lit-1 { background: linear-gradient(135deg, var(--ember), var(--red)); box-shadow: 0 0 14px rgba(255,80,30,.5); }
.streak-cal .cell.lit-2 { background: linear-gradient(135deg, var(--red), var(--violet)); }
.streak-cal .cell.lit-3 { background: linear-gradient(135deg, var(--violet), var(--blue)); }
.streak-legend {
  position: relative;
  margin-top: 18px;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.mini-grid { display: grid; gap: 26px; }
.stat-num { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 56px; line-height: 1; }
.card.dark .stat-num { color: var(--accent); }
.stat-label { font-weight: 700; font-size: 14px; letter-spacing: .04em; margin-top: 6px; opacity: .8; }
.trophy-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.trophy {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 22px;
  border: 2px solid var(--ink);
  background: var(--cream);
  box-shadow: 0 3px 0 var(--ink);
}
.card.dark .trophy { border-color: rgba(246,239,222,.4); box-shadow: 0 3px 0 rgba(0,0,0,.6); }

/* Carte trophées (badges réels) — compacte, à droite du calendrier */
.trophy-card { background: var(--ink); color: var(--cream); padding: 24px; }
.trophy-card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.trophy-card-head h3 { color: var(--cream); font-size: 22px; }
.trophy-sub { margin-top: 8px; font-size: 15px; color: rgba(246,239,222,.66); font-weight: 600; max-width: 460px; }
.trophy-count {
  flex: none;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px;
  background: var(--accent); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px;
  min-width: 30px; text-align: center;
  padding: 5px 13px; box-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.trophy-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.trophy-badge {
  width: 100%;
  border-radius: 16px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transition: transform .3s var(--ease-back);
  cursor: pointer;
}
.trophy-badge:hover { transform: translateY(-6px) scale(1.06) rotate(-2deg); }

/* main décorative au raccord du hero et des activités */
.scroll-hand {
  position: absolute;
  left: -1px;
  top: -132px;
  width: min(27vw, 380px);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-112%) translateY(14%) rotate(-13deg);
  transform-origin: bottom left;
  transition: transform 1.15s var(--ease-back-hard), opacity .48s ease;
  will-change: transform, opacity;
}
.scroll-hand img {
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
  transform-origin: bottom left;
  animation: scroll-hand-float 4.6s ease-in-out infinite;
  animation-play-state: paused;
}
.scroll-hand.show {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(-4deg);
}
.scroll-hand.show img { animation-play-state: running; }
@keyframes scroll-hand-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(1.8deg); }
}
@media (max-width: 900px) { .scroll-hand { display: none; } }

/* ============================================================
   SYNC santé multiplateforme
   ============================================================ */
.sync-platform-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.sync-platform-pills span,
.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sync-platform-pills span {
  padding: 9px 12px;
  border: 1px solid rgba(246,239,222,.2);
  background: rgba(246,239,222,.07);
  color: rgba(246,239,222,.82);
}
.sync-platform-pills i { color: var(--accent); font-size: 9px; }
.sync-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: var(--border);
  border-radius: var(--radius);
  background: url("assets/hero-bg.png") center/cover no-repeat;
  color: var(--cream);
  box-shadow: var(--shadow-hard-lg);
}
.sync-card::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10,10,31,.16);
  pointer-events: none;
}
.sync-card-head,
.sync-platform,
.sync-privacy,
.sync-fire {
  display: flex;
  align-items: center;
}
.sync-card-head { position: relative; justify-content: space-between; gap: 14px; }
.sync-overline {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-family: "Fredoka", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sync-status {
  position: relative;
  padding: 7px 10px;
  border: 1px solid rgba(246,239,222,.22);
  background: rgba(10,10,31,.3);
  color: rgba(246,239,222,.84);
}
.sync-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #81b500;
  box-shadow: 0 0 0 3px rgba(129,181,0,.14);
}
.sync-fire {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  text-align: center;
}
.sync-fire > img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(255,78,26,.38));
}
.sync-fire strong {
  margin-top: 3px;
  color: var(--cream);
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  letter-spacing: .04em;
}
.sync-fire small {
  margin-top: 4px;
  color: rgba(246,239,222,.68);
  font-size: 11px;
  font-weight: 700;
}
.sync-platforms {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sync-platform {
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.sync-platform > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: #fff;
  color: var(--red);
  font-size: 18px;
  font-weight: 900;
}
.sync-platform-android > span { color: #45a166; }
.sync-platform b,
.sync-platform small { display: block; }
.sync-platform b { font-family: "Fredoka", sans-serif; font-size: 16px; }
.sync-platform small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.sync-platform-ios { transform: rotate(-1deg); }
.sync-platform-android { transform: rotate(1deg); }
.sync-platform-ios:hover,
.sync-platform-android:hover { transform: translateY(-3px); }
.sync-platform { transition: transform .25s var(--ease-back); }
.sync-metrics {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}
.sync-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(246,239,222,.16);
  border-radius: 999px;
  background: rgba(10,10,31,.32);
}
.sync-metric span { font-size: 13px; }
.sync-metric b { color: rgba(246,239,222,.82); font-size: 10px; }
.sync-privacy {
  position: relative;
  gap: 9px;
  margin-top: 16px;
  padding: 11px;
  border: 1px solid rgba(246,239,222,.14);
  border-radius: 13px;
  background: rgba(10,10,31,.24);
}
.sync-privacy > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.sync-privacy p { color: rgba(246,239,222,.68); font-size: 11px; font-weight: 700; }
.sync-privacy b { color: var(--cream); }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.quote {
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(21,18,27,.13) 1px, transparent 1.25px);
  background-size: 14px 14px;
  color: var(--ink);
  box-shadow: var(--shadow-hard-lg);
  padding: 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.quote:nth-child(2) {
  background-color: var(--accent);
  background-image: radial-gradient(rgba(21,18,27,.16) 1px, transparent 1.25px);
}
.quote .stars { color: var(--red); font-size: 18px; letter-spacing: 2px; }
.quote p { font-size: 17px; line-height: 1.5; font-weight: 600; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .ava {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, var(--red), var(--blue));
}
.quote .who b { font-family: "Fredoka", sans-serif; font-size: 16px; display: block; }
.quote .who span { font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  border: var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(21,18,27,.13) 1px, transparent 1.25px);
  background-size: 14px 14px;
  color: var(--ink);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 24px 26px;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q .plus {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: var(--cream);
  display: grid; place-items: center; font-size: 22px;
  transition: transform .35s var(--ease-back);
}
.faq-item.open .faq-q .plus { transform: rotate(135deg); background: var(--accent); color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a-inner { padding: 0 26px 24px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); font-weight: 500; }

/* ============================================================
   CTA final
   ============================================================ */
.final {
  padding: 120px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final .hero-flame { position: absolute; width: 460px; opacity: .85; }
.final h2 { font-size: clamp(44px, 7vw, 100px); color: var(--cream); text-shadow: 0 5px 0 rgba(0,0,0,.25); }
.final p { margin: 22px auto 0; max-width: 520px; font-size: 19px; color: rgba(246,239,222,.9); font-weight: 500; }
.final .wrap { position: relative; z-index: 3; }
.final .hero-cta {
  position: relative;
  z-index: 4;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

/* deux mains (2app mains), élément central, montée depuis le bas */
.final-hands {
  position: relative;
  z-index: 2;
  margin-top: -72px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  overflow: hidden;
}
.final-twophones {
  width: clamp(620px, 76vw, 1180px);
  filter: drop-shadow(0 -10px 50px rgba(255,90,30,.45)) drop-shadow(0 24px 50px rgba(0,0,0,.55));
  opacity: 0;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease-back-hard), opacity .6s ease;
}
.final-hands.in .final-twophones { opacity: 1; transform: translateY(6%); }
@media (max-width: 560px) {
  .final-twophones { width: 96vw; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  padding: 60px 0 40px;
  border-top: 4px solid rgba(246,239,222,.08);
}
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.footer-logo img { height: 40px; }
.footer-logo p { margin-top: 16px; max-width: 280px; color: rgba(246,239,222,.55); font-size: 14px; line-height: 1.5; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h5 { font-family: "Fredoka", sans-serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); margin-bottom: 14px; }
.footer-col a { display: block; padding: 6px 0; color: rgba(246,239,222,.7); font-size: 14.5px; font-weight: 600; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(246,239,222,.1); font-size: 13px; color: rgba(246,239,222,.45); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   ANIMATIONS reveal
   ============================================================ */
.reveal { opacity: 0; transition: opacity .7s ease, transform .8s var(--ease-back); }
.reveal.r-up    { transform: translateY(70px); }
.reveal.r-left  { transform: translateX(-90px); }
.reveal.r-right { transform: translateX(90px); }
.reveal.r-pop   { transform: scale(.7); }
.reveal.in { opacity: 1; transform: none; }

/* mains : entrée avec rebond */
.hand-left  { transform: translateX(-130%) translateY(8%) rotate(-12deg); opacity: 0; transition: transform 1.05s var(--ease-back-hard), opacity .5s ease; }
.hand-right { transform: translateX(130%) translateY(8%) rotate(12deg);  opacity: 0; transition: transform 1.05s var(--ease-back-hard), opacity .5s ease; }
.hand-left.in  { transform: translateX(0) translateY(0) rotate(-4deg); opacity: 1; }
.hand-right.in { transform: translateX(0) translateY(0) rotate(4deg);  opacity: 1; }
.hero > .hand-right.in { opacity: 1; transform: translateX(0) translateY(0) rotate(4deg); }

/* flottement continu */
@keyframes float-soft { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
.floaty { animation: float-soft 5s ease-in-out infinite; }

@keyframes flame-flicker {
  0%,100% { transform: translate(-50%,-46%) scale(1) rotate(-1deg); opacity:.9; }
  50%     { transform: translate(-50%,-48%) scale(1.05) rotate(1.5deg); opacity:1; }
}

/* stagger helper */
.stagger > * { transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hand-left, .hand-right, .scroll-hand, .showcase-hand, .final-twophones {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .floaty, .scroll-hand img, .showcase-hand img { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav { top: 10px; }
  .nav-inner {
    position: relative;
    width: min(calc(100% - 20px), 620px);
    min-height: 58px;
    padding: 9px 10px 9px 14px;
    border-color: rgba(246,239,222,.14);
    background: rgba(20,17,28,.84);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
  .nav.scrolled .nav-inner { padding: 9px 10px 9px 14px; }
  .nav-logo img,
  .nav.scrolled .nav-logo img { height: 28px; }
  .nav-links,
  .nav-download { display: none; }
  .nav-burger {
    display: flex;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 4px 0 var(--ink);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }
  .nav-burger span {
    width: 17px;
    height: 2px;
    border-radius: 3px;
    background: var(--ink);
    transition: transform .25s var(--ease-back), opacity .2s ease;
  }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-mobile {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    padding: 12px;
    border: var(--border);
    border-radius: 24px;
    background: rgba(20,17,28,.96);
    box-shadow: var(--shadow-hard), 0 18px 40px -18px rgba(0,0,0,.7);
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(.98);
    transform-origin: top center;
    transition: opacity .22s ease, transform .28s var(--ease-back);
  }
  .nav.open .nav-mobile {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .nav-mobile > a:not(.btn) {
    padding: 11px 12px;
    border-radius: 13px;
    color: rgba(246,239,222,.84);
    font-family: "Fredoka", sans-serif;
    font-size: 16px;
    font-weight: 500;
  }
  .nav-mobile > a:not(.btn):hover { background: rgba(246,239,222,.08); color: var(--cream); }
  .nav-mobile .btn { justify-content: center; margin-top: 6px; padding: 11px 18px; }
  .bg-thermal { background-attachment: scroll; }

  .activities { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: 1fr; gap: 40px; }
  .showcase.flip .showcase-text { order: 0; }
  .cardio-showcase .showcase-text { grid-column: 1; }
  .stat-grid,
  .stat-grid.two { grid-template-columns: 1fr; }
  .streak-card { grid-row: auto; }
  .quotes { grid-template-columns: 1fr; }
  .hero {
    min-height: 860px;
    padding: 126px 0 300px;
    justify-content: flex-start;
  }
  .hero-content { max-width: calc(100% - 56px); margin-left: 36px; }
  .hero .btn-ghost { display: none; }
  .hero > .hero-flame { left: 68%; top: 67%; width: 360px; opacity: .7; }
  .hero > .hand-right {
    right: -4%;
    bottom: -5%;
    width: min(62vw, 410px);
    opacity: 1;
  }
  .scroll-cue { bottom: 18px; }
  #features { padding-top: 150px; }
  .scroll-hand {
    display: block;
    top: -92px;
    width: min(31vw, 236px);
  }
  .scroll-hand.show { transform: translateX(-9%) translateY(0) rotate(-4deg); }
  .muscu-showcase-section,
  .cardio-showcase-section { padding-bottom: min(98vw, 650px); }
  .showcase-hand { width: min(54vw, 360px); }
  .showcase-hand-right { right: 0; }
  .showcase-hand-left { left: 0; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .section { padding: 80px 0; }
  .activities { grid-template-columns: 1fr 1fr; gap: 14px; }
  .act-card .label { padding: 12px 12px 15px; }
  .act-card .label h4 { font-size: 18px; }
  .act-card .label p { font-size: 11px; }
  .hero { min-height: 790px; padding: 112px 0 255px; }
  .hero-content { margin-left: 18px; }
  .hero h1 { font-size: clamp(54px, 16vw, 74px); }
  .hero-title-line,
  .hero h1 .em { display: block; }
  .hero-sub { font-size: 16px; line-height: 1.42; }
  .hero-cta { gap: 11px; margin-top: 28px; }
  .hero-cta .btn { padding: 12px 17px; font-size: 14px; }
  .hero > .hero-flame { left: 66%; top: 77%; width: 280px; }
  .hero > .hand-right { right: -3%; bottom: -9%; width: min(72vw, 330px); }
  #features { padding-top: 126px; }
  .scroll-hand {
    display: block;
    top: -138px;
    width: min(43vw, 188px);
  }
  .scroll-hand.show { transform: translateX(-12%) translateY(0) rotate(-4deg); }
  .muscu-showcase-section,
  .cardio-showcase-section { padding-bottom: 80px; }
  .showcase-hand {
    position: relative;
    bottom: auto;
    width: min(88vw, 370px);
    margin-bottom: 16px;
  }
  .showcase-hand-right { right: auto; margin-left: auto; }
  .showcase-hand-left { left: auto; margin-right: auto; }
  .showcase-text h3 { font-size: 38px; }
  .showcase-text .lead { font-size: 16px; }
  .feature-list { gap: 12px; padding-left: 0; }
  .feature-list li { gap: 11px; font-size: 14px; }
  .phone-duo { min-height: 420px; }
  .phone-duo .phone { width: min(230px, 62%); border-width: 6px; border-radius: 34px; }
  .card { padding: 20px; }
  .streak-cal { gap: 5px; padding: 9px; }
  .streak-cal .cell { border-radius: 6px; }
  .streak-num { font-size: 52px; }
  .streak-flame { width: 50px; height: 50px; }
  .streak-flame img { width: 43px; height: 43px; }
  .streak-title { max-width: 74px; font-size: 13px; }
  .sync-card { padding: 16px; }
  .sync-fire { min-height: 126px; }
  .sync-platform { padding: 9px; }
  .sync-platform > span { display: none; }
  .faq-q { padding: 19px 18px; font-size: 17px; }
  .faq-a-inner { padding: 0 18px 20px; font-size: 14px; }
  .final { padding-top: 86px; }
  .final h2 { font-size: clamp(48px, 15vw, 76px); }
  .final p { max-width: 310px; font-size: 16px; }
  .final .hero-cta {
    gap: 11px;
    margin-top: 30px;
    flex-direction: column;
  }
  .final .hero-cta .btn { min-width: 230px; justify-content: center; }
  .final-hands { margin-top: -24px; overflow: visible; }
  .final-twophones { width: 142vw; max-width: none; }
  .footer-top { flex-direction: column; }
  .footer-cols { gap: 28px; }
}