/* ==========================================================================
   Landing page publique — Innogoutech Africa
   Lisibilité prioritaire : texte large, contrastes forts, cibles tactiles >= 48px.
   Jetons aussi sur :root pour que le reste du frontoffice partage la charte.
   ========================================================================== */

:root {
  --lp-navy: #0b2c5d;
  --lp-navy-deep: #071d3f;
  --lp-navy-mid: #0c3779;
  --lp-blue: #095cd7;
  --lp-blue-dark: #094bae;
  --lp-gold: #f5a623;
  --lp-gold-bright: #ffd257;
  --lp-family: #0e5c3d;
  --lp-ink: #12263f;
  --lp-muted: #55677d;
  --lp-soft: #f2f6fb;
  --lp-line: #dbe4ef;
  --lp-radius: 18px;
  --lp-shadow: 0 10px 30px rgba(11, 44, 93, 0.10);
  --lp-shadow-lg: 0 18px 45px rgba(11, 44, 93, 0.18);
  --fo-navy: var(--lp-navy);
  --fo-navy-deep: var(--lp-navy-deep);
  --fo-navy-mid: var(--lp-navy-mid);
  --fo-blue: var(--lp-blue);
  --fo-blue-dark: var(--lp-blue-dark);
  --fo-gold: var(--lp-gold);
  --fo-gold-hover: #ffb730;
  --fo-gold-bright: var(--lp-gold-bright);
  --fo-ink: var(--lp-ink);
  --fo-muted: var(--lp-muted);
  --fo-soft: var(--lp-soft);
  --fo-line: var(--lp-line);
}

.lp {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--lp-ink);
}

.lp h1, .lp h2, .lp h3, .lp h4 { color: var(--lp-navy); font-weight: 800; }
.lp p { color: var(--lp-ink); }
.lp .lp-lead { font-size: 1.2rem; line-height: 1.6; }
.lp .lp-muted { color: var(--lp-muted); }

/* Titre de section : gros, court, avec sous-titre explicatif */
.lp-section { padding: 4.5rem 0; }
.lp-section--soft { background: var(--lp-soft); }
.lp-section-head { max-width: 780px; margin: 0 auto 3rem; text-align: center; }
/* « balance » évite les fins de titre orphelines sur une ligne isolée. */
.lp-section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: .75rem;
  text-wrap: balance;
}
.lp-section-head p { font-size: 1.15rem; color: var(--lp-muted); margin: 0; }

