/* Page Contact — les titres des ancres ne doivent pas être
   cachés par le header fixe au clic sur un lien du sommaire. */
#contact,
#plan,
#cadre,
#tarifs,
#faq {
  scroll-margin-top: calc(var(--hauteur-header, 84px) + 24px);
}

body.page-contact main h1 { color: #241C17; }
body.page-contact main h2 { color: #1F6E69; padding-top: 3rem; margin-bottom: 2.5rem; }
body.page-contact main h3 { color: #6B4A3D; }

#contact h2, #plan h2, #cadre h2, #tarifs h2, #faq h2 { position: relative; }
#contact h2::before, #plan h2::before, #cadre h2::before, #tarifs h2::before, #faq h2::before {
  content: "";
  position: absolute;
  left: -3.6em;
  top: calc(50% - 1.2em);
  transform: translateY(-50%);
  width: 7.2em;
  height: 7.2em;
  background-image: url('../../images/oeil-lotus-maieusthesie-franck-dagorn-evide-blanc.webp');
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(1);
  opacity: .15;
  z-index: -1;
  pointer-events: none;
}

.ir-sommaire {
  position: relative;
  isolation: isolate;
  display: flex;
  width: fit-content;
  max-width: 92%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin: 0 auto 2rem;
  padding: .8rem 1.4rem;
}
.ir-sommaire::before {
  content: "";
  position: absolute;
  inset: -25% -4%;
  z-index: -1;
  border-radius: 999px;
  filter: blur(26px);
  background: radial-gradient(ellipse at center, rgba(90, 35, 20, 0.8) 0%, rgba(74, 27, 18, 0.55) 55%, rgba(74, 27, 18, 0) 100%);
}
.ir-sommaire a {
  color: #fff;
  font-family: "Work Sans", sans-serif;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ir-sommaire a:hover, .ir-sommaire a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ir-sommaire span[aria-hidden] { color: rgba(255, 255, 255, .55); font-size: .8rem; }

body.page-contact .hero-page {
  margin-top: calc(-1.6 * var(--hauteur-header, 84px));
}