/* City and object pages (resources/views/landing/page.blade.php).
   Loaded after index.css, whose header, buttons (.btn-cta-*), pill and FAQ
   accordion they reuse. Everything here is prefixed lp- so nothing leaks. */

.lp-body {
  --lp-brand: #B41078;
  --lp-brand-dark: #9E0E68;
  --lp-soft: #FFF5FA;
  --lp-soft-2: #FFEEF9;
  --lp-ink: #0F172A;
  --lp-text: #475569;
  --lp-muted: #64748B;
  --lp-line: #F1E4EC;
  --lp-orange: #F5A524;
  background: #FFFFFF;
  color: var(--lp-ink);
}

/* ===== Breadcrumb ===== */
.lp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  font-size: 14px;
  color: var(--lp-muted);
}
.lp-breadcrumb a {
  color: var(--lp-muted);
  text-decoration: none;
}
.lp-breadcrumb a:hover {
  color: var(--lp-brand);
}
/* The page you are on, in the brand colour. */
.lp-breadcrumb [aria-current] {
  color: var(--lp-brand);
  font-weight: 500;
}

/* ===== Hero ===== */
.lp-hero {
  padding: 28px 0 72px;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(255, 238, 249, .9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(245, 165, 36, .08) 0%, rgba(255, 255, 255, 0) 70%);
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  margin-bottom: 20px;
}
.lp-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #000;
  margin: 0 0 20px;
  text-wrap: balance;
}
.lp-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--lp-text);
  max-width: 620px;
  margin: 0 0 28px;
}
.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.lp-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-ink);
}
.lp-assurances li,
.lp-checks li {
  position: relative;
  padding-left: 26px;
}
.lp-assurances li::before,
.lp-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lp-soft-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 6.9 10.6 11.5 5.6' fill='none' stroke='%23B41078' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Visual: the city map or object illustration, with a small badge on its
   corner. The full figures card sits next to the text further down. */
.lp-visual {
  position: relative;
}
.lp-visual-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .35);
}
/* A category page's hero, as the home page's (index.css .hero-section,
   .hero-visual .hero-img, .hero-mobile-visual): the photo's 1260 x 942 shape;
   on desktop the section's 48px padding, the row's 12vw right padding and the
   photo min(138%, 100% + 12vw) wide, spilling into it; below lg the photo at
   most 420px wide, centred. The title stops short of the photo. Below it, as
   much room as under the home page's hero (130px to the next title; 112px on
   a phone). */
.lp-hero-img {
  aspect-ratio: 1260 / 942;
}
.lp-hero.lp-hero--cat {
  padding-bottom: 88px;
}
@media (min-width: 992px) {
  .lp-hero.lp-hero--cat {
    padding-top: 48px;
    padding-bottom: 92px;
  }
  .lp-hero--cat .hero-inner {
    padding-right: max(1.5rem, 12vw);
  }
  .lp-hero--cat .lp-hero-title {
    max-width: 600px;
  }
  /* The home page photo's box, min(138%, 100% + 12vw) wide from -8%; its photo,
     inside the torn edges, is 92.7% of it, 3.6% from the left and 2.1% from
     the top (3.3% left below): ours takes that place. */
  .lp-hero-visual {
    --box: min(138%, 100% + 12vw);
    width: calc(var(--box) * .927);
    margin: calc(var(--box) * .0214) 0 calc(var(--box) * .0333) calc(-8% + var(--box) * .0357);
  }
  /* The home page button's height, set there by its outlined neighbour. */
  .lp-hero-btn {
    min-height: 50px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lp-hero--cat .hero-copy {
    padding-right: 40px;
  }
}
.lp-hero-visual-mobile {
  --box: min(100%, 420px);
  width: calc(var(--box) * .927);
  margin: calc(var(--box) * .0214) auto 0;
  padding-bottom: calc(var(--box) * .0333);
}
.lp-map {
  height: auto;
  overflow: hidden;
}
.lp-badge {
  position: absolute;
  left: -22px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 290px;
  margin: 0;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 18px 36px -16px rgba(180, 16, 120, .35);
}
.lp-badge strong {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--lp-brand);
  font-variant-numeric: tabular-nums;
}
/* On a map the badge is compact and sits over the Atlantic, the one corner
   with no town on it. */
