/* Mousse, eau et vapeur : fondu dans les couleurs du décor de chaque page. */
.site-header {
  --sx-header-colors: linear-gradient(100deg, #547d98 0%, #4d9bd4 28%, #69b3ea 60%, #91c6ec 84%, #b4c3c5 100%);
  border-bottom-color: transparent;
  background-color: #6ba9d6;
  background-image:
    linear-gradient(to bottom, rgba(3,3,3,.97) 0%, rgba(3,3,3,.7) 24%, rgba(3,3,3,.28) 56%, rgba(3,3,3,.06) 80%, transparent 100%),
    url('../images/fond-navigation-mousse-eau-vapeur.webp?v=20261015-1'),
    var(--sx-header-colors);
  background-position: center, center 42%, center;
  background-size: 100% 100%, cover, 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen, normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header .nav a {
  text-shadow: 0 1px 3px #000, 0 0 8px #000, 0 0 14px #000;
}

/* Le cadre et l'image gardent la même hauteur, y compris entre 761 et 1050 px. */
.site-header .brand {
  display: flex;
  align-items: center;
  height: 102px;
  flex-shrink: 0;
  overflow: visible;
}

.site-header .brand img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* La photo continue sous le bandeau ; la texture s'efface avant sa limite basse. */
body.sx-header-continuous {
  --sx-header-height: 112px;
}

.site-header.sx-header-photo-ready {
  isolation: isolate;
  background-image: var(--sx-header-photo-url);
  background-position: var(--sx-header-photo-position);
  background-size: var(--sx-header-photo-size);
  background-blend-mode: normal;
  background-color: #030303;
}

.site-header.sx-header-photo-ready::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #030303 url('../images/fond-navigation-mousse-eau-vapeur.webp?v=20261015-1') center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.12) 80%, transparent 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.12) 80%, transparent 94%, transparent 100%);
}

.site-header.sx-header-photo-ready > .brand,
.site-header.sx-header-photo-ready > .menu-toggle,
.site-header.sx-header-photo-ready > .nav {
  z-index: 1;
}

.home-page.sx-header-continuous .hero-marketing .hero-visual {
  top: calc(-1 * var(--sx-header-height));
  height: calc(100% + var(--sx-header-height));
}

body.pro-page.sx-pro-mediterranee.sx-header-continuous::before,
.gallery-page.sx-header-continuous .gallery-backdrop {
  inset: 0;
}

/* Accueil : bleu ciel plus présent sur toute la largeur du fondu. */
.home-page .site-header {
  --sx-header-colors: linear-gradient(100deg, #668294 0%, #5197cf 24%, #66acf1 55%, #8ac0f7 85%, #a1b9cb 100%);
}

.gallery-page .site-header {
  --sx-header-colors: linear-gradient(100deg, #6c8d96 0%, #6ba7cc 30%, #80bce8 64%, #a2c6dd 86%, #b8b4a1 100%);
}

.tarifs-page .site-header {
  --sx-header-colors: linear-gradient(100deg, #849eaf 0%, #6daadd 28%, #84bff0 62%, #abcde5 86%, #bfbba8 100%);
}

.reviews-page .site-header {
  --sx-header-colors: linear-gradient(100deg, #6e959f 0%, #5ba5d7 30%, #7bbbf0 64%, #a0cbed 86%, #b9bda9 100%);
}

.contact-page .site-header {
  --sx-header-colors: linear-gradient(100deg, #628b9b 0%, #5b9fd1 28%, #7bb5e5 62%, #9dc8e7 85%, #b1bfbe 100%);
}

@media (max-width: 760px) {
  body.sx-header-continuous {
    --sx-header-height: 74px;
  }

  .site-header .brand {
    height: 62px;
  }

  body.pro-page.sx-pro-mediterranee .site-header {
    --sx-header-colors: linear-gradient(100deg, #547d98, #65aae0 55%, #97c7ed);
  }
}