html, body {
  overflow-x: hidden;
}


.hero-center {
  min-height: 100vh;
}


.hero-title {
  font-size: clamp(3.2rem, 12vw, 15rem);
  font-weight: 700;
  letter-spacing: clamp(1px, 0.35vw, 2px);
  line-height: 0.85;
  color: #FFF4C4;
  white-space: normal;      
  text-wrap: balance;       
}

.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 2px #e6dcc9;
}


.hero-subtitle {
  position: absolute;
  top: 35%;
  left: 27%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.4rem, 5vw, 5rem);
  font-weight: 500;
  color: #FFF4C4;
  letter-spacing: clamp(1px, 0.45vw, 3px);
  opacity: 0.95;
}


.bottom-text {
  font-size: clamp(0.75rem, 2.6vw, 13px);
  color: rgba(255, 255, 255, 0.75);
  gap: 12px;
}


/* Canvas background balloons */
#bgBalloons{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* derrière le contenu */
  pointer-events: none;    /* ne bloque pas les clics */
}

/* Assure que ton overlay et ton contenu sont au-dessus */
.hero-overlay{
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ton contenu au-dessus */
.container-fluid{
  position: relative;
  z-index: 2;
}


@media (max-width: 576px) {
  .hero-center {
    min-height: 100svh; 
  }

  .d-flex.justify-content-between.align-items-center.pt-4.px-4 {
    padding-top: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .bottom-text {
    flex-direction: column;
    align-items: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
  }

  .arrow .line {
    width: 40px;
  }
}


@media (max-width: 360px) {
  .hero-title {
    font-size: 3rem;
  }
  .hero-subtitle {
    top: 30%;
  }
}