/* La page de présentation servie à qui n'a pas encore de compte.
 *
 * Elle ne réutilise rien du reste de l'application : ses jetons vivent sur
 * `.lp` plutôt que sur `:root`, et tous ses blocs sont préfixés `lp-`. Deux
 * raisons — l'atelier est dense et neutre là où cette page est aérée et
 * verte, et une refonte du marketing ne doit jamais pouvoir bouger un champ
 * de formulaire.
 */

.lp {
  /* Type : une display géométrique pour les titres, une grotesque neutre
     pour le texte courant. Les piles système restent en secours, si bien
     qu'un Google Fonts injoignable dégrade la page sans la casser. */
  --lp-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Couleur : un papier chaud, un vert profond pour l'action, un vert pâle
     pour le bloc des professionnels, et un presque-noir verdi pour la fin de
     page. Le tout reste hors de `variables.css` — l'application n'en a que
     faire. */
  --lp-paper: #fff;
  --lp-card: #f6f6f3;
  --lp-sage: #cadbd1;
  --lp-ink: #0f1a16;
  --lp-ink-soft: #46514c;
  --lp-line: #e4e4dd;
  --lp-green: #1d5341;
  --lp-green-hover: #164033;
  --lp-green-text: #23694e;
  --lp-dark: #0a1613;
  --lp-dark-soft: #9fb3aa;
  --lp-sage-btn: #a7c2b2;

  font-family: var(--lp-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lp-ink);
  background-color: var(--lp-paper);
}

/* ── Gabarits ─────────────────────────────────────────────────────────── */

.lp-wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.lp-wrap--narrow {
  max-width: 52rem;
}

.lp-section {
  padding-block: 7rem;
}

/* Deux sections qui se suivent et se répondent (texte/image puis
   image/texte) n'ont pas besoin de deux respirations pleines entre elles. */
.lp-section--tight {
  padding-block: 4.5rem;
}

.lp-band {
  background-color: var(--lp-sage);
}

/* ── Titraille ────────────────────────────────────────────────────────── */

.lp-eyebrow {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-green-text);
}

.lp-eyebrow--center {
  text-align: center;
}

.lp-eyebrow--dark {
  color: var(--lp-dark-soft);
}

.lp-h2 {
  max-width: 24ch;
  font-family: var(--lp-font-display);
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lp-h2--center {
  max-width: none;
  text-align: center;
}

.lp-h2--dark {
  color: #fff;
}

.lp-section__lead {
  max-width: 44ch;
  margin-top: 1.25rem;
  color: var(--lp-ink-soft);
}

.lp-section__lead--center {
  margin-inline: auto;
  text-align: center;
}

.lp-section__lead--left {
  max-width: 48ch;
}

/* ── Boutons ──────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lp-btn--green {
  background-color: var(--lp-green);
  color: #fff;
}

.lp-btn--green:hover {
  background-color: var(--lp-green-hover);
}

.lp-btn--outline {
  background-color: #fff;
  border-color: #d5d5cd;
  color: var(--lp-ink);
}

.lp-btn--outline:hover {
  border-color: var(--lp-ink);
}

.lp-btn--sage {
  background-color: var(--lp-sage-btn);
  color: var(--lp-dark);
}

.lp-btn--sage:hover {
  background-color: #b9d0c2;
}

/* Sur le fond sombre, le second bouton n'a que son filet. */
.lp-btn--ghost {
  border-color: rgb(255 255 255 / 0.35);
  color: #fff;
}

.lp-btn--ghost:hover {
  border-color: #fff;
}

.lp-btn--full {
  width: 100%;
}

.lp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-textlink svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.15s ease;
}

.lp-textlink:hover svg {
  transform: translateX(3px);
}

/* ── En-tête ──────────────────────────────────────────────────────────── */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(10px);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
}

.lp-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--lp-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.lp-nav__mark {
  width: 1.75rem;
  height: 1.75rem;
}

