/* ------------------------------------------------------------------
 * La palette est celle du jeu (mobile/src/palette.ts). Le site et
 * l'application doivent se reconnaître d'un coup d'œil : même fond
 * légèrement vert, même noir tirant sur l'olive, mêmes couleurs de
 * mode. Une page d'accueil qui invente ses propres teintes annonce un
 * autre produit que celui qu'on télécharge.
 *
 * Aucune police distante. Charger une fonte de Google enverrait
 * l'adresse IP de chaque visiteur à un quatrième sous-traitant, alors
 * que la politique de confidentialité de ce site n'en déclare que
 * trois. La cohérence commence ici.
 * ------------------------------------------------------------------ */
:root {
  --ground: #ffffff;
  --sunken: #f4f6f2;
  --card: #ffffff;
  --ink: #0b0c0b;
  --muted: #6e736b;
  --faint: #9aa095;
  --line: #e4e8e0;

  --logo: #1e93ea;
  --flou: #7c6bf0;
  --mystere: #e9922c;
  --carriere: #12be63;
  --or: #e8a020;

  --ombre-douce: 0 1px 2px rgba(11, 12, 11, 0.04), 0 12px 32px -18px rgba(11, 12, 11, 0.25);
  --ombre-forte: 0 2px 6px rgba(11, 12, 11, 0.06), 0 40px 80px -40px rgba(11, 12, 11, 0.5);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d0f0d;
    --sunken: #141714;
    --card: #171a16;
    --ink: #edf0ec;
    --muted: #9aa095;
    --faint: #6e736b;
    --line: #262a25;

    --logo: #5ab0f2;
    --flou: #a297f5;
    --mystere: #f0ab5c;
    --carriere: #4fd08a;
    --or: #f0b955;

    --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -18px rgba(0, 0, 0, 0.8);
    --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.5), 0 40px 80px -40px rgba(0, 0, 0, 1);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.large {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---- Barre de navigation ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav .large {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: inherit;
  text-decoration: none;
}
.marque img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.nav-liens {
  display: none;
  gap: 1.6rem;
  font-size: 0.95rem;
}
.nav-liens a {
  color: var(--muted);
  text-decoration: none;
}
.nav-liens a:hover {
  color: var(--ink);
}
@media (min-width: 780px) {
  .nav-liens {
    display: flex;
  }
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, opacity 0.15s;
}
.bouton:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

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

.hero {
  padding: clamp(3rem, 9vw, 6.5rem) 0 0;
  text-align: center;
  overflow: hidden;
}
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.pastille .point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--carriere);
}

h1 {
  font-size: clamp(2.6rem, 7.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 1.5rem auto 0;
  max-width: 15ch;
  text-wrap: balance;
}
.accroche {
  margin: 1.25rem auto 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: var(--muted);
  text-wrap: balance;
}

/* ---- Badges de boutique ---- */

.boutiques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 2.25rem;
}
.badge {
  display: block;
  transition: transform 0.15s, opacity 0.15s;
}
.badge img {
  display: block;
  height: 54px;
  width: auto;
}
/* Le badge officiel de Google embarque 32,8 % de marge dans son image,
   là où celui d'Apple est détouré. À hauteur égale, son bouton paraît
   donc un tiers plus petit. On l'agrandit pour que les deux boutons se
   voient de la même taille, puis on rattrape la marge en négatif pour
   que les deux boîtes, elles, restent alignées. */
.badge.play img {
  height: 80px;
  margin-block: -13px;
}
.badge:hover {
  transform: translateY(-2px);
}
/* Google Play est un lien mort tant que l'app n'y est pas : on le montre
   éteint plutôt que de promettre un téléchargement qui n'existe pas. */
.badge.attente {
  opacity: 0.42;
  cursor: default;
  filter: grayscale(1);
}
.badge.attente:hover {
  transform: none;
}
.colonne-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.note-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- Téléphone ---- */

.telephone {
  position: relative;
  width: 100%;
  max-width: 306px;
  aspect-ratio: 620 / 1348;
  margin-inline: auto;
  border-radius: 46px;
  background: linear-gradient(160deg, #2a2d29, #0b0c0b 55%);
  padding: 9px;
  box-shadow: var(--ombre-forte);
}
.telephone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 38px;
}
.telephone::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 22px;
  border-radius: 999px;
  background: #0b0c0b;
}

.hero-visuel {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  position: relative;
}
/* Le halo pose le téléphone sur la page au lieu de le laisser flotter. */
.hero-visuel::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: var(--sunken);
  border-radius: 42px 42px 0 0;
}
.hero-visuel .telephone {
  position: relative;
}

/* ---- Chiffres ---- */

.chiffres {
  background: var(--sunken);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
@media (min-width: 760px) {
  .grille-chiffres {
    grid-template-columns: repeat(4, 1fr);
  }
}
.chiffre {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--ombre-douce);
}
.chiffre b {
  display: block;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  color: var(--muted);
}

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

section {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}
.titre-section {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-weight: 700;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.sous-titre {
  margin: 1rem 0 0;
  max-width: 54ch;
  color: var(--muted);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 1rem;
}

/* ---- Modes ---- */

.modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 2.5rem;
}
@media (min-width: 700px) {
  .modes {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mode {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.6rem 1.7rem;
  box-shadow: var(--ombre-douce);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mode .puce {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--teinte);
  margin-bottom: 0.3rem;
}
.mode h3 {
  margin: 0;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.mode p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---- Galerie ---- */

.galerie {
  background: var(--sunken);
}
.rail {
  display: flex;
  gap: 1.1rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail .telephone {
  flex: 0 0 236px;
  max-width: 236px;
  scroll-snap-align: center;
}
@media (min-width: 900px) {
  .rail {
    justify-content: center;
    overflow: visible;
  }
  .rail .telephone {
    flex: 0 0 268px;
    max-width: 268px;
  }
}

/* ---- Colonnes de texte ---- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 860px) {
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.duo p {
  color: var(--muted);
  margin: 0 0 1rem;
}
.duo p:last-child {
  margin-bottom: 0;
}
.duo strong {
  color: var(--ink);
  font-weight: 620;
}

.liste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--muted);
}
.liste .coche {
  color: var(--carriere);
  font-weight: 700;
}

/* ---- Appel final ---- */

.final {
  text-align: center;
  background: var(--sunken);
}
.final .titre-section {
  margin-inline: auto;
}

/* ---- Pied de page ---- */

footer {
  border-top: 1px solid var(--line);
  padding: 3rem 0 4rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.pied-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 760px) {
  .pied-grille {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
footer h4 {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
footer a {
  color: var(--muted);
  text-decoration: none;
}
footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mentions {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.85rem;
  max-width: 72ch;
}
.mentions p {
  margin: 0 0 0.6rem;
}

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

/* ---- Remplacements d'attributs `style` ----------------------------------
 *
 * La politique de sécurité du site pose `style-src 'self'` : elle refuse les
 * feuilles en ligne **et** les attributs `style`. Ces quatre teintes et ces
 * deux réglages vivaient dans des attributs ; ils sont devenus des classes,
 * et la page redevient stylée sans qu'on ait à desserrer l'en-tête.
 */
.mode-logo { --teinte: var(--logo); }
.mode-flou { --teinte: var(--flou); }
.mode-mystere { --teinte: var(--mystere); }
.mode-carriere { --teinte: var(--carriere); }

.centre { margin-inline: auto; }

.pied-resume { margin: 1rem 0 0; max-width: 34ch; }