/* la carte du hero : sous la barre, une marge autour, les coins arrondis ; l'image couvre la carte */
html.hp-actif .ha-site-hero.hp-hero {
  display: flex; flex-direction: column; justify-content: center;
  margin: 0 16px; border-radius: 40px;
  height: auto; min-height: 80vh; min-height: 80svh; padding: 0;
  background-color: #e1e7f0;                     /* le ciel de la vidéo, en haut de l'image */
  background-image: url("images/affiche.jpg");   /* la première image, tant que le film n'est pas posé */
  background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
}
html.hp-actif .ha-site-hero.hp-hero .ha-promesse-int { width: auto; margin: 0; padding: 48px 80px; }
/* l'affiche, cadrée comme la première image (le script pose sa taille et sa place), tant que la toile n'est pas
   posée ; retirée ensuite */
html.hp-actif .ha-site-hero.hp-hero.hp-sans-affiche { background-image: none; }
html.hp-actif .hp-hero .ha-promesse-int { will-change: transform; }

.hp-scene {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;
  overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none;
  opacity: 0; transition: opacity 380ms ease;
}
.hp-scene.hp-pret { opacity: 1; }
/* à plus d'un tiers de fenêtre de l'écran (hero-plans.js, installer) : rien ne se voit, rien ne se recopie */
.hp-loin .hp-scene { visibility: hidden; }
.hp-plan {
  position: absolute; left: 0; top: 0; display: block;
  transform-origin: 0 0; will-change: transform; pointer-events: none;
}

.ha-site-hero .hs-colonne li::before {
  left: -24px; top: 12px; width: 10px; height: 10px; border-width: 1.5px; border-radius: 50%;
}

/* sous 1200 px, comme le site : une marge plus fine, le texte du haut au bas de la carte */
@media (max-width: 1199px) {
  html.hp-actif .ha-site-hero.hp-hero { margin: 0 8px; justify-content: stretch; }
  html.hp-actif .ha-site-hero.hp-hero .ha-promesse-int {
    flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding: 32px;
  }
  html.hp-actif .ha-site-hero.hp-hero .ha-promesse-int > * { margin-top: 0; }
  html.hp-actif .ha-site-hero.hp-hero .ha-promesse-int > * + * { margin-top: 24px; }
}
@media (max-width: 720px) {
  html.hp-actif .ha-site-hero.hp-hero { background-position: 75% 50%; }
  html.hp-actif .ha-site-hero.hp-hero .ha-promesse-int { padding: 32px 20px; }
}

@media print { .hp-scene { display: none; } }