.lp-eyebrow {
  display: inline-block;
  background: rgba(9, 92, 215, .12);
  color: var(--lp-blue-dark);
  font-weight: 700;
  font-size: .95rem;
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.lp-hero .lp-eyebrow {
  background: rgba(255, 255, 255, .14);
  color: var(--lp-gold);
}

/* --------------------------------------------------------------------------
   Boutons : libellés longs autorisés, jamais tronqués, cible tactile large
   -------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 56px;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.lp-btn:hover, .lp-btn:focus-visible { transform: translateY(-2px); text-decoration: none; }
.lp-btn:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.lp-btn i { font-size: 1.15rem; }

.lp-btn--primary { background: var(--lp-gold); color: #1a1a1a; box-shadow: 0 8px 22px rgba(245, 166, 35, .38); }
.lp-btn--primary:hover { background: #ffb730; color: #1a1a1a; }

.lp-btn--blue { background: var(--lp-blue); color: #fff; box-shadow: 0 8px 22px rgba(9, 92, 215, .35); }
.lp-btn--blue:hover { background: var(--lp-blue-dark); color: #fff; }

.lp-btn--green { background: var(--lp-navy); color: #fff; box-shadow: 0 8px 22px rgba(11, 44, 93, .3); }
.lp-btn--green:hover { background: var(--lp-blue-dark); color: #fff; }

.lp-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .65); }
.lp-btn--ghost:hover { background: #fff; color: var(--lp-navy); }

.lp-btn--outline { background: #fff; color: var(--lp-navy); border-color: var(--lp-line); }
.lp-btn--outline:hover { border-color: var(--lp-blue); color: var(--lp-blue-dark); }

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  padding: calc(76px + 3.5rem) 0 3.5rem;
  background: linear-gradient(140deg, var(--lp-navy-deep) 0%, var(--lp-navy) 55%, var(--lp-navy-mid) 100%);
  color: #fff;
  overflow: hidden;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 480px at 85% 10%, rgba(9, 92, 215, .4), transparent 60%);
  pointer-events: none;
  animation: lp-glow 24s ease-in-out infinite alternate;
}
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
  animation: lp-grid 60s linear infinite;
}
.lp-hero > .container,
.lp-hero > .container-fluid { position: relative; z-index: 1; }

/* Hero pleine largeur : son contenu se cale sur la gouttière de la barre de
   navigation, pour que le titre démarre à l'aplomb du logo. */
.lp-hero > .container-fluid {
  padding-inline: var(--fo-gouttiere);
}
/* Variante des pages intérieures : pas de colonne latérale, donc moins de hauteur
   et un texte en pleine largeur mesurée. */
.lp-hero--court {
  padding: calc(76px + 2.5rem) 0 2.75rem;
}
.lp-hero--court .lp-hero-lead { margin-bottom: 1.25rem; }

.lp-hero h1.lp-hero-title {
  color: #fff;
  font-size: clamp(1.7rem, 3.1vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.lp-hero h1 .lp-hl {
  color: var(--lp-gold);
  animation: lp-gold-breathe 5.5s ease-in-out infinite;
}
.lp-hero .lp-hero-sub {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: #fff;
  max-width: 620px;
  margin-bottom: 1rem;
}
/* Phrase d'adressage : longue par nature, donc aérée et en retrait typographique */
.lp-hero .lp-hero-lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 680px;
  margin-bottom: 2rem;
}
.lp-hero .lp-hero-lead strong { color: #fff; font-weight: 700; }
.lp-hero-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--lp-gold);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: .85rem;
}
.lp-hero-back:hover, .lp-hero-back:focus-visible {
  color: var(--lp-gold-bright);
  text-decoration: none;
}

/* Slogan latéral : les quatre verbes sont empilés et calés sur un même bord
   gauche, comme sur la maquette. Alignés à droite, leurs initiales formaient un
   escalier et la devise ne se rattachait visuellement à rien. Ce bord gauche est
   celui de la carte d'aide qui suit : les deux blocs partagent la même verticale. */
.lp-hero-aside { text-align: left; margin-bottom: 1.75rem; }
.lp-hero-verbs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  margin-bottom: .6rem;
}
.lp-hero-verbs span {
  color: var(--lp-gold);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: lp-rise .6s cubic-bezier(.22, 1, .36, 1) both;
}
.lp-hero-verbs span:nth-child(1) { animation-delay: .18s; }
.lp-hero-verbs span:nth-child(2) { animation-delay: .26s; }
.lp-hero-verbs span:nth-child(3) { animation-delay: .34s; }
.lp-hero-verbs span:nth-child(4) { animation-delay: .42s; }
.lp-hero .lp-hero-motto {
  color: rgba(255, 255, 255, .85);
  font-size: .98rem;
  line-height: 1.45;
  margin: 0;
  /* Bridée pour former un pavé sous les verbes plutôt qu'une ligne qui court
     jusqu'au bord de la colonne. */
  max-width: 23rem;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Appels à l'action du hero : trois portes d'entrée de même poids, alignées
   -------------------------------------------------------------------------- */
.lp-hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.lp-hero-actions--2 {
  grid-template-columns: 1fr;
  gap: .75rem;
}
.lp-cta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.lp-cta:hover, .lp-cta:focus-visible { transform: translateY(-2px); text-decoration: none; }
.lp-cta:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.lp-cta-ico { font-size: 1.45rem; line-height: 1; margin-bottom: .15rem; }
.lp-cta-main { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.lp-cta-help { font-size: .85rem; font-weight: 500; line-height: 1.35; opacity: .85; }

.lp-cta--primary { background: var(--lp-gold); color: #1a1a1a; box-shadow: 0 8px 22px rgba(245, 166, 35, .38); }
.lp-cta--primary:hover { background: #ffb730; color: #1a1a1a; }
.lp-cta--blue { background: var(--lp-blue); color: #fff; box-shadow: 0 8px 22px rgba(9, 92, 215, .35); }
.lp-cta--blue:hover { background: var(--lp-blue-dark); color: #fff; }
.lp-cta--ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .6); }
.lp-cta--ghost:hover { background: #fff; color: var(--lp-navy); }

/* Garanties courtes sous les boutons */
.lp-hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  padding: 0;
  margin: 1.75rem 0 0;
}
.lp-hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.lp-hero-badges i { color: var(--lp-gold); }

/* --------------------------------------------------------------------------
   Bandeau chiffres sous le hero
   -------------------------------------------------------------------------- */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin-top: 3rem;
  padding: 1.15rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--lp-radius);
}
.lp-stat {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .5rem .75rem;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
}
.lp-stat i { font-size: 1.6rem; color: var(--lp-gold); flex-shrink: 0; }
.lp-stat strong { display: block; font-size: 1.3rem; line-height: 1.2; }
.lp-stat span { display: block; font-size: .88rem; color: rgba(255, 255, 255, .82); }
.lp-stat--cta {
  background: var(--lp-gold);
  border: 1px solid var(--lp-gold);
  color: #1a1a1a;
}
.lp-stat--cta i { color: #1a1a1a; }
.lp-stat--cta strong { font-size: 1rem; }
.lp-stat--cta span { color: rgba(0, 0, 0, .68); }
.lp-stat--cta:hover, .lp-stat--cta:focus-visible { background: #ffb730; color: #1a1a1a; }

/* Encart d'aide directe dans le hero (téléphone très visible) */
.lp-hero-help {
  background: #fff;
  color: var(--lp-ink);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-lg);
  padding: 1.75rem;
}
.lp-hero-help h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.lp-hero-help h2 i { color: var(--lp-gold); }
.lp-hero-steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.lp-hero-steps li {
  display: flex;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink);
}
.lp-hero-steps li:first-child { border-top: none; padding-top: 0; }
.lp-hero-steps strong { color: var(--lp-navy); display: block; }
.lp-hero-steps span { display: block; color: var(--lp-muted); font-size: .92rem; }
.lp-phone {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lp-navy);
  text-decoration: none;
  padding: .85rem 1rem;
  border: 2px dashed var(--lp-line);
  border-radius: 14px;
  margin: 1rem 0;
}
.lp-phone:hover { color: var(--lp-blue-dark); border-color: var(--lp-blue); }
.lp-phone i { color: var(--lp-gold); }

/* Bandeau de réassurance */
.lp-trust { background: rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .18); }
.lp-trust-item { display: flex; align-items: center; gap: .75rem; color: #fff; padding: 1.15rem 0; }
.lp-trust-item i { font-size: 1.5rem; color: var(--lp-gold); flex-shrink: 0; }
.lp-trust-item strong { display: block; font-size: 1.02rem; line-height: 1.3; }
.lp-trust-item span { font-size: .92rem; color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   Cartes « Qui êtes-vous ? »
   -------------------------------------------------------------------------- */
.lp-profile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-profile:hover, .lp-profile:focus-visible {
  border-color: var(--lp-blue);
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow);
  color: inherit;
  text-decoration: none;
}
.lp-profile-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1rem;
}
.lp-profile h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.lp-profile p { font-size: 1rem; color: var(--lp-muted); margin-bottom: 1rem; flex-grow: 1; }
.lp-profile-go { font-weight: 700; color: var(--lp-blue-dark); display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.lp-profile-go:hover, .lp-profile-go:focus-visible { text-decoration: none; color: var(--lp-navy); }
.lp-profile-go i {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.lp-profile:hover .lp-profile-go i,
.lp-profile:focus-visible .lp-profile-go i {
  transform: translateX(4px);
}
/* Prévenir avant le clic : ces parcours passent par la création d'un compte. */
.lp-profile-note {
  display: block;
  font-size: .82rem;
  color: var(--lp-muted);
  margin-top: .4rem;
}
.lp-profile-note--ok {
  color: var(--lp-navy);
  font-weight: 700;
}
.lp-profile-note--link {
  font-weight: 700;
  text-decoration: none;
  color: var(--lp-blue-dark);
}
.lp-profile-note--link:hover,
.lp-profile-note--link:focus-visible {
  color: var(--lp-navy);
  text-decoration: underline;
}
/* Porte de sortie pour qui ne se retrouve dans aucun profil : le trait
   discontinu la distingue des huit situations nommées. */
.lp-profile--autre {
  border-style: dashed;
  background: transparent;
}

.lp-bg-blue { background: var(--lp-blue); }
.lp-bg-gold { background: var(--lp-gold); color: #1a1a1a !important; }
.lp-bg-navy { background: var(--lp-navy); }
.lp-bg-green,
.lp-bg-purple,
.lp-bg-red,
.lp-bg-teal,
.lp-bg-slate { background: var(--lp-navy); }

/* --------------------------------------------------------------------------
   Étapes « Comment ça marche ? » — parcours 6 temps
   -------------------------------------------------------------------------- */
.lp-journey {
  display: flex;
  align-items: stretch;
  justify-content: center;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  gap: 0;
}
.lp-journey-item {
  display: flex;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
}
.lp-journey-item:not(:last-child)::after {
  content: "››";
  flex-shrink: 0;
  align-self: center;
  padding: 0 .35rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.2em;
  color: var(--lp-blue);
  opacity: .45;
  line-height: 1;
}
.lp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #fff;
  border-radius: var(--lp-radius);
  padding: 1.85rem 1rem 1.35rem;
  box-shadow: var(--lp-shadow);
  text-align: center;
}
.lp-step-num {
  position: absolute;
  top: .7rem;
  left: .7rem;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .35rem;
  border-radius: 6px;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-step-num--blue { background: var(--lp-blue); }
.lp-step-num--gold { background: var(--lp-gold); color: #1a1a1a; }
.lp-step-num--navy,
.lp-step-num--purple,
.lp-step-num--green { background: var(--lp-navy); }
.lp-step-num--orange { background: var(--lp-gold); color: #1a1a1a; }
.lp-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
  margin: .35rem 0 1rem;
}
.lp-step-icon.lp-bg-gold { color: #1a1a1a !important; }
.lp-step-icon--orange { background: var(--lp-gold); color: #1a1a1a; }
.lp-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.lp-step p { font-size: .95rem; color: var(--lp-muted); margin: 0; line-height: 1.45; }

@media (max-width: 1199.98px) {
  .lp-journey {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .lp-journey-item {
    flex: 1 1 calc(33.333% - 1rem);
  }
  .lp-journey-item::after { display: none; }
}
@media (max-width: 767.98px) {
  .lp-journey-item { flex: 1 1 100%; }
  .lp-apps-grid { grid-template-columns: 1fr; }
  .lp-why-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Services : nom en langage courant, sigle en second plan
   -------------------------------------------------------------------------- */
.lp-service {
  display: flex;
  gap: 1.15rem;
  height: 100%;
  background: #fff;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-line);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-service:hover, .lp-service:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow);
  border-color: var(--lp-blue);
  color: inherit;
  text-decoration: none;
}
.lp-service-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}
.lp-service h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.lp-service .lp-service-code {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lp-muted);
  background: var(--lp-soft);
  border-radius: 6px;
  padding: .1rem .5rem;
  margin-bottom: .55rem;
}
.lp-service p { font-size: .98rem; color: var(--lp-muted); margin: 0; }
.lp-service .lp-profile-go { margin-top: .85rem; }
.lp-service .lp-profile-note { margin-top: .45rem; }

/* Démarches (liste) à gauche, modules d'activité (grille) à droite. */
.lp-desk {
  background: var(--lp-soft);
  border-radius: var(--lp-radius);
  padding: 1.6rem 1.4rem 1.5rem;
}
.lp-desk > h3,
.lp-apps > h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.lp-desk > p,
.lp-apps > p { color: var(--lp-muted); margin-bottom: 1.15rem; }
.lp-desk-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: .85rem;
}
.lp-desk-item,
.lp-app {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  padding: .85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lp-desk-item:hover, .lp-desk-item:focus-visible,
.lp-app:hover, .lp-app:focus-visible {
  border-color: var(--lp-blue);
  color: inherit;
  text-decoration: none;
}
.lp-app:hover, .lp-app:focus-visible { box-shadow: var(--lp-shadow); }
.lp-desk-icon,
.lp-app-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
}
.lp-desk-item strong,
.lp-app strong {
  display: block;
  font-size: 1.02rem;
  color: var(--lp-navy);
  line-height: 1.3;
  font-weight: 800;
}
.lp-app strong small {
  display: block;
  font-weight: 650;
  font-size: .75rem;
  color: var(--lp-muted);
  margin: .12rem 0 0;
}
.lp-item-copy {
  display: block;
  font-size: .9rem;
  color: var(--lp-muted);
  margin-top: .12rem;
}
.lp-desk-hint {
  font-size: .85rem;
  color: var(--lp-muted);
  margin: 0 0 .9rem;
}
.lp-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pourquoi Innogoutech Africa — pictos + bandeau famille
   -------------------------------------------------------------------------- */
.lp-pourquoi {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.9fr);
  gap: 1.15rem;
  align-items: stretch;
}
.lp-why-panel {
  background: #fff;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  padding: 1.35rem 1.5rem 1.5rem;
}
.lp-why-title {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  margin: 0 0 1.25rem;
}
.lp-why-title img,
.lp-why-title .fo-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(11, 44, 93, .16);
}
.lp-why-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .65rem .4rem;
  text-align: center;
}
.lp-why-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.lp-why-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
}
.lp-why-icons span:last-child {
  font-size: .78rem;
  font-weight: 700;
  color: var(--lp-navy);
  line-height: 1.25;
}
.lp-family {
  display: flex;
  flex-direction: column;
  background: var(--lp-family);
  color: #fff;
  border-radius: var(--lp-radius);
  overflow: hidden;
  min-height: 100%;
}
.lp-family-visual {
  position: relative;
  flex: 1 1 0;
  min-height: 240px;
  overflow: hidden;
  background: #111;
}
.lp-family-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}
.lp-family-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, var(--lp-family) 100%);
}
.lp-family-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 0 0 auto;
}
.lp-family-title {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
  color: #fff;
}
.lp-family-title strong { color: var(--lp-gold); font-weight: 800; }
.lp-family-quote {
  margin: 0;
  font-size: .95rem;
  font-style: italic;
  color: rgba(255, 255, 255, .88);
  line-height: 1.45;
}
.lp-family-body .lp-btn {
  margin-top: auto;
  align-self: flex-start;
}

