/* Décors éditoriaux des trois pages détail V4. Aucun script requis.
   Le calque seul est découpé : le sticky de l'entonnoir reste intact. */
.v4-site.detail-page .v4-decorated {
  position: relative;
  isolation: isolate;
}
.v4-site.detail-page .v4-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.v4-site.detail-page .v4-backdrop::before,
.v4-site.detail-page .v4-backdrop::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Signature commune, volontairement décentrée et fondue vers le texte. */
.v4-site.detail-page .v4-backdrop--compass::before {
  width: clamp(680px, 72vw, 980px);
  aspect-ratio: 1;
  left: -230px;
  right: auto;
  top: -150px;
  background: url('../images/boussole-filigrane.png') center / contain no-repeat;
  filter: grayscale(1);
  opacity: .06;
  -webkit-mask-image: linear-gradient(235deg, transparent 5%, #000 65%);
  mask-image: linear-gradient(235deg, transparent 5%, #000 65%);
}
.v4-site.detail-page .hero .v4-backdrop::after {
  width: 640px;
  height: 640px;
  right: -100px;
  top: 0;
  background: radial-gradient(ellipse, rgba(217,54,54,.025), transparent 68%);
}
.v4-site.detail-page .contact .v4-backdrop--compass::before {
  width: 850px;
  top: auto;
  right: auto;
  left: -255px;
  bottom: -240px;
  filter: brightness(0) invert(1);
  opacity: .14;
  -webkit-mask-image: linear-gradient(35deg, #000 20%, transparent 90%);
  mask-image: linear-gradient(35deg, #000 20%, transparent 90%);
}
/* Sprint : courbes de repérage, en marge du déroulé (pas une seconde boussole). */
.v4-site.detail-page .v4-backdrop--survey::before {
  width: 760px;
  height: 760px;
  left: -430px;
  top: -190px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 71px, rgba(30,33,51,.09) 72px 73px, transparent 74px 108px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 95%);
  mask-image: linear-gradient(90deg, #000, transparent 95%);
}
.v4-site.detail-page .v4-backdrop--survey::after {
  width: 360px;
  height: 280px;
  left: 0;
  top: 0;
  background: radial-gradient(circle, rgba(217,54,54,.15) 1px, transparent 1.5px) 0 0 / 28px 28px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%);
  mask-image: linear-gradient(120deg, #000, transparent 70%);
}
/* Autonomie : une trame de construction pour la section « cadre ». */
.v4-site.detail-page .v4-backdrop--framework::before {
  width: min(750px, 100%);
  height: 680px;
  right: -100px;
  top: -70px;
  background-image: linear-gradient(rgba(30,33,51,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(30,33,51,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 35%, #000 8%, transparent 69%);
  mask-image: radial-gradient(ellipse at 80% 35%, #000 8%, transparent 69%);
}
.v4-site.detail-page .v4-backdrop--framework::after {
  width: 340px;
  height: 340px;
  right: -150px;
  top: 70px;
  border: 1px solid rgba(217,54,54,.1);
  border-radius: 28px;
  transform: rotate(-12deg);
}
/* Accompagnement : grandes courbes parallèles, évocation d'une trajectoire. */
.v4-site.detail-page .v4-backdrop--routes::before,
.v4-site.detail-page .v4-backdrop--routes::after {
  width: 950px;
  height: 500px;
  right: -370px;
  top: -280px;
  border: 1px solid rgba(217,54,54,.12);
  border-radius: 50%;
  transform: rotate(-22deg);
}
.v4-site.detail-page .v4-backdrop--routes::after {
  right: -315px;
  top: -220px;
  border-color: rgba(30,33,51,.07);
  box-shadow: 0 0 0 54px rgba(30,33,51,.018);
}
@media (max-width: 900px) {
  .v4-site.detail-page .v4-backdrop--compass::before {
    width: 670px;
    top: -80px;
    left: -315px;
    opacity: .045;
  }
  .v4-site.detail-page .contact .v4-backdrop--compass::before {
    width: 590px;
    left: -220px;
    top: -60px;
    bottom: auto;
    opacity: .115;
  }
  .v4-site.detail-page .v4-backdrop--survey::before { left: -535px; opacity: .7; }
  .v4-site.detail-page .v4-backdrop--survey::after { width: 230px; opacity: .65; }
  .v4-site.detail-page .v4-backdrop--framework::before { right: -90px; opacity: .65; }
  .v4-site.detail-page .v4-backdrop--framework::after { right: -265px; }
  .v4-site.detail-page .v4-backdrop--routes::before,
  .v4-site.detail-page .v4-backdrop--routes::after { opacity: .65; }
}
@media print {
  .v4-site.detail-page .v4-backdrop { display: none; }
}