.lp-visual--map .lp-badge {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  bottom: 18px;
}
/* On a photo the badge straddles the bottom edge, so it hides none of it. */
.lp-visual--photo .lp-badge {
  bottom: -26px;
}
.lp-badge .lp-badge-text {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
.lp-badge span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--lp-text);
}
.lp-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lp-text);
}

/* ===== Sections ===== */
.lp-section {
  padding: 72px 0;
}
.lp-section--soft {
  background: var(--lp-soft);
}
.lp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.lp-h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  color: var(--lp-ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.lp-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-muted);
  margin: 0;
}
.lp-sub a {
  color: var(--lp-brand);
  font-weight: 600;
}
.lp-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--lp-brand);
  text-decoration: none;
  white-space: nowrap;
}
.lp-more svg {
  width: 14px;
  height: 10px;
}
.lp-more:hover {
  color: var(--lp-brand-dark);
}
/* A closing link under a section: "Voir plus d'annonces", the steps' page. */
.lp-center {
  text-align: center;
  margin: 32px 0 0;
}

/* ===== A category's objects ===== */
.lp-items-section {
  padding-top: 0;
}
.lp-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lp-items li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--lp-line);
  box-shadow: 0 8px 20px -16px rgba(180, 16, 120, .45);
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-items svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--lp-soft-2);
  color: var(--lp-brand);
  flex-shrink: 0;
}

/* ===== Listings =====
   The co-transporteur home page's mission strip, copied from
   transporteur.css with its class names lp- prefixed (that file is not
   loaded here, and index.css has its own .traveler-card for trajets). */
.lp-missions {
  position: relative;
  width: 100%;
  overflow: visible;
}
.lp-missions-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}
.lp-missions-inner {
  position: relative;
  z-index: 1;
  /* The cream background is sized by this section, so its padding is what
     decides how far past the content the band runs — top and bottom alike. */
  padding-top: max(160px, 12vw);
  padding-bottom: max(160px, 12vw);
}
.lp-missions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.lp-missions-header-copy {
  min-width: 0;
}
.lp-missions-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  color: #000000;
  margin: 0 0 10px;
}
.lp-missions-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #6B7280;
  margin: 0;
  white-space: nowrap;
}
.lp-missions-all {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.67);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 10px;
}
.lp-missions-all:hover {
  color: rgba(0, 0, 0, 0.67);
  text-decoration: none;
}
/* The arrows sit inside the carousel's own padding, as on the expediteur page.
   They used to hang 48px outside it, in the page margin, which no longer
   exists now that the content reaches the screen edge. Below 1200px the
   arrows are hidden and the padding goes (see the max-width:1199.98px block). */
.lp-missions-carousel {
  position: relative;
  padding-inline: 52px;
}
.lp-missions-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  color: #FFC107;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lp-missions-nav svg {
  width: 28px;
  height: 28px;
  display: block;
}
.lp-missions-nav-prev {
  left: 0;
}
.lp-missions-nav-next {
  right: 0;
}
.lp-missions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.lp-mission {
  background: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 327 / 437;
}
.lp-mission-media {
  position: relative;
  flex: 0 0 54%;
  min-height: 0;
  background: #FFF8E7;
  overflow: hidden;
}
.lp-mission-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The badges themselves are the dashboard's markup, inline styles and all
   (see the card in transporteur.blade.php). Only their placement belongs to
   this page -- and the zoom, because the dashboard renders under
   `html{zoom:.8}` (resources/css/global/style.css) and this page does not.
   Without it the same markup comes out a quarter bigger than the pills it is
   meant to echo. Manrope for the same reason: it is the dashboard's font. */