/* La navigation prend la place restante et se pose à droite, contre les
   boutons : c'est `margin-inline-start: auto` sur le premier des deux
   groupes qui pousse tout le reste. */
.lp-nav__links {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: 0.9375rem;
}

.lp-nav__links a {
  text-decoration: none;
}

.lp-nav__links a:hover {
  color: var(--lp-green-text);
}

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-nav__signin {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.lp-nav__signin:hover {
  color: var(--lp-green-text);
}

/* ── Bandeau d'accueil ────────────────────────────────────────────────── */

.lp-hero {
  padding-top: 3rem;
}

.lp-hero__text {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}

.lp-hero__title {
  font-family: var(--lp-font-display);
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.lp-hero__lead {
  max-width: 34rem;
  margin: 1.75rem auto 0;
  color: var(--lp-ink-soft);
  font-size: 0.9375rem;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* La capture déborde le texte : elle est la démonstration, et c'est elle
   qu'on vient regarder. Le filet et l'ombre lui donnent le bord d'un écran
   sans le décor d'un navigateur dessiné. */
.lp-hero__shot {
  width: 100%;
  max-width: 78rem;
  margin: 3rem auto 0;
  padding-inline: 1.5rem;
}

.lp-hero__shot img {
  width: 100%;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgb(15 26 22 / 0.09);
}

/* ── Les trois étapes ─────────────────────────────────────────────────── */

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 4rem;
}

/* La ligne qui relie les pastilles est le trait d'un pseudo-élément posé
   sur chaque étape, jamais sur la dernière : elle s'arrête donc d'elle-même
   au bout, et disparaît quand la grille s'empile. */
.lp-step {
  position: relative;
}

.lp-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--lp-green);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-green);
  background-color: var(--lp-paper);
}

.lp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 2.5rem;
  right: -2.5rem;
  height: 1px;
  background-color: var(--lp-line);
}

.lp-step__icon {
  display: block;
  margin-top: 2rem;
  color: var(--lp-green);
}

