/* Mascotte Flottante */

/* ── Wrapper fixe ── */
.mascotte-wrapper {
    position: fixed;
    z-index: 99999;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/*
 * .mascotte-img-rot  → porte uniquement la ROTATION statique (transform:rotate)
 * .mascotte-img      → porte la largeur ; les animations CSS s'appliquent ici
 *
 * Cette séparation empêche l'animation d'écraser la rotation configurée.
 */
.mascotte-img-rot {
    display: inline-block;
    line-height: 0;
}

.mascotte-img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.28));
}

.mascotte-img:hover {
    filter: drop-shadow(3px 6px 12px rgba(0,0,0,0.42));
}

/* ── Croix de fermeture permanente ── */
.mascotte-x-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 100001;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: auto;
}
.mascotte-wrapper:hover .mascotte-x-btn {
    opacity: 1;
}

/* ── Bulle BD ── */
.mascotte-bubble {
    position: absolute;
    background: #ffffff;
    border: 2.5px solid #111111;
    border-radius: 18px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 220px;
    min-width: 80px;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: 2px 3px 0 #111111;
    z-index: 100000;
    cursor: default;
    animation: bubbleAppear 0.25s cubic-bezier(.175,.885,.32,1.275);
    pointer-events: auto;
}

/* Queues */
.mascotte-bubble::before,
.mascotte-bubble::after {
    content: '';
    position: absolute;
    border-style: solid;
    pointer-events: none;
}

/* bubble-above : bulle au-dessus → queue pointe vers le bas (vers l'image) */
.mascotte-bubble.bubble-above::before {
    border-width: 14px 11px 0 11px;
    border-color: #111111 transparent transparent transparent;
    bottom: -15px; left: 24px;
}
.mascotte-bubble.bubble-above::after {
    border-width: 11px 9px 0 9px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -12px; left: 26px;
}

/* bubble-below : bulle en-dessous → queue pointe vers le haut (vers l'image) */
.mascotte-bubble.bubble-below::before {
    border-width: 0 11px 14px 11px;
    border-color: transparent transparent #111111 transparent;
    top: -15px; left: 24px;
}
.mascotte-bubble.bubble-below::after {
    border-width: 0 9px 11px 9px;
    border-color: transparent transparent #ffffff transparent;
    top: -12px; left: 26px;
}

/* bubble-left : bulle à gauche → queue pointe vers la droite (vers l'image) */
.mascotte-bubble.bubble-left::before {
    border-width: 11px 0 11px 14px;
    border-color: transparent transparent transparent #111111;
    right: -15px; top: 18px;
}
.mascotte-bubble.bubble-left::after {
    border-width: 9px 0 9px 11px;
    border-color: transparent transparent transparent #ffffff;
    right: -12px; top: 20px;
}

/* bubble-right : bulle à droite → queue pointe vers la gauche (vers l'image) */
.mascotte-bubble.bubble-right::before {
    border-width: 11px 14px 11px 0;
    border-color: transparent #111111 transparent transparent;
    left: -15px; top: 18px;
}
.mascotte-bubble.bubble-right::after {
    border-width: 9px 11px 9px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -12px; top: 20px;
}

/* Lien dans bulle */
.mascotte-bubble a {
    text-decoration: underline;
    font-weight: 600;
}

/* Bouton "Fermez moi !" / "Close !" dans la bulle */
.mascotte-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.2s;
}
.mascotte-close-btn:hover { background: rgba(0,0,0,0.07); }
.mascotte-close-x { font-size: 13px; }

