/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding: 76px 0 40px;
  overflow: hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
  text-align:center;
  justify-items:center;
}
.hero h1{
  font-size: clamp(34px, 5.4vw, 60px);
  max-width: 16ch;
  line-height: 1.08;
}
.hero__lede{
  max-width: 56ch;
  font-size: 18px;
  color: var(--color-ink-soft);
  margin-top: 20px;
}
.hero__cta{
  display:flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content:center;
}

.hero__media{
  width:100%;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

/* Reveal-on-load sequence (hero only) */
[data-hero-item]{
  opacity:0;
  transform: translateY(18px);
  animation: heroIn .8s var(--ease) forwards;
}
[data-hero-item="1"]{ animation-delay: .05s; }
[data-hero-item="2"]{ animation-delay: .15s; }
[data-hero-item="3"]{ animation-delay: .25s; }
[data-hero-item="4"]{ animation-delay: .35s; }
[data-hero-item="5"]{ animation-delay: .45s; }
@keyframes heroIn{
  to{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------
   Hero "split" : texte à gauche / image à droite (page d'accueil)
   Ajoute la classe .hero--split sur la section pour activer ce layout,
   sans affecter les autres hero (solution, tarifs) qui restent centrés.
   -------------------------------------------------------------------- */
.hero--split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
  text-align:left;
  justify-items:stretch;
}
.hero--split .hero__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero--split .hero__lede{ margin-left:0; }
.hero--split .hero__cta{ justify-content:flex-start; }
.hero--split .hero__media{ margin-top:0; }

/* ==========================================================================
   MARQUEE (logos partenaires)
   ========================================================================== */
.marquee{
  padding: 36px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.marquee__label{
  text-align:center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 24px;
}
.marquee__viewport{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap: 56px;
  width: max-content;
  animation: scrollLeft 32s linear infinite;
}
.marquee__viewport:hover .marquee__track{ animation-play-state: paused; }
.marquee__track img{ height: 30px; width:auto; opacity:.75; transition: opacity .25s ease; }
.marquee__track img:hover{ opacity:1; }
@keyframes scrollLeft{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   FEATURE ROWS (image / texte alternés)
   ========================================================================== */
.feature-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
  padding: 72px 0;
}
.feature-row + .feature-row{ border-top: 1px solid var(--color-border); }
.feature-row--reverse .feature-row__media{ order: 2; }
.feature-row--reverse .feature-row__text{ order: 1; }

.feature-row__media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.feature-row__media img{ width:100%; height:100%; object-fit:cover; }
.feature-row__media--stacked{
  display:grid;
}
.feature-row__floating{
  position:absolute;
  width: 46%;
  right: -8%;
  bottom: -10%;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 5px solid #fff;
  box-shadow: 0 25px 45px -20px rgba(20,25,43,.45);
}

.feature-row__text h3{ font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 16px; }
.feature-row__text p{ color: var(--color-ink-soft); font-size: 16.5px; max-width: 46ch; }