/*
 * kap.myleapp.fr — le site de KapFind.
 *
 * Volontairement sans rapport visuel avec app.myleapp.fr : même domaine, même serveur, mais
 * deux produits qui n'ont rien à voir. Les couleurs sont celles de l'application, à l'octet
 * près (ios/KapFind/Design/Palette.swift, android/core/.../Colors.kt) — quelqu'un qui arrive
 * ici depuis la fiche de la boutique doit reconnaître ce qu'il vient de voir.
 *
 * Pas de fonte distante, pas de script, pas de cookie : ces pages sont lues par des gens
 * pressés et par des robots de validation de boutique. Elles doivent s'afficher instantanément
 * et ne rien avoir à déclarer.
 */
:root {
  --bg: #0a0a0f;
  --surface: #15151e;
  --surface-high: #1f1f2b;
  --ink: #f2f2f7;
  --muted: #8a8a9e;
  --accent: #cbff3d;
  --radius: 18px;
  --measure: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

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

/* --- en-tête --- */
header.site {
  border-bottom: 1px solid var(--surface-high);
  padding: 18px 0;
}
header.site .wrap { display: flex; align-items: center; gap: 12px; }
header.site img { width: 30px; height: 30px; border-radius: 8px; }
header.site strong { font-size: 17px; letter-spacing: -0.01em; }
header.site nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

/* --- accueil --- */
.hero { padding: 72px 0 56px; }
.hero h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.hero p.lead { font-size: 1.2rem; color: var(--muted); margin: 0 0 32px; }
.hero .accent { color: var(--accent); }

.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pill {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface-high);
  color: var(--muted);
  font-size: 14px;
}