@keyframes bubbleAppear {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* ══════════════════════════════════════════
   ANIMATIONS — appliquées sur .mascotte-img
   La rotation statique est sur .mascotte-img-rot
   → les deux transforms sont indépendants
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — s'appliquent sur .mascotte-img
   La rotation statique (config admin) est sur .mascotte-img-rot
   → les deux transforms sont totalement indépendants
   ══════════════════════════════════════════════════════════════ */

/* — Classes — */
.mascotte-anim-bounce      { animation: mascotteBounce      2s    ease           infinite; }
.mascotte-anim-pulse       { animation: mascottePulse       1.5s  ease           infinite; }
.mascotte-anim-shake       { animation: mascotteShake       0.8s  ease           infinite; }
.mascotte-anim-swing       { animation: mascotteSwing       2s    ease           infinite; transform-origin: top center; }
.mascotte-anim-tada        { animation: mascotteTada        1.5s  ease           infinite; }
.mascotte-anim-wobble      { animation: mascotteWobble      2s    ease           infinite; }
.mascotte-anim-jello       { animation: mascotteJello       2s    ease           infinite; }
.mascotte-anim-heartBeat   { animation: mascotteHeartBeat   1.3s  ease           infinite; }
.mascotte-anim-float       { animation: mascotteFloat       3s    ease-in-out    infinite; }
.mascotte-anim-spin        { animation: mascotteSpin        3s    linear         infinite; }
.mascotte-anim-flash       { animation: mascotteFlash       1.5s  linear         infinite; }
.mascotte-anim-rubberBand  { animation: mascotteRubberBand  1.8s  ease           infinite; }
.mascotte-anim-flip        { animation: mascotteFlip        2.5s  ease           infinite; }
/* Nouveaux */
.mascotte-anim-spinReverse { animation: mascotteSpinReverse 3s    linear         infinite; }
.mascotte-anim-pendulum    { animation: mascottePendulum    1.8s  ease-in-out    infinite; transform-origin: top center; }
.mascotte-anim-drunk       { animation: mascotteDrunk       3s    ease-in-out    infinite; }
.mascotte-anim-glitch      { animation: mascotteGlitch      2.5s  steps(1)       infinite; }
.mascotte-anim-neon        { animation: mascotteNeon        1.8s  ease-in-out    infinite; }
.mascotte-anim-rainbow     { animation: mascotteRainbow     3s    linear         infinite; }
.mascotte-anim-ghost       { animation: mascotteGhost       2.5s  ease-in-out    infinite; }
.mascotte-anim-earthquake  { animation: mascotteEarthquake  0.5s  ease           infinite; }
.mascotte-anim-zoom        { animation: mascotteZoom        2s    ease-in-out    infinite; }
.mascotte-anim-squish      { animation: mascotteSquish      1.5s  ease-in-out    infinite; }
.mascotte-anim-dance       { animation: mascotteDance       1.2s  ease           infinite; }
.mascotte-anim-shiver      { animation: mascotteShiver      0.4s  linear         infinite; }
.mascotte-anim-breathe     { animation: mascotteBreathe     4s    ease-in-out    infinite; }
.mascotte-anim-wink        { animation: mascotteWink        2.5s  ease-in-out    infinite; }
.mascotte-anim-rotate3d    { animation: mascotteRotate3d    3s    linear         infinite; }
.mascotte-anim-skate       { animation: mascotteSkate       2.5s  ease-in-out    infinite; }
.mascotte-anim-pop         { animation: mascottePop         2s    ease-in-out    infinite; }
.mascotte-anim-dizzy       { animation: mascotteDizzy       1s    linear         infinite; }
.mascotte-anim-comic       { animation: mascotteComic       1.2s  steps(4)       infinite; }
.mascotte-anim-sway        { animation: mascotteSway        4s    ease-in-out    infinite; }
.mascotte-anim-excited     { animation: mascotteExcited     0.6s  ease           infinite; }
.mascotte-anim-handheld    { animation: mascotteHandheld    0.3s  ease-in-out    infinite; }
.mascotte-anim-fadeInOut   { animation: mascotteFadeInOut   2.5s  ease-in-out    infinite; }
.mascotte-anim-gravity     { animation: mascotteGravity     1.5s  cubic-bezier(.215,.61,.355,1) infinite; }
.mascotte-anim-electric    { animation: mascotteElectric    0.15s linear         infinite; }
.mascotte-anim-flipX       { animation: mascotteFlipX       2.5s  ease           infinite; }
.mascotte-anim-tilt        { animation: mascotteTilt        3s    ease-in-out    infinite; }
.mascotte-anim-springUp    { animation: mascotteSpringUp    2s    cubic-bezier(.175,.885,.32,1.275) infinite; }

/* ── Keyframes existants ── */
@keyframes mascotteBounce {
    0%,20%,50%,80%,100% { transform: translateY(0);     }
    40%                 { transform: translateY(-22px);  }
    60%                 { transform: translateY(-10px);  }
}
@keyframes mascottePulse {
    0%,100% { transform: scale(1);    }
    50%     { transform: scale(1.12); }
}
@keyframes mascotteShake {
    0%,100%             { transform: translateX(0);    }
    10%,30%,50%,70%,90% { transform: translateX(-6px); }
    20%,40%,60%,80%     { transform: translateX(6px);  }
}
@keyframes mascotteSwing {
    0%   { transform: rotate(0deg);   }
    20%  { transform: rotate(18deg);  }
    40%  { transform: rotate(-12deg); }
    60%  { transform: rotate(6deg);   }
    80%  { transform: rotate(-4deg);  }
    100% { transform: rotate(0deg);   }
}
@keyframes mascotteTada {
    0%   { transform: scale(1);                  }
    10%  { transform: scale(0.9) rotate(-3deg);  }
    30%  { transform: scale(1.1) rotate(3deg);   }
    50%  { transform: scale(1.1) rotate(3deg);   }
    70%  { transform: scale(1.1) rotate(3deg);   }
    90%  { transform: scale(1.1) rotate(-3deg);  }
    100% { transform: scale(1);                  }
}
@keyframes mascotteWobble {
    0%   { transform: translateX(0);                 }
    15%  { transform: translateX(-22px) rotate(-6deg); }
    30%  { transform: translateX(16px)  rotate(4deg);  }
    45%  { transform: translateX(-11px) rotate(-3deg); }
    60%  { transform: translateX(7px)   rotate(2deg);  }
    75%  { transform: translateX(-4px)  rotate(-1deg); }
    100% { transform: translateX(0);                 }
}
@keyframes mascotteJello {
    0%,11%,100% { transform: skewX(0) skewY(0);               }
    22%  { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33%  { transform: skewX(6.25deg)  skewY(6.25deg);  }
    44%  { transform: skewX(-3deg)    skewY(-3deg);    }
    55%  { transform: skewX(1.5deg)   skewY(1.5deg);   }
    66%  { transform: skewX(-0.75deg) skewY(-0.75deg); }
    88%  { transform: skewX(-0.2deg)  skewY(-0.2deg);  }
}
@keyframes mascotteHeartBeat {
    0%,28%,70%,100% { transform: scale(1);    }
    14%,42%         { transform: scale(1.18); }
}
@keyframes mascotteFloat {
    0%,100% { transform: translateY(0);     }
    50%     { transform: translateY(-14px); }
}
@keyframes mascotteSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
@keyframes mascotteFlash {
    0%,50%,100% { opacity: 1; }
    25%,75%     { opacity: 0; }
}
@keyframes mascotteRubberBand {
    0%   { transform: scale(1);                      }
    30%  { transform: scaleX(1.3)  scaleY(0.7);      }
    40%  { transform: scaleX(0.75) scaleY(1.3);      }
    50%  { transform: scaleX(1.15) scaleY(0.85);     }
    65%  { transform: scaleX(0.95) scaleY(1.05);     }
    75%  { transform: scaleX(1.05) scaleY(0.95);     }
    100% { transform: scale(1);                      }
}
@keyframes mascotteFlip {
    0%   { transform: perspective(400px) rotateY(0);                     }
    40%  { transform: perspective(400px) translateZ(160px) rotateY(170deg); }
    50%  { transform: perspective(400px) translateZ(160px) rotateY(190deg); }
    80%  { transform: perspective(400px) rotateY(360deg) scale(0.95);    }
    100% { transform: perspective(400px) rotateY(360deg) scale(1);       }
}

/* ── Nouveaux keyframes ── */
@keyframes mascotteSpinReverse {
    from { transform: rotate(0deg);    }
    to   { transform: rotate(-360deg); }
}
@keyframes mascottePendulum {
    0%,100% { transform: rotate(-25deg); }
    50%     { transform: rotate(25deg);  }
}
@keyframes mascotteDrunk {
    0%   { transform: translate(0,0)      rotate(0deg);   }
    15%  { transform: translate(-8px,4px) rotate(-8deg);  }
    30%  { transform: translate(6px,-3px) rotate(6deg);   }
    45%  { transform: translate(-5px,6px) rotate(-5deg);  }
    60%  { transform: translate(8px,2px)  rotate(8deg);   }
    75%  { transform: translate(-4px,-4px)rotate(-4deg);  }
    90%  { transform: translate(3px,3px)  rotate(3deg);   }
    100% { transform: translate(0,0)      rotate(0deg);   }
}
@keyframes mascotteGlitch {
    0%   { transform: translate(0,0);          filter: none;                           }
    10%  { transform: translate(-4px,2px);     filter: hue-rotate(90deg);              }
    20%  { transform: translate(4px,-2px);     filter: hue-rotate(180deg) brightness(1.4); }
    30%  { transform: translate(-2px,4px);     filter: hue-rotate(270deg);             }
    40%  { transform: translate(3px,-3px);     filter: invert(0.3);                    }
    50%  { transform: translate(0,0);          filter: none;                           }
    60%  { transform: translate(-3px,-2px);    filter: brightness(1.6) saturate(2);    }
    70%  { transform: translate(3px,2px);      filter: hue-rotate(45deg);              }
    80%  { transform: translate(-1px,3px);     filter: none;                           }
    90%  { transform: translate(2px,-1px);     filter: invert(0.15);                   }
    100% { transform: translate(0,0);          filter: none;                           }
}
@keyframes mascotteNeon {
    0%,100% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #f0f) drop-shadow(0 0 15px #f0f); }
    25%     { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #0ff) drop-shadow(0 0 15px #0ff); }
    50%     { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ff0) drop-shadow(0 0 15px #ff0); }
    75%     { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #0f0) drop-shadow(0 0 15px #0f0); }
}
@keyframes mascotteRainbow {
    0%   { filter: hue-rotate(0deg);   }
    100% { filter: hue-rotate(360deg); }
}
@keyframes mascotteGhost {
    0%,100% { opacity: 1;   transform: scale(1) translateY(0);    filter: blur(0);    }
    40%     { opacity: 0.2; transform: scale(1.05) translateY(-6px); filter: blur(2px); }
    80%     { opacity: 0.6; transform: scale(0.97) translateY(3px); filter: blur(0.5px); }
}
@keyframes mascotteEarthquake {
    0%,100% { transform: translate(0,0);          }
    10%     { transform: translate(-5px,-4px);     }
    20%     { transform: translate(5px,4px);       }
    30%     { transform: translate(-4px,5px);      }
    40%     { transform: translate(4px,-5px);      }
    50%     { transform: translate(-3px,3px);      }
    60%     { transform: translate(3px,-3px);      }
    70%     { transform: translate(-6px,2px);      }
    80%     { transform: translate(6px,-2px);      }
    90%     { transform: translate(-2px,6px);      }
}
@keyframes mascotteZoom {
    0%,100% { transform: scale(1);    }
    50%     { transform: scale(1.25); }
}
@keyframes mascotteSquish {
    0%,100% { transform: scaleX(1)    scaleY(1);    }
    25%     { transform: scaleX(1.25) scaleY(0.75); }
    50%     { transform: scaleX(0.85) scaleY(1.2);  }
    75%     { transform: scaleX(1.1)  scaleY(0.9);  }
}
@keyframes mascotteDance {
    0%   { transform: translateY(0)    rotate(0deg)   scaleX(1);   }
    15%  { transform: translateY(-10px) rotate(-8deg) scaleX(0.95); }
    30%  { transform: translateY(0)    rotate(0deg)   scaleX(1);   }
    45%  { transform: translateY(-8px) rotate(8deg)  scaleX(1.05); }
    60%  { transform: translateY(0)    rotate(-4deg) scaleX(1);    }
    75%  { transform: translateY(-5px) rotate(4deg)  scaleX(0.98); }
    100% { transform: translateY(0)    rotate(0deg)   scaleX(1);   }
}
@keyframes mascotteShiver {
    0%,100% { transform: translate(0,0) rotate(0deg);     }
    25%     { transform: translate(-2px,-1px) rotate(-2deg); }
    50%     { transform: translate(2px,1px)  rotate(2deg);  }
    75%     { transform: translate(-1px,2px) rotate(-1deg); }
}
@keyframes mascotteBreathe {
    0%,100% { transform: scale(1);      filter: brightness(1);   }
    40%     { transform: scale(1.06);   filter: brightness(1.08);}
    60%     { transform: scale(1.06);   filter: brightness(1.08);}
}
@keyframes mascotteWink {
    0%,85%,100% { transform: scaleX(1);   }
    90%         { transform: scaleX(-1);  }
    95%         { transform: scaleX(0.5); }
}
@keyframes mascotteRotate3d {
    0%   { transform: perspective(500px) rotateY(0deg);    }
    50%  { transform: perspective(500px) rotateY(180deg);  }
    100% { transform: perspective(500px) rotateY(360deg);  }
}
@keyframes mascotteSkate {
    0%,100% { transform: translateX(0)    rotate(0deg)  scaleX(1);    }
    20%     { transform: translateX(-18px) rotate(-8deg) scaleX(0.95); }
    50%     { transform: translateX(18px) rotate(8deg)  scaleX(1.05); }
    80%     { transform: translateX(-10px) rotate(-5deg) scaleX(0.97); }
}
@keyframes mascottePop {
    0%,100% { transform: scale(1);    }
    10%     { transform: scale(0.8);  }
    50%     { transform: scale(1.3);  }
    70%     { transform: scale(0.95); }
    85%     { transform: scale(1.05); }
}
@keyframes mascotteDizzy {
    0%   { transform: rotate(0deg)   scale(1);    }
    25%  { transform: rotate(90deg)  scale(1.05); }
    50%  { transform: rotate(180deg) scale(1);    }
    75%  { transform: rotate(270deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1);    }
}
@keyframes mascotteComic {
    0%  { transform: scale(1)    rotate(0deg);   }
    25% { transform: scale(1.15) rotate(-5deg);  }
    50% { transform: scale(0.9)  rotate(5deg);   }
    75% { transform: scale(1.1)  rotate(-3deg);  }
}
@keyframes mascotteSway {
    0%,100% { transform: rotate(-4deg) translateX(0);    }
    25%     { transform: rotate(4deg)  translateX(4px);  }
    50%     { transform: rotate(-3deg) translateX(-4px); }
    75%     { transform: rotate(3deg)  translateX(4px);  }
}
@keyframes mascotteExcited {
    0%,100% { transform: scale(1)    translateY(0);     }
    20%     { transform: scale(1.12) translateY(-8px);  }
    40%     { transform: scale(0.92) translateY(3px);   }
    60%     { transform: scale(1.08) translateY(-5px);  }
    80%     { transform: scale(0.96) translateY(2px);   }
}
@keyframes mascotteHandheld {
    0%,100% { transform: translate(0,0)     rotate(0deg);    }
    20%     { transform: translate(-1px,1px) rotate(0.4deg); }
    40%     { transform: translate(1px,-1px) rotate(-0.4deg);}
    60%     { transform: translate(-1px,-1px)rotate(0.3deg); }
    80%     { transform: translate(1px,1px)  rotate(-0.3deg);}
}
@keyframes mascotteFadeInOut {
    0%,100% { opacity: 1;   transform: scale(1);    }
    50%     { opacity: 0.3; transform: scale(0.95); }
}
@keyframes mascotteGravity {
    0%,100% { transform: translateY(0);     }
    40%     { transform: translateY(-20px); }
    60%     { transform: translateY(-20px); }
    70%     { transform: translateY(0) scaleX(1.15) scaleY(0.85); }
    80%     { transform: translateY(0) scaleX(0.95) scaleY(1.05); }
    90%     { transform: translateY(0) scaleX(1.02) scaleY(0.98); }
}
@keyframes mascotteElectric {
    0%,100% { transform: translate(0,0);       filter: brightness(1);       }
    10%     { transform: translate(-3px,2px);  filter: brightness(2) hue-rotate(60deg); }
    20%     { transform: translate(3px,-2px);  filter: brightness(1);       }
    30%     { transform: translate(-2px,-3px); filter: brightness(1.8) hue-rotate(120deg); }
    40%     { transform: translate(2px,3px);   filter: brightness(1);       }
    50%     { transform: translate(0,-2px);    filter: brightness(2.2) hue-rotate(240deg); }
    60%     { transform: translate(-3px,0);    filter: brightness(1);       }
    70%     { transform: translate(3px,2px);   filter: brightness(1.6) hue-rotate(180deg); }
    80%     { transform: translate(-1px,-3px); filter: brightness(1);       }
    90%     { transform: translate(1px,3px);   filter: brightness(1.8);     }
}
@keyframes mascotteFlipX {
    0%   { transform: perspective(500px) rotateX(0deg);    }
    50%  { transform: perspective(500px) rotateX(180deg);  }
    100% { transform: perspective(500px) rotateX(360deg);  }
}
@keyframes mascotteTilt {
    0%,100% { transform: perspective(400px) rotateY(0deg)   rotateX(0deg);    }
    25%     { transform: perspective(400px) rotateY(15deg)  rotateX(-5deg);   }
    50%     { transform: perspective(400px) rotateY(0deg)   rotateX(0deg);    }
    75%     { transform: perspective(400px) rotateY(-15deg) rotateX(5deg);    }
}
@keyframes mascotteSpringUp {
    0%,100% { transform: translateY(0)    scaleY(1);    }
    20%     { transform: translateY(8px)  scaleY(0.9);  }
    50%     { transform: translateY(-22px) scaleY(1.1); }
    70%     { transform: translateY(0)    scaleY(0.95); }
    85%     { transform: translateY(-8px) scaleY(1.03); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .mascotte-bubble { max-width: 180px; font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 480px) {
    .mascotte-bubble { max-width: 150px; font-size: 11px; }
}