/* Thème Harry Potter : parchemin vieilli, ciel étoilé, chandelles flottantes. */
:root{
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif:   "IM Fell English", "Garamond", Georgia, serif;
  --script:  "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .15  0 0 0 0 .05  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --aging:
    radial-gradient(ellipse 45% 40% at 12% 8%,  rgba(120,80,30,.20), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 96%, rgba(110,70,25,.26), transparent 70%),
    radial-gradient(ellipse 30% 25% at 78% 18%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(ellipse 25% 20% at 20% 80%, rgba(130,90,40,.14), transparent 70%);
  --hint-color: rgba(244,228,190,.8);
  --hint-glow:  rgba(255,170,70,.35);
  --on-accent:  #f6e8c8;
  --paper-shadow: rgba(110,70,25,.38);
  --fold: rgba(60,35,10,.18);
}

/* Ciel étoilé */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 22px 38px,  #fff, transparent),
    radial-gradient(1px 1px at 96px 120px,     #e9dcc0, transparent),
    radial-gradient(1.4px 1.4px at 160px 64px, #fff, transparent),
    radial-gradient(1px 1px at 210px 190px,    #f3e6c4, transparent),
    radial-gradient(1px 1px at 60px 210px,     #fff, transparent);
  background-size:240px 240px;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(1px 1px at 40px 90px,   #fff, transparent),
    radial-gradient(1.3px 1.3px at 150px 30px, #f3e6c4, transparent),
    radial-gradient(1px 1px at 120px 170px, #fff, transparent);
  background-size:370px 310px;
}

/* Chandelles flottantes (créées par effects.js) */
.decor i{
  position:absolute;left:var(--x);top:var(--y);
  font-size:calc(10px * var(--s));width:1.3em;height:5.4em;
  border-radius:.2em .2em .1em .1em;
  background:linear-gradient(90deg,#cfc4a3 0%,#f6efd8 42%,#e8dfc0 62%,#b9ad88 100%);
  box-shadow:0 0 3em .6em rgba(255,170,70,.07);
  animation:hp-bob var(--d) ease-in-out var(--t) infinite alternate;
}
.decor i::before{ /* flamme */
  content:"";position:absolute;left:50%;bottom:calc(100% + .15em);
  width:.85em;height:1.9em;transform:translateX(-50%);transform-origin:50% 100%;
  border-radius:50% 50% 50% 50% / 68% 68% 32% 32%;
  background:radial-gradient(ellipse at 50% 72%, #fff6d4 0%, #ffd27a 38%, #ff9a2e 72%, transparent 100%);
  box-shadow:0 0 1.6em .8em rgba(255,176,70,.42), 0 0 5em 2em rgba(255,150,50,.16);
  animation:hp-flicker 2.4s ease-in-out var(--t) infinite;
}
.decor i::after{ /* cire qui coule */
  content:"";position:absolute;left:18%;top:0;width:24%;height:1.9em;
  border-radius:0 0 .5em .5em;background:rgba(255,255,255,.55);
}
@keyframes hp-bob{from{transform:translateY(-12px) rotate(-1.5deg)}to{transform:translateY(14px) rotate(1.5deg)}}
@keyframes hp-flicker{
  0%,100%{transform:translateX(-50%) scale(1,1)}
  25%{transform:translateX(-54%) scale(.94,1.07)}
  55%{transform:translateX(-47%) scale(1.06,.94)}
  80%{transform:translateX(-52%) scale(.97,1.04)}
}
@media (max-width:640px){.decor i:nth-child(n+6){display:none}}

.intro p{font-style:italic;text-shadow:0 0 18px var(--hint-glow)}