.lp-mission-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  zoom: 0.8;
  font-family: 'Manrope', sans-serif;
  /* The dashboard's body is 14px, not this page's 16px, and its pills inherit
     that: <small> resolves to 0.875 x 14 = 12.25px there. Restating the 14px
     here lets the same cascade play out, so the label lands on 12.25px and,
     after the zoom above, renders at the 9.8px the dashboard ships. */
  font-size: 14px;
  line-height: 1.5;
}
.lp-mission-badges svg {
  flex: 0 0 auto;
}
.lp-mission-price {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  background: #FFC107;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
}
.lp-mission-body {
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.lp-mission-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: #111827;
  margin: 0 0 4px;
}
.lp-mission-route {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #6B7280;
  margin: 0 0 18px;
}
.lp-mission-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 auto;
  padding-bottom: 18px;
  color: #6B7280;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}
.lp-mission-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-mission-meta-item svg,
.lp-mission-meta-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.lp-mission-btn {
  margin-top: 0;
  background: #FFC107;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
}
.lp-mission-btn:hover {
  background: #E0A800;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .lp-missions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .lp-missions-nav {
    display: none;
  }
  .lp-missions-carousel {
    padding-inline: 0;
  }
}

@media (max-width: 991.98px) {
  .lp-missions-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }
  .lp-missions-all {
    display: none;
  }
  .lp-missions-inner {
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .lp-missions-grid {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-bottom: 16px;
  }
  .lp-missions-grid::-webkit-scrollbar {
    display: none;
  }
  .lp-mission {
    flex: 0 0 min(78vw, 280px);
    scroll-snap-align: start;
    aspect-ratio: auto;
    height: auto;
    overflow: hidden;
  }
  .lp-mission-media {
    flex: none;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
  .lp-mission-body {
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .lp-missions-title {
    font-size: 26px;
    line-height: 34px;
  }
  .lp-missions-subtitle {
    font-size: 15px;
    line-height: 22px;
    white-space: normal;
  }
  .lp-mission {
    flex-basis: min(82vw, 260px);
  }
}

.lp-mission-name,
.lp-mission-route {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .lp-missions-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .lp-missions-grid::-webkit-scrollbar {
    display: none;
  }
  .lp-mission {
    /* exactly four across; anything beyond scrolls. 32px is this page's gap. */
    flex: 0 0 calc((100% - 3 * 32px) / 4);
    scroll-snap-align: start;
  }
  /* Fewer than four missions would otherwise hug the left edge. */
  .lp-missions-grid.lp-missions-grid--sparse {
    justify-content: center;
  }
}
.lp-missions-nav[disabled] {
  opacity: 0.25;
  cursor: default;
}

/* ===== Text and tips ===== */
.lp-prose .lp-h2:not(:first-child) {
  margin-top: 36px;
}
.lp-prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--lp-text);
  max-width: 68ch;
  margin: 0;
}
.lp-tips {
  background: linear-gradient(160deg, #FFF5FA 0%, #FFFFFF 70%);
  border: 1px solid var(--lp-line);
  border-radius: 22px;
  padding: 30px;
}
.lp-tips-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lp-ink);
  margin: 0 0 20px;
}

/* ===== FAQ (accordion styles come from index.css) ===== */
.lp-faq-head {
  text-align: center;
}
.lp-faq-title {
  position: relative;
  display: inline-block;
  padding-right: 52px;
}
.lp-faq-doodle {
  position: absolute;
  top: -10px;
  right: 0;
  width: 40px;
  height: auto;
}
.lp-faq-sub {
  margin-bottom: 20px;
}
/* The home page accordion (index.css .faq-accordion), on cards. */
.lp-faq .accordion-item {
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: #FFFFFF;
  margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(180, 16, 120, .28);
  box-shadow: 0 18px 36px -24px rgba(180, 16, 120, .35);
}
.lp-faq .accordion-button {
  padding: 20px 24px;
  border-radius: 16px;
}
.lp-faq .accordion-button:not(.collapsed) {
  color: var(--lp-brand);
}
.lp-faq .accordion-body {
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.65;
}

/* ===== Articles ===== */
.lp-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.lp-article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.lp-article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 8px;
  transition: transform .25s ease;
}
.lp-article:hover img {
  transform: translateY(-4px);
}
.lp-article-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-ink);
}
.lp-article:hover .lp-article-title {
  color: var(--lp-brand);
}
.lp-article-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-muted);
}