.lp-abo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--lp-navy);
  color: #fff;
  border-radius: var(--lp-radius);
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.lp-abo:hover, .lp-abo:focus-visible {
  color: #fff;
  text-decoration: none;
  box-shadow: var(--lp-shadow-lg);
}
.lp-abo-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.lp-abo-kicker {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--lp-gold);
  margin-bottom: .2rem;
}
.lp-abo strong {
  display: block;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
}
.lp-abo .lp-item-copy {
  color: rgba(255, 255, 255, .88);
  margin-top: .35rem;
}
.lp-abo .lp-profile-go {
  color: #fff;
  margin-top: .65rem;
}

/* --------------------------------------------------------------------------
   Tableau de comparaison (affiliation / partenariat)
   -------------------------------------------------------------------------- */
.lp-compare {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  overflow: hidden;
  box-shadow: var(--lp-shadow);
}
.lp-compare-head,
.lp h3.lp-compare-head {
  background: var(--lp-navy);
  color: #fff;
  padding: 1.1rem 1.35rem;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
}
.lp-compare-head i { color: var(--lp-gold); margin-right: .4rem; }
.lp-compare .table { margin: 0; width: 100%; --bs-table-bg: transparent; --bs-table-hover-bg: transparent; }
.lp-compare th {
  color: var(--lp-navy);
  font-weight: 800;
  border-top: none;
  background: var(--lp-soft);
  border-bottom: 2px solid var(--lp-line);
}
.lp-compare td, .lp-compare th {
  vertical-align: middle;
  padding: .95rem 1.25rem;
}
.lp-compare tbody tr:last-child td { border-bottom: none; }
.lp-compare .fa-check { color: var(--lp-gold); font-size: 1.05rem; }

