/* Décor animé commun aux pages intérieures. */
body.ambient-page {
  --ambient-primary: 11, 143, 199;
  --ambient-secondary: 242, 169, 0;
  --ambient-deep: 18, 52, 77;
  position: relative;
  overflow-x: clip;
  background: #eaf3f7;
}

.page-ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 18%, rgba(var(--ambient-primary), .2), transparent 30%),
    radial-gradient(circle at 88% 76%, rgba(var(--ambient-secondary), .15), transparent 27%),
    linear-gradient(135deg, #f7fbfc 0%, #e7f2f6 48%, #f6fafb 100%);
  background-size: 145% 145%, 150% 150%, 100% 100%;
  animation: ambient-background-shift 18s ease-in-out infinite alternate;
}

.page-ambient::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -180px;
  width: clamp(330px, 40vw, 590px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--ambient-primary), .28);
  border-radius: 50%;
  box-shadow:
    0 0 0 52px rgba(var(--ambient-primary), .055),
    0 0 0 108px rgba(var(--ambient-secondary), .04),
    inset 0 0 70px rgba(var(--ambient-primary), .07);
  animation: ambient-orbit 22s linear infinite;
}

.page-ambient::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -42%;
  width: 68%;
  height: 235%;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--ambient-primary), .025) 28%, rgba(var(--ambient-primary), .14) 48%, rgba(var(--ambient-secondary), .08) 58%, transparent 82%);
  filter: blur(3px);
  transform: rotate(17deg);
  animation: ambient-light-sweep 16s ease-in-out infinite alternate;
}

.page-ambient span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.95) 0 4%, rgba(var(--ambient-primary),.28) 20%, rgba(var(--ambient-primary),.06) 58%, transparent 73%);
  box-shadow: 0 0 32px rgba(var(--ambient-primary), .2);
  animation: ambient-particle-float 12s ease-in-out infinite alternate;
}

.page-ambient span:nth-child(1) { top: 20%; left: 7%; width: 78px; height: 78px; }
.page-ambient span:nth-child(2) { right: 14%; bottom: 16%; width: 45px; height: 45px; animation-delay: -4s; animation-duration: 15s; }
.page-ambient span:nth-child(3) { bottom: 10%; left: 35%; width: 24px; height: 24px; background: rgba(var(--ambient-secondary), .46); box-shadow: 0 0 0 9px rgba(var(--ambient-secondary), .07), 0 0 30px rgba(var(--ambient-secondary), .32); animation-delay: -7s; animation-duration: 10s; }

body.ambient-page--formation { --ambient-primary: 8, 120, 168; --ambient-secondary: 242, 169, 0; }
body.ambient-page--contact { --ambient-primary: 11, 143, 199; --ambient-secondary: 108, 186, 146; }
body.ambient-page--privacy { --ambient-primary: 70, 136, 166; --ambient-secondary: 242, 169, 0; }
body.ambient-page--legal { --ambient-primary: 18, 52, 77; --ambient-secondary: 11, 143, 199; }

body.ambient-page--formation .page-ambient::before { top: auto; right: auto; bottom: -170px; left: -155px; }
body.ambient-page--contact .page-ambient::before { top: 22%; right: -130px; }
body.ambient-page--privacy .page-ambient::before,
body.ambient-page--legal .page-ambient::before { top: 16%; right: -230px; opacity: .72; }

/*
 * Sur les pages principales, le décor suit la hauteur du document :
 * le haut, le milieu et le bas possèdent ainsi une ambiance différente.
 */
body.ambient-page--expertise .page-ambient,
body.ambient-page--formation .page-ambient,
body.ambient-page--contact .page-ambient,
body.ambient-page--privacy .page-ambient,
body.ambient-page--legal .page-ambient {
  position: absolute;
  min-height: 100%;
  background-size: 100% 100%;
  animation: none;
}