/* ===== Other pages ===== */
.lp-links + .lp-links {
  margin-top: 36px;
}
.lp-links-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-ink);
  margin: 0 0 14px;
}
.lp-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lp-links a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-ink);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.lp-links a:hover {
  border-color: var(--lp-brand);
  color: var(--lp-brand);
  background: var(--lp-soft);
}

/* ===== Final call to action ===== */
.lp-cta {
  padding: 0 0 80px;
}
.lp-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, #B41078 0%, #D2287F 60%, #E8579A 100%);
  border-radius: 28px;
  padding: 44px 48px;
  color: #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(180, 16, 120, .6);
}
.lp-cta-box h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #FFFFFF;
  text-wrap: balance;
}
.lp-cta-box p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  max-width: 560px;
}
.lp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--lp-brand);
  font-weight: 700;
  font-size: 16px;
  border-radius: 12px;
  padding: 14px 30px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-cta-btn:hover {
  color: var(--lp-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35);
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .lp-hero {
    padding: 16px 0 48px;
  }
  .lp-articles {
    grid-template-columns: 1fr;
  }
  .lp-section {
    padding: 52px 0;
  }
}

@media (max-width: 575.98px) {
  .lp-lede {
    font-size: 16px;
  }
  .lp-actions > a {
    width: 100%;
  }
  .lp-badge {
    left: 12px;
    bottom: 12px;
    padding: 10px 14px;
  }
  .lp-badge strong {
    font-size: 24px;
  }
  .lp-tips,
  .lp-cta-box {
    padding: 26px 22px;
  }
  .lp-faq .accordion-button {
    padding: 16px 18px;
  }
  .lp-faq .accordion-body {
    padding: 0 18px 18px;
  }
  .lp-cta-btn {
    width: 100%;
  }
}

/* ===== Category pages (landing/category.blade.php) =====
   /transport/meubles and its children: the brief's mockup, on this page's
   tokens. The steps are the home page's (.steps-intro, index.css), three of
   them instead of four. */
/* The home page's hero title, minus its -20px left margin: that one lines
   up a script first word ("Envoyez"); here the title starts in Inter, in line
   with the text under it. */
.lp-hero-title {
  margin-left: 0;
}
/* The script word right after an elided article ("d'armoire") sits against its apostrophe. */
.lp-hero-title .lp-script-elided {
  margin-left: -0.08em;
}
.lp-cat-btn {
  font-weight: 600;
  padding: 14px 32px;
  /* "Publier mon annonce de transport de canapé" is longer than a phone. */
  white-space: normal;
  text-align: center;
}
.lp-cat-btn:hover {
  color: #FFFFFF;
}
/* The yellow square peeking out from behind the photo's top-left corner. */
.lp-visual--accent {
  isolation: isolate;
}
.lp-visual--accent::before {
  content: '';
  position: absolute;
  left: -18px;
  top: -18px;
  width: 120px;
  height: 120px;
  border-radius: 24px;
  background: #FFC107;
  z-index: -1;
}

.lp-head--center {
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* The category's objects: a photo, the name and a chevron. */
.lp-kinds-section {
  padding-top: 24px;
}
/* A little more room between the title (and its line) and the cards. */
.lp-kinds-section .lp-head {
  margin-bottom: 48px;
}
@media (max-width: 575.98px) {
  .lp-kinds-section .lp-head {
    margin-bottom: 40px;
  }
}
.lp-kinds {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.lp-kind {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F8F5F7;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 16px 18px;
  color: var(--lp-ink);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.lp-kind:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: var(--lp-line);
  box-shadow: 0 18px 36px -24px rgba(180, 16, 120, .35);
  color: var(--lp-ink);
}
.lp-kind-media {
  display: block;
  aspect-ratio: 16 / 11;
}
.lp-kind-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* "Tous les meubles": four of the photos, in a square. */
.lp-kind--all .lp-kind-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.lp-kind--all .lp-kind-media img {
  min-height: 0;
}
.lp-kind-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.lp-kind-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.lp-kind-foot svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--lp-brand);
  transition: transform .2s ease;
}
.lp-kind:hover .lp-kind-foot svg {
  transform: translateX(3px);
}
/* Under a type's name: what to give in the annonce for it (canapé page). */
.lp-kind-hint {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-muted);
}
.lp-kind-hint strong {
  font-weight: 600;
  color: var(--lp-text);
}
/* A card whose page is not published yet: no link, so no hover either. */
div.lp-kind:hover {
  transform: none;
  background: #F8F5F7;
  border-color: transparent;
  box-shadow: none;
}
.lp-kinds-note {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text);
}

