/* Harmony landing page.
   Hand-rolled CSS on purpose: the page is embedded in a WebView inside the app,
   where a runtime CSS compiler (Tailwind CDN) caused a flash of unstyled content. */

:root {
  --brand-from: #a855f7;
  --brand-to: #6366f1;
  --brand-gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  --brand-soft: #f3e8ff;

  --ink: #17151f;
  --ink-soft: #55506b;
  --ink-faint: #8b859f;

  --bg: #ffffff;
  --bg-alt: #f7f4fd;
  --card: #ffffff;
  --field: #f7f5fb;
  --line: #ece8f5;

  --ok: #16a34a;
  --ko: #dc2626;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(23, 21, 31, 0.05);
  --shadow: 0 10px 30px -12px rgba(23, 21, 31, 0.15);
  --shadow-lg: 0 30px 60px -25px rgba(80, 40, 160, 0.35);

  --header-h: 68px;
  --maxw: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brand-from); outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.brand-name {
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav a:hover { color: var(--ink); background: var(--brand-soft); }
.nav .nav-cta { color: #fff; margin-left: 8px; }
.nav .nav-cta:hover { color: #fff; }

/* Real links, not a <select>: each language is its own page, and search engines need
   a crawlable path to the other two. */
.lang-links {
  display: flex; align-items: center; gap: 2px; margin-left: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: #fff;
}
.lang-link {
  padding: 5px 9px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-faint);
}
.lang-link:hover { color: var(--ink); background: var(--brand-soft); }
.lang-link.is-current { color: #fff; background: var(--brand-gradient); }
.lang-link.is-current:hover { color: #fff; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 14px 20px 22px; box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 12px; font-size: 17px; }
  .nav .nav-cta { margin: 10px 0 0; text-align: center; }
  .lang-links { margin: 14px 0 0; justify-content: center; }
  .lang-link { padding: 9px 16px; font-size: 15px; }
}

/* ---------- Sections ---------- */

section { padding: 88px 0; }
section.alt { background: var(--bg-alt); }
@media (max-width: 700px) { section { padding: 62px 0; } }

.eyebrow {
  display: inline-block; margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head-sub { margin-top: 60px; margin-bottom: 28px; }
.section-head-sub h2 { font-size: clamp(24px, 3vw, 30px); }
.section-head p { margin: 16px 0 0; font-size: 18px; color: var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border: 0; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 12px 24px -12px rgba(120, 60, 220, 0.7); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(120, 60, 220, 0.8); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand-from); color: var(--brand-from); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.btn-block { width: 100%; }

/* A grid of equal columns rather than a flex row: "Télécharger sur / App Store" and
   "Disponible sur / Google Play" are not the same length, so sizing each button to its
   own content left them visibly mismatched. Both tracks take the width of the widest,
   which keeps holding in English and Spanish. */
.store-buttons {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
}
@media (max-width: 460px) { .store-buttons { grid-auto-flow: row; } }
.store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 11px 20px 11px 18px; border-radius: 15px;
  background: #17151f; color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow);
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }
.store-btn .store-small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.72; line-height: 1.5; }
.store-btn .store-big { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; }

/* ---------- Hero ---------- */

.hero { padding: 64px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { text-align: center; }
.hero h1 { font-size: clamp(40px, 6.4vw, 68px); font-weight: 800; }
.hero h1 .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { margin: 22px auto 0; font-size: 19px; color: var(--ink-soft); max-width: 33em; }
.hero-actions { margin-top: 32px; }
.hero-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-faint); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Phone mockup ---------- */

.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.phone {
  position: relative; width: 290px; height: 628px; flex: 0 0 auto;
  background: #000; border: 9px solid #14131a; border-radius: 46px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.phone::after {
  content: ""; position: absolute; z-index: 3;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 108px; height: 24px; background: #14131a; border-radius: 0 0 16px 16px;
}
.phone-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.7s ease;
}
.phone-slide.is-active { opacity: 1; }
.phone-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.dots { display: flex; gap: 8px; }
.dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #d9d2ea; cursor: pointer; transition: background 0.2s ease, width 0.2s ease;
}
.dots button.is-active { width: 22px; border-radius: 4px; background: var(--brand-gradient); }

