/* Éclairage des rubriques : décor CSS partagé par toutes les pages. */
main > .section:not(.hero) {
  position: relative;
  isolation: isolate;
  background-color: #050707;
  background-image:
    radial-gradient(ellipse at -8% 28%, #03bce32b, transparent 48%),
    radial-gradient(ellipse at 106% 80%, #18c9b423, transparent 46%);
}

main > .section:not(.hero) > .container {
  position: relative;
  z-index: 1;
}

/* Deux faisceaux se croisent en marge, sans voile au-dessus des contenus. */
main > .section:not(.hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(118deg, transparent 8%, #03bce305 14%, #03bce317 16%, transparent 23%),
    linear-gradient(65deg, transparent 75%, #18c9b414 82%, transparent 89%);
  opacity: .75;
}

/* Trame technique fondue vers les bords, rappelant le matériel de scène. */
.services::after,
.gallery::after,
.booking-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#2bc5d00a 1px, transparent 1px),
    linear-gradient(90deg, #2bc5d00a 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 38%, transparent 65%, #000);
}

main > .home-booking {
  padding-block: clamp(42px, 5vw, 76px);
  background-image:
    radial-gradient(ellipse at 75% 50%, #18c9b433, transparent 60%),
    radial-gradient(ellipse at 5% 90%, #03bce31c, transparent 45%);
}

.home-booking .pricing-inner {
  background: transparent;
  border-color: #26808a;
  box-shadow: 0 0 40px #03bce310, inset 0 1px #37dfed17;
}

main > .journal {
  background-image:
    radial-gradient(ellipse at 96% 10%, #03bce32b, transparent 52%),
    radial-gradient(ellipse at 10% 100%, #18c9b420, transparent 45%);
  border-top-color: #1d555e;
  border-bottom-color: #153a40;
}

.journal::after {
  content: '';
  position: absolute;
  height: 130px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background: repeating-linear-gradient(90deg, #12c8be36 0 2px, transparent 2px 15px);
  mask-image: radial-gradient(ellipse at 85% 100%, #000, transparent 65%);
}

.service-card {
  border-bottom-color: #28565f;
}

.service-visual {
  box-shadow: 0 0 28px #03bce30b;
}

/* Le triptyque contient trois vues de 512 × 1024 px. On recadre chaque vue
   dans sa vignette en conservant le rapport largeur/hauteur de l’image. */
.service-visual.scene,
.gallery-tile.scene,
.picture-view.scene {
  background-size: 300% auto;
}

.picture-view.scene {
  width: min(100%, 325px, 32.5vh);
  height: auto;
  aspect-ratio: 1 / 2;
}

.service-visual.scene-wedding,
.gallery-tile.scene-wedding {
  background-position: left 36%;
}

@property --photo-neon-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.service-visual::before,
.gallery-tile::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  --neon-color: #8bddff;
  --neon-left: clamp(0%, calc(var(--photo-neon-progress, 0) * 100%), 100%);
  --neon-top: clamp(0%, calc((var(--photo-neon-progress, 0) - 1) * 100%), 100%);
  --neon-right: clamp(0%, calc((var(--photo-neon-progress, 0) - 2) * 100%), 100%);
  --neon-bottom: clamp(0%, calc((var(--photo-neon-progress, 0) - 3) * 100%), 100%);
  /* Le trait remonte le bord gauche, puis parcourt les trois autres côtés. */
  background:
    linear-gradient(var(--neon-color), var(--neon-color)) left bottom / 1px var(--neon-left) no-repeat,
    linear-gradient(var(--neon-color), var(--neon-color)) left top / var(--neon-top) 1px no-repeat,
    linear-gradient(var(--neon-color), var(--neon-color)) right top / 1px var(--neon-right) no-repeat,
    linear-gradient(var(--neon-color), var(--neon-color)) right bottom / var(--neon-bottom) 1px no-repeat;
  filter: drop-shadow(0 0 2px #39b7ff) drop-shadow(0 0 4px #137bffb3);
  transition: --photo-neon-progress .85s linear;
  pointer-events: none;
}

.service-card:focus-visible .service-visual,
.gallery-tile:focus-visible {
  --photo-neon-progress: 4;
}

@media (hover: hover) {
  .service-card:hover .service-visual,
  .gallery-tile:hover {
    --photo-neon-progress: 4;
  }
}

@supports (animation-timeline: view()) and (animation-range: entry 0% cover 80%) {
  @media (prefers-reduced-motion: no-preference) {
    main > .section:not(.hero) {
      view-timeline-name: --section-entry;
    }

    main > .section:not(.hero) > .container::before {
      content: '';
      position: absolute;
      inset: 0 16% auto;
      height: min(100%, 360px);
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 35% 33%, #f16aab48, transparent 72%),
        conic-gradient(from 78deg at 24% 0%, transparent, #e5509d40 60deg, transparent 120deg);
      mask-image:
        linear-gradient(transparent, #000 20% 80%, transparent),
        linear-gradient(90deg, transparent, #000 23% 78%, transparent);
      mask-composite: intersect;
      animation: section-spotlight 1ms linear both;
      animation-timeline: --section-entry;
      animation-range: entry 0% cover 80%;
    }
  }
}

@keyframes section-spotlight {
  0% { opacity: 0; transform: translate(-22%, -112px); }
  22% { opacity: 1; transform: translate(-20%, -92px); }
  82% { opacity: .9; transform: translate(20%, 72px); }
  100% { opacity: 0; transform: translate(22%, 88px); }
}

@media (prefers-reduced-motion: no-preference) {
  .title-flash {
    animation: section-title-flash 1.15s ease-in-out;
  }
}

@keyframes section-title-flash {
  0%, 100% { filter: none; }
  16%, 47% {
    filter: drop-shadow(0 0 4px #a3edff) drop-shadow(0 0 14px #269eff)
      drop-shadow(0 0 24px #1264ffb3);
  }
}

.footer {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, #03bce319, transparent 70%),
    #050707;
  padding-top: 40px;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  main > .section:not(.hero)::before {
    animation: ambient-light 14s ease-in-out infinite alternate;
  }
  @keyframes ambient-light {
    from { opacity: .45; }
    to { opacity: .9; }
  }
}

@media (max-width: 767px) {
  main > .section:not(.hero) {
    background-image:
      radial-gradient(ellipse at -30% 20%, #03bce32b, transparent 65%),
      radial-gradient(ellipse at 130% 85%, #18c9b423, transparent 60%);
  }
  main > .section:not(.hero)::before { opacity: .5; }
  .services::after, .gallery::after, .booking-page::after {
    background-size: 40px 40px;
    opacity: .6;
  }
  .journal::after { height: 90px; opacity: .2; }
}