/*
 * PRATINIUM v433 — Hero conversion, contraste et hauteur maîtrisée
 * - voile localisé au lieu d'un gris uniforme ;
 * - carte parcours sombre/translucide ;
 * - profils actifs/disponibles clairement différenciés ;
 * - CTA lumineux et contextuel ;
 * - hero desktop réduit d'environ 12 %.
 */

body#index .pf-hero,
body#index section.pf-hero {
  overflow: hidden !important;
}

/* Le fond reste visible : l'assombrissement est concentré derrière le titre,
   avec une présence beaucoup plus légère côté parcours. */
body#index .pf-hero::after,
body#index section.pf-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  background:
    radial-gradient(circle at 27% 47%, rgba(2, 7, 18, .86) 0%, rgba(3, 9, 22, .72) 25%, rgba(3, 9, 22, .34) 42%, rgba(3, 9, 22, 0) 59%),
    radial-gradient(circle at 76% 44%, rgba(3, 14, 29, .24) 0%, rgba(3, 14, 29, .12) 30%, rgba(3, 14, 29, 0) 58%),
    linear-gradient(90deg, rgba(2, 7, 17, .22) 0%, rgba(2, 7, 17, .07) 48%, rgba(2, 7, 17, .02) 67%, rgba(2, 7, 17, .10) 100%),
    linear-gradient(180deg, rgba(2, 7, 17, .08) 0%, rgba(2, 7, 17, 0) 56%, rgba(2, 7, 17, .13) 100%) !important;
}

body#index .pf-hero::before,
body#index section.pf-hero::before {
  opacity: .56 !important;
}

body#index .pf-hero__bg-img {
  filter: contrast(1.12) saturate(1.10) brightness(.86) !important;
  transform: scale(1.025) !important;
}

/* Carte de parcours réintroduite et renforcée, y compris sur desktop. */
body#index .pf-hero-journey {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 72% 12%, rgba(90, 202, 244, .13), transparent 34%),
    linear-gradient(145deg, rgba(4, 15, 32, .80) 0%, rgba(10, 29, 48, .68) 58%, rgba(4, 15, 31, .76) 100%) !important;
  border: 1px solid rgba(205, 229, 249, .38) !important;
  box-shadow: 0 28px 72px rgba(0, 8, 22, .38), inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(16px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.10) !important;
}

body#index .pf-hero-journey::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 34%, rgba(255, 255, 255, .025)) !important;
}

body#index .pf-hero-journey::after {
  content: none !important;
  display: none !important;
}

body#index .pf-hero-journey__title {
  color: rgba(255, 255, 255, .94) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .32) !important;
}

/* Profils disponibles : lisibles et clairement interactifs. */
body#index .pf-hero-journey .pf-tab,
body#index .pf-hero-journey__head .pf-tab {
  color: #f7fbff !important;
  background: linear-gradient(180deg, rgba(31, 62, 86, .78), rgba(15, 40, 63, .72)) !important;
  border: 1px solid rgba(205, 231, 250, .56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 8px 20px rgba(0, 7, 20, .15) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .30) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body#index .pf-hero-journey .pf-tab:hover,
body#index .pf-hero-journey__head .pf-tab:hover {
  transform: translateY(-1px) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .88) !important;
  background: linear-gradient(180deg, rgba(48, 84, 112, .88), rgba(20, 50, 76, .82)) !important;
}

/* Profil actif : fond clair, texte sombre et double repère bordure/ombre. */
body#index .pf-hero-journey .pf-tab--active,
body#index .pf-hero-journey .pf-tab[aria-selected="true"],
body#index .pf-hero-journey__head .pf-tab--active,
body#index .pf-hero-journey__head .pf-tab[aria-selected="true"] {
  color: #0a2a42 !important;
  background: linear-gradient(180deg, #e2f4ff 0%, #afd6f1 100%) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(75, 170, 230, .42), 0 12px 28px rgba(4, 18, 36, .27), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  text-shadow: none !important;
}

