/* ==========================================================
   COSMOS — Observatoire perdu dans l’immensité
   ========================================================== */

.universe--cosmos {
  position: relative;
  overflow: hidden;

  --font-display: 'Orbitron', sans-serif;
  --font-primary: 'Orbitron', sans-serif;

  --cosmos: #36c6ff;
  --cosmos-ink: rgba(235,248,255,0.92);
  --cosmos-dim: rgba(235,248,255,0.58);

  --bg-section:
    radial-gradient(1400px 900px at 18% 16%, rgba(60,110,180,0.14), transparent 70%),
    radial-gradient(1100px 700px at 82% 74%, rgba(120,90,200,0.10), transparent 72%),
    linear-gradient(180deg, rgba(3,6,12,0.55), rgba(2,4,10,0.94)),
    #040912;

  --card-bg-a: rgba(6,14,28,0.68);
  --card-bg-b: rgba(3,8,18,0.84);

  --card-border: rgba(210,245,255,0.10);
  --card-border-hi: rgba(210,245,255,0.22);

  --mx: 0;
  --my: 0;
  --presence: 0;
}

/* texture atmosphère légère */
.universe--cosmos::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-decor);
  opacity: 0.08;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 30%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 86%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  background-size: 240px 240px, 280px 280px, 320px 320px;
}

/* grille céleste qui apparaît quand on interagit */
.universe--cosmos::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: var(--z-decor);
  opacity: calc(0.02 + var(--presence) * 0.08);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(220,245,255,0.04) 0px,
      rgba(220,245,255,0.04) 1px,
      transparent 1px,
      transparent 150px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(220,245,255,0.035) 0px,
      rgba(220,245,255,0.035) 1px,
      transparent 1px,
      transparent 200px
    );
  mix-blend-mode: screen;
  filter: blur(0.25px);
}

/* ==========================================================
   CANVAS
   ========================================================== */

.cosmos-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-canvas);
}

.cosmos-whispers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-canvas);
}

/* ==========================================================
   LAYOUT OBSERVATOIRE
   ========================================================== */

.cosmos-grid {
  display: grid;
  gap: 26px;
  align-items: start;

  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "profile mystere"
    "stats   stats"
    "note    note";
}

.card--profile { grid-area: profile; }
.card--cosmos  { grid-area: mystere; }
.card--stats   { grid-area: stats; }
.cosmos-note   { grid-area: note; }

@media (max-width: 640px) {
  .cosmos-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "profile"
      "mystere"
      "stats"
      "note";
  }
}

/* ==========================================================
   CARDS — Objets instrumentaux irréguliers
   ========================================================== */

.universe--cosmos .card {
  position: relative;
  overflow: hidden;

  --c1: 20px;
  --c2: 14px;
  --c3: 26px;
  --c4: 12px;

  padding: 30px 28px 28px 54px;

  background: linear-gradient(180deg, var(--card-bg-a), var(--card-bg-b));

  clip-path: polygon(
    var(--c1) 0%,
    calc(100% - var(--c2)) 0%,
    100% var(--c2),
    100% calc(100% - var(--c3)),
    calc(100% - var(--c3)) 100%,
    var(--c4) 100%,
    0% calc(100% - var(--c4)),
    0% var(--c1)
  );

  border: 1px solid var(--card-border);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 40px 140px rgba(0,0,0,0.65);

  backdrop-filter: blur(12px);

  transition: border-color 280ms ease,
              box-shadow 280ms ease,
              transform 280ms ease;
}

/* cadre interne scientifique */
.universe--cosmos .card::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;

  border: 1px solid rgba(210,245,255,0.06);

  background:
    repeating-linear-gradient(
      0deg,
      rgba(220,245,255,0.025) 0px,
      rgba(220,245,255,0.025) 1px,
      transparent 1px,
      transparent 110px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(220,245,255,0.018) 0px,
      rgba(220,245,255,0.018) 1px,
      transparent 1px,
      transparent 160px
    );
}

/* reflet spectral lié au mouvement souris */
.universe--cosmos .card::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;

  opacity: calc(0.05 + var(--presence) * 0.22);

  background:
    conic-gradient(
      from 220deg at calc(50% + var(--mx) * 24%) calc(40% + var(--my) * 18%),
      rgba(210,245,255,0.00),
      rgba(210,245,255,0.12),
      rgba(120,140,255,0.08),
      rgba(210,245,255,0.00)
    );

  mix-blend-mode: screen;
}

.universe--cosmos .card > * {
  position: relative;
  z-index: 1;
}

.universe--cosmos .card:hover {
  border-color: var(--card-border-hi);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 60px 190px rgba(0,0,0,0.80);
  transform: translateY(-2px);
}

/* rail vertical style observatoire */
.universe--cosmos .card h2::before,
.universe--cosmos .card .profile::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(210,245,255,0.28),
    rgba(210,245,255,0.08),
    transparent
  );
}

.universe--cosmos .card h2 {
  margin: 0 0 14px 0;
  color: var(--cosmos-ink);
  letter-spacing: 1.2px;
  font-weight: 650;
}

.universe--cosmos .card p {
  margin: 0;
  line-height: 1.7;
  color: rgba(235,248,255,0.74);
}

/* ==========================================================
   NOTE BAS DE PAGE
   ========================================================== */

.cosmos-note {
  padding: 18px 22px;
  background: rgba(0,20,40,0.38);
  border: 1px solid rgba(210,245,255,0.12);

  clip-path: polygon(
    14px 0%,
    calc(100% - 14px) 0%,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%,
    0% calc(100% - 14px),
    0% 14px
  );

  backdrop-filter: blur(10px);
  box-shadow: 0 30px 110px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.88);
}

/* ==========================================================
   WHISPERS — pensées traversantes
   ========================================================== */

.whisper {
  position: absolute;
  left: 0;
  top: 0;

  color: rgba(235,248,255,0.62);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.3px;
  white-space: nowrap;

  opacity: 0;
  padding: 6px 12px;

  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(210,245,255,0.12);

  text-shadow: 0 0 12px rgba(120,190,255,0.25);
  backdrop-filter: blur(6px);
}

.whisper--cold {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(235,248,255,0.48);
}

.whisper.is-live {
  animation: driftWhisper var(--dur, 16s) linear forwards;
}

@keyframes driftWhisper {
  0%   { transform: translateX(110vw) translateY(var(--y, 0px)); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.8; }
  100% { transform: translateX(-130vw) translateY(calc(var(--y, 0px) + 10px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whisper.is-live { animation: none; opacity: 0.65; }
}