/* Golf Circle — landing narrative & pages légales.
   Type : Tiempos Headline (display/serif), Modern Era (UI/sans).
   Récit en chapitres : fonds alternés (crème → vert profond → encre),
   reveals au défilement, parallaxe douce. Zéro trait décoratif. */

@font-face {
  font-family: 'Tiempos Headline';
  src: url('/fonts/TiemposHeadline-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('/fonts/TiemposHeadline-Semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('/fonts/ModernEra-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('/fonts/ModernEra-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Modern Era';
  src: url('/fonts/ModernEra-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #14140f;
  --ink-soft: #33332c;
  --bg: #ffffff;
  --paper: #f6f4ee;
  --paper-2: #efece3;
  --green: #2e7d4f;
  --green-dark: #1e5c39;
  --green-mist: #a9e3c0;
  --muted: #6c6c64;
  --line: rgba(20, 20, 15, 0.10);
  --line-2: rgba(20, 20, 15, 0.16);

  --serif: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --sans: 'Modern Era', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --s6: 64px; --s7: 80px; --s8: 96px; --s9: 120px; --s10: 160px;

  --maxw: 1160px;
  --sec: clamp(80px, 12vw, 148px);
  --radius: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1, h2 { letter-spacing: -0.022em; line-height: 1.04; }
h3 { letter-spacing: -0.01em; line-height: 1.12; }
p { text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; display: block; }
strong, b { font-weight: 700; }

::selection { background: rgba(46, 125, 79, 0.18); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

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

/* Kicker — étiquette discrète, JAMAIS de capitales forcées (demande Jean-Emmanuel) */
.kicker {
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--green-dark);
  display: block;
}

/* ---------- Boutons stores ---------- */
.btn-appstore, .btn-googleplay {
  display: inline-flex; align-items: center; gap: 12px;
  background: #101013; color: #fff; text-decoration: none;
  padding: 14px 26px 14px 22px; border-radius: 14px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
}
.btn-appstore:hover, .btn-googleplay:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.6);
}
.btn-appstore:active, .btn-googleplay:active { transform: translateY(0); }
.btn-appstore .txt, .btn-googleplay .txt {
  display: flex; flex-direction: column; line-height: 1.05; align-items: flex-start;
}
.btn-appstore .txt small, .btn-googleplay .txt small {
  font-size: 11px; font-weight: 500; letter-spacing: .01em; opacity: .8;
}
.btn-appstore .txt b, .btn-googleplay .txt b {
  font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
}
.store-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   PHONE FRAME — cadre téléphone réutilisable (vraies captures)
   ============================================================ */
.device {
  position: relative;
  width: var(--dev-w, 300px);
  max-width: 82vw;
  flex: 0 0 auto;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.device .frame {
  position: relative;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(150deg, #26262b 0%, #0b0b0d 46%, #17171b 100%);
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(10, 12, 10, 0.28),
    0 44px 90px -42px rgba(10, 14, 10, 0.62);
}
.device .frame img { display: block; width: 100%; height: auto; border-radius: 38px; background: #dcdad3; }
.device .frame::after {
  content: ""; position: absolute; inset: 9px; border-radius: 38px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 34%);
  mix-blend-mode: screen;
}
.device .frame::before {
  content: ""; position: absolute; left: -2px; top: 128px;
  width: 2.5px; height: 62px; border-radius: 2px;
  background: linear-gradient(180deg, #303036, #17171b);
}
.device.tilt-l { transform: rotate(-3deg); }
.device.tilt-r { transform: rotate(3deg); }
.device.tilt-l:hover, .device.tilt-r:hover, .device:hover { transform: rotate(0) translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .device, .device.tilt-l, .device.tilt-r { transition: none; transform: none; }
}

/* ============================================================
   CHAPITRE 1 — HÉROS : la promesse (vidéo + message seul)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #0b110d;
  color: #f4f2ea;
  padding: 128px 0 96px;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(9, 14, 11, 0.6) 0%, rgba(9, 14, 11, 0.28) 30%, rgba(9, 14, 11, 0.42) 62%, rgba(9, 14, 11, 0.8) 100%),
    radial-gradient(90% 70% at 50% 42%, rgba(46, 125, 79, 0.22), transparent 60%);
}
.hero-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; max-width: var(--maxw); margin: 0 auto;
}
.wordmark {
  font-family: var(--serif); font-weight: 600;
  font-size: 22px; letter-spacing: -0.02em; text-decoration: none;
  color: #fff; display: inline-flex; align-items: center; gap: 9px;
}
.brand-logo { width: 30px; height: 30px; border-radius: 8px; display: block; object-fit: cover; flex: 0 0 auto; }
.wordmark .brand-logo { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.hero-top .right { display: inline-flex; align-items: center; gap: 16px; }
.hero-top .mini {
  color: rgba(255, 255, 255, 0.9); text-decoration: none;
  font-size: 15px; font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px; border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero-top .mini:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); }

.hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 980px; margin: 0 auto;
  padding: 0 24px; text-align: center;
}
.hero-eyebrow {
  /* Pas de capitales forcées : « Le cercle des golfeurs », tel quel */
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--green-mist); margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(48px, 9.4vw, 104px);
  color: #fff; font-weight: 400; letter-spacing: -0.032em; line-height: 0.98;
  max-width: 15ch; margin: 0 auto;
  text-shadow: 0 2px 44px rgba(0, 0, 0, 0.35);
}
.hero h1 em { font-style: italic; color: var(--green-mist); }
.hero .lead {
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(244, 242, 234, 0.9);
  margin: 26px auto 38px; max-width: 42ch; line-height: 1.5;
}
.hero .store-row { justify-content: center; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 3; color: rgba(255, 255, 255, 0.6); font-size: 13px; letter-spacing: 0.04em;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  animation: floaty 2.6s ease-in-out infinite;
}
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }
@keyframes floaty { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* Entrée héros orchestrée (gated sur .js) */
.hero-eyebrow, .hero h1, .hero .lead, .hero .store-row, .hero .waitlist-form, .hero .waitlist-note {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
html.js:not(.ready) .hero-eyebrow,
html.js:not(.ready) .hero h1,
html.js:not(.ready) .hero .lead,
html.js:not(.ready) .hero .store-row,
html.js:not(.ready) .hero .waitlist-form,
html.js:not(.ready) .hero .waitlist-note { opacity: 0; transform: translateY(18px); }
html.js:not(.ready) .scroll-cue { opacity: 0; }
html.ready .hero-eyebrow { transition-delay: .05s; }
html.ready .hero h1 { transition-delay: .14s; }
html.ready .hero .lead { transition-delay: .28s; }
html.ready .hero .store-row { transition-delay: .40s; }
html.ready .hero .waitlist-form { transition-delay: .40s; }
html.ready .hero .waitlist-note { transition-delay: .52s; }

/* ============================================================
   CHAPITRE 2 — LE POURQUOI / MISSION (crème, éditorial)
   ============================================================ */
.mission { padding: var(--sec) 0; background: var(--paper); }
.mission .wrap {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 88px); align-items: end;
}
.mission .kicker { margin-bottom: 22px; }
.mission h2 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.04; max-width: 15ch; }
.mission h2 em { font-style: italic; color: var(--green); }
.mission .body-col p { color: var(--ink-soft); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; max-width: 46ch; }
.mission .body-col p + p { margin-top: 16px; }

/* ============================================================
   CHAPITRE 3 — LA RENCONTRE (vert profond, immersif) + profil
   ============================================================ */
.meet {
  position: relative; overflow: hidden;
  padding: var(--sec) 0;
  background: linear-gradient(168deg, #16281e 0%, #0d1912 100%);
  color: #eaf3ec;
}
.meet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 82% 30%, rgba(46, 125, 79, 0.32), transparent 60%);
}
.meet .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.meet .copy { max-width: 34rem; }
.meet .kicker { color: var(--green-mist); margin-bottom: 18px; }
.meet h2 { color: #fff; font-size: clamp(30px, 4.6vw, 50px); }
.meet p { color: rgba(234, 243, 236, 0.82); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; margin-top: 18px; max-width: 44ch; }
.meet .visual { display: flex; justify-content: center; position: relative; }
.meet .device { --dev-w: clamp(238px, 32vw, 312px); }
.meet .device .frame {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 54px 100px -44px rgba(0, 0, 0, 0.7);
}
.chips { display: flex; align-items: center; margin-top: 28px; }
.chips img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #16281e; margin-left: -12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.chips img:first-child { margin-left: 0; }
.chips .label { margin-left: 16px; font-size: 14.5px; color: rgba(234, 243, 236, 0.72); line-height: 1.35; }

/* ============================================================
   CHAPITRE 3b — COMMENT ÇA MARCHE (clair, la mécanique)
   ============================================================ */
.how { padding: var(--sec) 0; background: #fff; }
.how .section-head { max-width: 680px; margin: 0 auto; text-align: center; }
.how .section-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-top: 16px; }
.section-head .kicker { text-align: center; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: var(--s7); }
.step { padding-top: 22px; border-top: 1px solid var(--line-2); }
.step .n { font-family: var(--serif); font-size: 15px; color: var(--green); font-weight: 600; letter-spacing: 0.02em; }
.step h3 { font-size: 22px; margin-top: 16px; }
.step p { color: var(--muted); font-size: 15.5px; margin-top: 10px; line-height: 1.55; }

/* ============================================================
   CHAPITRE 4 — LE CLUBHOUSE / LA COMMUNAUTÉ (crème, 2 téléphones)
   ============================================================ */
.community { padding: var(--sec) 0; background: var(--paper); overflow: hidden; }
.community .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.community .copy { max-width: 32rem; }
.community .kicker { margin-bottom: 18px; }
.community h2 { font-size: clamp(30px, 4.4vw, 48px); }
.community > .wrap > .copy > p { color: var(--ink-soft); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; margin-top: 18px; max-width: 44ch; }
.community ul { list-style: none; padding: 0; margin: 26px 0 0; }
.community li { position: relative; padding-left: 32px; margin-top: 15px; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.community li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(46, 125, 79, 0.13);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.cluster { position: relative; display: flex; justify-content: center; align-items: center; }
.cluster .device.back { --dev-w: clamp(190px, 26vw, 244px); margin-right: -56px; margin-bottom: 48px; z-index: 1; }
.cluster .device.front { --dev-w: clamp(208px, 28vw, 264px); margin-top: 56px; z-index: 2; }

/* ============================================================
   CHAPITRE 5 — C'EST DEHORS QUE TOUT SE JOUE (photo, la finalité)
   ============================================================ */
.outside { position: relative; overflow: hidden; background: #0b110d; color: #fff; }
.outside-media {
  position: absolute; inset: -14% 0; width: 100%; height: 128%;
  object-fit: cover; z-index: 0; will-change: transform;
}
.outside-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 12, 10, 0.62) 0%, rgba(8, 12, 10, 0.42) 42%, rgba(8, 12, 10, 0.82) 100%),
    radial-gradient(80% 100% at 50% 55%, rgba(8, 12, 10, 0.15), rgba(8, 12, 10, 0.68));
}
.outside-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: clamp(148px, 24vw, 280px) 24px; text-align: center; }
.outside .kicker { color: var(--green-mist); margin-bottom: 24px; }
.outside h2 {
  font-size: clamp(40px, 8.4vw, 96px); color: #fff; max-width: 14ch; margin: 0 auto;
  line-height: 1.0; letter-spacing: -0.03em; text-shadow: 0 4px 44px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   CHAPITRE 6 — ILS SE SONT RETROUVÉS (preuve / témoignages)
   ============================================================ */
.stories { padding: var(--sec) 0; background: #fff; }
.stories .section-head { max-width: 680px; margin: 0 auto; text-align: center; }
.stories .section-head h2 { font-size: clamp(28px, 4.2vw, 44px); margin-top: 16px; }
.stories .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: var(--s7); }
.story {
  background: var(--paper); border-radius: 22px; padding: 32px 30px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 26px 50px -38px rgba(20, 20, 15, 0.4);
  display: flex; flex-direction: column;
}
.story .quote { font-family: var(--serif); font-size: 20px; line-height: 1.42; color: var(--ink); letter-spacing: -0.01em; }
.story .who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
.story .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #dcdad3; }
.story .who .n { font-weight: 600; font-size: 14.5px; }
.story .who .n small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 1px; }
.story .stars { color: var(--green); font-size: 13px; letter-spacing: 2px; margin-top: 5px; }

