/* ============================================================
   KINQUI — page d'accueil publique (landing.php)

   Feuille autonome : aucune classe utilitaire Tailwind n'est requise,
   la page doit tenir le jour où le CDN Tailwind sera retiré.
   Tout est préfixé .lp- pour ne rien changer au reste de l'app.

   Couleurs = celles de l'app. Corail, violet et gris ne sont jamais
   décoratifs : ils veulent dire Avouable, Secret et Limite, comme
   dans le sélecteur de kinks (.pe2-* dans style.css).
   ============================================================ */

.lp-body {
  --lp-bg: #0e0d0f;
  --lp-s1: #141316;
  --lp-s2: #1a181c;
  --lp-s3: #242127;
  --lp-text: #f4f1f3;
  --lp-soft: #cfc8d2;
  --lp-muted: #8a828d;
  --lp-faint: #5f5862;
  --lp-coral: #ff4f61;
  --lp-coral-ink: #1a0a0d;
  --lp-purple: #a57de6;
  --lp-purple-ink: #140b1e;
  --lp-grey: #4a4550;
  --lp-gold: #ffc24d;
  --lp-line: rgba(255, 255, 255, .08);
  --lp-line-strong: rgba(255, 255, 255, .16);
  --lp-display: 'Space Grotesk', Manrope, system-ui, sans-serif;
  --lp-sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-gutter: 20px;

  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* L'écran de chargement et la bannière d'installation du gabarit n'ont pas leur place
   sur une page publique. On garde l'écran de chargement pour l'app installée, qui est
   redirigée vers la connexion (classe posée par le script en tête de page). */
html:not(.lp-standalone) .lp-body #loki-page-splash { display: none !important; }
.lp-body #pwa-install-banner { display: none !important; }

.lp,
.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp { min-height: 100dvh; }

.lp-wrap {
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lp-gutter);
  padding-right: var(--lp-gutter);
}

.lp-ico { display: inline-block; flex: none; vertical-align: -3px; }

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.lp-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lp-text);
  color: var(--lp-bg);
  font: 800 14px/1 var(--lp-sans);
  text-decoration: none;
}
.lp-skip:focus { top: 12px; }

