/* Palette « crépuscule rose », reprise du générique vidéo :
   ciel bleu nuit → nuages roses et pêche, logo rose et lavande, œil bleu. */
:root {
  --bg: #1b1550;
  --bg-2: #261b62;
  --panel: rgba(40, 24, 96, 0.72);
  --panel-2: rgba(84, 52, 156, 0.55);
  --line: rgba(255, 214, 240, 0.18);
  --text: #fff7fb;
  --muted: #cdbfe8;
  --accent: #ff4fa3;      /* rose du mot SECRET */
  --accent-deep: #e0237f;
  --accent-2: #4fb3ff;    /* bleu de l'iris */
  --lavender: #a58bff;    /* lavande du mot STORY */
  --peach: #ffb36b;
  --gold: #ffd27a;
  --ok: #4fe3a9;
  --danger: #ff4f6d;
  --warn: #ffb347;
  --outline: #3a1658;     /* contour sombre du logo */
  --radius: 18px;
  --shadow: 0 12px 34px rgba(30, 8, 60, 0.45);
  --glass: blur(14px) saturate(1.2);
  --sky: linear-gradient(180deg, #22307f 0%, #48399c 28%, #9a5aa8 58%, #ee8aa2 82%, #ffc39a 100%);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --logo: 'Baloo 2', 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Fond « ciel du générique » : la photo des nuages, assombrie pour la lisibilité. */
.sky-bg {
  background:
    linear-gradient(180deg, rgba(22, 14, 72, 0.62) 0%, rgba(40, 18, 88, 0.45) 45%, rgba(60, 18, 78, 0.62) 100%),
    url('/img/ciel.jpg') center / cover fixed,
    var(--sky);
}
@media (max-width: 700px) {
  .sky-bg {
    background:
      linear-gradient(180deg, rgba(22, 14, 72, 0.7) 0%, rgba(40, 18, 88, 0.55) 45%, rgba(60, 18, 78, 0.7) 100%),
      url('/img/ciel-mobile.jpg') center / cover,
      var(--sky);
    background-attachment: scroll;
  }
}

a { color: var(--accent-2); }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Logo (comme celui de la vidéo) ----------
   <h1 class="logo" data-text="Secret Story"><span>Secret</span> <span class="w2">Story</span></h1> */
.logo {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--logo);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.005em;
  isolation: isolate;
  white-space: nowrap;
}
.logo::before, .logo::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.logo::before { color: #b0125f; -webkit-text-stroke: 0.2em var(--outline); text-shadow: 0 0.07em 0 var(--outline), 0 0.14em 0.22em rgba(40, 10, 60, 0.55); }
.logo::after { color: #fff; -webkit-text-stroke: 0.11em #fff; }
.logo > span { background: linear-gradient(180deg, #ffc8e3 0%, #ff4fa3 55%, #e0237f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo > span.w2 { background-image: linear-gradient(180deg, #e2d6ff 0%, #9b7bff 55%, #6a48e0 100%); }

/* ---------- L'œil (identique au générique) ---------- */
.eye-logo { display: inline-block; width: 2.2em; height: 1.3em; vertical-align: middle; }
.eye-glow { filter: drop-shadow(0 0 12px rgba(120, 200, 255, 0.75)); }
.lid { transform-origin: 60px 35px; animation: blink 7s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }

.avatar {
  --c: var(--accent);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1em;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 3px 10px rgba(40, 10, 60, 0.35);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 4.5em; height: 4.5em; font-size: 1.1em; }
.avatar.out { filter: grayscale(1) brightness(0.6); }