/* ============================================================================
   RESPIRIT — lp.css — pages d'atterrissage des annonces (06/10/2026)
   ----------------------------------------------------------------------------
   /agents-ia · /conference-ia · /formation-ia-equipe.
   Chargée après pp.css, site.css et estimation.css, sur ces trois pages seulement.
   Mêmes règles que site.css : jetons --pp-* uniquement (aucune couleur en dur),
   préfixe lp- pour tout composant nouveau, aucune classe pp-* ni rs-* redéfinie,
   mode sombre hérité des jetons, aucun dégradé, aucune graisse au-dessus de 600.
   Le reste (cartes, nœuds, offres, formats de conférence, formulaire) vient de
   site.css et d'estimation.css, tel quel.
   ========================================================================== */

/* ---- Hero : un H1 de requête est plus long que celui de l'accueil ---------- */
.lp-hero.rs-hero--needs .pp-hero__title {
  max-width: 26ch;
  font-size: clamp(1.7rem, 4.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lp-hero.rs-hero--needs .pp-lead { max-width: 38rem; }
.lp-hero__filter {
  margin: var(--pp-space-3) auto 0;
  max-width: 38rem;
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-normal);
  color: var(--pp-text-2);
  text-wrap: balance;
}

/* ---- Un cas réel : le récit à gauche, les chiffres en tuiles à droite ------- */
.lp-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-4);
  align-items: stretch;
}
@media (min-width: 900px) {
  .lp-case { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pp-space-6); }
}
.lp-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--pp-space-3);
  align-content: start;
}
@media (min-width: 900px) {
  .lp-figures { grid-template-columns: minmax(0, 1fr); }
}
.lp-figures > li { margin: 0; max-width: none; }
.lp-figures .pp-kpi { height: 100%; }
.lp-case__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-3) var(--pp-space-6);
  margin: var(--pp-space-6) 0 0;
}

/* ---- Face aux alternatives : « Avec nous » sous les trois cartes ------------ */
.lp-us {
  margin-top: var(--pp-space-4);
  padding: var(--pp-space-4) var(--pp-space-5);
  background: var(--pp-surface-1);
  border-left: 3px solid var(--pp-electric);
  border-radius: var(--pp-radius-md);
}
@media (min-width: 760px) {
  .lp-us { margin-top: var(--pp-space-6); padding: var(--pp-space-5) var(--pp-space-6); }
}
.lp-us__title {
  margin: 0 0 var(--pp-space-2);
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-semibold);
  font-size: var(--pp-text-lg);
  line-height: var(--pp-leading-snug);
  letter-spacing: var(--pp-tracking-title);
  color: var(--pp-text-1);
}
.lp-us p { margin: 0; max-width: 62ch; color: var(--pp-text-1); font-size: var(--pp-text-md); }

/* ---- Pied d'une section : liens vers l'offre complète ----------------------- */
.lp-more { margin: var(--pp-space-6) 0 0; }

/* ---- Formulaire de cadrage : ligne d'aide sous le chapô ---------------------- */
.lp-form__tip {
  margin: var(--pp-space-3) 0 0;
  max-width: 40rem;
  font-size: var(--pp-text-sm);
  color: var(--pp-text-2);
}

/* ---- Comprendre · Construire · Ancrer : trois cartes de front dès 900 px ---------
   (.rs-needs est pensée pour cinq cartes : la dernière, impaire, y prend la moitié de la rangée) */
@media (min-width: 900px) {
  .rs-needs.lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-space-6); }
  .rs-needs.lp-steps > .rs-need:nth-child(n) { grid-column: auto; }
}