.lp a:focus-visible,
.lp-skip:focus-visible {
  outline: 2px solid var(--lp-text);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Texte ---------- */

.lp-h1 {
  margin: 0;
  font: 700 clamp(2.625rem, 10.2vw, 6.25rem)/.96 var(--lp-display);
  letter-spacing: -.045em;
  color: var(--lp-text);
  text-wrap: balance;
}

.lp-h2 {
  margin: 0;
  font: 700 clamp(1.875rem, 5.4vw, 3.25rem)/1.04 var(--lp-display);
  letter-spacing: -.035em;
  color: var(--lp-text);
  text-wrap: balance;
}

.lp-h3 {
  margin: 0;
  font: 700 1.1875rem/1.25 var(--lp-display);
  letter-spacing: -.015em;
  color: var(--lp-text);
}

.lp-p {
  margin: 0;
  font: 500 .9375rem/1.6 var(--lp-sans);
  color: var(--lp-muted);
  text-wrap: pretty;
}

.lp-lede {
  margin: 0;
  max-width: 34em;
  font: 500 clamp(1.0625rem, .55vw + .95rem, 1.25rem)/1.55 var(--lp-sans);
  color: var(--lp-soft);
  text-wrap: pretty;
}

.lp-intro {
  margin: 14px 0 0;
  max-width: 36em;
  font: 500 1.0625rem/1.55 var(--lp-sans);
  color: var(--lp-soft);
  text-wrap: pretty;
}

.lp-link {
  color: var(--lp-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--lp-line-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.lp-link:hover { text-decoration-color: var(--lp-text); }

/* ---------- Boutons ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 16px;
  font: 800 1rem/1.2 var(--lp-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.lp-btn:active { transform: scale(.98); }
.lp-btn--xl { min-height: 60px; padding: 16px 28px; border-radius: 18px; font-size: 1.125rem; }
.lp-btn--primary { background: var(--lp-coral); color: var(--lp-coral-ink); }
.lp-btn--primary:hover { background: #ff6876; }
.lp-btn--light { background: var(--lp-text); color: var(--lp-bg); }
.lp-btn--light:hover { background: #fff; }
.lp-btn--dark { background: var(--lp-bg); color: var(--lp-text); }
.lp-btn--dark:hover { background: #000; }

.lp-cta { display: grid; gap: 10px; justify-items: stretch; }
.lp-reassure { margin: 0; font: 700 .8125rem/1.4 var(--lp-sans); color: var(--lp-muted); text-align: center; }
.lp-reassure--ink { color: var(--lp-coral-ink); opacity: .8; }

/* ---------- Barre du haut ---------- */

.lp-top { padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 10px; }
.lp-top-in { display: flex; align-items: center; gap: 10px; }
.lp-brand { font: 700 1.375rem/1 var(--lp-display); letter-spacing: -.03em; color: var(--lp-text); }
.lp-brand--sm { font-size: 1.125rem; }
.lp-age {
  padding: 4px 6px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 8px;
  font: 800 .6875rem/1 var(--lp-sans);
  color: var(--lp-soft);
}
.lp-top-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lp-lang { display: inline-flex; align-items: center; }
.lp-lang-a {
  padding: 11px 7px;
  border-radius: 10px;
  font: 700 .8125rem/1 var(--lp-sans);
  color: var(--lp-muted);
  text-decoration: none;
}
.lp-lang-a:hover { color: var(--lp-soft); }
.lp-lang-a.is-on { color: var(--lp-text); }
.lp-toplink {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--lp-s3);
  font: 800 .8125rem/1 var(--lp-sans);
  color: var(--lp-text);
  text-decoration: none;
  white-space: nowrap;
}
.lp-toplink:hover { background: #2e2a32; }

/* ---------- Accroche ---------- */

.lp-hero { padding: 30px 0 64px; }
.lp-hero-grid { display: grid; gap: 28px; }
.lp-hero-copy { display: grid; gap: 22px; min-width: 0; }
.lp-hero-links { margin: 0; font: 500 .875rem/1.9 var(--lp-sans); color: var(--lp-muted); text-align: center; }
.lp-hero-links-q { display: block; }

/* Mini-démo : trois boutons radio masqués pilotent, en CSS seul, la réponse d'Alex.
   Tant que rien n'est choisi elle reste floue ; c'est la règle de la Kink List. */
.lp-try {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: var(--lp-s1);
}
.lp-try-q { margin: 0; font: 700 1.125rem/1.3 var(--lp-display); letter-spacing: -.015em; color: var(--lp-text); }
.lp-try .lp-try-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
}
.lp-try-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border-radius: 14px;
  background: var(--lp-bg);
  box-shadow: inset 0 0 0 1px var(--lp-line);
}
.lp-try-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 6px;
  border-radius: 11px;
  font: 800 .875rem/1 var(--lp-sans);
  color: var(--lp-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.lp-try-opt:hover { background: var(--lp-s3); color: var(--lp-text); }
.lp-try-in--a:checked ~ .lp-try-seg .lp-try-opt--a { background: var(--lp-coral); color: var(--lp-coral-ink); }
.lp-try-in--s:checked ~ .lp-try-seg .lp-try-opt--s { background: var(--lp-purple); color: var(--lp-purple-ink); }
.lp-try-in--l:checked ~ .lp-try-seg .lp-try-opt--l { background: var(--lp-grey); color: var(--lp-text); }
.lp-try-in--a:focus-visible ~ .lp-try-seg .lp-try-opt--a,
.lp-try-in--s:focus-visible ~ .lp-try-seg .lp-try-opt--s,
.lp-try-in--l:focus-visible ~ .lp-try-seg .lp-try-opt--l { outline: 2px solid var(--lp-text); outline-offset: 2px; }

.lp-try-other {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
}
.lp-try-who { font: 700 .875rem/1.3 var(--lp-sans); color: var(--lp-soft); }
.lp-try-veil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  filter: blur(7px);
  opacity: .8;
  user-select: none;
  -webkit-user-select: none;
  transition: filter .5s ease, opacity .5s ease;
}
.lp-try-detail { font: 700 .875rem/1.3 var(--lp-sans); color: var(--lp-text); white-space: nowrap; }
.lp-try-lock { margin-left: auto; color: var(--lp-muted); line-height: 0; transition: opacity .3s ease; }
.lp-try-in:checked ~ .lp-try-other .lp-try-veil { filter: none; opacity: 1; }
.lp-try-in:checked ~ .lp-try-other .lp-try-lock { opacity: 0; }

/* Les quatre messages occupent la même case : pas de saut de mise en page au changement. */
.lp-try-msgs { display: grid; }
.lp-try-msg {
  grid-area: 1 / 1;
  margin: 0;
  font: 500 .875rem/1.5 var(--lp-sans);
  color: var(--lp-text);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}
.lp-try-msg--0 { color: var(--lp-muted); visibility: visible; opacity: 1; }
.lp-try-in:checked ~ .lp-try-msgs .lp-try-msg--0 { visibility: hidden; opacity: 0; }
.lp-try-in--a:checked ~ .lp-try-msgs .lp-try-msg--a,
.lp-try-in--s:checked ~ .lp-try-msgs .lp-try-msg--s,
.lp-try-in--l:checked ~ .lp-try-msgs .lp-try-msg--l { visibility: visible; opacity: 1; }

/* ---------- Étiquettes Avouable / Secret / Limite (reprises de .pe2-tag) ---------- */

.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lp-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font: 800 .75rem/1.2 var(--lp-sans);
  white-space: nowrap;
}
.lp-tag--pub { background: var(--lp-coral); color: var(--lp-coral-ink); }
.lp-tag--sec { background: var(--lp-purple); color: var(--lp-purple-ink); }
.lp-tag--lim { background: var(--lp-grey); color: var(--lp-text); }
.lp-tag--off { color: var(--lp-faint); box-shadow: inset 0 0 0 1px var(--lp-line); }
.lp-tag--off s { text-decoration: line-through; }