.lp-follow-head {
  font-size: 1.25rem;
  margin: 2.75rem 0 1.15rem;
}

.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.lp-split-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.75rem 1.6rem 1.5rem;
  box-shadow: var(--lp-shadow);
}
.lp-split-card--featured {
  border-color: var(--lp-navy);
  border-top: 4px solid var(--lp-gold);
}
.lp-split-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: .85rem;
}
.lp-split-card .lp-service-code { margin-bottom: .35rem; }
.lp-split-card h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.lp-split-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-split-card ul li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .45rem 0;
  color: var(--lp-ink);
  border-top: 1px solid var(--lp-line);
}
.lp-split-card ul li:first-of-type { border-top: none; padding-top: 0; }
.lp-split-card ul li i { width: 1.1rem; text-align: center; margin-top: .2rem; }
.lp-split-card ul li .fa-check { color: var(--lp-gold); }
.lp-split-card ul li.lp-split-off { color: var(--lp-muted); }
.lp-split-card ul li.lp-split-off i { color: var(--lp-muted); }

.lp-split-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: lp-step;
}
.lp-split-steps li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink);
  counter-increment: lp-step;
}
.lp-split-steps li:first-child { border-top: none; padding-top: 0; }
.lp-split-steps li::before {
  content: counter(lp-step);
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--lp-navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05rem;
}
.lp-split-card--featured .lp-split-steps li::before {
  background: var(--lp-gold);
  color: #1a1a1a;
}
.lp-split-steps strong { display: block; color: var(--lp-navy); font-weight: 800; }
.lp-split-steps span { display: block; color: var(--lp-muted); font-size: .92rem; }