/* A long closing link wraps on a phone instead of running off the screen. */
.lp-more--wrap {
  display: inline;
  white-space: normal;
}
.lp-more--wrap svg {
  display: inline;
  vertical-align: middle;
}

/* Three steps, with the brief's longer texts. */
.lp-steps3 {
  padding-top: 56px;
  padding-bottom: 40px;
}
.lp-steps3 .steps-title {
  white-space: normal;
  text-wrap: balance;
  max-width: 920px;
  margin-inline: auto;
}
.lp-steps3 .steps-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1200px;
  gap: 8px 64px;
}
.lp-steps3 .step-desc {
  max-width: 340px;
}

/* Price: title, intro and the factors, centred. */
.lp-price-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.lp-price-inner .lp-factors {
  text-align: left;
}
.lp-price-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--lp-text);
  margin: 0 0 22px;
}
.lp-price-text {
  max-width: 760px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lp-text);
}
.lp-price-text + .lp-price-text {
  margin-top: 12px;
}
.lp-price-btn {
  margin-top: 28px;
}
.lp-factors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.lp-factors li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: #FFFFFF;
}
.lp-factors p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-text);
}
.lp-factors strong {
  color: var(--lp-ink);
  font-weight: 700;
}
.lp-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lp-soft-2);
  color: var(--lp-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Why DelivYou: four cards. */
.lp-why {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.lp-why li {
  background: #FFFFFF;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  padding: 26px 24px;
}
.lp-why .lp-why-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lp-ink);
  margin: 18px 0 8px;
}
.lp-why p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-text);
  margin: 0;
}

/* Why DelivYou as a short text (canapé): a light pink panel with the mascot on
   the left (its pink cloud and strokes are in the picture) and, on the right,
   the title with three pink strokes, the text and the payment line beside its
   lock. More room above and below than the other sections; the title itself is
   an ordinary .lp-h2. */
.lp-section--why {
  padding: 120px 0;
}
.lp-why-panel-title {
  grid-area: title;
  align-self: end;
  margin: 0 0 22px;
}
/* The FAQ title's strokes (wiw.png, .faq-title-icon): same picture and size,
   hidden on phone like there. */
.lp-why-spark {
  display: inline-block;
  width: 42px;
  height: auto;
  margin: -8px 0 0 10px;
  vertical-align: top;
}
/* The mascot spans both rows; the title sits at the bottom of the first and the
   text at the top of the second, so the two stay together beside it. */
.lp-why-panel {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 720px);
  grid-template-areas: "visual title" "visual copy";
  justify-content: center;
  gap: 0 40px;
  background: #FFF3F7;
  border-radius: 36px;
  padding: 44px 48px;
}
.lp-why-panel-copy {
  grid-area: copy;
  align-self: start;
}
.lp-why-panel-visual {
  grid-area: visual;
  align-self: center;
  position: relative;
  display: flex;
  justify-content: center;
}
.lp-why-panel-visual img {
  width: 100%;
  max-width: 400px;
  height: auto;
}
.lp-why-panel-text {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.85;
  color: #3A4257;
  margin: 0 0 30px;
  max-width: 800px;
  text-wrap: pretty;
}
.lp-why-panel-pay {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.45;
  color: #273152;
}
.lp-why-panel-pay .lp-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #FBD9E8;
  color: #E0357F;
}
.lp-why-panel-pay .lp-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.1;
}