/* ---------- Les trois étapes ---------- */

.lp-how {
  padding: 64px 0 72px;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-s1);
}
.lp-steps { display: grid; gap: 52px; margin: 36px 0 0; padding: 0; list-style: none; }
.lp-step { display: grid; gap: 20px; min-width: 0; }
.lp-step-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.lp-step-txt .lp-p { margin-top: 6px; }
.lp-step-n {
  min-width: .7em;
  font: 500 2.75rem/.82 var(--lp-display);
  letter-spacing: -.04em;
  color: var(--lp-faint);
}

/* « Écran » : une fenêtre sur l'app, fond de l'app. */
.lp-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  padding: 16px 16px 8px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: var(--lp-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.lp-m-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp-m-title { font: 700 18px/1.2 var(--lp-display); color: var(--lp-text); }
.lp-m-count { font: 700 12px/1.3 var(--lp-sans); color: var(--lp-muted); }
.lp-m-count--line { margin-top: 12px; }
.lp-m-cat {
  margin: 14px 0 0;
  font: 800 11px/1.4 var(--lp-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lp-m-kink { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-m-kink:last-child { border-bottom: 0; }
.lp-m-row { display: flex; align-items: center; gap: 8px; }
.lp-m-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-m-name b { font: 700 14px/1.3 var(--lp-sans); color: var(--lp-text); overflow-wrap: anywhere; }
.lp-m-name b.is-off { color: #b7afba; }
.lp-m-name b.is-lim { color: var(--lp-faint); text-decoration: line-through; }
.lp-m-sum { font: 500 11px/1.35 var(--lp-sans); color: var(--lp-muted); }
.lp-m-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--lp-s2); }
.lp-m-seg span { display: block; padding: 6px 7px; border-radius: 9px; font: 700 10.5px/1.2 var(--lp-sans); color: var(--lp-muted); }
.lp-m-seg span.is-pub { background: var(--lp-coral); color: var(--lp-coral-ink); }
.lp-m-seg span.is-sec { background: var(--lp-purple); color: var(--lp-purple-ink); }
.lp-m-seg span.is-lim { background: var(--lp-grey); color: var(--lp-text); }
.lp-m-star { flex: none; width: 26px; text-align: center; font: 400 17px/1 var(--lp-sans); color: var(--lp-faint); }
.lp-m-star.is-on { color: var(--lp-gold); }
.lp-m-detail { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--lp-s2); }
.lp-m-detail > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lp-m-lab { width: 72px; font: 700 11px/1.3 var(--lp-sans); color: var(--lp-muted); }
.lp-m-chip {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  font: 700 11.5px/1.2 var(--lp-sans);
  color: var(--lp-soft);
}
.lp-m-chip.is-on { border-color: var(--lp-text); background: var(--lp-text); color: var(--lp-bg); }

/* Étape 2 : la fiche vue par la personne qui ouvre le lien. */
.lp-m-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--lp-s2);
  font: 700 12.5px/1.2 var(--lp-sans);
  color: var(--lp-soft);
}
.lp-m-url .lp-ico { width: 13px; height: 13px; color: var(--lp-muted); vertical-align: 0; }
.lp-m-who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.lp-m-emblem { display: block; flex: none; width: 40px; height: 40px; }
.lp-m-who-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-m-who-txt b { font: 700 15px/1.25 var(--lp-display); color: var(--lp-text); }
.lp-m-who-txt span { font: 600 12px/1.3 var(--lp-sans); color: var(--lp-soft); }
.lp-m-blur { flex: none; display: flex; align-items: center; gap: 6px; filter: blur(5px); }
.lp-m-blur i { display: block; width: 46px; height: 22px; border-radius: 9px; background: #3a363c; }
.lp-m-blur i.is-wide { width: 70px; }
.lp-m-blur i.is-pub { background: var(--lp-coral); }
.lp-m-blur i.is-sec { background: var(--lp-purple); }
.lp-m-blur i.is-lim { width: 60px; background: var(--lp-grey); }
.lp-m-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: auto 0 8px;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--lp-coral);
  font: 800 13px/1.25 var(--lp-sans);
  color: var(--lp-coral-ink);
  text-align: center;
}
.lp-m-gate .lp-ico { vertical-align: 0; }

