/* ============================================================================
   LogiFlotte — vitrine « centre de contrôle vivant ».
   Toutes les règles sont isolées sous .lf-home / .vit--home afin de ne pas
   modifier les écrans du SaaS ni les autres pages publiques.
   ========================================================================== */

.vit--home {
  --lfp-night: #07091f;
  --lfp-night-2: #0d1030;
  --lfp-indigo: #26216f;
  --lfp-violet: #5750cf;
  --lfp-pink: #d61f69;
  --lfp-pink-hot: #ef3b84;
  --lfp-cream: #f6f3ee;
  --lfp-paper: #fbfaf8;
  --lfp-ink: #101229;
  --lfp-muted: #696a7c;
  --lfp-line: rgb(15 18 45 / .12);
  background: var(--lfp-paper);
  color: var(--lfp-ink);
  overflow-x: clip;
}

.vit--home .vit__bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  color: #fff;
  background: linear-gradient(180deg, rgb(5 7 25 / .72), transparent);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.vit--home .vit__bar.is-dense {
  background: rgb(7 9 31 / .88);
  border-bottom: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 16px 40px rgb(4 5 20 / .2);
  backdrop-filter: blur(18px) saturate(135%);
}

.vit--home .vit__bar .vit__wrap {
  width: min(1280px, 100% - 4rem);
  height: 78px;
  gap: 2rem;
}

.vit--home .vit__nav--home { gap: clamp(1rem, 2.1vw, 2rem); }
.vit--home .vit__nav--home a,
.vit--home .vit__connexion {
  color: rgb(255 255 255 / .78);
  border: 0;
  font-size: .86rem;
  font-weight: 550;
  padding: .75rem 0;
}
.vit--home .vit__nav--home a:hover,
.vit--home .vit__connexion:hover { color: #fff; }

.vit--home .vit__actions .btn--primary {
  min-height: 42px;
  padding: .65rem 1rem;
  border-radius: 10px;
  background: var(--lfp-pink);
  border-color: var(--lfp-pink);
  box-shadow: 0 10px 28px rgb(214 31 105 / .3);
}

.vit--home .vit__burger {
  border-color: rgb(255 255 255 / .22);
  background: rgb(255 255 255 / .08);
}
.vit--home .vit__burger span { background: #fff; }

.lf-home {
  font-family: var(--lf-texte);
  background: var(--lfp-paper);
  color: var(--lfp-ink);
  overflow: clip;
}

.lf-home *, .lf-home *::before, .lf-home *::after { box-sizing: border-box; }
.lf-home a { text-underline-offset: .2em; }
.lf-home h1, .lf-home h2, .lf-home h3, .lf-home p { margin-top: 0; }

.lf-shell {
  position: relative;
  width: min(1280px, 100% - 4rem);
  margin-inline: auto;
}

.lf-route-progress {
  position: fixed;
  z-index: 280;
  right: 17px;
  top: 104px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: rgb(255 255 255 / .12);
  mix-blend-mode: difference;
  pointer-events: none;
}
.lf-route-progress span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(180deg, var(--lfp-pink-hot), #fff);
  box-shadow: 0 0 16px rgb(239 59 132 / .6);
}

/* ------------------------------------------------------------ Commun */

.lf-kicker {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.15rem;
  color: var(--lfp-pink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.lf-kicker i {
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 9px 0 0 -0.5px currentColor;
}
.lf-kicker--light { color: #ff77ad; }

.lf-section-head { max-width: 820px; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.lf-section-head h2 {
  margin-bottom: 1.2rem;
  color: var(--lfp-ink);
  font-family: var(--lf-titre);
  font-size: clamp(2.35rem, 5vw, 4.9rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}
.lf-section-head h2 span { color: var(--lfp-pink); }
.lf-section-head > p,
.lf-section-head > div + p {
  max-width: 58ch;
  color: var(--lfp-muted);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.7;
}
.lf-section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: end;
  max-width: none;
  gap: clamp(2rem, 6vw, 7rem);
}
.lf-section-head--split h2 { margin-bottom: 0; }
.lf-section-head--split > p { margin-bottom: .2rem; }
.lf-section-head--dark h2 { color: #fff; }
.lf-section-head--dark h2 span { color: #ff77ad; }
.lf-section-head--dark > p { color: rgb(255 255 255 / .62); }
.lf-section-head--center { margin-inline: auto; text-align: center; }
.lf-section-head--center .lf-kicker { justify-content: center; }
.lf-section-head--center > p { margin-inline: auto; }

.lf-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.lf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 52px;
  padding: .85rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: inherit;
  font-size: .93rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.lf-button:hover { transform: translateY(-2px); }
.lf-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--lfp-pink-hot), var(--lfp-pink));
  box-shadow: 0 16px 38px rgb(214 31 105 / .3), inset 0 1px rgb(255 255 255 / .18);
}
.lf-button--primary:hover { box-shadow: 0 20px 44px rgb(214 31 105 / .4), inset 0 1px rgb(255 255 255 / .22); }
.lf-button--glass { color: #fff; border-color: rgb(255 255 255 / .34); background: rgb(255 255 255 / .08); backdrop-filter: blur(12px); }
.lf-button--glass:hover { border-color: rgb(255 255 255 / .62); background: rgb(255 255 255 / .14); }
.lf-button--outline { border-color: rgb(15 18 45 / .2); background: transparent; color: var(--lfp-ink); }
.lf-button--outline:hover { border-color: var(--lfp-pink); color: var(--lfp-pink); }
.lf-button--large { min-height: 60px; padding-inline: 1.6rem; font-size: 1rem; }
.lf-play { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; font-size: .55rem; }

/* --------------------------------------------------------------- Héros */

.lf-hero {
  position: relative;
  min-height: max(760px, 100svh);
  display: flex;
  align-items: center;
  isolation: isolate;
  color: #fff;
  background: var(--lfp-night);
  overflow: hidden;
}
.lf-hero__image {
  position: absolute;
  z-index: -4;
  inset: -2.5% 0 auto;
  width: 100%;
  height: 105%;
  object-fit: cover;
  object-position: 50% center;
  transform: scale(1.035);
  will-change: transform;
}
.lf-hero__shade {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 7 28 / .97) 0%, rgb(5 7 28 / .84) 32%, rgb(5 7 28 / .35) 61%, rgb(5 7 28 / .14) 100%),
    linear-gradient(180deg, rgb(4 6 24 / .34), transparent 45%, rgb(4 6 24 / .84));
}
.lf-orbit--hero {
  position: absolute;
  z-index: -2;
  width: 720px;
  height: 720px;
  left: -270px;
  bottom: -500px;
  border: 1px solid rgb(239 59 132 / .28);
  border-radius: 50%;
  box-shadow: 0 0 120px rgb(214 31 105 / .12);
}
.lf-orbit--hero::before,
.lf-orbit--hero::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / .08); border-radius: inherit; }
.lf-orbit--hero::before { inset: 70px; }
.lf-orbit--hero::after { inset: 150px; }

.lf-hero__content {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(330px, .28fr);
  align-items: center;
  gap: 3rem;
  padding-block: 128px 126px;
}
.lf-hero__copy { max-width: 770px; }
.lf-hero h1 {
  margin: 0 0 1.55rem;
  color: #fff;
  font-family: var(--lf-titre);
  font-size: clamp(3.5rem, 6.2vw, 6.4rem);
  font-weight: 760;
  letter-spacing: -.065em;
  line-height: .91;
  text-wrap: balance;
  text-shadow: 0 5px 30px rgb(0 0 0 / .15);
}
.lf-hero h1 span {
  display: inline-block;
  color: #ff4e94;
  font-size: .72em;
  letter-spacing: -.05em;
  line-height: 1.04;
}
.lf-hero__lead {
  max-width: 57ch;
  margin-bottom: 2rem;
  color: rgb(255 255 255 / .78);
  font-size: clamp(1rem, 1.5vw, 1.19rem);
  line-height: 1.65;
}
.lf-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / .68);
  font-size: .78rem;
}
.lf-hero__trust li { display: flex; align-items: center; gap: .55rem; }
.lf-hero__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ff4e94; box-shadow: 0 0 0 4px rgb(255 78 148 / .12); }