@media (max-width: 380px) { .phone { width: 250px; height: 542px; border-radius: 40px; } }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #ddd4f2; }
.card { text-align: center; }
.card h3 { margin-bottom: 10px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.card-icon {
  width: 50px; height: 50px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--brand-gradient);
  box-shadow: 0 10px 20px -10px rgba(120, 60, 220, 0.8);
}
.card-icon svg { width: 28px; height: 28px; fill: #fff; }

/* ---------- Prose (promise block) ---------- */

.prose { max-width: 760px; margin: 0 auto; text-align: center; }
.prose p { font-size: 18.5px; color: var(--ink-soft); margin: 20px 0 0; }
.prose p:first-of-type { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Feature list (customisation) ---------- */

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 15px; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gradient); flex: 0 0 auto; }

/* ---------- Screenshot gallery ---------- */

.gallery {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 20px 26px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: #ded7ef; border-radius: 3px; }
.gallery figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; width: 218px; }
.gallery img {
  /* Reserve the space before the (lazy) image loads: without this the page grows by
     several thousand pixels on load, which throws off the #participer anchor. */
  width: 100%; height: auto; aspect-ratio: 332 / 720;
  border-radius: 22px; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: #fff;
}

/* ---------- Forms ---------- */

/* Forms are the one exception: centred labels and inputs read badly. */
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field); color: var(--ink);
  font-family: inherit; font-size: 15.5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { background: #fff; border-color: var(--brand-from); }
.field textarea { min-height: 128px; resize: vertical; }
.field-hint { font-size: 13px; color: var(--ink-faint); margin: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 0; font-size: 14.5px; font-weight: 600; min-height: 22px; }
.form-status.is-ok { color: var(--ok); }
.form-status.is-ko { color: var(--ko); }

.participate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .participate-grid { grid-template-columns: 1fr; } }

/* The survey is the most valuable answer, so it spans both columns — but it stays a
   plain card: the brand gradient belongs to what you can press, not to backgrounds. */
.card-wide { grid-column: 1 / -1; }
.card-wide h3 { font-size: 22px; }
.card-wide p { max-width: 620px; margin-inline: auto; font-size: 16px; }
.card-cta { margin-top: 22px; }

/* ---------- Download band ---------- */

.download-band { text-align: center; }
.download-band .store-buttons { margin-top: 30px; }
.download-lead { margin: 16px 0 0; font-size: 18px; color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer {
  padding: 42px 0; border-top: 1px solid var(--line);
  background: var(--bg-alt); color: var(--ink-faint); font-size: 14.5px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; text-align: center; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--brand-from); }


/* ---------- Dark palette (?theme=dark) ----------
   Only ever requested by the app's WebView, which passes its own theme: a light page
   inside a dark app is a white slab. The tokens mirror DARK_THEME in utils/constants.ts,
   gold brand gradient included, so the page looks native inside the app. */
body.is-dark {
  --brand-from: #c5a059;
  --brand-to: #8e6f3e;
  --brand-gradient: linear-gradient(135deg, #c5a059 0%, #8e6f3e 100%);
  --brand-soft: #2a2419;

  --ink: #e5e5e5;
  --ink-soft: #b3b3b3;
  --ink-faint: #737373;

  --bg: #121212;
  --bg-alt: #1a1a1a;
  --card: #1c1c1e;
  --field: #242426;
  --line: #333333;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -25px rgba(0, 0, 0, 0.8);
}
body.is-dark .site-header { background: rgba(18, 18, 18, 0.85); }
body.is-dark .btn-ghost, body.is-dark .pill, body.is-dark .lang-links, body.is-dark .nav-toggle { background: var(--card); }
body.is-dark .lang-link.is-current { color: #14100a; }
body.is-dark .nav { background: var(--bg); }
body.is-dark .card:hover { border-color: #4a4a4a; }
body.is-dark .card-icon svg { fill: #14100a; }
body.is-dark .store-btn { background: var(--card); border: 1px solid var(--line); }
body.is-dark .gallery img { background: var(--card); }
body.is-dark .dots button { background: #3a3a3a; }
/* The purple glow baked into the light buttons and icon badges reads as a stray
   halo over the gold palette, and white on gold is too low-contrast. */
body.is-dark .btn-primary { color: #14100a; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.9); }
body.is-dark .btn-primary:hover { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.95); }
body.is-dark .card-icon { box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.9); }