/* ============================================================================
   Appel final — Abidjan la nuit.
   HTML : app/Views/partials/vitrine_final.php

   La dernière image emportée. Tout est centré et rien ne dispute l'attention
   au bouton : pas de lien secondaire, pas de menu, pas de troisième idée.
   ========================================================================== */

.fin {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  background: var(--lf-indigo-nuit, #14103c);
  color: #fff;
  text-align: center;
}

.fin__fond { position: absolute; inset: 0; border-radius: 0; }

/* Voile radial : la ville reste lisible sur les bords, le centre s'assombrit
   pour porter le texte. Un voile uniforme aurait éteint la photo. */
.fin__fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(20, 16, 60, .93), rgba(20, 16, 60, .70) 70%),
    linear-gradient(180deg, rgba(20, 16, 60, .55), rgba(20, 16, 60, .80));
}

/* ---- Les points GPS ------------------------------------------------------ */

.fin__gps { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.fin__pt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lf-magenta-vif, #c41f6d);
  box-shadow: 0 0 0 4px rgba(196, 31, 109, .22), 0 0 18px rgba(196, 31, 109, .8);
  /* Ils s'allument un par un puis restent. Un scintillement permanent
     distrairait du bouton, qui est la seule chose à faire ici. */
  animation: fin-allume .5s ease-out backwards;
  animation-delay: calc(.3s + var(--rang) * .18s);
}

@keyframes fin-allume {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: none; }
}

/* ---- Texte --------------------------------------------------------------- */

.fin__in { position: relative; z-index: 2; }

.fin__titre {
  margin: 0 auto 2rem;
  max-width: 18ch;
  font-family: var(--lf-titre, inherit);
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* La seconde phrase est le retournement : elle arrive après, et en magenta. */
.fin__titre span {
  display: block;
  margin-top: .3rem;
  color: var(--lf-magenta-vif, #c41f6d);
  animation: fin-monte .6s cubic-bezier(.2, .7, .3, 1) .55s backwards;
}

@keyframes fin-monte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.fin__cta { padding-inline: clamp(1.5rem, 4vw, 2.4rem); }

.fin__preuves {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  font-size: .84rem;
  color: rgba(255, 255, 255, .72);
}

.fin__preuves li { display: flex; align-items: center; gap: .45rem; }
.fin__preuves li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lf-magenta-vif, #c41f6d);
}

@media (prefers-reduced-motion: reduce) {
  .fin__pt, .fin__titre span { animation: none; }
}