/* ============================================================================
   Hero cinématographique — « la flotte prend vie »
   HTML : app/Views/partials/vitrine_hero.php

   Plein écran, photo en fond, texte à gauche, puces de données près des
   véhicules. L'idée n'est pas de poser une capture d'écran sur une photo,
   mais de donner l'impression que le logiciel analyse la scène.
   ========================================================================== */

.hro--cine {
  position: relative;
  /* `dvh` et non `vh` : sur mobile, `100vh` ignore la barre d'adresse et
     pousse le bouton d'appel sous le pli. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--lf-indigo-nuit, #14103c);
  color: #fff;
}

.hro__scene { position: absolute; inset: 0; z-index: 0; }

.hro--cine .hro__photo {
  position: absolute;
  inset: -6% 0 0;          /* marge haute : le parallax déplace l'image */
  height: 112%;
  border-radius: 0;
  will-change: transform;
}

/* Le voile. Dense à gauche où vit le texte, transparent à droite où la photo
   doit rester lisible — c'est là que sont le gérant et les véhicules. */
.hro--cine .hro__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(20, 16, 60, .95) 0%,
    rgba(20, 16, 60, .82) 38%,
    rgba(20, 16, 60, .30) 72%,
    rgba(20, 16, 60, .12) 100%);
}

.hro__in { position: relative; z-index: 2; width: min(1180px, 100% - 2.5rem); }
.hro__texte { max-width: 36rem; }

.hro--cine .hro__titre {
  margin: 0 0 1.1rem;
  font-family: var(--lf-titre, inherit);
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.hro--cine .hro__titre span { color: var(--lf-magenta-vif, #c41f6d); }

.hro--cine .hro__lede {
  margin: 0 0 1.8rem;
  font-size: clamp(.98rem, 1.7vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

.hro--cine .hro__act { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

/* -- Preuves : des faits, pas des chiffres d'usage inventés ---------------- */

.hro--cine .hro__preuves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: .84rem;
  color: rgba(255, 255, 255, .75);
}

.hro--cine .hro__preuves li { display: flex; align-items: center; gap: .45rem; }

.hro--cine .hro__preuves li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lf-magenta-vif, #c41f6d);
}

/* -- Puces de données ------------------------------------------------------ */

.hro__puces { position: absolute; inset: 0; z-index: 1; }

.hpuce {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem .55rem .6rem;
  border-radius: 999px;
  background: rgba(20, 16, 60, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / .9);
  white-space: nowrap;
  /* Elles arrivent une par une, comme si le logiciel analysait la scène. */
  animation: hpuce-arrive .6s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(.7s + var(--rang) * .45s);
}

@keyframes hpuce-arrive {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.hpuce__ico {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: .8rem;
  background: rgba(255, 255, 255, .14);
}

.hpuce--vert    .hpuce__ico { color: #4ade80; }
.hpuce--magenta .hpuce__ico { color: #f472b6; }
.hpuce--ambre   .hpuce__ico { color: #fbbf24; }

.hpuce__txt { display: flex; flex-direction: column; line-height: 1.25; }
.hpuce__txt strong { font-size: .84rem; font-weight: 700; }
.hpuce__txt small  { font-size: .72rem; color: rgba(255, 255, 255, .68); }

/* Le trait qui relie la puce à la scène : très fin, magenta, il suggère une
   mesure prise sur le véhicule plutôt qu'une étiquette posée dessus. */
.hpuce::before {
  content: '';
  position: absolute;
  left: -1.6rem;
  top: 50%;
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lf-magenta-vif, #c41f6d));
}

/* Sous 900 px, elles recouvriraient le titre. Le hero garde son texte, sa
   photo et ses boutons — l'essentiel. */
@media (max-width: 899px) {
  .hro__puces { display: none; }
  .hro--cine .hro__photo::after {
    background: linear-gradient(180deg,
      rgba(20, 16, 60, .90) 0%, rgba(20, 16, 60, .82) 55%, rgba(20, 16, 60, .95) 100%);
  }
}

/* -- Invitation à descendre ------------------------------------------------ */

.hro__suite {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  animation: hro-respire 2.4s ease-in-out infinite;
}

@keyframes hro-respire {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

.hro__suite:hover { border-color: var(--lf-magenta-vif, #c41f6d); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hpuce, .hro__suite { animation: none; }
  .hro--cine .hro__photo { transform: none !important; }
}