.lp-why-icons--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 880px;
  margin: 0 auto;
}
.lp-why-icons--4 span:last-child {
  font-size: .95rem;
  font-weight: 700;
  color: var(--lp-navy);
}

.lp-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.lp-kpi {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--lp-shadow);
}
.lp-kpi strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--lp-navy);
  line-height: 1.15;
  margin-bottom: .25rem;
}
.lp-kpi span {
  color: var(--lp-muted);
  font-size: .9rem;
}
a.lp-kpi {
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
a.lp-kpi:hover, a.lp-kpi:focus-visible {
  border-color: var(--lp-blue);
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}
a.lp-kpi.is-active {
  border-color: var(--lp-navy);
  border-top: 4px solid var(--lp-gold);
}

.lp-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1rem 1.15rem;
  margin: 1.75rem 0 1.5rem;
  box-shadow: var(--lp-shadow);
}
.lp-filtre .lp-input,
.lp-filtre .form-control,
.lp-filtre .form-select {
  flex: 1 1 14rem;
  min-height: 48px;
  min-width: 12rem;
}
.lp-filtre .lp-btn { min-height: 48px; }

.lp-demande-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.lp-demande {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--lp-shadow);
}
.lp-demande-id {
  font-weight: 800;
  color: var(--lp-navy);
  font-size: 1.02rem;
  word-break: break-all;
}
.lp-demande h3 {
  font-size: 1.12rem;
  margin: 0 0 .35rem;
  color: var(--lp-navy);
}
.lp-demande-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  color: var(--lp-muted);
  font-size: .92rem;
  margin: 0;
}
.lp-demande-meta i { color: var(--lp-gold); width: 1.05rem; text-align: center; }
.lp-demande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}
.lp-demande-actions .lp-btn { min-height: 44px; padding: .55rem 1.1rem; font-size: .92rem; }

.lp-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .22rem .7rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-top: .4rem;
}
.lp-pill--brouillon { background: var(--lp-soft); color: var(--lp-muted); }
.lp-pill--soumise,
.lp-pill--assignee,
.lp-pill--en_traitement,
.lp-pill--en_validation { background: rgba(9, 92, 215, .12); color: var(--lp-blue); }
.lp-pill--complement_requis { background: rgba(245, 166, 35, .2); color: #8a5a00; }
.lp-pill--validee { background: rgba(11, 44, 93, .1); color: var(--lp-navy); }
.lp-pill--rejetee,
.lp-pill--annulee { background: #fde8e8; color: #9b1c1c; }

.lp-empty {
  text-align: center;
  background: #fff;
  border: 2px dashed var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 3rem 1.5rem;
}
.lp-empty i { font-size: 2.5rem; color: var(--lp-gold); margin-bottom: .85rem; }
.lp-empty h3 { color: var(--lp-navy); margin-bottom: .4rem; }
.lp-empty p { color: var(--lp-muted); margin-bottom: 1.25rem; }

.lp-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: 2rem;
}
.lp-pager a,
.lp-pager span {
  min-width: 44px;
  min-height: 44px;
  padding: 0 .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid var(--lp-line);
  background: #fff;
  color: var(--lp-navy);
  font-weight: 700;
  text-decoration: none;
}
.lp-pager a:hover { border-color: var(--lp-blue); color: var(--lp-blue); }
.lp-pager .is-current {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
  color: #1a1a1a;
}

.container > .lp-final {
  border-radius: var(--lp-radius);
  padding: 3rem 1.75rem;
}

.lp-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-gold);
  border-radius: var(--lp-radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.75rem;
}
.lp-notice i { color: var(--lp-gold); font-size: 1.35rem; margin-top: .15rem; }
.lp-notice p { margin: 0; color: var(--lp-ink); }
.lp-notice--error { border-left-color: var(--lp-navy); }
.lp-notice--error i { color: var(--lp-navy); }

