/* Hero exclusivement réservé à la page Profil Voyage. */
.profile-page .profile-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(480px, 58svh, 600px);
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(58px, 6vw, 82px) 0 clamp(52px, 5.5vw, 74px);
  background-color: #eadfce;
  background-image: url("assets/offers/hero-essentiel.png");
  background-position: center 54%;
  background-size: cover;
  background-repeat: no-repeat;
}

.profile-page .profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(248, 241, 230, 0.94) 0%,
    rgba(248, 241, 230, 0.82) 35%,
    rgba(248, 241, 230, 0.42) 58%,
    rgba(248, 241, 230, 0.06) 79%
  );
}

.profile-page .profile-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(238, 227, 212, 0.24));
  pointer-events: none;
}

.profile-page .profile-hero-copy {
  position: relative;
  z-index: 1;
}

.profile-page .profile-hero h1 {
  max-width: 18ch;
  margin-top: 14px;
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.profile-page .profile-hero h1 em {
  color: var(--gold);
  font-weight: 300;
  font-style: italic;
}

.profile-page .profile-hero .lead {
  max-width: 52ch;
  margin-top: 22px;
  padding: 11px 16px;
  border-left: 2px solid rgba(176, 138, 62, 0.68);
  border-radius: 0 10px 10px 0;
  background: rgba(248, 241, 230, 0.58);
  color: #253956;
  font-size: 16.5px;
  line-height: 1.68;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* La photographie reste lumineuse en mode Nuit : seul le fond derrière le texte varie. */
html[data-theme="dark"] .profile-page .profile-hero {
  background-color: #173650;
  background-image: url("assets/offers/hero-essentiel.png");
}

html[data-theme="dark"] .profile-page .profile-hero::before {
  background: linear-gradient(
    90deg,
    rgba(13, 34, 58, 0.86) 0%,
    rgba(13, 34, 58, 0.68) 36%,
    rgba(13, 34, 58, 0.24) 61%,
    rgba(13, 34, 58, 0.02) 81%
  );
}

html[data-theme="dark"] .profile-page .profile-hero::after {
  background: linear-gradient(180deg, transparent, rgba(13, 34, 58, 0.18));
}

html[data-theme="dark"] .profile-page .profile-hero h1,
html[data-theme="dark"] .profile-page .profile-hero .eyebrow {
  color: #f7f0e4;
}

html[data-theme="dark"] .profile-page .profile-hero h1 em {
  color: var(--gold-light, #e2c27a);
}

html[data-theme="dark"] .profile-page .profile-hero .lead {
  border-left-color: var(--gold-light, #e2c27a);
  background: rgba(13, 34, 58, 0.5);
  color: #f7f0e4;
}

/* Réponses : deux colonnes pour deux choix, trois colonnes pour trois choix. */
.profile-page .profile-options:has(.profile-option:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-page .profile-options .profile-option {
  min-width: 0;
  min-height: 100%;
  align-items: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.profile-page .profile-options .profile-option input {
  margin-top: 0;
}

@media (max-width: 820px) {
  .profile-page .profile-options:has(.profile-option:nth-child(3)) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .profile-page .profile-hero {
    min-height: clamp(500px, 68svh, 590px);
    align-items: flex-end;
    padding: 54px 0 44px;
    background-position: 63% center;
  }

  .profile-page .profile-hero::before {
    background: linear-gradient(
      180deg,
      rgba(248, 241, 230, 0.04) 0%,
      rgba(248, 241, 230, 0.18) 35%,
      rgba(248, 241, 230, 0.88) 66%,
      rgba(248, 241, 230, 0.97) 100%
    );
  }

  .profile-page .profile-hero h1 {
    max-width: 18ch;
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 1.06;
  }

  .profile-page .profile-hero .lead {
    max-width: 100%;
    padding: 10px 13px;
    background: rgba(248, 241, 230, 0.72);
    font-size: 15px;
  }

  html[data-theme="dark"] .profile-page .profile-hero::before {
    background: linear-gradient(
      180deg,
      rgba(13, 34, 58, 0.02) 0%,
      rgba(13, 34, 58, 0.16) 35%,
      rgba(13, 34, 58, 0.8) 66%,
      rgba(13, 34, 58, 0.94) 100%
    );
  }

  html[data-theme="dark"] .profile-page .profile-hero .lead {
    background: rgba(13, 34, 58, 0.64);
  }
}

@media (max-width: 420px) {
  .profile-page .profile-hero {
    min-height: 500px;
    padding-bottom: 38px;
    background-position: 66% center;
  }

  .profile-page .profile-hero h1 {
    font-size: clamp(36px, 10.8vw, 45px);
  }
}