/* Lore — fond éditorial premium (lecteur web + pages statiques) */

:root {
  --lore-sand: #e6ddd2;
  --lore-stone: #d9d0c4;
  --lore-cream: #f0e9df;
  --lore-ivory: #f6f1e8;
  --lore-parchment: #faf6ef;
  --lore-warm-gray: #9a9288;
  --lore-sage: #c8cfc4;
  --lore-lavender: #d5ced8;
}

.lore-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--lore-cream);
}

/* Scène musée / bibliothèque — photo adaptée navigateur */
.lore-bg__photo {
  position: absolute;
  inset: -4%;
  background-color: var(--lore-cream);
  background-image: url('/images/lore-bg.jpg');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  transform: scale(1.1);
  opacity: 0.58;
  filter: saturate(0.82) blur(0.5px);
}

/* Voile — centre lisible, côtés plus transparents pour voir le décor */
.lore-bg__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse min(720px, 48vw) 72% at 50% 44%,
      rgba(250, 246, 239, 0.72) 0%,
      rgba(250, 246, 239, 0.44) 50%,
      rgba(250, 246, 239, 0.12) 72%,
      rgba(250, 246, 239, 0) 88%
    ),
    linear-gradient(
      90deg,
      rgba(250, 246, 239, 0.08) 0%,
      rgba(250, 246, 239, 0.08) 12%,
      rgba(250, 246, 239, 0.48) 28%,
      rgba(250, 246, 239, 0.48) 72%,
      rgba(250, 246, 239, 0.08) 88%,
      rgba(250, 246, 239, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(247, 242, 234, 0.5) 0%,
      rgba(247, 242, 234, 0.28) 38%,
      rgba(232, 223, 211, 0.32) 100%
    );
}

/* Halo derrière la colonne de contenu */
.lore-bg__glow {
  position: absolute;
  top: 5%;
  left: 50%;
  width: min(900px, 58vw);
  height: 90%;
  transform: translateX(-50%);
  border-radius: 40px;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(255, 252, 247, 0.28) 0%,
    rgba(255, 252, 247, 0.08) 52%,
    rgba(255, 252, 247, 0) 78%
  );
  filter: blur(6px);
}

/* Traces papier / fibre légères par-dessus la photo */
.lore-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Vignette douce */
.lore-bg__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 96% 90% at 50% 46%,
      rgba(255, 255, 255, 0) 52%,
      rgba(100, 88, 76, 0.12) 100%
    ),
    linear-gradient(180deg, rgba(255, 252, 247, 0.08) 0%, rgba(0, 0, 0, 0) 16%),
    linear-gradient(0deg, rgba(88, 78, 66, 0.1) 0%, rgba(0, 0, 0, 0) 20%);
}

@media (max-width: 860px) {
  .lore-bg__photo {
    background-position: 58% 40%;
    transform: scale(1.08);
  }

  .lore-bg__glow {
    left: 0;
    width: 100vw;
    border-radius: 48% 48% 42% 42% / 38% 38% 48% 48%;
  }

  .lore-bg__veil {
    background:
      radial-gradient(
        ellipse 95% 75% at 50% 42%,
        rgba(250, 246, 239, 0.62) 0%,
        rgba(250, 246, 239, 0.35) 50%,
        rgba(250, 246, 239, 0.12) 78%
      ),
      linear-gradient(180deg, rgba(247, 242, 234, 0.4) 0%, rgba(232, 223, 211, 0.25) 100%);
  }
}

@media (min-width: 861px) {
  .lore-bg__photo {
    background-position: center 36%;
    transform: scale(1.14);
  }
}

@media (min-width: 1400px) {
  .lore-bg__photo {
    background-position: center 34%;
  }
}

@media (prefers-reduced-data: reduce) {
  .lore-bg__photo {
    background-image: none;
  }

  .lore-bg {
    background-image:
      radial-gradient(
        ellipse 120% 65% at 50% -12%,
        rgba(252, 249, 244, 0.85) 0%,
        rgba(252, 249, 244, 0) 62%
      ),
      linear-gradient(168deg, #f7f2ea 0%, #f0e9df 36%, #e8dfd3 72%, #ddd4c8 100%);
  }
}