.grid { display: grid; gap: 14px; margin: 48px 0; }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--surface-high);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.card h3 { margin: 0 0 6px; font-size: 1rem; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* --- pages de texte --- */
main.doc { padding: 48px 0 72px; }
main.doc h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 8px; }
main.doc .updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 36px; }
main.doc h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--surface-high);
}
main.doc h2:first-of-type { border-top: 0; padding-top: 0; }
main.doc ul { padding-left: 1.15rem; }
main.doc li { margin-bottom: 8px; }
main.doc strong { color: var(--ink); }
main.doc p, main.doc li { color: #d2d2dc; }

.note {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 28px 0;
  font-size: 0.95rem;
}
.note p { margin: 0; }

/* --- pied --- */
footer.site {
  border-top: 1px solid var(--surface-high);
  padding: 28px 0 44px;
  color: var(--muted);
  font-size: 14px;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
footer.site nav a { color: var(--muted); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ le radar animé
 *
 * Il explique le produit plus vite que n'importe quel paragraphe : un point au centre,
 * c'est toi ; les autres autour, à leur distance ; l'aiguille pointe celui qu'on cherche
 * et le chiffre descend à mesure qu'il se rapproche.
 *
 * Tout est en CSS : pas de JavaScript, pas de GIF, pas de vidéo. La page est aussi lue par
 * des robots de validation de boutique — elle doit s'afficher tout de suite et ne rien
 * télécharger.
 *
 * LE POINT DÉLICAT, et la raison de `--kap-walk` et `--kap-ease`. Le mouvement doit être
 * continu — un déplacement haché en cinq positions se lit comme un défaut d'affichage, pas
 * comme quelqu'un qui marche — MAIS le chiffre ne doit jamais contredire le dessin. Les deux
 * animations partagent donc, littéralement, la même durée et la même courbe : à tout instant
 * la fraction parcourue est la même des deux côtés, donc la distance affichée correspond à
 * la position du point par construction, et non par réglage.
 */
:root {
  --kap-walk: 10s;
  /* Symétrique : `alternate` rejoue la courbe à l'envers, donc départ et arrivée s'adoucissent
   * pareil et le demi-tour ne claque pas. C'est là que la saccade se voyait le plus. */
  --kap-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radar-wrap { max-width: 340px; margin: 0 auto; }
.radar { display: block; width: 100%; }

.radar .ring { fill: none; stroke: var(--surface-high); stroke-width: 1; }

/* Le balayage. Un coin de 24° qui tourne, éteint vers l'extérieur. */
.radar .sweep {
  transform-origin: 100px 100px;
  animation: kap-sweep 5s linear infinite;
}
@keyframes kap-sweep { to { transform: rotate(360deg); } }

/* Nous, au centre, toujours. */
.radar .me-halo { fill: var(--accent); opacity: 0.18; }
.radar .me { fill: var(--accent); }

/*
 * Les autres. Ils respirent ET ils dérivent : trois personnes parfaitement immobiles autour
 * d'un point qui bouge donnent une maquette. Les durées sont premières entre elles (17, 23,
 * 19 s) pour qu'aucun ne retombe jamais en phase avec un autre — trois points qui repartent
 * ensemble se voient immédiatement et cassent l'illusion.
 */
.radar .blips g {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    kap-blip 3.2s ease-in-out infinite,
    kap-drift 17s ease-in-out infinite alternate;
}
.radar .blips g:nth-of-type(2) {
  animation-delay: -0.9s, -4s;
  animation-duration: 3.2s, 23s;
  animation-name: kap-blip, kap-drift-b;
}
.radar .blips g:nth-of-type(3) {
  animation-delay: -1.8s, -7s;
  animation-duration: 3.2s, 19s;
  animation-name: kap-blip, kap-drift-c;
}
@keyframes kap-blip {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* Des dérives de quelques mètres à l'échelle du cadran : on flâne, on ne traverse pas. */
@keyframes kap-drift { to { transform: translate(7px, -5px); } }
@keyframes kap-drift-b { to { transform: translate(-6px, 6px); } }
@keyframes kap-drift-c { to { transform: translate(5px, 7px); } }

/* Celle qu'on cherche : elle s'approche, puis s'éloigne, sans à-coup. */
.radar .target { animation: kap-approach var(--kap-walk) var(--kap-ease) infinite alternate; }
@keyframes kap-approach { to { transform: translateY(56px); } }

.radar .needle { fill: #4dd9ff; }
.radar .spoke { stroke: #4dd9ff; stroke-opacity: 0.28; stroke-width: 2.5; stroke-linecap: round; }
.radar .scale { fill: var(--muted); font-size: 10px; }
.radar .north { fill: var(--muted); font-size: 10px; text-anchor: middle; }

/*
 * La distance. `@property` l'enregistre comme un entier, ce qui la rend INTERPOLABLE : sans
 * cette déclaration, une propriété personnalisée s'animerait par saut au milieu du cycle.
 * `counter()` la rend affichable — c'est le seul moyen d'afficher un nombre qui compte, en
 * CSS seul. Un navigateur qui ignore `@property` montre la valeur initiale, fixe : 75 m,
 * c'est-à-dire la position de départ du point. Dégradé, jamais faux.
 */
@property --kap-dist {
  syntax: "<integer>";
  initial-value: 75;
  inherits: false;
}

.readout {
  margin: 6px 0 0;
  text-align: center;
  line-height: 1.25;
}
.readout .dist {
  display: block;
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  counter-reset: kapdist var(--kap-dist);
  animation: kap-count var(--kap-walk) var(--kap-ease) infinite alternate;
}
/* Les mètres sont dans le `content` avec le compteur : une balise séparée aurait dansé au
 * rythme des chiffres, la largeur du nombre changeant entre 75 et 10. */
.readout .dist::after { content: counter(kapdist) " m"; }
@keyframes kap-count { to { --kap-dist: 10; } }

.readout .who {
  display: block;
  font-size: 0.85rem;
  color: #4dd9ff;
}

/*
 * Quelqu'un qui a demandé moins de mouvement le reçoit : le radar se fige, dans un état
 * lisible et cohérent — le point à mi-chemin et la distance qui va avec. On n'en profite pas
 * pour cacher le contenu.
 */
@media (prefers-reduced-motion: reduce) {
  .radar .sweep,
  .radar .blips g,
  .radar .target,
  .readout .dist {
    animation: none;
  }
  .radar .target { transform: translateY(28px); }
  .readout .dist { --kap-dist: 43; }
}

/* ------------------------------------------------------------------ les captures */
.steps { display: grid; gap: 34px; margin: 56px 0; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.step { text-align: center; display: flex; flex-direction: column; }
/* La capture est poussée en bas : sans ça, une étape dont le texte tient sur deux lignes
 * remonte son téléphone et la rangée n'est plus alignée. */
.step .phone { margin-top: auto; }
.step .num {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.01em; }
.step p { margin: 0 0 18px; color: var(--muted); font-size: 0.94rem; }

/* Le cadre du téléphone est en CSS et non dessiné dans l'image : les captures restent des
 * écrans bruts, réutilisables ailleurs, et le cadre suit la palette si elle change. */
.phone {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
  border: 7px solid var(--surface-high);
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  line-height: 0;
}
.phone img { width: 100%; height: auto; }

.watch-frame {
  width: 168px;
  border: 6px solid var(--surface-high);
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  line-height: 0;
  flex: 0 0 auto;
}
.watch-frame img { width: 100%; height: auto; }

.split { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin: 56px 0; }
.split .text { flex: 1 1 260px; }
.split h2 { margin: 0 0 8px; font-size: 1.3rem; letter-spacing: -0.02em; }
.split p { margin: 0; color: var(--muted); }

h2.section {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 64px 0 6px;
  text-align: center;
}
p.section-lead { color: var(--muted); text-align: center; margin: 0 auto; max-width: 34rem; }