.lp-form {
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--lp-shadow);
  height: 100%;
}
.lp-label {
  display: block;
  font-weight: 800;
  color: var(--lp-navy);
  margin-bottom: .45rem;
}
.lp-input {
  width: 100%;
  min-height: 56px;
  padding: .85rem 1.1rem;
  border: 2px solid var(--lp-line);
  border-radius: 14px;
  font-size: 1.05rem;
  color: var(--lp-ink);
  background: #fff;
}
.lp-input:focus {
  outline: 3px solid var(--lp-gold);
  outline-offset: 2px;
  border-color: var(--lp-blue);
}
.lp-hint {
  display: block;
  font-size: .92rem;
  color: var(--lp-muted);
  margin-top: .45rem;
}
.lp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}
.lp-form .form-control,
.lp-form .form-select,
.lp .form-section .form-control,
.lp .form-section .form-select {
  width: 100%;
  min-height: 56px;
  padding: .85rem 1.1rem;
  border: 2px solid var(--lp-line);
  border-radius: 14px;
  font-size: 1.05rem;
  color: var(--lp-ink);
  background: #fff;
  box-shadow: none;
}
.lp-form textarea.form-control,
.lp .form-section textarea.form-control {
  min-height: 8rem;
  resize: vertical;
}
.lp-form .form-control:focus,
.lp-form .form-select:focus,
.lp .form-section .form-control:focus,
.lp .form-section .form-select:focus {
  outline: 3px solid var(--lp-gold);
  outline-offset: 2px;
  border-color: var(--lp-blue);
  box-shadow: none;
}
.lp-form .is-invalid,
.lp .form-section .is-invalid {
  border-color: #b42318 !important;
}
.lp-form .form-label,
.lp .form-section .form-label {
  display: block;
  font-weight: 800;
  color: var(--lp-navy);
  margin-bottom: .45rem;
}
.lp .error-list {
  list-style: none;
  padding: 0;
  margin: .4rem 0 0;
  color: #b42318;
  font-size: .92rem;
  font-weight: 700;
}
.lp .required { color: var(--lp-gold); font-weight: 800; }
.lp-form-block {
  padding: 1.15rem 0 1.35rem;
  border-top: 1px solid var(--lp-line);
}
.lp-form-block:first-of-type { border-top: none; padding-top: 0; }
.lp-form-block-title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin-bottom: .85rem;
}
.lp-char-counter {
  font-size: .85rem;
  color: var(--lp-muted);
  text-align: right;
  margin-top: .35rem;
}
.lp-char-counter.warning { color: var(--lp-gold); }
.lp-char-counter.danger { color: #b42318; }
.lp .rnio-cta-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--lp-line);
}
.lp .rnio-cta-hint { font-size: .92rem; color: var(--lp-muted); margin: 0; }
.lp .rnio-sidebar-card {
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--lp-shadow);
  margin-bottom: 1.25rem;
}
.lp .rnio-sidebar-card .card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .85rem;
}
.lp .rnio-sidebar-card .card-head i { color: var(--lp-gold); }
.lp .rnio-sidebar-card h2 { font-size: 1.1rem; color: var(--lp-navy); margin: 0; }
.lp-cta-hint i { color: var(--lp-gold); }

.lp .form-section {
  background: #fff;
  border: 2px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--lp-shadow);
}
.lp .form-section .section-title {
  color: var(--lp-navy);
  font-size: 1.2rem;
  font-weight: 800;
}
.lp .rnio-form-block {
  padding: 1.15rem 0 1.35rem;
  border-top: 1px solid var(--lp-line);
}
.lp .rnio-form-block:first-of-type { border-top: none; padding-top: 0; }
.lp .rnio-form-block-title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin-bottom: .85rem;
}
.lp .rnio-help, .lp .rnio-char-counter { color: var(--lp-muted); font-size: .92rem; margin-top: .45rem; }
.lp .alert-info {
  background: var(--lp-soft);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-gold);
  color: var(--lp-ink);
}
.lp .alert-danger {
  background: #fff5f5;
  border: 1px solid #f0c0c0;
  border-left: 4px solid #b42318;
  color: var(--lp-ink);
}