/* Étape 3 : la révélation, deux colonnes. */
.lp-m-score { display: flex; align-items: center; gap: 14px; }
.lp-m-pct { font: 700 46px/1 var(--lp-display); letter-spacing: -.045em; color: var(--lp-coral); white-space: nowrap; }
.lp-m-pct-txt { display: flex; flex-direction: column; gap: 2px; }
.lp-m-pct-txt b { font: 700 14px/1.25 var(--lp-sans); color: var(--lp-text); }
.lp-m-pct-txt span { font: 600 12px/1.3 var(--lp-sans); color: var(--lp-muted); }
.lp-m-cols,
.lp-m-pair-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp-m-cols { margin-top: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-m-cols span { font: 800 11px/1.4 var(--lp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); }
.lp-m-pair { display: grid; gap: 7px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-m-pair:last-child { border-bottom: 0; }
.lp-m-pair.is-common {
  margin: 8px -8px 0;
  padding: 11px 8px;
  border-bottom: 0;
  border-radius: 14px;
  background: rgba(255, 79, 97, .12);
}
.lp-m-pair-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-m-pair-top b { font: 700 14px/1.3 var(--lp-sans); color: var(--lp-text); }
.lp-m-pair-top .lp-m-star { display: inline; width: auto; font-size: 14px; }
.lp-m-badge { flex: none; padding: 4px 8px; border-radius: 8px; font: 800 10.5px/1.2 var(--lp-sans); white-space: nowrap; }
.lp-m-badge.is-common { background: var(--lp-coral); color: var(--lp-coral-ink); }
.lp-m-badge.is-secret { background: var(--lp-purple); color: var(--lp-purple-ink); }
.lp-m-badge.is-limit { background: var(--lp-grey); color: var(--lp-text); }
.lp-m-pair-cells span { font: 600 11.5px/1.35 var(--lp-sans); color: var(--lp-soft); }
.lp-m-pair-cells span.is-secret { color: var(--lp-purple); }
.lp-m-pair-cells span.is-limit { color: var(--lp-muted); }
.lp-m-pair-cells span.is-empty { color: var(--lp-faint); }

/* La règle, dite une fois, en grand. */
.lp-rule { display: grid; gap: 28px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--lp-line); }
.lp-rule-txt { display: grid; gap: 12px; }
.lp-rule-txt .lp-p { max-width: 34em; font-size: 1rem; }
.lp-rule-big {
  margin: 0;
  max-width: 15em;
  font: 700 clamp(1.625rem, 5vw, 2.75rem)/1.08 var(--lp-display);
  letter-spacing: -.035em;
  color: var(--lp-text);
  text-wrap: balance;
}

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

.lp-sec { padding: 72px 0; }
.lp-sec + .lp-sec { border-top: 1px solid var(--lp-line); }

/* Les trois modes : des lignes, pas des cartes. La colonne de droite dit ce qui sort. */
.lp-mode-list { margin: 40px 0 0; padding: 0; list-style: none; }
.lp-mode { display: grid; gap: 14px; padding: 26px 0; border-top: 1px solid var(--lp-line); }
.lp-mode:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-mode-name {
  margin: 0;
  font: 700 clamp(1.5rem, 3.4vw, 2rem)/1.1 var(--lp-display);
  letter-spacing: -.03em;
  color: var(--lp-text);
}
.lp-mode-default {
  display: inline-block;
  margin-left: 6px;
  font: 700 .8125rem/1 var(--lp-sans);
  letter-spacing: 0;
  color: var(--lp-muted);
  vertical-align: middle;
}
.lp-mode-body { display: grid; gap: 8px; min-width: 0; }
.lp-mode-quote { margin: 0; font: 700 1.125rem/1.35 var(--lp-sans); color: var(--lp-text); text-wrap: balance; }
.lp-mode-sees { display: grid; gap: 8px; align-content: start; }
.lp-mode-sees-lab { margin: 0; font: 700 .8125rem/1.3 var(--lp-sans); color: var(--lp-muted); }
.lp-note { margin: 22px 0 0; max-width: 40em; font: 600 .9375rem/1.55 var(--lp-sans); color: var(--lp-soft); }

/* Vie privée : trois refus en grand, puis trois promesses. */
.lp-priv-grid { display: grid; gap: 36px; }
.lp-priv-h { font-size: clamp(2.25rem, 9.4vw, 4.5rem); line-height: .98; text-wrap: wrap; }
.lp-priv-h span { display: block; }
.lp-priv-list { display: grid; margin: 0; padding: 0; list-style: none; }
.lp-priv-item { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--lp-line); }
.lp-priv-item:last-child { border-bottom: 1px solid var(--lp-line); }