.lp-step__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.lp-step__title {
  margin-top: 1.5rem;
  font-family: var(--lp-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lp-step__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

/* ── Sections texte / image ───────────────────────────────────────────── */

.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.lp-split__lead {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

.lp-split__media img {
  width: 100%;
  border: 1px solid rgb(15 26 22 / 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgb(15 26 22 / 0.08);
}

/* La bulle d'historique est une capture d'un seul élément, pas d'un écran :
   elle se pose sur le fond sans bord ni ombre qui en feraient une fenêtre. */
.lp-split__media--card img {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.lp-points {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
}

.lp-points li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.875rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

.lp-points__icon {
  color: var(--lp-green);
  margin-top: 0.1875rem;
}

.lp-points__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Pour qui ─────────────────────────────────────────────────────────── */

.lp-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 4rem;
}

/* Deux photos verticales dans un cadre horizontal : la fenêtre ne montre
   que la moitié de la hauteur, et le centre géométrique tomberait sur un
   torse ici, sur un toit là. Chaque carte dit donc où viser — c'est la seule
   chose qui les distingue. */
.lp-audience__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--lp-card);
}

.lp-audience__media--face img {
  object-position: center top;
}

.lp-audience__media--scene img {
  object-position: center 72%;
}

.lp-audience__title {
  margin-top: 1.5rem;
  font-family: var(--lp-font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lp-audience__text {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

/* ── Tarifs ───────────────────────────────────────────────────────────── */

.lp-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 54rem;
  margin-top: 3.5rem;
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background-color: var(--lp-card);
}

.lp-plan--featured {
  border-color: var(--lp-green);
  border-width: 1.5px;
}

.lp-plan__name {
  font-family: var(--lp-font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.lp-plan__pitch {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

/* Le nombre et son unité sur la même ligne de base : « 20 € » porte le
   regard, « les 100 recherches » n'est que la suite de la phrase. */
.lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 1.75rem;
}

.lp-plan__price strong {
  font-family: var(--lp-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-plan__price span {
  font-size: 0.9375rem;
  font-weight: 600;
}

.lp-plan__note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--lp-ink-soft);
}

.lp-plan__label {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lp-line);
  font-size: 0.875rem;
}

.lp-plan__features {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

/* La coche est dessinée en CSS plutôt qu'en SVG répété six fois : c'est une
   puce, et une puce n'a pas besoin d'un élément à elle. */
.lp-plan__features li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.625rem;
}

.lp-plan__features li::before {
  content: "";
  width: 0.75rem;
  height: 0.4375rem;
  margin-top: 0.4375rem;
  border-left: 1.5px solid var(--lp-green);
  border-bottom: 1.5px solid var(--lp-green);
  transform: rotate(-45deg);
}

/* Le bouton se colle au bas de la carte pour que les deux s'alignent, quelle
   que soit la longueur des deux argumentaires au-dessus. */
.lp-plan .lp-btn {
  margin-top: auto;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.lp-faq {
  margin-top: 4rem;
  border-top: 1px solid var(--lp-line);
}

.lp-faq__item {
  border-bottom: 1px solid var(--lp-line);
}

.lp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.lp-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Le chevron est tracé au pseudo-élément et pivote à l'ouverture : deux
   bordures qui tournent, plutôt qu'une icône par question. */
.lp-faq__item summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 1.5px solid var(--lp-ink);
  border-bottom: 1.5px solid var(--lp-ink);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lp-faq__item[open] summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.lp-faq__item p {
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  font-size: 0.9375rem;
  color: var(--lp-ink-soft);
}

/* ── Dernier appel ────────────────────────────────────────────────────── */

.lp-cta {
  padding-block: 6rem;
  background-color: var(--lp-dark);
  text-align: center;
}

.lp-cta__lead {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  font-size: 0.9375rem;
  color: var(--lp-dark-soft);
}

.lp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* ── Pied ─────────────────────────────────────────────────────────────── */

.lp-footer {
  background-color: var(--lp-dark);
  color: #fff;
}

.lp-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.lp-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: start;
  font-family: var(--lp-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
}

.lp-footer__mark {
  width: 1.75rem;
  height: 1.75rem;
}

.lp-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.lp-footer__heading {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.lp-footer__col a {
  color: var(--lp-dark-soft);
  text-decoration: none;
}

.lp-footer__col a:hover {
  color: #fff;
}

.lp-footer__col--cta p {
  max-width: 24rem;
  color: var(--lp-dark-soft);
}

.lp-footer__col--cta .lp-btn {
  margin-top: 0.5rem;
  color: var(--lp-dark);
}

.lp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
  color: var(--lp-dark-soft);
}

.lp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.lp-footer__legal a {
  color: var(--lp-dark-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-footer__legal a:hover {
  color: #fff;
}

/* ── Écrans étroits ───────────────────────────────────────────────────── */

/* Une seule rupture : au-dessous, tout s'empile. La page n'a que des paires
   et des triplets, et rien qui mérite un état intermédiaire. */
@media (max-width: 56rem) {
  .lp-section {
    padding-block: 4rem;
  }

  .lp-section--tight {
    padding-block: 3rem;
  }

  .lp-nav__links {
    display: none;
  }

  .lp-nav__inner {
    gap: 1rem;
  }

  .lp-nav__actions {
    margin-inline-start: auto;
  }

  .lp-hero {
    padding-top: 2rem;
  }

  .lp-hero__shot {
    margin-top: 2rem;
  }

  .lp-steps,
  .lp-split,
  .lp-audience,
  .lp-plans {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* L'image passe sous le texte quel que soit l'ordre demandé au large :
     sur un téléphone la phrase vient toujours avant sa démonstration. */
  .lp-split--media-first .lp-split__media {
    order: 2;
  }

  .lp-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .lp-footer__col--cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 34rem) {
  .lp-footer__top {
    grid-template-columns: 1fr;
  }

  .lp-hero__actions .lp-btn,
  .lp-cta__actions .lp-btn {
    width: 100%;
  }
}