/* How to prepare the object: a checklist, two by two. */
.lp-prepare {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lp-prepare li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 22px 24px;
}
/* An odd number of tips: the last one alone, centred under the others. */
.lp-prepare li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 8px);
}
.lp-prepare p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lp-text);
}

/* Category FAQ (the home page's band): no subtitle under the title, so the
   title keeps the subtitle's space itself; the brief's link sits under the list. */
.lp-faq-title-solo {
  margin-bottom: 24px;
}
/* Its strokes right after the last word (not the box's right edge, which a
   wrapped title pushes to the column's edge); hidden on phone, as on the home page. */
@media (min-width: 992px) {
  .lp-faq-title-solo {
    padding-right: 0;
  }
  .lp-faq-title-solo .faq-title-icon {
    position: static;
    display: inline-block;
    vertical-align: top;
    margin: -8px 0 0 10px;
  }
}
.lp-faq-more {
  margin: 24px 0 0;
}
/* FAQ answers of several paragraphs. */
.lp-faq .accordion-body p {
  margin: 0 0 10px;
}
.lp-faq .accordion-body p:last-child {
  margin-bottom: 0;
}

/* Final call to action: the mockup's flat band with a yellow button. */
/* The same space above the band (after the FAQ) as below it (before the footer). */
.lp-band-section {
  padding: 80px 0;
}
.lp-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  background: var(--lp-brand);
  border-radius: 20px;
  padding: 32px 44px;
}
.lp-band > div {
  flex: 1 1 420px;
  min-width: 0;
}
.lp-band h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 6px;
  text-wrap: balance;
}
.lp-band p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin: 0;
  max-width: 640px;
}
.lp-band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFC107;
  color: #1F1300;
  font-weight: 700;
  font-size: 16px;
  border-radius: 12px;
  padding: 15px 30px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.lp-band-btn:hover {
  background: #FFCD38;
  color: #1F1300;
  transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
  .lp-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .lp-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Why DelivYou on a phone: the title beside its icon, the text under both. */
  .lp-why li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 20px;
  }
  .lp-why .lp-why-title {
    margin: 0;
  }
  .lp-why li > p:last-child {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  .lp-kind {
    padding: 12px 14px;
  }
  .lp-kind-name {
    font-size: 14px;
  }
  .lp-kind-hint {
    font-size: 13px;
  }
  .lp-section--why {
    padding: 80px 0;
  }
  .lp-why-panel-title {
    text-align: center;
    margin: 0;
  }
  .lp-why-spark {
    display: none;
  }
  .lp-why-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "visual" "copy";
    gap: 20px;
    padding: 28px 22px 30px;
    border-radius: 28px;
  }
  .lp-why-panel-visual img {
    max-width: 280px;
  }
  .lp-why-panel-text {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: none;
    text-align: center;
  }
  .lp-why-panel-pay {
    justify-content: center;
    gap: 14px;
    font-size: 15px;
  }
  .lp-why-panel-pay .lp-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
  .lp-why-panel-pay .lp-icon svg {
    width: 30px;
    height: 30px;
  }
  .lp-steps3 .steps-flow {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 40px;
  }
  .lp-steps3 .step-name {
    font-size: 18px;
    line-height: 26px;
  }
  .lp-steps3 .step-desc {
    font-size: 15px;
    line-height: 23px;
    color: #6B7280;
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .lp-visual--accent::before {
    left: -10px;
    top: -10px;
    width: 80px;
    height: 80px;
  }
  .lp-cat-btn,
  .lp-band-btn {
    width: 100%;
  }
  /* The hero's label ("Faire transporter mon meuble") stays on one line. */
  .lp-hero-btn {
    white-space: nowrap;
  }
  .lp-why {
    grid-template-columns: 1fr;
  }
  .lp-band {
    padding: 26px 22px;
  }
  .lp-prepare {
    grid-template-columns: 1fr;
  }
  .lp-prepare li:last-child:nth-child(odd) {
    width: auto;
    justify-self: stretch;
  }
}