/* L'app, brièvement. */
.lp-app-grid { display: grid; gap: 40px; }
.lp-app-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.lp-app-list { display: grid; gap: 28px; margin: 0; }
.lp-app-item { display: grid; gap: 6px; }
.lp-app-item dt,
.lp-app-item dd { margin: 0; }

/* Dernier appel : le seul aplat corail de la page. */
.lp-end-sec { padding: 8px 0 72px; }
.lp-end {
  display: grid;
  gap: 28px;
  padding: 36px 24px;
  border-radius: 18px;
  background: var(--lp-coral);
  color: var(--lp-coral-ink);
}
.lp-end-h {
  margin: 0;
  font: 700 clamp(2.125rem, 8vw, 4.25rem)/.98 var(--lp-display);
  letter-spacing: -.045em;
  color: var(--lp-coral-ink);
  text-wrap: balance;
}
.lp-end .lp-btn:focus-visible { outline-color: var(--lp-coral-ink); }

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

.lp-foot { padding: 28px 0 calc(env(safe-area-inset-bottom, 0px) + 36px); border-top: 1px solid var(--lp-line); }
.lp-foot-in { display: grid; gap: 18px; }
.lp-foot-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.lp-foot-age { font: 500 .8125rem/1.5 var(--lp-sans); color: var(--lp-muted); }
.lp-foot-age b { font-weight: 800; color: var(--lp-soft); }
.lp-foot-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 20px; }
.lp-foot-a {
  padding: 9px 0;
  font: 700 .875rem/1.3 var(--lp-sans);
  color: var(--lp-soft);
  text-decoration: none;
}
.lp-foot-a:hover { color: var(--lp-text); }
.lp-foot .lp-lang { margin-left: -7px; }
.lp-foot-copy { margin: 0; font: 500 .8125rem/1.5 var(--lp-sans); color: var(--lp-faint); }