body#index .pf-hero-journey .pf-tab:focus-visible {
  outline: 3px solid rgba(255, 220, 119, .92) !important;
  outline-offset: 3px !important;
}

/* CTA contextuel : zone la plus lumineuse du panneau. */
body#index .pf-hero-login-cta,
body#index .pf-hero-journey__head .pf-hero-login-cta {
  position: relative !important;
  color: #08253b !important;
  background: linear-gradient(135deg, #ffe793 0%, #ffc753 48%, #f4aa2e 100%) !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  box-shadow: 0 0 0 1px rgba(255, 202, 79, .22), 0 16px 38px rgba(255, 184, 48, .34), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

body#index .pf-hero-login-cta:hover,
body#index .pf-hero-login-cta:focus-visible {
  color: #061f33 !important;
  filter: brightness(1.045) saturate(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 20px 44px rgba(255, 184, 48, .42), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
  text-decoration: none !important;
}

body#index .pf-hero-journey .pf-step__title {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .26) !important;
}

body#index .pf-hero-journey .pf-step__desc {
  color: rgba(242, 248, 255, .84) !important;
}

body#index .pf-hero-journey .pf-step__num {
  color: #e9f7ff !important;
  background: linear-gradient(180deg, rgba(65, 151, 215, .72), rgba(34, 104, 164, .62)) !important;
  border-color: rgba(151, 211, 255, .86) !important;
  box-shadow: 0 8px 20px rgba(0, 22, 48, .20), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

body#index .pf-hero__badge {
  width: 142px !important;
}

body#index .pf-hero__badge-label {
  max-width: 112px !important;
  text-align: center !important;
  line-height: 1.12 !important;
}

/* Desktop large : réduction d'environ 12 % par rapport au hero v73 (520px -> 458px). */
@media (min-width: 1181px) {
  body#index .pf-hero,
  body#index section.pf-hero {
    min-height: 458px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  body#index .pf-hero__overlay {
    min-height: 458px !important;
  }

  body#index .pf-hero__content {
    min-height: 448px !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    gap: clamp(24px, 3.2vw, 48px) !important;
  }

  body#index .pf-hero__copy {
    height: 428px !important;
    min-height: 428px !important;
    align-self: center !important;
    transform: translate(-42px, -18px) !important;
  }

  body#index .pf-hero-journey {
    align-self: center !important;
    min-height: 342px !important;
    margin-top: 0 !important;
    padding: 24px 28px 25px !important;
    transform: none !important;
  }

  body#index .pf-hero-journey__head {
    margin-bottom: 12px !important;
  }

  body#index .pf-hero-journey .pf-steps {
    padding-top: 9px !important;
  }
}

/* Tablettes et mobiles : voile adapté à l'empilement vertical, sans gris uniforme. */
@media (max-width: 1180px) {
  body#index .pf-hero::after,
  body#index section.pf-hero::after {
    background:
      radial-gradient(circle at 50% 25%, rgba(2, 7, 18, .78) 0%, rgba(3, 9, 22, .58) 30%, rgba(3, 9, 22, .18) 52%, transparent 68%),
      radial-gradient(circle at 50% 77%, rgba(3, 14, 29, .20), transparent 48%),
      linear-gradient(180deg, rgba(2, 7, 17, .10), rgba(2, 7, 17, .02) 60%, rgba(2, 7, 17, .12)) !important;
  }

  body#index .pf-hero__bg-img {
    filter: contrast(1.10) saturate(1.07) brightness(.84) !important;
  }

  body#index .pf-hero-journey {
    margin-top: 18px !important;
  }
}

@media (max-width: 767px) {
  body#index .pf-hero__content {
    padding-bottom: 12px !important;
  }

  body#index .pf-hero-journey {
    padding: 20px 15px 22px !important;
    border-radius: 22px !important;
  }

  body#index .pf-hero-journey .pf-tab,
  body#index .pf-hero-login-cta {
    min-height: 48px !important;
  }
}