/**
 * Fond Bokeh DA « Lin & Ardoise » — partagé (connexion, programmes, dashboard).
 * Vitesse calibrée ~60 % du lab (mouvement lent, pas rapide).
 */

body.da-bokeh-page {
  position: relative;
  background: var(--da-base, #f1efe9);
}

body.da-bokeh-page.theme-lin-ardoise.dashboard-page {
  background: var(--da-base, #f1efe9);
}

body.da-bokeh-page > *:not(.da-bokeh-ambient) {
  position: relative;
  z-index: 1;
}

.da-bokeh-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--da-base, #f1efe9);
}

.da-bokeh-ambient__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    var(--da-base-raised, #f6f4ee) 0%,
    var(--da-base, #f1efe9) 45%,
    color-mix(in srgb, var(--da-base-sunken, #e7e4dc) 75%, var(--da-accent-2-soft)) 100%
  );
}

.da-bokeh-ambient__dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(22px);
  will-change: transform, opacity;
}

/* 12 pastilles — bleu ardoise + taupe */
.da-bokeh-ambient__dot--1 {
  width: min(26vw, 230px);
  height: min(26vw, 230px);
  top: 6%;
  left: 4%;
  background: var(--da-accent-glow);
  animation: daBokeh1 16s ease-in-out infinite;
}

.da-bokeh-ambient__dot--2 {
  width: min(21vw, 185px);
  height: min(21vw, 185px);
  top: 54%;
  left: 9%;
  background: var(--da-accent-2-glow);
  animation: daBokeh2 19s ease-in-out infinite;
}

.da-bokeh-ambient__dot--3 {
  width: min(30vw, 270px);
  height: min(30vw, 270px);
  top: 3%;
  right: 5%;
  background: color-mix(in srgb, var(--da-accent) 48%, transparent);
  animation: daBokeh3 21s ease-in-out infinite reverse;
}

.da-bokeh-ambient__dot--4 {
  width: min(17vw, 145px);
  height: min(17vw, 145px);
  bottom: 17%;
  right: 20%;
  background: var(--da-accent-2-soft);
  animation: daBokeh4 14s ease-in-out infinite;
}

.da-bokeh-ambient__dot--5 {
  width: min(23vw, 200px);
  height: min(23vw, 200px);
  bottom: 5%;
  left: 34%;
  background: var(--da-accent-soft);
  animation: daBokeh5 17s ease-in-out infinite;
}

.da-bokeh-ambient__dot--6 {
  width: min(15vw, 125px);
  height: min(15vw, 125px);
  top: 33%;
  right: 36%;
  background: var(--da-grad-1);
  animation: daBokeh6 15.5s ease-in-out infinite;
}

.da-bokeh-ambient__dot--7 {
  width: min(19vw, 165px);
  height: min(19vw, 165px);
  top: 66%;
  right: 7%;
  background: var(--da-accent-glow);
  animation: daBokeh7 20s ease-in-out infinite reverse;
}

.da-bokeh-ambient__dot--8 {
  width: min(13vw, 115px);
  height: min(13vw, 115px);
  top: 20%;
  left: 40%;
  background: var(--da-accent-2-glow);
  animation: daBokeh8 13.5s ease-in-out infinite;
}

.da-bokeh-ambient__dot--9 {
  width: min(24vw, 210px);
  height: min(24vw, 210px);
  bottom: 27%;
  left: 56%;
  background: color-mix(in srgb, var(--da-accent) 38%, var(--da-accent-2-soft));
  animation: daBokeh9 22s ease-in-out infinite;
}

.da-bokeh-ambient__dot--10 {
  width: min(11vw, 95px);
  height: min(11vw, 95px);
  top: 42%;
  left: 22%;
  background: var(--da-grad-2);
  animation: daBokeh10 14.5s ease-in-out infinite reverse;
}

.da-bokeh-ambient__dot--11 {
  width: min(18vw, 155px);
  height: min(18vw, 155px);
  top: 78%;
  left: 18%;
  background: var(--da-accent-soft);
  animation: daBokeh11 18s ease-in-out infinite;
}

.da-bokeh-ambient__dot--12 {
  width: min(14vw, 120px);
  height: min(14vw, 120px);
  top: 12%;
  right: 28%;
  background: var(--da-accent-2-soft);
  animation: daBokeh12 16.5s ease-in-out infinite reverse;
}

@keyframes daBokeh1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(10vw, 7vh) scale(1.14); opacity: 0.96; }
}

@keyframes daBokeh2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-9vw, -8vh) scale(1.1); }
}

@keyframes daBokeh3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10vw, 11vh) scale(1.18); }
}

@keyframes daBokeh4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, -6vh) scale(1.12); }
}

@keyframes daBokeh5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7vw, 5vh) scale(1.08); }
}

@keyframes daBokeh6 {
  0%, 100% { transform: translate(0, 0) scale(0.94); opacity: 0.72; }
  50% { transform: translate(6vw, -10vh) scale(1.16); opacity: 0.94; }
}

@keyframes daBokeh7 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-11vw, -5vh) scale(1.14); }
}

@keyframes daBokeh8 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(9vw, 9vh) scale(1.2); }
}

@keyframes daBokeh9 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8vw, 10vh) scale(0.9); }
}

@keyframes daBokeh10 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5vw, -7vh) scale(1.22); }
}

@keyframes daBokeh11 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7vw, -4vh) scale(1.1); }
}

@keyframes daBokeh12 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.76; }
  50% { transform: translate(-6vw, 8vh) scale(1.15); opacity: 0.92; }
}

body.da-bokeh-page.programs-training-page .trainingLobby {
  background: transparent;
}

body.da-bokeh-page.theme-lin-ardoise .signInContainer,
body.da-bokeh-page.theme-lin-ardoise .sso-row,
body.da-bokeh-page.theme-lin-ardoise .registerContainer {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .da-bokeh-ambient__dot {
    animation: none !important;
  }
}