/* ── la marmite qui mijote (1er oct.) ── */
.mm-fond { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:20px; background:radial-gradient(ellipse at 50% 60%, #2e2347 0%, #0c0816 70%);   /* opaque : la page ne transparaît plus */
  color:#f4effc; text-align:center; font-family:'Poppins',system-ui,sans-serif; }
.mm-fond[hidden] { display:none; }
.mm-scene { position:relative; width:300px; height:360px; max-width:86vw; }
.mm-scene .chaudron { position:absolute; left:50%; bottom:0; width:250px; height:260px; transform:translateX(-50%); margin:0; }
.mm-lueur { position:absolute; left:50%; bottom:120px; width:230px; height:90px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, var(--mm-c, #a78bfa) 0%, transparent 70%); opacity:.55; filter:blur(10px);
  animation:mm-lueur 1.6s ease-in-out infinite alternate; }
@keyframes mm-lueur { from { opacity:.35; transform:translateX(-50%) scale(.92); } to { opacity:.75; transform:translateX(-50%) scale(1.08); } }
.mm-ing { position:absolute; top:0; left:50%; width:34px; height:34px; margin-left:-17px; opacity:0;
  animation:mm-tombe 2.4s cubic-bezier(.5,0,.8,.45) infinite; animation-delay:var(--d, 0s); }
.mm-ing svg { width:100%; height:100%; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
@keyframes mm-tombe {
  0%   { transform:translate(var(--x, 0px), -30px) rotate(0deg) scale(1); opacity:0; }
  10%  { opacity:1; }
  78%  { transform:translate(calc(var(--x, 0px) * .2), 196px) rotate(var(--r, 200deg)) scale(.85); opacity:1; }
  92%  { transform:translate(0px, 214px) rotate(var(--r, 200deg)) scale(.35); opacity:.6; }
  100% { transform:translate(0px, 222px) rotate(var(--r, 200deg)) scale(.1); opacity:0; } }
.mm-plouf { position:absolute; left:50%; top:232px; width:120px; height:30px; margin-left:-60px; border-radius:50%;
  border:2px solid var(--mm-c, #c4b5fd); opacity:0; animation:mm-plouf .8s ease-out infinite; }
.mm-plouf.p2 { animation-delay:.4s; border-color:var(--mm-c2, #5eead4); }
@keyframes mm-plouf { 0% { transform:scale(.3); opacity:.9; } 100% { transform:scale(1.5); opacity:0; } }
.mm-goutte { position:absolute; left:50%; top:228px; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:var(--mm-c, #c4b5fd); opacity:0; animation:mm-gicle 1.2s ease-out infinite; animation-delay:var(--d, 0s); }
@keyframes mm-gicle { 0% { transform:translate(0, 0) scale(1); opacity:0; } 15% { opacity:1; }
  100% { transform:translate(var(--gx, 30px), 30px) scale(.4); opacity:0; } }
.mm-vapeur { position:absolute; left:50%; top:150px; width:70px; height:70px; margin-left:-35px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%); filter:blur(6px); opacity:0;
  animation:mm-vapeur 3.2s ease-out infinite; animation-delay:var(--d, 0s); }
@keyframes mm-vapeur { 0% { transform:translate(0, 60px) scale(.4); opacity:0; } 25% { opacity:.7; }
  100% { transform:translate(var(--vx, 20px), -150px) scale(2.2); opacity:0; } }
.mm-titre { font-family:'Fraunces',Georgia,serif; font-size:1.7rem; margin:0; }
.mm-mot { min-height:1.5em; margin:0; color:#d9cdf7; font-size:1rem; transition:opacity .35s; }
.mm-mot.fondu { opacity:0; }
.mm-temps { margin:0; color:#a99cc7; font-size:.85rem; }
.mm-fini .mm-ing, .mm-fini .mm-goutte { animation-play-state:paused; opacity:0; }
.mm-fini .mm-lueur { opacity:1; filter:blur(18px); }
@media (prefers-reduced-motion: reduce) { .mm-ing, .mm-goutte, .mm-plouf, .mm-vapeur { animation-duration:6s; } }
/* ── Willow, la mascotte, brasse derrière la marmite (16 oct.) ──
   Le bas de Willow s'efface derrière le chaudron ; sa louche plonge dans la potion.
   Ce qui tombe vient des côtés : rien ne lui passe dans le visage (Anna). */
.mm-willow { position:absolute; left:50%; bottom:-40px; height:400px; width:auto; transform:translateX(-62%); z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 0 62%, transparent 70%); mask-image:linear-gradient(#000 0 62%, transparent 70%);
  filter:drop-shadow(0 6px 22px rgba(167,139,250,.55)); }
.mm-scene .chaudron { z-index:2; } .mm-lueur { z-index:1; } .mm-plouf, .mm-goutte, .wl-ing { z-index:3; }
.mm-vapeur { z-index:4; background:radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%); }
.wl-ing { position:absolute; top:0; left:50%; width:var(--t,18px); height:var(--t,18px); margin-left:calc(var(--t,18px) / -2); opacity:0;
  animation:wl-tombe 2.6s cubic-bezier(.45,0,.75,.5) infinite; animation-delay:var(--d,0s); }
.wl-ing svg { width:100%; height:100%; display:block; filter:drop-shadow(0 0 6px rgba(253,230,138,.55)); }
@keyframes wl-tombe {
  0%   { transform:translate(var(--x), var(--y0)) rotate(0deg) scale(1); opacity:0; }
  12%  { opacity:1; }
  60%  { transform:translate(calc(var(--x) * .75), calc(var(--y0) + 90px)) rotate(calc(var(--r) * .6)) scale(.95); }
  86%  { transform:translate(calc(var(--x) * .15), 214px) rotate(var(--r)) scale(.5); opacity:.9; }
  100% { transform:translate(0px, 224px) rotate(var(--r)) scale(.1); opacity:0; } }
.mm-fini .wl-ing { animation-play-state:paused; opacity:0; }
/* la petite scène de l'accueil : la même, en petit, sans écran noir ni texte */
.wl-mini { position:relative; width:200px; height:250px; flex:none; pointer-events:none; }
.wl-mini .mm-scene { position:absolute; left:50%; top:30px; transform:translateX(-50%) scale(.62); transform-origin:top center; }
@media (max-width:700px) { .wl-mini { width:100%; height:190px; order:-1; margin:-6px 0 -4px; }
  .wl-mini .mm-scene { top:6px; transform:translateX(-50%) scale(.48); } }
@media (prefers-reduced-motion: reduce) { .wl-ing { animation-duration:6s; } }

  .chaudron { width:132px; height:137px; display:block; margin:0 auto; overflow:visible; }
  .chaudron-med { display:inline-block; border-radius:26px; padding:8px 18px 2px;
    background:radial-gradient(circle at 50% 42%, #2e2347 0%, #1a1329 72%);
    box-shadow:0 10px 30px -12px rgba(58,46,92,.5); }
  .chaudron-med .chaudron { width:104px; height:108px; }
  .chaudron-med.petit { padding:6px 12px 0; border-radius:18px; }
  .chaudron-med.petit .chaudron { width:58px; height:60px; }
  #chaudron-verse { margin-bottom:14px; }
  .chaudron .bulle { transform-box:fill-box; transform-origin:center;
    animation:ch-bulle 2.6s ease-in infinite; opacity:0; }
  .chaudron .b2 { animation-delay:.6s; } .chaudron .b3 { animation-delay:1.2s; }
  .chaudron .b4 { animation-delay:1.8s; animation-duration:2.1s; }
  .chaudron .b5 { animation-delay:.9s; animation-duration:2.3s; }
  @keyframes ch-bulle { 0% { transform:translateY(5px) scale(.25); opacity:0; } 18% { opacity:1; }
    72% { transform:translateY(-18px) scale(1); opacity:1; }
    86% { transform:translateY(-23px) scale(1.6); opacity:.5; }
    100% { transform:translateY(-26px) scale(2.1); opacity:0; } }
  .chaudron .volute { transform-box:fill-box; transform-origin:bottom center;
    animation:ch-volute 5s ease-out infinite; opacity:0; }
  .chaudron .v2 { animation-delay:1.6s; } .chaudron .v3 { animation-delay:3.2s; }
  @keyframes ch-volute { 0% { transform:translateY(10px) scale(.4) rotate(-6deg); opacity:0; }
    20% { opacity:.55; } 60% { opacity:.4; }
    100% { transform:translateY(-58px) scale(1.5) rotate(8deg); opacity:0; } }
  .chaudron .flamme { transform-box:fill-box; transform-origin:bottom center;
    animation:ch-flamme .42s ease-in-out infinite alternate; }
  .chaudron .fl2 { animation-delay:.14s; } .chaudron .fl3 { animation-delay:.28s; }
  .chaudron .fl4 { animation-delay:.35s; }
  @keyframes ch-flamme { from { transform:scale(.88,.82) skewX(-5deg); }
    to { transform:scale(1.06,1.14) skewX(5deg); } }
  .chaudron .braise { transform-box:fill-box; transform-origin:center;
    animation:ch-braise 2.8s ease-out infinite; opacity:0; }
  .chaudron .br2 { animation-delay:.9s; } .chaudron .br3 { animation-delay:1.7s; }
  .chaudron .br4 { animation-delay:2.3s; }
  @keyframes ch-braise { 0% { transform:translate(0,0) scale(1); opacity:0; } 15% { opacity:1; }
    100% { transform:translate(6px,-46px) scale(.2); opacity:0; } }
  .chaudron .halo { animation:ch-lueur 2.6s ease-in-out infinite;
    transform-box:fill-box; transform-origin:center; }
  @keyframes ch-lueur { 0%,100% { opacity:.5; transform:scale(.96); }
    50% { opacity:.95; transform:scale(1.06); } }
  .chaudron .lueurfeu { animation:ch-feu .5s ease-in-out infinite alternate; }
  @keyframes ch-feu { from { opacity:.35; } to { opacity:.75; } }
  .chaudron .surface { animation:ch-clapot 3.4s ease-in-out infinite;
    transform-box:fill-box; transform-origin:center; }
  @keyframes ch-clapot { 50% { transform:scaleX(1.025) translateY(-1px); } }
  .chaudron .etincelle { animation:ch-etincelle 2.4s ease-in-out infinite;
    transform-box:fill-box; transform-origin:center; }
  .chaudron .et2 { animation-delay:.8s; } .chaudron .et3 { animation-delay:1.5s; }
  .chaudron .et4 { animation-delay:2s; } .chaudron .et5 { animation-delay:1.1s; }
  @keyframes ch-etincelle { 0%,100% { opacity:0; transform:scale(.4); }
    50% { opacity:1; transform:scale(1.1); } }
  /* quand elle verse : le chaudron s'emballe */
  .chaudron.verse .halo { animation:ch-verse 1s ease; }
  @keyframes ch-verse { 40% { opacity:1; transform:scale(1.5); } }
  .chaudron.verse .bulle { animation-duration:.8s; }
  .chaudron.verse .flamme { animation-duration:.2s; }
  @media (prefers-reduced-motion: reduce) { .chaudron * { animation:none !important; }
    .chaudron .bulle, .chaudron .volute, .chaudron .braise, .chaudron .etincelle { opacity:.85; } }