/* ============================================================
   CHAPITRE 7 — LE CERCLE PRIVÉ (sobre) + CTA FINAL
   ============================================================ */
.circle-band { padding: var(--sec) 0; background: var(--paper); }
.circle-band .wrap { max-width: 780px; }
.circle-band .inner {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 32px; padding: clamp(52px, 7vw, 76px) 40px;
  background: linear-gradient(165deg, #14231b 0%, #0b110d 100%);
  color: #f4f2ea;
  box-shadow: 0 44px 90px -54px rgba(11, 17, 13, 0.7);
}
.circle-band .inner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(72% 90% at 50% 128%, rgba(46, 125, 79, 0.5), transparent 62%);
}
.circle-band .inner > * { position: relative; }
.circle-band .kicker { color: var(--green-mist); }
.circle-band h2 { font-size: clamp(28px, 4vw, 42px); color: #fff; max-width: 20ch; margin: 18px auto 0; }
.circle-band p { color: rgba(244, 242, 234, 0.82); font-size: 18px; line-height: 1.5; margin: 18px auto 0; max-width: 46ch; }
.circle-band .price {
  margin-top: 26px; display: inline-block;
  font-size: 14px; font-weight: 500; color: rgba(244, 242, 234, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 9px 18px;
}

.finale { position: relative; overflow: hidden; color: #f4f2ea; text-align: center; background: #0b110d; padding: clamp(104px, 15vw, 176px) 24px; }
.finale::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(46, 125, 79, 0.42), transparent 62%); }
.finale > * { position: relative; }
.finale .kicker { color: var(--green-mist); margin-bottom: 22px; }
.finale h2 { font-size: clamp(36px, 6vw, 68px); color: #fff; max-width: 15ch; margin: 0 auto; line-height: 1.02; letter-spacing: -0.03em; }
.finale p { color: rgba(244, 242, 234, 0.82); font-size: 19px; margin: 20px auto 38px; max-width: 42ch; }
.finale .store-row { margin: 0 auto; justify-content: center; }

/* ---------- Switch de langue ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; }
.hero-top .lang-switch a { color: rgba(255, 255, 255, 0.6); text-decoration: none; padding: 4px 7px; border-radius: 8px; transition: color .18s var(--ease); }
.hero-top .lang-switch a.on, .hero-top .lang-switch a:hover { color: #fff; }
.hero-top .lang-switch span { color: rgba(255, 255, 255, 0.35); }

/* ---------- Footer riche ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s5); background: #fff; }
.site-footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .brand-col .fmark { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.site-footer .brand-col .fmark .brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(20, 20, 15, 0.16); }
.site-footer .brand-col p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 18px 0 0; max-width: 34ch; }
.site-footer h4 { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); margin: 4px 0 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer a {
  color: var(--ink); text-decoration: none; font-size: 14.5px;
  background-image: linear-gradient(var(--green-dark), var(--green-dark));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .28s var(--ease), color .18s var(--ease);
}
.site-footer a:hover { color: var(--green-dark); background-size: 100% 1px; }
.site-footer .foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: var(--s6); padding-top: 26px; border-top: 1px solid var(--line);
}
.site-footer .foot-bottom .copy { color: var(--muted); font-size: 13.5px; }
.site-footer .foot-bottom a { background-image: none; }
.site-footer .foot-bottom .lang-switch a { color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.site-footer .foot-bottom .lang-switch a.on { color: var(--ink); font-weight: 600; }
.site-footer .foot-bottom .lang-switch a:hover { color: var(--ink); }
.site-footer .foot-bottom .lang-switch span { color: var(--line-2); }

/* ---------- Footer simple (pages légales) ---------- */
footer { border-top: 1px solid var(--line); padding: var(--s6) 0; background: #fff; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .fmark { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
footer .fmark .brand-logo { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 2px 8px rgba(20, 20, 15, 0.16); }
footer .links { display: flex; gap: 24px; flex-wrap: wrap; }
footer a.link { color: var(--muted); text-decoration: none; font-size: 14.5px; transition: color .18s var(--ease); }
footer a.link:hover { color: var(--ink); }
footer .copy { color: var(--muted); font-size: 14px; width: 100%; margin-top: 4px; }

/* ---------- Révélations au défilement (récit) ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .scroll-cue { animation: none; }
  html { scroll-behavior: auto; }
  html.js:not(.ready) .hero-eyebrow,
  html.js:not(.ready) .hero h1,
  html.js:not(.ready) .hero .lead,
  html.js:not(.ready) .hero .store-row,
  html.js:not(.ready) .scroll-cue { opacity: 1; transform: none; }
  .hero-eyebrow, .hero h1, .hero .lead, .hero .store-row { transition: none; }
  .outside-media { transform: none !important; }
}

/* ---------- Pages légales ---------- */
.legal-nav { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 10; }
.legal-nav .wrap { display: flex; align-items: center; height: 62px; }
.legal-nav .fmark { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.legal-nav .fmark .brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(20, 20, 15, 0.16); }
.legal { padding: 52px 0 88px; }
.legal .wrap { max-width: 760px; }
.legal .back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 15px; margin-bottom: 26px; transition: color .18s var(--ease); }
.legal .back:hover { color: var(--ink); }
.legal h1 { font-size: clamp(32px, 5vw, 44px); }
.legal .updated { color: var(--muted); font-size: 14px; margin-top: 12px; }
.legal h2 { font-size: 23px; margin-top: 40px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 16.5px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--green-dark); }
.legal .notice { margin-top: 24px; padding: 22px 24px; border-radius: 16px; background: rgba(46, 125, 79, 0.06); border: 1px solid rgba(46, 125, 79, 0.18); }
.legal .notice h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0 0 8px; color: var(--green-dark); }
.legal .notice p { margin: 0; }
.legal .notice p + p { margin-top: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { padding: 116px 0 92px; }
  .hero .lead { margin-left: auto; margin-right: auto; }

  .mission .wrap { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .mission h2 { max-width: 20ch; }

  .meet .wrap { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .meet .visual { order: -1; }
  .meet .copy { margin: 0 auto; }
  .meet p { margin-left: auto; margin-right: auto; }
  .chips { justify-content: center; }

  .community .wrap { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .community .cluster { order: -1; }
  .community .copy { margin: 0 auto; }
  .community > .wrap > .copy > p { margin-left: auto; margin-right: auto; }
  .community ul { display: inline-block; text-align: left; }

  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  .site-footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 30px; }
  .stories .grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .hero-top .mini, .hero-top .lang-switch { display: none; }
  .scroll-cue { display: none; }
  .cluster .device.back { margin-right: -40px; margin-bottom: 30px; }
  .cluster .device.front { margin-top: 34px; }
  .circle-band .inner { padding: 44px 24px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Liste d'attente (pré-lancement) ---------- */
/* Le CTA principal tant que l'app n'est pas sur les stores : un email, une
   promesse (« tu seras prévenu au lancement »). Posé sur fonds sombres
   (héros + finale), même langage que le reste : coins 16, verre dépoli. */
.waitlist-form { display: flex; gap: 10px; max-width: 480px; width: 100%; }
/* Toujours centré sous un texte centré (héros, finale, page dédiée) */
.hero .waitlist-form, .finale .waitlist-form { margin-left: auto; margin-right: auto; }
.hero .waitlist-note { margin-left: auto; margin-right: auto; text-align: center; }
.waitlist-form input[type="email"] {
  flex: 1; min-width: 0; height: 58px; padding: 0 22px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.10); color: #fff;
  font: 500 16px/1 var(--sans); outline: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.waitlist-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
.waitlist-form input[type="email"]:focus {
  border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.14);
}
.waitlist-form input[type="email"].bad { border-color: #ff8f86; }
.waitlist-form button {
  height: 58px; padding: 0 28px; border-radius: 16px; border: 0;
  background: #fff; color: #0b110d; font: 700 16px/1 var(--sans);
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
}
.waitlist-form button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30); }
.waitlist-form button:disabled { opacity: 0.6; cursor: default; transform: none; }
.waitlist-note { margin-top: 14px; font-size: 14.5px; color: rgba(244, 242, 234, 0.68); max-width: 46ch; }
.finale .waitlist-note { margin-left: auto; margin-right: auto; }
.waitlist-done {
  display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 26px;
  border-radius: 16px; border: 1px solid rgba(169, 227, 192, 0.5);
  background: rgba(46, 125, 79, 0.28); color: #fff; font: 600 16px/1.3 var(--sans);
}
.waitlist-err { display: none; margin-top: 10px; font-size: 14px; color: #ffb3ad; }
.waitlist-err.on { display: block; }
/* Champ pot de miel : invisible pour les humains, rempli par les bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) {
  .waitlist-form { flex-direction: column; }
  /* En colonne, flex:1 s'applique à la HAUTEUR : l'input s'écrasait */
  .waitlist-form input[type="email"] { flex: none; width: 100%; }
  .waitlist-form button { width: 100%; }
}

/* ---------- Page dédiée liste d'attente (/rejoindre, /join) ---------- */
/* Une seule chose à faire : entrer son email. Plein écran, sombre, centré. */
.waitpage {
  min-height: 100svh; display: flex; flex-direction: column;
  background: #0b110d; color: #f4f2ea; position: relative; overflow: hidden;
}
.waitpage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 8%, rgba(46, 125, 79, 0.40), transparent 64%);
}
.waitpage > * { position: relative; }
.waitpage .top { display: flex; align-items: center; justify-content: space-between; padding: 26px clamp(20px, 5vw, 48px); }
.waitpage .wordmark { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.waitpage .wordmark .brand-logo { width: 30px; height: 30px; border-radius: 8px; }
.waitpage .center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 0;
}
.waitpage .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--green-mist); margin-bottom: 20px; }
.waitpage h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 7vw, 72px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; max-width: 16ch; margin: 0 0 18px; }
.waitpage h1 em { font-style: italic; }
.waitpage .sub { color: rgba(244, 242, 234, 0.80); font-size: 18px; max-width: 44ch; margin: 0 0 34px; }
.waitpage .waitlist-form { justify-content: center; }
.waitpage .foot { text-align: center; padding: 26px; font-size: 13.5px; color: rgba(244, 242, 234, 0.5); }
.waitpage .foot a { color: rgba(244, 242, 234, 0.75); text-decoration: none; }
.waitpage .foot a:hover { color: #fff; }

/* ---------- Bascule pré-lancement / live (config.js : GC_PRELAUNCH) ---------- */
/* Pré-lancement : formulaires email visibles, boutons stores cachés.
   Live (GC_PRELAUNCH=false) : l'inverse, partout, automatiquement. */
html.prelaunch .store-row { display: none; }
html:not(.prelaunch) .waitlist-block { display: none; }
html.prelaunch .mini-live { display: none; }
html:not(.prelaunch) .mini-wait { display: none; }
/* Confirmation d'inscription : apparition douce */
.waitlist-done { animation: wl-pop .35s var(--ease); }
@keyframes wl-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }