html {
  scroll-behavior: smooth;
}

/* ==========
   Assets-only CSS
   (Tailwind est la source de vérité pour le layout, spacing, typographie)
   ========== */

.home-hero-image {
  background-image: url('https://live.staticflickr.com/65535/54725505762_2fb91ff643_b.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  /* léger zoom pour éviter les bords sur certains écrans */
}

.home-hero-overlay {
  background: linear-gradient(to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.0) 55%,
      rgba(0, 0, 0, 0.75) 100%);
}

.bio-background-image {
  background-image: url('https://live.staticflickr.com/65535/54726338916_cb196bc8bc_b.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: blur(12px);
  transform: scale(1.08);
}


.bio-background-overlay {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.65) 35%,
      rgba(0, 0, 0, 0.9) 100%);
}

/* Petite animation propre aux tabs bio (optionnel) */
.bio-content {
  animation: bioFade 180ms ease-out;
}

.bio-text {
  position: relative;
  overflow: hidden;
  transition: max-height 300ms ease;
}

/* collapsed state */
.bio-text.is-collapsed {
  max-height: 18rem;
  /* tweak (e.g. 14rem / 20rem) */
}

/* expanded state */
.bio-text.is-expanded {
  max-height: 200rem;
  /* “big enough” */
}

/* subtle fade at the bottom when collapsed */
.bio-text.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  pointer-events: none;
}


@keyframes bioFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- Soft fade between sections --- */
/* Adds a subtle dark fade at the bottom of each section to avoid harsh cuts */
section {
  position: relative;
  background: linear-gradient(to top, rgba(193, 0, 0, 0.478), rgba(0, 0, 0, 0.85));
}

section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  z-index: 2;
}

/* Don't darken the very last section's bottom */
section:last-of-type::after {
  display: none;
}