/* ===== D/CREATORS — FORMES DÉCORATIVES D'ARRIÈRE-PLAN =====
   - Purement décoratif (aria-hidden), ne capte aucun clic (pointer-events:none)
   - Se déplace AVEC le scroll (position:absolute, jamais fixed)
   - z-index négatif : toujours derrière le texte, les cartes et les sections
   - Couleur/opacité pilotées par variables -> claires en light, plus visibles en dark
   - Masqué sous 1100px pour ne jamais gêner la lecture sur tablette/mobile
------------------------------------------------------------- */

:root {
  --shape-color: var(--violet);
  --shape-opacity: 0.07;
}

html[data-theme="dark"] {
  --shape-color: var(--accent);
  --shape-opacity: 0.16;
}

body { position: relative; }

.bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-shapes .shape {
  position: absolute;
  background: var(--shape-color);
  opacity: var(--shape-opacity);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(1px);
  transform: rotate(var(--r, 0deg));
  animation: shape-float 16s ease-in-out infinite;
}

.bg-shapes .shape.circle { border-radius: 50%; }

/* Petites formes "compagnes" façon bulle familiale à côté des grandes */
.bg-shapes .shape.dot { filter: none; }

/* ── Variantes de formes (pour casser la répétition des "blobs") ───── */

/* Carré doux (coins arrondis, pas un blob organique) */
.bg-shapes .shape.square { border-radius: 22%; }

/* Losange (carré tourné à 45°, coins légèrement adoucis) */
.bg-shapes .shape.diamond { border-radius: 16%; transform: rotate(45deg); }

/* Triangle arrondi */
.bg-shapes .shape.triangle {
  background: none;
  border-radius: 0;
  filter: none;
  clip-path: path('M 50 4 C 53 4 56 5.5 57.5 8.5 L 95 88 C 98 94 94 100 87 100 L 13 100 C 6 100 2 94 5 88 L 42.5 8.5 C 44 5.5 47 4 50 4 Z');
}

/* Anneau (cercle creux, contour uniquement) */
.bg-shapes .shape.ring {
  background: none;
  border: 10px solid var(--shape-color);
  opacity: var(--shape-opacity);
  border-radius: 50%;
  filter: none;
}

/* Étoile à 5 branches */
.bg-shapes .shape.star {
  border-radius: 0;
  filter: none;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ── Clusters (grande forme + petite(s) forme(s) compagne(s)) ───────── */

.shape-1 { top: 6%;  left: -30px; width: 190px; height: 170px; --r: 8deg; }
.shape-1b{ top: 9%;  left: 130px; width: 46px;  height: 46px; animation-delay: -3s; }
.shape-1c{ top: 4%;  left: 210px; width: 26px;  height: 26px; animation-delay: -11s; }

.shape-2 { top: 15%; right: -40px; width: 130px; height: 120px; --r: -14deg; animation-delay: -6s; }
.shape-2b{ top: 12%; right: 100px; width: 36px;  height: 36px; animation-delay: -13s; }
.shape-2c{ top: 3%;  right: 90px;  width: 50px;  height: 50px; --r: -10deg; animation-delay: -8s; }

.shape-3 { top: 27%; left: -20px; width: 90px; height: 84px; --r: 22deg; animation-delay: -2s; }
.shape-3b{ top: 24%; left: 90px;  width: 30px; height: 30px; animation-delay: -9s; }

.shape-4 { top: 39%; right: -50px; width: 210px; height: 190px; --r: -6deg; animation-delay: -10s; }
.shape-4b{ top: 44%; right: 150px; width: 32px;  height: 32px; animation-delay: -1s; }

.shape-5 { top: 51%; left: -25px; width: 120px; height: 120px; animation-delay: -4s; }
.shape-5b{ top: 56%; left: 105px; width: 38px;  height: 38px; animation-delay: -12s; }

.shape-6 { top: 63%; right: -30px; width: 150px; height: 140px; --r: 30deg; animation-delay: -7s; }
.shape-6b{ top: 60%; right: 115px; width: 24px;  height: 24px; animation-delay: -3s; }

.shape-7 { top: 75%; left: -35px; width: 100px; height: 96px; --r: -18deg; animation-delay: -1s; }
.shape-7b{ top: 80%; left: 80px;  width: 34px;  height: 34px; animation-delay: -14s; }

.shape-8 { top: 87%; right: -45px; width: 170px; height: 155px; --r: 12deg; animation-delay: -8s; }
.shape-8b{ top: 84%; right: 130px; width: 28px;  height: 28px; animation-delay: -5s; }

.shape-9 { top: 96%; left: -15px; width: 80px; height: 80px; animation-delay: -5s; }
.shape-9b{ top: 93%; left: 75px;  width: 22px; height: 22px; animation-delay: -10s; }

@keyframes shape-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  50%      { transform: translate(14px, 18px) rotate(var(--r, 0deg)); }
}

@media (max-width: 1100px) {
  .bg-shapes { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-shapes .shape { animation: none; }
}