/* =========================================================================
   blocks.css — Mise en page propre à chaque bloc lt/*
   ========================================================================= */

/* --- Hero -----------------------------------------------------------------*/
.lt-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding-block: calc(var(--sp-2xl) + 72px) var(--sp-2xl);
  background-color: var(--c-bg);
  background-image:
    linear-gradient(180deg, rgba(15,25,35,.55) 0%, rgba(15,25,35,.85) 65%, var(--c-bg) 100%),
    var(--lt-hero-image, none);
  background-size: cover;
  background-position: center;
}

.lt-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.lt-hero__badge { margin-bottom: var(--sp-md); }

.lt-hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--sp-md);
}
.lt-hero__title span { display: block; }
.lt-hero__title-line1 { color: var(--c-text); }
.lt-hero__title-line2 { color: var(--c-accent); }

.lt-hero__lead {
  font-size: 1.1rem;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-lg);
  max-width: 560px;
}

.lt-hero__profile-switch { margin-bottom: var(--sp-lg); }

.lt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

/* Animation discrète au scroll : géré par assets/js/main.js (IntersectionObserver)
   qui bascule .is-visible. Désactivée si prefers-reduced-motion (voir base.css
   et le garde JS). */
.lt-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.lt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- En-tête de section (surtitre + h2 + lead centrés) --------------------*/
.lt-section__head .lt-surtitre,
.lt-section__head .lt-h2,
.lt-section__head .lt-lead { text-align: center; }

/* --- Grilles de blocs ------------------------------------------------------*/
.lt-services-grid,
.lt-forfaits-grid,
.lt-nas-packs__grid,
.lt-reviews__grid {
  margin-top: var(--sp-lg);
}

/* --- À propos ---------------------------------------------------------- */
.lt-about__points { margin-top: var(--sp-md); }
.lt-about__cards { margin-top: var(--sp-lg); }

/* --- Contact ---------------------------------------------------------- */
.lt-contact__grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .lt-contact__grid { grid-template-columns: .85fr 1.15fr; }
}