/*
 * PRATINIUM v440 — verrouillage de la composition du hero en zoom arrière.
 *
 * À 50 %, 33 % ou 25 %, le navigateur expose une largeur CSS artificiellement
 * très importante. Les max-width historiques recentraient alors le titre et le
 * parcours au milieu du hero. Cette règle conserve la composition de référence :
 * promesse dans la zone gauche, parcours dans la zone droite, sans modifier le
 * rendu desktop normal, tablette ou mobile.
 */

@media (min-width: 2200px) {
  html body#index .pf-hero__overlay {
    width: 100% !important;
    max-width: none !important;
  }

  html body#index .pf-hero__content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 42% 38% !important;
    justify-content: space-between !important;
    align-items: center !important;
    column-gap: 0 !important;
    padding-left: 7.5vw !important;
    padding-right: 7.5vw !important;
  }

  html body#index .pf-hero__copy {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 700px !important;
    max-width: 700px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body#index .pf-hero-journey {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 650px !important;
    max-width: 650px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body#index .pf-hero__title,
  html body#index .pf-hero__subtitle,
  html body#index .pf-hero__badge,
  html body#index .pf-hero-journey__head,
  html body#index .pf-hero-journey .pf-steps {
    flex-shrink: 0 !important;
  }
}

/* Très grands viewports CSS (notamment zoom 25 %) : on accentue légèrement
   l'écartement pour conserver les repères visuels du design à 100 %. */
@media (min-width: 4800px) {
  html body#index .pf-hero__content {
    grid-template-columns: 40% 36% !important;
    padding-left: 8vw !important;
    padding-right: 8vw !important;
  }
}