/* Le ciel d'origine fait partie de la signature marketing : image décorative,
   textes sur un voile clair, cartes opaques. Aucun script ni animation. */
.marketing-sky {
  --sky-paper: var(--lv12-paper, #fff);
  --sky-photo: image-set(
    url("/assets/landing/v11/hero-nuages-768-9fc31f19.avif") type("image/avif"),
    url("/assets/landing/v11/hero-nuages-768-b7eea409.webp") type("image/webp")
  );
  --sky-opacity: .9;
  --sky-position: center 44%;
  --sky-height: 100%;
  --sky-veil: linear-gradient(180deg, rgb(255 255 255 / .34), rgb(255 255 255 / .08) 45%, var(--sky-paper)),
    linear-gradient(90deg, rgb(255 255 255 / .96), rgb(255 255 255 / .82) 33%, rgb(255 255 255 / .3) 68%, rgb(255 255 255 / .1));
  position: relative;
  isolation: isolate;
  background: var(--sky-paper);
}
.marketing-sky::before,
.marketing-sky::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  inline-size: 100%;
  block-size: var(--sky-height);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
.marketing-sky::before {
  z-index: -2;
  background-image: url("/assets/landing/v11/hero-nuages-768-b7eea409.webp");
  background-image: var(--sky-photo);
  background-size: cover;
  background-position: var(--sky-position);
  background-repeat: no-repeat;
  opacity: var(--sky-opacity);
}
.marketing-sky::after { z-index: -1; background: var(--sky-veil); }
.marketing-sky--hero .lv12-preview { align-self: center; }
.marketing-sky--hero .lv12-preview-note {
  width: fit-content;
  margin-inline: auto;
  padding: 7px 15px;
  border-radius: 30px;
  color: var(--lv12-ink);
  background: var(--lv12-paper);
}
.marketing-sky--pricing,
.marketing-sky--call {
  --sky-height: min(860px, 100%);
  --sky-position: center 30%;
  --sky-veil: linear-gradient(180deg, rgb(255 255 255 / .25), rgb(255 255 255 / .28) 38%, var(--sky-paper) 95%),
    radial-gradient(ellipse at 50% 20%, rgb(255 255 255 / .97) 0%, rgb(255 255 255 / .86) 25%, rgb(255 255 255 / .2) 80%);
}
.marketing-sky--call { --sky-height: min(690px, 100%); }
/* Le ciel remplace les cercles décoratifs du dernier appel à l'action. */
.lv12-closing.marketing-sky--closing {
  --sky-paper: #244a9c;
  --sky-opacity: .95;
  --sky-position: center 38%;
  --sky-veil: linear-gradient(90deg, rgb(21 43 103 / .45), rgb(21 43 103 / .83) 32%, rgb(21 43 103 / .83) 68%, rgb(21 43 103 / .45));
  border-color: transparent;
}
.lv12-closing.marketing-sky--closing::before,
.lv12-closing.marketing-sky--closing::after {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html:is([data-theme="dark"], [data-mode="dark"], .dark) .marketing-sky:not(.marketing-sky--closing) {
  --sky-paper: var(--lv12-paper, #0f172a);
  --sky-opacity: .7;
  --sky-veil: linear-gradient(180deg, rgb(21 35 41 / .2), rgb(21 35 41 / .15) 40%, var(--sky-paper)),
    linear-gradient(90deg, rgb(21 35 41 / .94), rgb(21 35 41 / .83) 33%, rgb(21 35 41 / .28) 68%, rgb(21 35 41 / .1));
}
html:is([data-theme="dark"], [data-mode="dark"], .dark) :is(.marketing-sky--pricing, .marketing-sky--call) {
  --sky-veil: linear-gradient(180deg, rgb(15 23 42 / .18), rgb(15 23 42 / .28) 38%, var(--sky-paper) 95%),
    radial-gradient(ellipse at 50% 20%, rgb(15 23 42 / .95), rgb(15 23 42 / .85) 25%, rgb(15 23 42 / .28) 80%);
}
@media (min-width: 768px) {
  .marketing-sky { --sky-photo: image-set(url("/assets/landing/v11/hero-nuages-1280-c69f6eff.avif") type("image/avif"), url("/assets/landing/v11/hero-nuages-1280-7d396dd2.webp") type("image/webp")); }
}
@media (min-width: 1280px) {
  .marketing-sky { --sky-photo: image-set(url("/assets/landing/v11/hero-nuages-1456-629bf15a.avif") type("image/avif"), url("/assets/landing/v11/hero-nuages-1456-bacee303.webp") type("image/webp")); }
}
@media (max-width: 767.98px) {
  .marketing-sky--hero {
    --sky-position: 62% center;
    --sky-veil: linear-gradient(180deg, rgb(255 255 255 / .86), rgb(255 255 255 / .88) 38%, rgb(255 255 255 / .38) 65%, var(--sky-paper));
  }
  :is(.marketing-sky--pricing, .marketing-sky--call) {
    --sky-veil: linear-gradient(180deg, rgb(255 255 255 / .66), rgb(255 255 255 / .88) 32%, rgb(255 255 255 / .65) 62%, var(--sky-paper));
  }
  html:is([data-theme="dark"], [data-mode="dark"], .dark) .marketing-sky--hero {
    --sky-veil: linear-gradient(180deg, rgb(21 35 41 / .78), rgb(21 35 41 / .86) 38%, rgb(21 35 41 / .45) 65%, var(--sky-paper));
  }
}