/* ============================================
   Espace personnel — habillage par groupe
   Petit poisson / saumon / requin : le bandeau, les accents et le décor changent
   avec le groupe du joueur (js/membre.js, attribut data-group).
   Bloc sombre en thème clair aussi : on redéfinit les couleurs localement.
   ============================================ */

[data-group="poisson"] { --g: #3cc2c8; --g-soft: rgba(60, 194, 200, 0.14); --g-water-1: #0b2a30; --g-water-2: #07171b; }
[data-group="saumon"]  { --g: #ff8a68; --g-soft: rgba(255, 138, 104, 0.14); --g-water-1: #3a1a1f; --g-water-2: #1c1016; }
[data-group="requin"]  { --g: #7cacc8; --g-soft: rgba(124, 172, 200, 0.14); --g-water-1: #0e2738; --g-water-2: #081521; }

.lagoon {
  --color-cream: #f5f0e8;
  --color-cream-dim: #d4cfc7;
  --color-white: #ffffff;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border: 2px solid var(--g);
  border-radius: 28px;
  color: var(--color-cream);
  background:
    radial-gradient(ellipse at 85% -10%, var(--g-soft), transparent 60%),
    linear-gradient(160deg, var(--g-water-1), var(--g-water-2));
}
.lagoon[hidden] { display: none; }

.lagoon-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}
.lagoon-place {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g);
}
.lagoon-title {
  margin: var(--space-2) 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem);
  color: #fff;
}
.lagoon-hello { margin: 0; color: var(--color-cream-dim); max-width: 46ch; }

.lagoon-crest {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--g);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.45);
}
.lagoon-crest svg { width: 78px; height: 50px; flex: none; }
.lagoon-crest b { display: block; font-family: var(--font-heading); font-size: var(--text-lg); color: #fff; }
.lagoon-crest span {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g);
}

/* Choix du joueur quand la famille en compte plusieurs */
.lagoon-pick {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.lagoon-pick[hidden] { display: none; }
.lagoon-pick button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.4);
  color: #f5f0e8;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lagoon-pick button svg { width: 38px; height: 24px; }
.lagoon-pick button[aria-pressed="true"] { border-color: var(--g); background: var(--g-soft); }

/* Parcours petit poisson → saumon → requin */
.lagoon-path {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: var(--space-5);
}
.lagoon-path .stop { text-align: center; opacity: 0.45; }
.lagoon-path .stop svg { display: block; width: 64px; height: 42px; margin: 0 auto 4px; }
.lagoon-path .stop span { font-size: var(--text-xs); font-weight: 700; }
.lagoon-path .stop.done { opacity: 0.75; }
.lagoon-path .stop.here { opacity: 1; }
.lagoon-path .stop.here span { color: var(--g); }
.lagoon-path .stop.here svg { width: 92px; height: 60px; filter: drop-shadow(0 0 10px var(--g-soft)); }
.path-line {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--g) var(--progress, 0%), rgba(255, 255, 255, 0.12) var(--progress, 0%));
}
.path-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: var(--text-sm); color: var(--color-cream-dim); }

/* Décor animé : un par groupe */
.lagoon-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lagoon-decor > * { display: none; }
.lagoon[data-group="poisson"] .decor-bubble,
.lagoon[data-group="poisson"] .decor-swimmer,
.lagoon[data-group="saumon"] .decor-current,
.lagoon[data-group="saumon"] .decor-jumper,
.lagoon[data-group="requin"] .decor-sonar,
.lagoon[data-group="requin"] .decor-fin { display: block; }

.decor-bubble {
  position: absolute;
  bottom: -20px;
  border: 2px solid rgba(60, 194, 200, 0.5);
  border-radius: 50%;
  animation: lg-rise 7s ease-in infinite;
}
@keyframes lg-rise { from { transform: translateY(0); opacity: 0.7; } to { transform: translateY(-420px); opacity: 0; } }
.decor-swimmer { position: absolute; right: 24%; bottom: 14px; width: 64px; animation: lg-swim 12s ease-in-out infinite alternate; }
@keyframes lg-swim { from { transform: translateX(80px); } to { transform: translateX(-160px); } }

.decor-current {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 192, 0.35), transparent);
  animation: lg-current 3.2s linear infinite;
}
@keyframes lg-current { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.decor-jumper { position: absolute; right: 26%; bottom: 8px; width: 92px; animation: lg-jump 3.4s ease-in-out infinite; }
@keyframes lg-jump {
  0%, 60%, 100% { transform: translate(0, 40px) rotate(-30deg); opacity: 0; }
  70% { opacity: 1; }
  80% { transform: translate(-30px, -36px) rotate(-12deg); opacity: 1; }
  92% { transform: translate(-60px, 20px) rotate(28deg); opacity: 1; }
}

.decor-sonar {
  position: absolute;
  right: 30%;
  top: 8%;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(124, 172, 200, 0.35);
  border-radius: 50%;
  animation: lg-sonar 3s ease-out infinite;
}
.decor-sonar.two { animation-delay: 1.5s; }
@keyframes lg-sonar { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.decor-fin { position: absolute; bottom: 14px; width: 44px; animation: lg-fin 9s linear infinite; }
@keyframes lg-fin { from { left: -60px; } to { left: calc(100% + 60px); } }

/* Accents du reste de la page, quand un groupe est connu */
.player-card[data-group] { border-left: 4px solid var(--g); }
.player-card[data-group] .badge { background: var(--g-soft); color: var(--g); border: 1px solid var(--g); }
.support-player[data-group] .repertoire-title { color: var(--g); }
.support-player[data-group] .opening-tile:hover,
.support-player[data-group] .opening-tile[aria-pressed="true"] { border-color: var(--g); }
.support-player[data-group] .support-player-name { color: var(--g); }

@media (max-width: 640px) {
  .lagoon { padding: var(--space-4); border-radius: 22px; }
  .lagoon-path .stop svg { width: 48px; height: 32px; }
  .lagoon-path .stop.here svg { width: 68px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .decor-bubble, .decor-swimmer, .decor-current, .decor-jumper, .decor-sonar, .decor-fin { animation: none; }
  .decor-jumper { opacity: 0; }
}