.lf-hero__signals {
  position: relative;
  align-self: stretch;
  min-height: 520px;
}
.lf-signal {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 205px;
  padding: .7rem .85rem;
  border: 1px solid rgb(255 255 255 / .17);
  border-radius: 14px;
  background: rgb(9 11 39 / .72);
  color: #fff;
  box-shadow: 0 16px 42px rgb(2 3 16 / .28), inset 0 1px rgb(255 255 255 / .07);
  backdrop-filter: blur(14px) saturate(125%);
  animation: lf-signal-float 5s ease-in-out infinite;
}
.lf-signal::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 1px;
  right: 100%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45));
}
.lf-signal__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: rgb(87 80 207 / .24); color: #a9a5ff; font-weight: 800; }
.lf-signal p { display: grid; gap: .15rem; margin: 0; }
.lf-signal strong { font-size: .82rem; }
.lf-signal small { color: rgb(255 255 255 / .58); font-size: .67rem; }
.lf-signal--move { top: 19%; right: -1rem; }
.lf-signal--cash { top: 50%; left: -4.5rem; animation-delay: -.8s; }
.lf-signal--care { bottom: 10%; right: 1rem; animation-delay: -1.7s; }
.lf-signal--cash .lf-signal__icon { color: #71e4a6; background: rgb(30 166 95 / .18); }
.lf-signal--care .lf-signal__icon { color: #ffd178; background: rgb(240 167 45 / .17); }
@keyframes lf-signal-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.lf-livebar {
  position: absolute;
  inset: auto 0 0;
  border-top: 1px solid rgb(255 255 255 / .12);
  background: rgb(6 8 28 / .62);
  backdrop-filter: blur(12px);
}
.lf-livebar__inner { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3.4rem); min-height: 72px; color: rgb(255 255 255 / .58); font-size: .76rem; }
.lf-livebar__inner span { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.lf-livebar__inner b { color: #fff; font-size: 1rem; }
.lf-livebar__status { color: #fff !important; font-weight: 750; }
.lf-livebar__status i, .lf-status i { width: 7px; height: 7px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 5px rgb(57 217 138 / .12); }
.lf-livebar__time { margin-left: auto; }

/* ---------------------------------------------------------- Une journée */

.lf-day { padding: clamp(6rem, 10vw, 10rem) 0; background: var(--lfp-paper); }
.lf-dayline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lf-dayline::before,
.lf-dayline::after { content: ""; position: absolute; z-index: 0; top: 58px; left: 7%; right: 7%; height: 2px; border-radius: 2px; }
.lf-dayline::before { background: #dedce4; }
.lf-dayline::after { right: auto; width: 0; background: linear-gradient(90deg, var(--lfp-violet), var(--lfp-pink)); transition: width 1.7s cubic-bezier(.2,.7,.2,1); }
.lf-dayline.is-visible::after { width: 86%; }
.lf-dayline__step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  opacity: .35;
  transform: translateY(10px);
  transition: opacity .5s ease calc(var(--step) * 150ms), transform .5s ease calc(var(--step) * 150ms);
}
.lf-dayline.is-visible .lf-dayline__step { opacity: 1; transform: none; }
.lf-dayline__step time { margin-bottom: .8rem; color: var(--lfp-indigo); font-family: var(--lf-mono); font-size: .86rem; font-weight: 800; }
.lf-dayline__dot { width: 17px; height: 17px; margin-bottom: 1.15rem; border: 4px solid var(--lfp-paper); border-radius: 50%; background: var(--lfp-violet); box-shadow: 0 0 0 2px var(--lfp-violet), 0 0 0 7px rgb(87 80 207 / .08); }
.lf-dayline__step--cash .lf-dayline__dot { background: var(--lfp-pink); box-shadow: 0 0 0 2px var(--lfp-pink), 0 0 0 7px rgb(214 31 105 / .08); }
.lf-dayline__step--done .lf-dayline__dot { background: #1ea65f; box-shadow: 0 0 0 2px #1ea65f, 0 0 0 7px rgb(30 166 95 / .08); }
.lf-dayline__step div { display: grid; gap: .35rem; padding-inline: .65rem; }
.lf-dayline__step strong { color: var(--lfp-ink); font-size: .9rem; }
.lf-dayline__step small { color: var(--lfp-muted); font-size: .75rem; line-height: 1.45; }
.lf-day__result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  max-width: 690px;
  margin: clamp(4rem, 7vw, 6rem) auto 0;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--lfp-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgb(15 18 45 / .08);
}
.lf-day__result > span { color: var(--lfp-muted); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lf-day__result strong { grid-row: span 2; color: var(--lfp-pink); font-family: var(--lf-titre); font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.05em; }
.lf-day__result small { color: var(--lfp-ink); font-size: .92rem; font-weight: 650; }

/* --------------------------------------------------- Centre de contrôle */

.lf-control {
  position: relative;
  padding: clamp(6rem, 10vw, 10rem) 0;
  color: #fff;
  background:
    radial-gradient(circle at 75% 20%, rgb(87 80 207 / .18), transparent 31%),
    radial-gradient(circle at 20% 85%, rgb(214 31 105 / .1), transparent 26%),
    var(--lfp-night);
  overflow: hidden;
}
.lf-control__grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgb(255 255 255 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.lf-cockpit {
  position: relative;
  z-index: 2;
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: 24px;
  background: #10132f;
  box-shadow: 0 48px 120px rgb(0 0 0 / .36), 0 0 0 1px rgb(255 255 255 / .03) inset;
  overflow: hidden;
}
.lf-cockpit::before { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .07), transparent 18% 75%, rgb(214 31 105 / .06)); }
.lf-cockpit__top { display: flex; align-items: center; min-height: 58px; padding: 0 1.1rem; border-bottom: 1px solid rgb(255 255 255 / .07); background: #0c0f2a; }
.lf-cockpit__brand { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.lf-cockpit__brand i { width: 22px; height: 10px; border-radius: 8px 3px 3px 8px; background: var(--lfp-pink); box-shadow: -7px 4px 0 -2px var(--lfp-pink); }
.lf-cockpit__search { width: 280px; margin-inline: auto; padding: .55rem .8rem; border: 1px solid rgb(255 255 255 / .07); border-radius: 8px; color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .025); font-size: .67rem; }
.lf-cockpit__user { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--lfp-violet), var(--lfp-pink)); font-size: .65rem; font-weight: 800; }
.lf-cockpit__body { display: grid; grid-template-columns: 66px minmax(0, 1fr); min-height: 620px; }
.lf-cockpit__side { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding-top: 2rem; border-right: 1px solid rgb(255 255 255 / .06); background: #0c0f2a; }
.lf-cockpit__side b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: rgb(255 255 255 / .36); font-size: .75rem; font-weight: 500; }
.lf-cockpit__side b:first-child { color: #fff; background: linear-gradient(135deg, var(--lfp-violet), var(--lfp-pink)); box-shadow: 0 7px 18px rgb(214 31 105 / .22); }
.lf-cockpit__main { padding: 1.4rem; }
.lf-cockpit__hello { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.lf-cockpit__hello div { display: grid; gap: .2rem; }
.lf-cockpit__hello small { color: rgb(255 255 255 / .38); font-size: .62rem; }
.lf-cockpit__hello strong { font-size: 1rem; }
.lf-status { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 1px solid rgb(57 217 138 / .15); border-radius: 999px; color: #8beab5; background: rgb(57 217 138 / .06); font-size: .62rem; }
.lf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: .7rem; }
.lf-kpis article { display: grid; gap: .3rem; min-height: 92px; padding: .8rem .9rem; border: 1px solid rgb(255 255 255 / .06); border-radius: 12px; background: rgb(255 255 255 / .035); }
.lf-kpis span { color: rgb(255 255 255 / .42); font-size: .61rem; }
.lf-kpis strong { color: #fff; font-family: var(--lf-titre); font-size: 1.32rem; letter-spacing: -.035em; }
.lf-kpis strong b { font: inherit; }
.lf-kpis small { color: #67d99b; font-size: .55rem; }
.lf-kpis .is-alert small { color: #ffb85c; }
.lf-cockpit__panels { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, .8fr); grid-template-rows: 292px 195px; gap: .7rem; }
.lf-map, .lf-feed, .lf-chart, .lf-donut-panel { position: relative; border: 1px solid rgb(255 255 255 / .06); border-radius: 13px; background: #141835; overflow: hidden; }
.lf-map { background: #171b38; }
.lf-map::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(24deg, transparent 47%, rgb(255 255 255 / .045) 48% 50%, transparent 51%), linear-gradient(115deg, transparent 46%, rgb(255 255 255 / .04) 47% 49%, transparent 50%); background-size: 80px 55px, 115px 75px; }
.lf-map__toolbar, .lf-panel-title { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: .75rem .85rem; }
.lf-map__toolbar strong, .lf-panel-title strong { font-size: .67rem; }
.lf-map__toolbar span, .lf-panel-title span { color: #8b88df; font-size: .56rem; }
.lf-road { position: absolute; z-index: 1; display: block; height: 4px; border: 1px solid rgb(255 255 255 / .05); border-radius: 8px; background: #303653; transform-origin: left center; }
.lf-road--1 { width: 82%; left: 4%; top: 48%; transform: rotate(-9deg); }
.lf-road--2 { width: 68%; left: 27%; top: 72%; transform: rotate(17deg); }
.lf-road--3 { width: 60%; left: 22%; top: 25%; transform: rotate(71deg); }
.lf-road--4 { width: 50%; left: 54%; top: 30%; transform: rotate(112deg); }
.lf-map__water { position: absolute; right: -8%; bottom: -20%; width: 55%; height: 52%; border-radius: 50% 0 0; background: #101d3d; transform: rotate(-12deg); }
.lf-car { position: absolute; z-index: 3; display: grid; place-items: center; width: 19px; height: 19px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; color: #fff; background: var(--lfp-pink); box-shadow: 0 4px 12px rgb(0 0 0 / .32); font-size: 0; transform: rotate(-45deg); }
.lf-car::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.lf-car--1 { left: 24%; top: 54%; animation: lf-car-one 8s ease-in-out infinite; }
.lf-car--2 { left: 43%; top: 28%; background: #746df0; }
.lf-car--3 { left: 64%; top: 69%; background: #34b97a; }
.lf-car--4 { right: 12%; top: 38%; background: #f0a72d; }
@keyframes lf-car-one { 50% { left: 56%; top: 48%; } }
.lf-map__bubble { position: absolute; z-index: 4; left: 28%; top: 43%; display: grid; gap: .15rem; padding: .5rem .65rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 9px; background: rgb(8 10 32 / .86); box-shadow: 0 8px 24px rgb(0 0 0 / .25); animation: lf-bubble 8s ease-in-out infinite; }
.lf-map__bubble strong { font-size: .58rem; }
.lf-map__bubble span { color: rgb(255 255 255 / .45); font-size: .5rem; }
@keyframes lf-bubble { 50% { left: 60%; top: 37%; } }
.lf-feed ul { display: grid; gap: .2rem; margin: 0; padding: 0 .7rem .6rem; list-style: none; }
.lf-feed li { display: flex; align-items: center; gap: .55rem; padding: .52rem .25rem; border-top: 1px solid rgb(255 255 255 / .045); }
.lf-feed li > i { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 8px; font-style: normal; font-size: .6rem; }
.lf-feed .is-green { color: #76e5a8; background: rgb(48 190 112 / .12); }
.lf-feed .is-violet { color: #aaa6ff; background: rgb(87 80 207 / .14); }
.lf-feed .is-amber { color: #ffc970; background: rgb(240 167 45 / .12); }
.lf-feed .is-blue { color: #7ec8ff; background: rgb(70 157 226 / .12); }
.lf-feed p { display: grid; gap: .16rem; margin: 0; }
.lf-feed p strong { font-size: .57rem; }
.lf-feed p small { color: rgb(255 255 255 / .35); font-size: .48rem; }
.lf-chart__bars { display: flex; align-items: end; gap: 7%; height: 112px; padding: .35rem 1.2rem 0; border-bottom: 1px solid rgb(255 255 255 / .05); background: repeating-linear-gradient(to top, transparent 0 27px, rgb(255 255 255 / .04) 28px); }
.lf-chart__bars i { width: 8%; height: var(--bar); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #f04c91, #5d54d8); transform: scaleY(.08); transform-origin: bottom; transition: transform .75s cubic-bezier(.2,.8,.2,1) calc(var(--delay) * 75ms); }
.lf-cockpit.is-visible .lf-chart__bars i { transform: scaleY(1); }
.lf-chart__days { display: flex; justify-content: space-between; padding: .45rem 1.15rem; color: rgb(255 255 255 / .28); font-size: .47rem; }
.lf-donut-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-bottom: .65rem; }
.lf-donut-panel .lf-panel-title { grid-column: 1/-1; }
.lf-donut { display: grid; place-items: center; width: 100px; height: 100px; margin-left: .85rem; border-radius: 50%; background: conic-gradient(var(--lfp-pink) 0 45%, #7067e5 45% 77%, #32b477 77%); transform: rotate(-45deg); }
.lf-donut::before { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; background: #141835; }
.lf-donut span { position: relative; z-index: 1; display: grid; text-align: center; font-size: .75rem; font-weight: 800; transform: rotate(45deg); }
.lf-donut small { color: rgb(255 255 255 / .32); font-size: .43rem; font-weight: 500; }
.lf-donut-panel > ul { display: grid; gap: .45rem; margin: 0; padding: 0 .8rem; list-style: none; color: rgb(255 255 255 / .5); font-size: .5rem; }
.lf-donut-panel > ul li { display: grid; grid-template-columns: 7px 1fr auto; gap: .35rem; align-items: center; }
.lf-donut-panel > ul i { width: 6px; height: 6px; border-radius: 50%; background: var(--lfp-pink); }
.lf-donut-panel > ul li:nth-child(2) i { background: #7067e5; }
.lf-donut-panel > ul li:nth-child(3) i { background: #32b477; }
.lf-donut-panel > ul b { color: #fff; }
.lf-cockpit__toast { position: absolute; z-index: 7; right: 2rem; top: 10rem; display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border: 1px solid rgb(81 227 148 / .2); border-radius: 12px; background: rgb(11 20 37 / .92); box-shadow: 0 20px 45px rgb(0 0 0 / .3); opacity: 0; transform: translateX(30px); transition: opacity .55s ease .9s, transform .55s ease .9s; }
.lf-cockpit.is-visible .lf-cockpit__toast { opacity: 1; transform: none; }
.lf-cockpit__toast i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #78e9ac; background: rgb(48 190 112 / .13); font-style: normal; }
.lf-cockpit__toast span { display: grid; gap: .15rem; color: rgb(255 255 255 / .45); font-size: .56rem; }
.lf-cockpit__toast strong { color: #fff; font-size: .65rem; }
.lf-control__legend { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / .12); }
.lf-control__legend li { display: grid; gap: .25rem; padding: 1.5rem 1.6rem; border-right: 1px solid rgb(255 255 255 / .1); }
.lf-control__legend li:last-child { border-right: 0; }
.lf-control__legend b { color: #fff; font-family: var(--lf-titre); font-size: 1.45rem; }
.lf-control__legend span { color: rgb(255 255 255 / .43); font-size: .72rem; }

/* --------------------------------------------------------- Expériences */

.lf-experiences { padding: clamp(6rem, 10vw, 10rem) 0; background: var(--lfp-cream); }
.lf-exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lf-exp { position: relative; min-height: 590px; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid rgb(15 18 45 / .1); border-radius: 24px; background: #fff; overflow: hidden; }
.lf-exp header { display: grid; gap: .65rem; position: relative; z-index: 2; }
.lf-exp header span { color: var(--lfp-pink); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lf-exp header strong { max-width: 18ch; font-family: var(--lf-titre); font-size: clamp(1.65rem, 2.8vw, 2.6rem); line-height: 1.02; letter-spacing: -.04em; }
.lf-exp > p { position: absolute; inset: auto 2.4rem 2.25rem; margin: 0; color: var(--lfp-muted); font-size: .92rem; line-height: 1.65; }
.lf-exp--gps { color: #fff; background: var(--lfp-night-2); border-color: transparent; }
.lf-exp--gps header span { color: #8e88ff; }
.lf-exp--gps > p { color: rgb(255 255 255 / .6); }
.lf-exp__map { position: absolute; inset: 145px 2rem 115px; border: 1px solid rgb(255 255 255 / .08); border-radius: 18px; background: #151936; overflow: hidden; }
.lf-exp__map::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(35deg, transparent 48%, rgb(255 255 255 / .05) 49% 51%, transparent 52%), linear-gradient(115deg, transparent 47%, rgb(255 255 255 / .04) 48% 50%, transparent 51%); background-size: 100px 80px, 130px 95px; }
.lf-exp__route { position: absolute; width: 105%; height: 5px; left: -4%; top: 54%; border: 1px solid rgb(255 255 255 / .07); border-radius: 8px; background: #313653; transform: rotate(-11deg); }
.lf-exp__route::after { content: ""; position: absolute; top: 1px; left: 8%; width: 54%; height: 1px; background: repeating-linear-gradient(90deg, var(--lfp-pink) 0 9px, transparent 9px 15px); }
.lf-exp__pin { position: absolute; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; background: var(--lfp-pink); box-shadow: 0 5px 18px rgb(0 0 0 / .3); }
.lf-exp__pin--1 { left: 22%; top: 51%; animation: lf-exp-pin 7s ease-in-out infinite; }
.lf-exp__pin--2 { left: 58%; top: 29%; background: #7770ed; }
.lf-exp__pin--3 { right: 14%; bottom: 19%; background: #3ec582; }
@keyframes lf-exp-pin { 50% { left: 59%; top: 43%; } }
.lf-exp__map div { position: absolute; left: 26%; top: 35%; display: grid; gap: .2rem; padding: .55rem .7rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; background: rgb(8 10 31 / .88); animation: lf-exp-bubble 7s ease-in-out infinite; }
.lf-exp__map b { font-size: .65rem; }
.lf-exp__map small { color: rgb(255 255 255 / .48); font-size: .56rem; }
@keyframes lf-exp-bubble { 50% { left: 63%; top: 27%; } }
.lf-exp--gps > ul { position: absolute; left: 2.4rem; right: 2.4rem; bottom: 6.9rem; display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lf-exp--gps > ul li { padding: .45rem .6rem; border: 1px solid rgb(255 255 255 / .09); border-radius: 999px; color: rgb(255 255 255 / .56); font-size: .6rem; }
.lf-exp--money { background: #fff6f9; }
.lf-exp__total { display: grid; margin-top: 2.5rem; }
.lf-exp__total small { color: var(--lfp-muted); font-size: .72rem; }
.lf-exp__total strong { color: var(--lfp-pink); font-family: var(--lf-titre); font-size: clamp(3rem, 6vw, 5.6rem); letter-spacing: -.06em; line-height: 1; }
.lf-exp__total em { width: fit-content; margin-top: .6rem; padding: .35rem .55rem; border-radius: 99px; color: #117944; background: #e9f9f0; font-size: .62rem; font-style: normal; font-weight: 750; }
.lf-receipts { display: grid; gap: .6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.lf-receipts li { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid rgb(214 31 105 / .08); border-radius: 12px; background: rgb(255 255 255 / .68); opacity: .35; transform: translateX(20px); transition: opacity .45s ease, transform .45s ease; }
.lf-exp.is-visible .lf-receipts li { opacity: 1; transform: none; }
.lf-exp.is-visible .lf-receipts li:nth-child(2) { transition-delay: .18s; }
.lf-exp.is-visible .lf-receipts li:nth-child(3) { transition-delay: .36s; }
.lf-receipts li > i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; color: #fff; background: var(--lfp-indigo); font-size: .58rem; font-style: normal; font-weight: 800; }
.lf-receipts li > span { display: grid; gap: .15rem; }
.lf-receipts li > span { font-size: .7rem; font-weight: 700; }
.lf-receipts small { color: var(--lfp-muted); font-size: .55rem; font-weight: 500; }
.lf-receipts b { margin-left: auto; color: #16834b; font-size: .68rem; }
.lf-exp--team { background: #fff; }
.lf-team-list { display: grid; gap: .65rem; margin-top: 3rem; }
.lf-team-list > div { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid var(--lfp-line); border-radius: 15px; background: #faf9fc; }
.lf-team-list > div > i { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--lfp-indigo), var(--lfp-violet)); font-size: .7rem; font-style: normal; font-weight: 800; box-shadow: inset 0 0 0 4px rgb(255 255 255 / .1); }
.lf-team-list p { display: grid; gap: .2rem; margin: 0; }
.lf-team-list b { font-size: .82rem; }
.lf-team-list small { color: var(--lfp-muted); font-size: .66rem; }
.lf-team-list span { margin-left: auto; padding: .35rem .55rem; border-radius: 99px; color: #137743; background: #eaf8f0; font-size: .58rem; font-weight: 750; }
.lf-exp--care { background: #f5f3ff; }
.lf-care-ring { position: relative; display: grid; place-items: center; width: 210px; height: 210px; margin: 2.5rem auto 1rem; border-radius: 50%; background: conic-gradient(var(--lfp-pink) 0 76%, rgb(87 80 207 / .12) 76%); box-shadow: 0 20px 55px rgb(87 80 207 / .14); }
.lf-care-ring::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: #f5f3ff; }
.lf-care-ring span { position: relative; z-index: 1; display: grid; justify-items: center; }
.lf-care-ring b { color: var(--lfp-indigo); font-family: var(--lf-titre); font-size: 4.7rem; letter-spacing: -.08em; line-height: .8; }
.lf-care-ring small { color: var(--lfp-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.lf-care-ring > i { position: absolute; z-index: 2; top: 2px; width: 15px; height: 15px; border: 4px solid #fff; border-radius: 50%; background: var(--lfp-pink); box-shadow: 0 0 0 5px rgb(214 31 105 / .14); }
.lf-care-copy { display: grid; gap: .25rem; text-align: center; }
.lf-care-copy b { color: var(--lfp-ink); font-size: .9rem; }
.lf-care-copy span { color: var(--lfp-muted); font-size: .7rem; }
.lf-care-copy small { width: fit-content; margin: .35rem auto 0; padding: .35rem .55rem; border-radius: 99px; color: #9c6111; background: #fff1d9; font-size: .58rem; font-weight: 750; }

/* ----------------------------------------------------------- Rentabilité */

.lf-profit { position: relative; padding: clamp(6rem, 10vw, 10rem) 0; color: #fff; background: #090b24; overflow: hidden; }
.lf-profit__halo { position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; border-radius: 50%; background: radial-gradient(circle, rgb(87 80 207 / .2), transparent 66%); transform: translate(-50%, -42%); }
.lf-profit__stage { position: relative; display: grid; grid-template-columns: .9fr 1.1fr .85fr; gap: 1rem; align-items: center; min-height: 450px; }
.lf-profit__vehicle { position: relative; width: 310px; height: 210px; margin-inline: auto; }
.lf-profit__body { position: absolute; left: 20px; right: 20px; bottom: 51px; height: 86px; border: 2px solid rgb(255 255 255 / .35); border-radius: 42px 62px 20px 18px; background: linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .025)); box-shadow: 0 25px 50px rgb(0 0 0 / .25), inset 0 1px rgb(255 255 255 / .16); }
.lf-profit__roof { position: absolute; left: 70px; right: 55px; bottom: 124px; height: 52px; border: 2px solid rgb(255 255 255 / .32); border-bottom: 0; border-radius: 42px 48px 0 0; background: linear-gradient(160deg, rgb(87 80 207 / .4), rgb(255 255 255 / .03)); transform: skewX(-7deg); }
.lf-profit__vehicle > i { position: absolute; z-index: 2; bottom: 31px; width: 51px; height: 51px; border: 10px solid #242744; border-radius: 50%; background: #080a1e; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .2), 0 5px 12px rgb(0 0 0 / .4); }
.lf-profit__vehicle > i:nth-of-type(1) { left: 63px; }
.lf-profit__vehicle > i:nth-of-type(2) { right: 52px; }
.lf-profit__vehicle > b { position: absolute; bottom: 2px; left: 50%; padding: .35rem .55rem; border-radius: 5px; color: var(--lfp-ink); background: #fff; font-family: var(--lf-mono); font-size: .62rem; transform: translateX(-50%); }
.lf-profit__vehicle > small { position: absolute; top: 0; left: 50%; color: rgb(255 255 255 / .36); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; transform: translateX(-50%); }
.lf-profit__math { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.lf-profit__math li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid rgb(255 255 255 / .08); border-radius: 13px; background: rgb(255 255 255 / .035); opacity: .3; transform: translateX(24px); transition: opacity .45s ease, transform .45s ease; }
.lf-profit__stage.is-visible .lf-profit__math li { opacity: 1; transform: none; }
.lf-profit__stage.is-visible .lf-profit__math li:nth-child(2){transition-delay:.13s}.lf-profit__stage.is-visible .lf-profit__math li:nth-child(3){transition-delay:.26s}.lf-profit__stage.is-visible .lf-profit__math li:nth-child(4){transition-delay:.39s}
.lf-profit__math span { color: rgb(255 255 255 / .52); font-size: .8rem; }
.lf-profit__math strong { color: #ffb3cf; font-size: .9rem; }
.lf-profit__math strong b { font: inherit; }
.lf-profit__math .is-plus { border-color: rgb(51 197 126 / .15); background: rgb(51 197 126 / .06); }
.lf-profit__math .is-plus strong { color: #74e2a9; }
.lf-profit__net { display: grid; justify-items: center; gap: .45rem; padding: 2.2rem 1rem; border: 1px solid rgb(214 31 105 / .25); border-radius: 22px; background: linear-gradient(150deg, rgb(214 31 105 / .16), rgb(87 80 207 / .1)); box-shadow: 0 24px 60px rgb(0 0 0 / .2); text-align: center; }
.lf-profit__net span { color: rgb(255 255 255 / .52); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.lf-profit__net strong { color: #fff; font-family: var(--lf-titre); font-size: clamp(2.2rem, 4.2vw, 4.1rem); letter-spacing: -.06em; line-height: 1; }
.lf-profit__net strong b { font: inherit; }
.lf-profit__net small { color: #ff83b3; font-size: .68rem; }
.lf-profit__note { max-width: 70ch; margin: 2.5rem auto 0; color: rgb(255 255 255 / .42); font-size: .74rem; line-height: 1.65; text-align: center; }

/* --------------------------------------------------------------- Vérité */

.lf-truth { padding: clamp(6rem, 10vw, 10rem) 0; background: #fff; }
.lf-truth__inner { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.lf-truth__copy h2 { color: var(--lfp-ink); font-family: var(--lf-titre); font-size: clamp(2.5rem, 5vw, 5rem); line-height: .97; letter-spacing: -.055em; }
.lf-truth__copy h2 span { color: var(--lfp-pink); }
.lf-truth__copy > p:last-child { max-width: 49ch; color: var(--lfp-muted); font-size: 1rem; line-height: 1.7; }
.lf-truth__visual { position: relative; min-height: 500px; display: grid; place-items: center; border: 1px solid var(--lfp-line); border-radius: 28px; background: radial-gradient(circle, rgb(87 80 207 / .1), transparent 42%), #f7f6fb; overflow: hidden; }
.lf-truth__visual::before, .lf-truth__visual::after { content: ""; position: absolute; border: 1px dashed rgb(87 80 207 / .15); border-radius: 50%; }
.lf-truth__visual::before { width: 360px; height: 360px; }
.lf-truth__visual::after { width: 240px; height: 240px; }
.lf-truth__visual > span { position: absolute; z-index: 2; left: 50%; top: 50%; padding: .65rem .85rem; border: 1px solid var(--lfp-line); border-radius: 11px; color: var(--lfp-muted); background: #fff; box-shadow: 0 12px 30px rgb(15 18 45 / .08); font-size: .72rem; font-weight: 700; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); transition: transform 1s cubic-bezier(.2,.75,.2,1), opacity 1s ease; }
.lf-truth__visual.is-visible > span { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
.lf-truth__visual > div { position: relative; z-index: 4; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 34px; color: #fff; background: linear-gradient(145deg, var(--lfp-indigo), var(--lfp-night)); box-shadow: 0 25px 65px rgb(38 33 111 / .3), inset 0 1px rgb(255 255 255 / .14); opacity: .55; transform: scale(.86); transition: opacity .65s ease .55s, transform .65s cubic-bezier(.2,.9,.2,1) .55s; }
.lf-truth__visual.is-visible > div { opacity: 1; transform: none; }
.lf-truth__visual > div i { width: 36px; height: 16px; border-radius: 9px 4px 4px 9px; background: var(--lfp-pink); box-shadow: -10px 7px 0 -3px var(--lfp-pink); }
.lf-truth__visual > div b { font-size: .8rem; letter-spacing: .08em; }
.lf-truth__visual > div small { color: rgb(255 255 255 / .5); font-size: .58rem; }

/* -------------------------------------------------------------- Abidjan */

.lf-abidjan { position: relative; min-height: 780px; display: flex; align-items: center; isolation: isolate; color: #fff; background: var(--lfp-night); overflow: hidden; }
.lf-abidjan > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lf-abidjan__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgb(5 7 27 / .94), rgb(5 7 27 / .62) 48%, rgb(5 7 27 / .18)), linear-gradient(0deg, rgb(5 7 27 / .6), transparent 60%); }
.lf-abidjan__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(3rem, 8vw, 8rem); align-items: end; padding-block: 8rem; }
.lf-abidjan__inner h2 { margin-bottom: 1.5rem; color: #fff; font-family: var(--lf-titre); font-size: clamp(3rem, 6vw, 6rem); line-height: .92; letter-spacing: -.06em; }
.lf-abidjan__inner h2 span { color: #ff5c9c; }
.lf-abidjan__inner > div > p:last-child { max-width: 50ch; color: rgb(255 255 255 / .68); font-size: 1.02rem; line-height: 1.7; }
.lf-abidjan__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.lf-abidjan__facts li { min-height: 118px; display: grid; align-content: end; gap: .35rem; padding: 1.15rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; background: rgb(7 9 31 / .5); backdrop-filter: blur(12px); }
.lf-abidjan__facts strong { font-size: .92rem; }
.lf-abidjan__facts span { color: rgb(255 255 255 / .5); font-size: .68rem; }

/* ----------------------------------------------------------- Écosystème */

.lf-ecosystem { padding: clamp(6rem, 10vw, 10rem) 0; background: var(--lfp-paper); }
.lf-eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lf-eco-card { min-height: 660px; display: grid; grid-template-rows: auto 1fr; gap: 2.5rem; padding: clamp(1.6rem, 3vw, 2.5rem); border-radius: 26px; overflow: hidden; }
.lf-eco-card--jobs { background: #f0efff; }
.lf-eco-card--rent { background: #0d1030; color: #fff; }
.lf-eco-card__copy { position: relative; z-index: 2; }
.lf-eco-card__tag { display: inline-flex; padding: .4rem .6rem; border-radius: 999px; color: var(--lfp-pink); background: rgb(214 31 105 / .09); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lf-eco-card--rent .lf-eco-card__tag { color: #ff78ad; background: rgb(214 31 105 / .14); }
.lf-eco-card h3 { margin: 1rem 0 .9rem; font-family: var(--lf-titre); font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: .98; letter-spacing: -.05em; }
.lf-eco-card__copy p { max-width: 50ch; color: var(--lfp-muted); font-size: .86rem; line-height: 1.62; }
.lf-eco-card--rent .lf-eco-card__copy p { color: rgb(255 255 255 / .56); }
.lf-eco-card__copy a { display: inline-flex; gap: .65rem; color: var(--lfp-pink); font-size: .85rem; font-weight: 800; text-decoration: none; }
.lf-eco-card--rent .lf-eco-card__copy a { color: #ff78ad; }
.lf-eco-card__copy a:hover span { transform: translateX(4px); }
.lf-eco-card__copy a span { transition: transform .2s ease; }
.lf-market { align-self: end; border: 1px solid rgb(38 33 111 / .11); border-radius: 18px 18px 0 0; background: rgb(255 255 255 / .78); box-shadow: 0 25px 55px rgb(38 33 111 / .12); overflow: hidden; transform: translateY(2.6rem); }
.lf-market__top { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--lfp-line); font-size: .65rem; }
.lf-market__top span { color: var(--lfp-muted); }
.lf-market__top b { color: var(--lfp-indigo); }
.lf-market ul { display: grid; gap: .45rem; margin: 0; padding: .8rem; list-style: none; }
.lf-market li { display: flex; align-items: center; gap: .7rem; padding: .65rem; border: 1px solid var(--lfp-line); border-radius: 11px; background: #fff; }
.lf-market li > i { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--lfp-indigo), var(--lfp-violet)); font-size: .58rem; font-style: normal; font-weight: 800; }
.lf-market li p { display: grid; gap: .14rem; margin: 0; }
.lf-market li b { color: var(--lfp-ink); font-size: .69rem; }
.lf-market li small { color: var(--lfp-muted); font-size: .55rem; }
.lf-market li > span { margin-left: auto; padding: .32rem .45rem; border-radius: 99px; color: var(--lfp-indigo); background: #efeeff; font-size: .5rem; font-weight: 800; }
.lf-rental-ui { position: relative; align-self: end; min-height: 300px; padding: 1.2rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 18px 18px 0 0; background: linear-gradient(160deg, rgb(255 255 255 / .08), rgb(255 255 255 / .025)); box-shadow: 0 25px 60px rgb(0 0 0 / .22); transform: translateY(2.6rem); }
.lf-rental-ui__badge { display: inline-flex; padding: .4rem .55rem; border-radius: 99px; color: #75e0a7; background: rgb(47 192 115 / .12); font-size: .54rem; font-weight: 800; }
.lf-rental-ui__car { position: relative; width: 300px; height: 130px; margin: 1rem auto .4rem; }
.lf-rental-ui__car > span { position: absolute; left: 12px; right: 12px; bottom: 30px; height: 67px; border: 2px solid rgb(255 255 255 / .35); border-radius: 37px 50px 14px 14px; background: linear-gradient(155deg, rgb(255 255 255 / .18), rgb(255 255 255 / .03)); }
.lf-rental-ui__car > span::before { content: ""; position: absolute; left: 56px; right: 43px; top: -43px; height: 47px; border: 2px solid rgb(255 255 255 / .33); border-bottom: 0; border-radius: 35px 40px 0 0; background: rgb(87 80 207 / .26); transform: skewX(-8deg); }
.lf-rental-ui__car > i { position: absolute; z-index: 2; bottom: 14px; width: 43px; height: 43px; border: 9px solid #292d4d; border-radius: 50%; background: #090b24; }
.lf-rental-ui__car > i:first-child { left: 55px; }.lf-rental-ui__car > i:nth-child(2){right:45px}
.lf-rental-ui > p { display: grid; gap: .25rem; margin: 0; text-align: center; }
.lf-rental-ui > p strong { font-size: .84rem; }
.lf-rental-ui > p small { color: rgb(255 255 255 / .4); font-size: .6rem; }
.lf-rental-ui > ul { display: flex; justify-content: center; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.lf-rental-ui > ul li { padding: .35rem .5rem; border: 1px solid rgb(255 255 255 / .09); border-radius: 99px; color: rgb(255 255 255 / .52); font-size: .52rem; }

/* --------------------------------------------------------------- Tarifs */

.lf-pricing { padding: clamp(6rem, 10vw, 10rem) 0; background: var(--lfp-cream); }
.lf-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: .9rem; }
.lf-price-card { position: relative; display: flex; flex-direction: column; padding: 2rem; border: 1px solid rgb(15 18 45 / .1); border-radius: 22px; background: #fff; box-shadow: 0 16px 45px rgb(15 18 45 / .05); }
.lf-price-card.is-featured { color: #fff; border-color: transparent; background: linear-gradient(155deg, #2e287f, #111331); box-shadow: 0 26px 70px rgb(38 33 111 / .23); transform: translateY(-14px); }
.lf-price-card__popular { position: absolute; top: 1.2rem; right: 1.2rem; padding: .42rem .6rem; border-radius: 99px; color: #fff; background: var(--lfp-pink); font-size: .55rem; font-weight: 800; }
.lf-price-card__name { margin-bottom: 1.2rem; color: var(--lfp-pink); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lf-price-card h3 { margin-bottom: .35rem; color: inherit; font-family: var(--lf-titre); font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: .95; letter-spacing: -.055em; }
.lf-price-card h3 small { display: block; margin-top: .5rem; color: var(--lfp-muted); font-size: .68rem; font-weight: 650; letter-spacing: 0; }
.lf-price-card.is-featured h3 small { color: rgb(255 255 255 / .48); }
.lf-price-card__range { color: var(--lfp-muted); font-size: .76rem; }
.lf-price-card.is-featured .lf-price-card__range { color: rgb(255 255 255 / .58); }
.lf-price-card__monthly { min-height: 1.2rem; color: var(--lfp-muted); font-size: .68rem; }
.lf-price-card.is-featured .lf-price-card__monthly { color: rgb(255 255 255 / .4); }
.lf-price-card ul { display: grid; gap: .65rem; margin: 1.3rem 0 1.8rem; padding: 1.2rem 0 0; border-top: 1px solid var(--lfp-line); list-style: none; }
.lf-price-card.is-featured ul { border-color: rgb(255 255 255 / .1); }
.lf-price-card li { display: flex; align-items: center; gap: .55rem; color: var(--lfp-muted); font-size: .74rem; }
.lf-price-card.is-featured li { color: rgb(255 255 255 / .65); }
.lf-price-card li::before { content: "✓"; color: #1aa05a; font-weight: 900; }
.lf-price-card__trial { width: fit-content; margin: auto 0 .85rem; padding: .38rem .55rem; border-radius: 99px; color: var(--lfp-pink); background: #fff0f6; font-size: .58rem; font-weight: 800; }
.lf-price-card.is-featured .lf-price-card__trial { color: #ffa3c8; background: rgb(214 31 105 / .14); }
.lf-price-card .lf-button { width: 100%; }
.lf-price-card.is-featured .lf-button { color: #fff; }
.lf-pricing__included { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 2.2rem 0 0; color: var(--lfp-muted); font-size: .72rem; }
.lf-pricing__included span { color: #159352; font-weight: 900; }

/* --------------------------------------------------------- Appel final */

.lf-final { position: relative; min-height: 800px; display: flex; align-items: center; isolation: isolate; color: #fff; background: var(--lfp-night); overflow: hidden; }
.lf-final > img { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-final__shade { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgb(5 7 27 / .95), rgb(5 7 27 / .74) 50%, rgb(5 7 27 / .32)), linear-gradient(0deg, rgb(5 7 27 / .8), transparent 70%); }
.lf-final__points { position: absolute; z-index: -1; inset: 0; }
.lf-final__points i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--lfp-pink); box-shadow: 0 0 0 7px rgb(214 31 105 / .15), 0 0 24px rgb(255 57 139 / .8); animation: lf-point 3s ease-in-out infinite calc(var(--delay) * 330ms); }
@keyframes lf-point { 0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.25);opacity:1} }
.lf-final__inner { padding-block: 8rem; }
.lf-final h2 { max-width: 1000px; margin-bottom: 1.4rem; color: #fff; font-family: var(--lf-titre); font-size: clamp(3rem, 7vw, 7rem); line-height: .91; letter-spacing: -.065em; }
.lf-final h2 span { color: #ff4f95; }
.lf-final__inner > p { max-width: 58ch; margin-bottom: 2rem; color: rgb(255 255 255 / .68); font-size: 1rem; line-height: 1.7; }
.lf-final__inner > ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.45rem 0 0; padding: 0; list-style: none; color: rgb(255 255 255 / .52); font-size: .72rem; }
.lf-final__inner > ul li { display: flex; align-items: center; gap: .5rem; }
.lf-final__inner > ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ff4f95; }

.vit--home .vit__pied { background: #06081c; border-top: 1px solid rgb(255 255 255 / .08); }
.vit--home .vit__pied .lf-logo--clair .lf-logo__mark .lf-p { fill: var(--lfp-pink); }

/* ----------------------------------------------------------- Apparitions */

.lf-motion .lf-home [data-reveal]:not(.is-visible),
.lf-motion .lf-home [data-cockpit]:not(.is-visible),
.lf-motion .lf-home [data-dayline]:not(.is-visible) { opacity: .001; transform: translateY(24px); }
.lf-home [data-reveal], .lf-home [data-cockpit], .lf-home [data-dayline] { transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1); }
.lf-home .is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Tablette */

@media (max-width: 1100px) {
  .vit--home .vit__bar .vit__wrap, .lf-shell { width: min(100% - 3rem, 960px); }
  .vit--home .vit__nav--home { gap: 1rem; }
  .vit--home .vit__nav--home a { font-size: .76rem; }
  .lf-hero__content { grid-template-columns: minmax(0, .8fr) minmax(240px, .2fr); }
  .lf-hero h1 { font-size: clamp(3.5rem, 7vw, 5.2rem); }
  .lf-signal { min-width: 180px; }
  .lf-signal--cash { left: -3rem; }
  .lf-cockpit__body { min-height: 560px; }
  .lf-cockpit__panels { grid-template-columns: 1.55fr .9fr; grid-template-rows: 260px 180px; }
  .lf-kpis article { padding: .7rem; }
  .lf-kpis strong { font-size: 1.05rem; }
  .lf-profit__stage { grid-template-columns: .8fr 1.1fr .85fr; }
  .lf-profit__vehicle { width: 250px; transform: scale(.84); }
}

@media (max-width: 900px) {
  .vit--home .vit__bar .vit__wrap { height: 68px; }
  .vit--home .vit__nav--home {
    position: fixed;
    inset: 68px 1rem auto;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: .7rem;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: 14px;
    background: rgb(7 9 31 / .97);
    box-shadow: 0 24px 60px rgb(0 0 0 / .3);
    backdrop-filter: blur(18px);
  }
  .vit-menu .vit__nav--home { display: flex; }
  .vit--home .vit__nav--home a { min-height: 44px; display: flex; align-items: center; padding: .7rem .8rem; border-radius: 8px; color: rgb(255 255 255 / .75); }
  .vit--home .vit__nav--home a:hover { background: rgb(255 255 255 / .07); }
  .vit--home .vit__burger { display: flex; }
  .lf-hero__content { grid-template-columns: 1fr; }
  .lf-hero__copy { max-width: 650px; }
  .lf-hero__signals { position: absolute; inset: 0; pointer-events: none; }
  .lf-signal--move { top: 24%; right: 1.5rem; }
  .lf-signal--cash { top: auto; bottom: 19%; left: auto; right: 2.5rem; }
  .lf-signal--care { display: none; }
  .lf-livebar__inner { overflow-x: auto; scrollbar-width: none; }
  .lf-livebar__time { margin-left: 0; }
  .lf-section-head--split { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .lf-dayline { grid-template-columns: 1fr; gap: 0; max-width: 650px; margin-inline: auto; }
  .lf-dayline::before, .lf-dayline::after { top: 20px; bottom: 20px; left: 73px; right: auto; width: 2px; height: auto; }
  .lf-dayline::after { height: 0; transition: height 1.7s ease; }
  .lf-dayline.is-visible::after { width: 2px; height: calc(100% - 40px); }
  .lf-dayline__step { grid-template-columns: 54px 26px 1fr; justify-items: start; align-items: start; gap: .45rem; min-height: 92px; text-align: left; }
  .lf-dayline__step time { padding-top: .2rem; }
  .lf-dayline__dot { margin: .1rem 0 0; }
  .lf-dayline__step div { padding-inline: .5rem 0; }
  .lf-cockpit__top { min-height: 50px; }
  .lf-cockpit__search { width: 220px; }
  .lf-cockpit__body { grid-template-columns: 52px minmax(0, 1fr); }
  .lf-cockpit__main { padding: 1rem; }
  .lf-cockpit__side { gap: .8rem; padding-top: 1.2rem; }
  .lf-kpis { grid-template-columns: repeat(2, 1fr); }
  .lf-cockpit__panels { grid-template-columns: 1.4fr .9fr; grid-template-rows: 250px 170px; }
  .lf-donut { width: 82px; height: 82px; }
  .lf-donut::before { width: 57px; height: 57px; }
  .lf-exp-grid, .lf-eco-grid { grid-template-columns: 1fr; }
  .lf-exp { min-height: 570px; }
  .lf-profit__stage { grid-template-columns: 1fr 1fr; }
  .lf-profit__vehicle { grid-column: 1/-1; height: 170px; }
  .lf-profit__net { min-height: 100%; }
  .lf-truth__inner { grid-template-columns: 1fr; }
  .lf-truth__visual { min-height: 440px; }
  .lf-abidjan__inner { grid-template-columns: 1fr; }
  .lf-abidjan__facts { max-width: 620px; }
  .lf-price-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .lf-price-card.is-featured { transform: none; }
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 640px) {
  .vit--home .vit__bar .vit__wrap, .lf-shell { width: calc(100% - 2rem); }
  .vit--home .vit__bar .vit__wrap { gap: .6rem; }
  .vit--home .vit__logo .lf-logo__word { font-size: 16px !important; }
  .vit--home .vit__logo .lf-logo__mark { width: 27px; height: 27px; }
  .vit--home .vit__connexion { display: none; }
  .vit--home .vit__actions { margin-left: auto; gap: .5rem; }
  .vit--home .vit__actions .btn--primary { min-height: 38px; padding: .55rem .7rem; font-size: .7rem; }
  .vit--home .vit__burger { width: 38px; height: 38px; }
  .lf-route-progress { display: none; }
  .lf-hero { min-height: 820px; align-items: end; }
  .lf-hero__image { inset: 0; height: 100%; object-position: 62% center; transform: scale(1.02); }
  .lf-hero__shade { background: linear-gradient(180deg, rgb(5 7 28 / .46) 0%, rgb(5 7 28 / .56) 30%, rgb(5 7 28 / .97) 70%, rgb(5 7 28) 100%), linear-gradient(90deg, rgb(5 7 28 / .72), transparent); }
  .lf-hero__content { display: block; padding-block: 128px 130px; }
  .lf-hero__copy { margin-top: auto; }
  .lf-kicker { font-size: .6rem; letter-spacing: .13em; }
  .lf-kicker i { width: 20px; }
  .lf-hero h1 { max-width: 12ch; margin-bottom: 1.1rem; font-size: clamp(2.85rem, 13vw, 4rem); line-height: .91; }
  .lf-hero__lead { font-size: .92rem; line-height: 1.55; }
  .lf-actions { display: grid; grid-template-columns: 1fr; }
  .lf-button { width: 100%; min-height: 50px; }
  .lf-hero__trust { gap: .6rem 1.1rem; font-size: .67rem; }
  .lf-hero__signals { display: none; }
  .lf-livebar__inner { gap: 1.4rem; min-height: 64px; }
  .lf-livebar__status { position: sticky; left: 0; padding-right: .8rem; background: rgb(6 8 28 / .95); }
  .lf-section-head { margin-bottom: 2.5rem; }
  .lf-section-head h2 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .lf-section-head--split { gap: 1rem; }
  .lf-section-head > p, .lf-section-head > div + p { font-size: .94rem; line-height: 1.62; }
  .lf-day, .lf-control, .lf-experiences, .lf-profit, .lf-truth, .lf-ecosystem, .lf-pricing { padding-block: 5rem; }
  .lf-day__result { grid-template-columns: 1fr; gap: .45rem; padding: 1.2rem; }
  .lf-day__result strong { grid-row: auto; font-size: 2.5rem; }
  .lf-cockpit { margin-inline: -1.2rem; border-radius: 16px; }
  .lf-cockpit__top { padding-inline: .75rem; }
  .lf-cockpit__brand { font-size: .6rem; }
  .lf-cockpit__search { display: none; }
  .lf-cockpit__user { margin-left: auto; }
  .lf-cockpit__body { grid-template-columns: 39px minmax(0, 1fr); min-height: auto; }
  .lf-cockpit__side { gap: .55rem; }
  .lf-cockpit__side b { width: 27px; height: 27px; font-size: .6rem; }
  .lf-cockpit__main { padding: .65rem; }
  .lf-cockpit__hello { margin-bottom: .6rem; }
  .lf-cockpit__hello strong { font-size: .72rem; }
  .lf-status { display: none; }
  .lf-kpis { gap: .4rem; }
  .lf-kpis article { min-height: 72px; padding: .55rem; border-radius: 8px; }
  .lf-kpis span { font-size: .48rem; }
  .lf-kpis strong { font-size: .86rem; }
  .lf-kpis small { font-size: .43rem; }
  .lf-cockpit__panels { grid-template-columns: 1fr; grid-template-rows: 230px 210px 165px 180px; gap: .45rem; }
  .lf-map { grid-row: auto; }
  .lf-feed { grid-row: auto; }
  .lf-donut-panel { grid-template-columns: 1fr 1fr; }
  .lf-cockpit__toast { right: .8rem; top: 15rem; padding: .55rem; }
  .lf-control__legend { grid-template-columns: 1fr; }
  .lf-control__legend li { padding: 1rem 0; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .lf-exp { min-height: 550px; padding: 1.35rem; border-radius: 18px; }
  .lf-exp header strong { font-size: 2rem; }
  .lf-exp > p { inset: auto 1.35rem 1.35rem; font-size: .82rem; }
  .lf-exp__map { inset: 135px 1rem 125px; }
  .lf-exp--gps > ul { left: 1.35rem; right: 1.35rem; bottom: 7.3rem; overflow-x: auto; }
  .lf-exp__total strong { font-size: 3.7rem; }
  .lf-receipts { margin-top: 1.4rem; }
  .lf-receipts li { padding: .55rem; }
  .lf-receipts b { font-size: .58rem; }
  .lf-team-list { margin-top: 2rem; }
  .lf-team-list > div { padding: .75rem; }
  .lf-team-list > div > i { width: 40px; height: 40px; }
  .lf-care-ring { width: 180px; height: 180px; }
  .lf-care-ring b { font-size: 4rem; }
  .lf-profit__stage { grid-template-columns: 1fr; }
  .lf-profit__vehicle { grid-column: auto; transform: scale(.86); margin: -1rem auto; }
  .lf-profit__math { gap: .5rem; }
  .lf-profit__math li { padding: .8rem; }
  .lf-profit__net { min-height: 210px; }
  .lf-truth__visual { min-height: 360px; }
  .lf-truth__visual::before { width: 300px; height: 300px; }
  .lf-truth__visual::after { width: 210px; height: 210px; }
  .lf-truth__visual > span { font-size: .62rem; }
  .lf-truth__visual > div { width: 145px; height: 145px; }
  .lf-abidjan { min-height: 820px; align-items: end; }
  .lf-abidjan > img { object-position: 63% center; }
  .lf-abidjan__shade { background: linear-gradient(180deg, rgb(5 7 27 / .2), rgb(5 7 27 / .75) 44%, rgb(5 7 27 / .96)); }
  .lf-abidjan__inner { gap: 2rem; padding-block: 6rem 4rem; }
  .lf-abidjan__inner h2 { font-size: 3.5rem; }
  .lf-abidjan__facts { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .lf-abidjan__facts li { min-height: 96px; padding: .8rem; }
  .lf-eco-card { min-height: 620px; padding: 1.35rem; border-radius: 18px; }
  .lf-eco-card h3 { font-size: 2.35rem; }
  .lf-market { transform: translateY(1.5rem); }
  .lf-market li > span { display: none; }
  .lf-rental-ui { transform: translateY(1.5rem); }
  .lf-rental-ui__car { width: 270px; transform: scale(.88); margin-inline: -5px; }
  .lf-price-card { padding: 1.5rem; }
  .lf-final { min-height: 820px; align-items: end; }
  .lf-final > img { object-position: 66% center; }
  .lf-final__shade { background: linear-gradient(180deg, rgb(5 7 27 / .2), rgb(5 7 27 / .72) 44%, rgb(5 7 27 / .98)); }
  .lf-final__inner { padding-block: 7rem 4rem; }
  .lf-final h2 { font-size: clamp(3rem, 13vw, 4.3rem); }
  .lf-final__inner > ul { gap: .5rem 1rem; }
}

@media (max-width: 390px) {
  .vit--home .vit__actions .btn--primary { display: none; }
  .lf-hero h1 { font-size: 2.8rem; }
  .lf-hero__trust li:last-child { display: none; }
  .lf-dayline::before, .lf-dayline::after { left: 66px; }
  .lf-dayline__step { grid-template-columns: 48px 26px 1fr; }
  .lf-abidjan__facts { grid-template-columns: 1fr; }
  .lf-abidjan__facts li { min-height: 78px; }
  .lf-rental-ui__car { transform: scale(.78); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-home *, .lf-home *::before, .lf-home *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .lf-motion .lf-home [data-reveal]:not(.is-visible),
  .lf-motion .lf-home [data-cockpit]:not(.is-visible),
  .lf-motion .lf-home [data-dayline]:not(.is-visible) { opacity: 1; transform: none; }
}