/* ============================================================
   Écrans plus larges
   ============================================================ */

@media (max-width: 349px) {
  .lp-age { display: none; }
}

@media (max-width: 359px) {
  .lp-m-seg span { padding: 6px 5px; font-size: 10px; }
  .lp-m-star { width: 20px; }
}

/* Téléphone : les écrans débordent un peu de la colonne de texte, pour garder
   aux lignes de kinks la largeur qu'elles ont dans l'app. */
@media (max-width: 479px) {
  .lp-screen { width: calc(100% + 16px); margin-left: -8px; margin-right: -8px; padding: 14px 14px 6px; }
}

@media (min-width: 560px) {
  .lp-body { --lp-gutter: 32px; }
  .lp-cta { justify-items: start; }
  .lp-reassure { text-align: left; }
  .lp-hero-links { text-align: left; }
  .lp-hero-links-q { display: inline; }
  .lp-end { padding: 48px 40px; }
}

/* Tablette : texte de l'étape à gauche, écran à droite. */
@media (min-width: 720px) and (max-width: 1159px) {
  .lp-step { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; align-items: start; }
  .lp-steps { gap: 64px; }
}

@media (min-width: 720px) {
  .lp-rule { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .lp-cta--end { justify-items: stretch; }
  .lp-cta--end .lp-reassure { text-align: center; }
  .lp-app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}

@media (min-width: 900px) {
  .lp-mode {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 17rem);
    gap: 40px;
    align-items: start;
    padding: 32px 0;
  }
  .lp-mode-default { display: block; margin: 10px 0 0; }
  .lp-priv-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .lp-app-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}

@media (min-width: 960px) {
  .lp-top { padding-top: calc(env(safe-area-inset-top, 0px) + 22px); }
  .lp-hero { padding: 64px 0 104px; }
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 80px;
    row-gap: 52px;
    align-items: start;
  }
  .lp-h1 { grid-column: 1 / -1; }
  .lp-hero-copy { gap: 28px; }
  .lp-try { gap: 18px; padding: 26px; }
  .lp-try-q { font-size: 1.3125rem; }
  .lp-try-opt { min-height: 52px; font-size: .9375rem; }
  .lp-how { padding: 104px 0 112px; }
  .lp-sec { padding: 120px 0; }
  .lp-end-sec { padding: 0 0 104px; }
  .lp-end { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding: 64px 56px; }
  .lp-end .lp-cta { justify-items: stretch; }
  .lp-end .lp-reassure { text-align: center; }
  .lp-foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lp-foot-copy { grid-column: 1 / -1; }
}

/* Bureau : les trois écrans côte à côte, textes alignés par sous-grille. */
@media (min-width: 1160px) {
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 0 28px;
    margin-top: 52px;
  }
  .lp-step { grid-row: span 2; grid-template-rows: subgrid; gap: 24px; }
  .lp-screen { max-width: none; }
  .lp-rule { margin-top: 88px; padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-btn,
  .lp-try-opt,
  .lp-try-veil,
  .lp-try-lock,
  .lp-try-msg { transition: none; }
  .lp-btn:active { transform: none; }
}