/* ============================================================
   LILI — la mascotte LUMAYA (apparitions discrètes)
   Lapin angora nain. Toujours subtile, jamais envahissante.
   ============================================================ */

/* --- Easter egg : oreille qui pointe derrière le logo au survol --- */
.nav__brand{position:relative}
.lili-ear-egg{
  position:absolute; left:-2px; top:-6px; width:34px; height:auto; z-index:-1;
  opacity:0; transform:translateY(10px) rotate(-8deg);
  transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.nav__brand:hover .lili-ear-egg{opacity:1; transform:translateY(-16px) rotate(-8deg)}

/* --- Lili posée dans un coin de section --- */
.has-lili{position:relative; overflow:visible}
.lili-peek{position:absolute; pointer-events:none; z-index:1; filter:drop-shadow(0 8px 16px rgba(62,71,54,.12))}

.lili-peek--guide{
  right:clamp(8px,4vw,64px); bottom:-6px; width:clamp(78px,9vw,116px);
  animation:lili-bob 5.5s ease-in-out infinite;
}
.lili-peek--engage{
  right:clamp(8px,5vw,72px); top:-4px; width:clamp(64px,7vw,92px);
  transform:scaleX(-1); animation:lili-bob 6.5s ease-in-out infinite;
}

/* --- Bout de queue (pompon) qui dépasse dans le coin du pied de page --- */
.footer{position:relative; overflow:hidden}
.lili-tail{
  position:absolute; right:clamp(-18px,-1vw,-8px); bottom:-14px;
  width:clamp(70px,8vw,104px); opacity:.9; pointer-events:none; z-index:0;
  animation:lili-tail-tap 7s ease-in-out infinite;
}

/* --- Mention "mascotte" dans le pied de page --- */
.lili-note{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:6px;
}
.lili-note img{height:26px; width:auto}
.lili-note a{color:var(--sauge); text-decoration:none; border-bottom:1px solid transparent; transition:.3s}
.lili-note a:hover{border-bottom-color:var(--sauge)}

@keyframes lili-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lili-bob-x{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-6px)}}
.lili-peek--engage{animation-name:lili-bob-x}
@keyframes lili-tail-tap{0%,92%,100%{transform:rotate(0)}96%{transform:rotate(-6deg)}}

@media (prefers-reduced-motion:reduce){
  .lili-peek,.lili-tail{animation:none}
}
/* Sur mobile : on garde la sobriété, pas de peeks dans les sections */
@media (max-width:820px){
  .lili-peek--guide,.lili-peek--engage{display:none}
  .lili-tail{width:64px; right:-16px}
}

/* --- Pied de page : mention mascotte proprement alignée sur mobile --- */
@media (max-width:640px){
  .footer__bottom{flex-direction:column; align-items:flex-start; gap:12px}
  .lili-note{display:block; margin-top:0; line-height:1.5}
  .lili-note img{float:left; margin:1px 9px 0 0}
}