.lp-wizard {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 2rem;
}
.lp-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: .7rem .4rem .65rem;
  border-radius: 14px;
  border: 2px solid var(--lp-line);
  background: #fff;
  text-decoration: none;
  color: var(--lp-ink);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
}
a.lp-wizard-step:hover, a.lp-wizard-step:focus-visible {
  border-color: var(--lp-blue);
  color: var(--lp-navy);
  text-decoration: none;
}
.lp-wizard-step.is-current {
  border-color: var(--lp-navy);
  border-top: 4px solid var(--lp-gold);
}
.lp-wizard-step.is-done { border-color: var(--lp-blue); }
.lp-wizard-step.is-disabled { opacity: .62; cursor: default; }
.lp-wizard-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-soft);
  color: var(--lp-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.lp-wizard-step.is-current .lp-wizard-num {
  background: var(--lp-gold);
  color: #1a1a1a;
}
.lp-wizard-step.is-done .lp-wizard-num {
  background: var(--lp-blue);
  color: #fff;
}

.lp-hero-steps li.is-current {
  background: var(--lp-soft);
  margin-inline: -.55rem;
  padding-inline: .55rem;
  border-radius: 12px;
}
.lp-hero-steps li.is-current strong { color: var(--lp-navy); }

/* --------------------------------------------------------------------------
   Bloc aide
   -------------------------------------------------------------------------- */
/* Colonne flex : les boutons d'action s'alignent tous sur le bas des cartes,
   même quand les descriptions n'ont pas le même nombre de lignes. */
.lp-help-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-line);
  padding: 1.75rem;
  text-align: center;
}
.lp-help-card i { font-size: 2.25rem; color: var(--lp-blue); margin-bottom: .85rem; }
.lp-help-card h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.lp-help-card p { font-size: 1rem; color: var(--lp-muted); margin-bottom: 1.15rem; }
.lp-help-card .lp-btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Appel à l'action final
   -------------------------------------------------------------------------- */
.lp-final {
  background: linear-gradient(140deg, var(--lp-navy-deep), var(--lp-navy) 70%);
  color: #fff;
  text-align: center;
}
.lp-final h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.lp-final p { color: rgba(255, 255, 255, .9); font-size: 1.2rem; max-width: 640px; margin: 0 auto 2rem; }
.lp-final-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --------------------------------------------------------------------------
   Adaptations mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .lp-hero { padding-top: calc(70px + 2.5rem); }
  .lp-pourquoi { grid-template-columns: 1fr; }
  .lp-family { flex-direction: row; align-items: stretch; }
  .lp-family-visual {
    flex: 0 0 42%;
    width: 42%;
    min-height: 240px;
    align-self: stretch;
  }
  .lp-family-visual::after {
    background: linear-gradient(90deg, transparent 58%, var(--lp-family) 100%);
  }
}

@media (max-width: 991.98px) {
  /* Le slogan latéral n'a plus de colonne propre : il ferait doublon avec le titre */
  .lp-hero-aside { display: none; }
  .lp-hero-help { margin-top: 0; }
}