body.ambient-page--expertise .page-ambient {
  background:
    radial-gradient(circle at 10% 9%, rgba(11,143,199,.25), transparent 18%),
    radial-gradient(circle at 91% 32%, rgba(242,169,0,.15), transparent 17%),
    radial-gradient(circle at 7% 63%, rgba(8,120,168,.19), transparent 19%),
    radial-gradient(circle at 88% 89%, rgba(242,169,0,.18), transparent 18%),
    linear-gradient(180deg, #e4f3f8 0%, #f7fafb 22%, #e9f3f6 48%, #f8f5ea 73%, #dcecf3 100%);
}

body.ambient-page--formation .page-ambient {
  background:
    radial-gradient(circle at 88% 10%, rgba(242,169,0,.2), transparent 18%),
    radial-gradient(circle at 9% 36%, rgba(11,143,199,.23), transparent 18%),
    radial-gradient(circle at 90% 64%, rgba(8,120,168,.17), transparent 20%),
    radial-gradient(circle at 12% 90%, rgba(242,169,0,.2), transparent 17%),
    linear-gradient(180deg, #edf7fa 0%, #f8f7f0 27%, #e2f0f5 53%, #f7fafb 76%, #e8f2ec 100%);
}

body.ambient-page--contact .page-ambient {
  background:
    radial-gradient(circle at 8% 11%, rgba(11,143,199,.25), transparent 20%),
    radial-gradient(circle at 91% 34%, rgba(108,186,146,.21), transparent 20%),
    radial-gradient(circle at 6% 62%, rgba(242,169,0,.13), transparent 17%),
    radial-gradient(circle at 89% 88%, rgba(11,143,199,.2), transparent 20%),
    linear-gradient(180deg, #dff1f7 0%, #f6faf9 28%, #e7f3ee 55%, #f8f4e9 78%, #dbeef4 100%);
}

body.ambient-page--privacy .page-ambient {
  background:
    radial-gradient(circle at 8% 10%, rgba(70,136,166,.25), transparent 19%),
    radial-gradient(circle at 91% 31%, rgba(242,169,0,.16), transparent 17%),
    radial-gradient(circle at 7% 64%, rgba(11,143,199,.19), transparent 20%),
    radial-gradient(circle at 89% 91%, rgba(70,136,166,.22), transparent 19%),
    linear-gradient(180deg, #e3f0f4 0%, #f8f8f3 27%, #e6f2f6 53%, #faf5e8 77%, #dcecf2 100%);
}

body.ambient-page--legal .page-ambient {
  background:
    radial-gradient(circle at 90% 9%, rgba(11,143,199,.23), transparent 18%),
    radial-gradient(circle at 8% 34%, rgba(242,169,0,.14), transparent 17%),
    radial-gradient(circle at 91% 66%, rgba(18,52,77,.18), transparent 20%),
    radial-gradient(circle at 10% 90%, rgba(11,143,199,.2), transparent 19%),
    linear-gradient(180deg, #e1edf2 0%, #f8fafb 25%, #e9f2f5 51%, #f8f4e9 76%, #d8eaf1 100%);
}

body.ambient-page--expertise .page-ambient::before,
body.ambient-page--formation .page-ambient::before,
body.ambient-page--contact .page-ambient::before,
body.ambient-page--privacy .page-ambient::before,
body.ambient-page--legal .page-ambient::before {
  top: 13%;
  right: -175px;
  bottom: auto;
  left: auto;
  animation: none;
}

body.ambient-page--expertise .page-ambient::after,
body.ambient-page--formation .page-ambient::after,
body.ambient-page--contact .page-ambient::after,
body.ambient-page--privacy .page-ambient::after,
body.ambient-page--legal .page-ambient::after {
  top: 39%;
  left: -20%;
  width: 76%;
  height: 24%;
  opacity: .7;
  transform: rotate(-12deg);
  animation: none;
}

body.ambient-page--formation .page-ambient::before { top: 44%; right: auto; left: -180px; }
body.ambient-page--contact .page-ambient::before { top: 28%; right: -170px; }
body.ambient-page--privacy .page-ambient::before { top: 24%; right: -190px; opacity: .72; }
body.ambient-page--legal .page-ambient::before { top: 48%; right: auto; left: -185px; opacity: .68; }

body.ambient-page--expertise .page-ambient span,
body.ambient-page--formation .page-ambient span,
body.ambient-page--contact .page-ambient span,
body.ambient-page--privacy .page-ambient span,
body.ambient-page--legal .page-ambient span { animation: none; }

body.ambient-page--expertise .page-ambient span:nth-child(1),
body.ambient-page--formation .page-ambient span:nth-child(1),
body.ambient-page--contact .page-ambient span:nth-child(1),
body.ambient-page--privacy .page-ambient span:nth-child(1),
body.ambient-page--legal .page-ambient span:nth-child(1) { top: 18%; }

body.ambient-page--expertise .page-ambient span:nth-child(2),
body.ambient-page--formation .page-ambient span:nth-child(2),
body.ambient-page--contact .page-ambient span:nth-child(2),
body.ambient-page--privacy .page-ambient span:nth-child(2),
body.ambient-page--legal .page-ambient span:nth-child(2) { top: 57%; bottom: auto; }

body.ambient-page--expertise .page-ambient span:nth-child(3),
body.ambient-page--formation .page-ambient span:nth-child(3),
body.ambient-page--contact .page-ambient span:nth-child(3),
body.ambient-page--privacy .page-ambient span:nth-child(3),
body.ambient-page--legal .page-ambient span:nth-child(3) { top: 87%; bottom: auto; }

body.ambient-page > .hero-header,
body.ambient-page > main,
body.ambient-page > .contact-container,
body.ambient-page > .privacy-container,
body.ambient-page > .legal-container,
body.ambient-page > .footer {
  position: relative;
  z-index: 1;
}

body.ambient-page .expertise-page,
body.ambient-page .formation-page {
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(238,244,247,.88) 0, rgba(244,247,249,.84) 340px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(var(--ambient-primary),.025) 79px 80px);
  backdrop-filter: blur(1px);
}

body.ambient-page--expertise .expertise-page,
body.ambient-page--formation .formation-page {
  background:
    linear-gradient(180deg, rgba(247,250,251,.58), rgba(238,246,248,.42) 32%, rgba(250,249,244,.5) 68%, rgba(234,243,246,.48));
  backdrop-filter: none;
}

body.ambient-page .expertise-page > *,
body.ambient-page .formation-page > * { position: relative; z-index: 1; }

body.ambient-page .expertise-hero,
body.ambient-page .formation-hero {
  isolation: isolate;
}

body.ambient-page .contact-container,
body.ambient-page .privacy-container,
body.ambient-page .legal-container {
  background: rgba(255,255,255,.94);
  box-shadow: 0 28px 70px rgba(7,21,33,.14);
  backdrop-filter: blur(8px);
}

@keyframes ambient-background-shift {
  from { background-position: 0 0, 100% 100%, center; }
  to { background-position: 8% 12%, 91% 87%, center; }
}

@keyframes ambient-orbit {
  from { transform: rotate(0deg) scale(.93); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(.93); }
}

@keyframes ambient-light-sweep {
  from { transform: translate3d(-18%,0,0) rotate(17deg); opacity: .45; }
  to { transform: translate3d(118%,0,0) rotate(17deg); opacity: 1; }
}

@keyframes ambient-particle-float {
  from { transform: translate3d(0,18px,0) scale(.9); opacity: .38; }
  to { transform: translate3d(32px,-28px,0) scale(1.1); opacity: .9; }
}

@media (max-width: 700px) {
  .page-ambient { opacity: .78; }
  .page-ambient::before { right: -245px; width: 410px; }
  .page-ambient::after { width: 105%; }
  .page-ambient::after { filter: none; opacity: .48; }
  .page-ambient::before { box-shadow: 0 0 0 34px rgba(var(--ambient-primary),.04), 0 0 0 72px rgba(var(--ambient-secondary),.03); }
  .page-ambient span:nth-child(1) { width: 52px; height: 52px; }
  .page-ambient span:nth-child(2) { width: 34px; height: 34px; }
  body.ambient-page--formation .page-ambient::before { left: -260px; }
  body.ambient-page--expertise .page-ambient,
  body.ambient-page--formation .page-ambient,
  body.ambient-page--contact .page-ambient,
  body.ambient-page--privacy .page-ambient,
  body.ambient-page--legal .page-ambient { opacity: .9; }
  body.ambient-page--expertise .page-ambient::before,
  body.ambient-page--contact .page-ambient::before,
  body.ambient-page--privacy .page-ambient::before { right: -255px; }
  body.ambient-page--legal .page-ambient::before { left: -255px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-ambient,
  .page-ambient::before,
  .page-ambient::after,
  .page-ambient span,
  body.ambient-page .expertise-hero,
  body.ambient-page .formation-hero,
  body.ambient-page .expertise-hero::before,
  body.ambient-page .formation-hero::before {
    animation: none;
  }
}