@media (max-width: 767.98px) {
  .lp-hero-actions { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .lp-hero-actions--2 { grid-template-columns: 1fr; }
  .lp-split { grid-template-columns: 1fr; }
  .lp-why-icons--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-demande {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .lp-demande-actions { justify-content: stretch; }
  .lp-demande-actions .lp-btn { flex: 1; }
  .lp-wizard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-hero-help--wizard { display: none; }
}

@media (max-width: 575.98px) {
  .lp { font-size: 1.02rem; }
  .lp-section { padding: 3rem 0; }
  .lp-btn { width: 100%; }
  .lp-hero-actions { grid-template-columns: 1fr; }
  .lp-phone { font-size: 1.25rem; justify-content: center; }
  .lp-service { flex-direction: column; }
  .lp-apps-grid { grid-template-columns: 1fr; }
  .lp-why-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-family { flex-direction: column; }
  .lp-family-visual { flex: 0 0 auto; width: 100%; min-height: 220px; }
  .lp-family-visual::after {
    background: linear-gradient(180deg, transparent 62%, var(--lp-family) 100%);
  }
  .lp-stats { margin-top: 2.25rem; }
  .lp-compare .table { table-layout: fixed; }
  .lp-compare td, .lp-compare th {
    padding: .65rem .4rem;
    font-size: .82rem;
    word-wrap: break-word;
  }
  .lp-compare-head { font-size: 1rem; padding: .9rem 1rem; }
}

/* --------------------------------------------------------------------------
   Mode sombre (bascule dans la barre de navigation)
   -------------------------------------------------------------------------- */
[data-fo-theme="dark"] .lp {
  --lp-ink: #e8eef7;
  --lp-muted: #a4b3c6;
  --lp-soft: #10203a;
  --lp-line: #2a3f5f;
  --lp-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --lp-shadow-lg: 0 18px 45px rgba(0, 0, 0, .55);
  background: #071427;
}
[data-fo-theme="dark"] .lp h1,
[data-fo-theme="dark"] .lp h2,
[data-fo-theme="dark"] .lp h3,
[data-fo-theme="dark"] .lp h4 { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-section--soft { background: #0b1b31; }
[data-fo-theme="dark"] .lp-profile,
[data-fo-theme="dark"] .lp-service,
[data-fo-theme="dark"] .lp-desk-item,
[data-fo-theme="dark"] .lp-app,
[data-fo-theme="dark"] .lp-step,
[data-fo-theme="dark"] .lp-help-card,
[data-fo-theme="dark"] .lp-why-panel,
[data-fo-theme="dark"] .lp-hero-help,
[data-fo-theme="dark"] .lp-compare,
[data-fo-theme="dark"] .lp-notice,
[data-fo-theme="dark"] .lp-split-card,
[data-fo-theme="dark"] .lp-form,
[data-fo-theme="dark"] .lp .form-section,
[data-fo-theme="dark"] .lp-wizard-step { background: #0f2440; border-color: #2a3f5f; color: var(--lp-ink); }
[data-fo-theme="dark"] .lp-kpi,
[data-fo-theme="dark"] .lp-filtre,
[data-fo-theme="dark"] .lp-demande,
[data-fo-theme="dark"] .lp-empty,
[data-fo-theme="dark"] .lp-pager a,
[data-fo-theme="dark"] .lp-pager span { background: #0f2440; border-color: #2a3f5f; }
[data-fo-theme="dark"] .lp-kpi strong { color: var(--lp-gold); }
[data-fo-theme="dark"] .lp-input,
[data-fo-theme="dark"] .lp-form .form-control,
[data-fo-theme="dark"] .lp-form .form-select,
[data-fo-theme="dark"] .lp .form-section .form-control,
[data-fo-theme="dark"] .lp .form-section .form-select {
  background: #0b1b31;
  border-color: #2a3f5f;
  color: var(--lp-ink);
}
[data-fo-theme="dark"] .lp-label,
[data-fo-theme="dark"] .lp-hero-steps strong,
[data-fo-theme="dark"] .lp .form-section .form-label,
[data-fo-theme="dark"] .lp-form-block-title { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-hero-steps li { border-top-color: #2a3f5f; }
[data-fo-theme="dark"] .lp-split-card--featured { border-color: var(--lp-gold); }
[data-fo-theme="dark"] .lp-split-card ul li { border-top-color: #2a3f5f; }
[data-fo-theme="dark"] .lp-split-steps li { border-top-color: #2a3f5f; }
[data-fo-theme="dark"] .lp-split-steps strong { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-profile-note--ok { color: var(--lp-gold); }
[data-fo-theme="dark"] .lp-compare-head { background: var(--lp-navy-deep); }
[data-fo-theme="dark"] .lp-compare th {
  background: #0b1b31;
  color: #f2f6fb;
  border-bottom-color: #2a3f5f;
}
[data-fo-theme="dark"] .lp-compare td { border-color: #2a3f5f; }
[data-fo-theme="dark"] .lp-why-icons span:last-child { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-desk { background: #0b1b31; }
[data-fo-theme="dark"] .lp-desk-item strong,
[data-fo-theme="dark"] .lp-app strong { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-hero-help h2 { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-phone { color: #f2f6fb; }
[data-fo-theme="dark"] .lp-btn--outline { background: #0f2440; color: #f2f6fb; }
[data-fo-theme="dark"] .lp-abo {
  background: #0a1f44;
  border-color: #2a3f5f;
}
[data-fo-theme="dark"] .lp-abo strong { color: #f2f6fb; }

/* --------------------------------------------------------------------------
   Mouvement : entrée du hero, apparition au défilement, ambiance légère
   -------------------------------------------------------------------------- */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-glow {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4%, 6%, 0); }
}
@keyframes lp-grid {
  to { background-position: 26px 26px; }
}
@keyframes lp-gold-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.lp-hero-title { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
.lp-hero-sub { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) .08s both; }
.lp-hero-lead { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) .16s both; }
.lp-hero-actions .lp-cta {
  animation: lp-rise .65s cubic-bezier(.22, 1, .36, 1) both;
}
.lp-hero-actions .lp-cta:nth-child(1) { animation-delay: .24s; }
.lp-hero-actions .lp-cta:nth-child(2) { animation-delay: .32s; }
.lp-hero-actions .lp-cta:nth-child(3) { animation-delay: .4s; }
.lp-hero-badges { animation: lp-rise .65s cubic-bezier(.22, 1, .36, 1) .48s both; }
.lp-hero-motto { animation: lp-rise .6s cubic-bezier(.22, 1, .36, 1) .5s both; }
.lp-hero-help { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) .28s both; }
.lp-stats { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) .42s both; }
.lp-trust { animation: lp-rise .7s cubic-bezier(.22, 1, .36, 1) .55s both; }

/* Le JS pose .lp-motion : sans script, rien n'est masqué. */
.lp-motion .lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}
.lp-motion .lp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .lp * { transition: none !important; animation: none !important; }
  .lp-btn:hover, .lp-cta:hover, .lp-profile:hover, .lp-service:hover, .lp-app:hover { transform: none; }
  .lp-hero::before, .lp-hero::after { animation: none !important; }
  .lp-motion .lp-reveal {
    opacity: 1;
    transform: none;
  }
}