/* === Mascotte croquis ouvrier === */
.site-mascot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  transform: translate3d(calc(100vw - 182px), calc(100vh - 232px), 0);
  will-change: transform;
  --mascot-facing: 1;
}

.mascot-hitbox {
  position: relative;
  width: 156px;
  height: 194px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.site-mascot.is-dragging .mascot-hitbox {
  cursor: grabbing;
}

.mascot-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--mascot-facing));
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 28px rgba(25, 32, 41, 0.08));
}

.site-mascot.is-dragging .mascot-stage {
  filter: drop-shadow(0 16px 30px rgba(25, 32, 41, 0.12));
}

.mascot-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mascot-tooltip,
.mascot-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.mascot-tooltip {
  top: -26px;
  width: max-content;
  max-width: 238px;
  padding: 0.62rem 0.86rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(67, 74, 84, 0.14);
  box-shadow: 0 12px 30px rgba(25, 32, 41, 0.08);
  color: #27303b;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.mascot-count {
  top: 14px;
  min-width: 66px;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: rgba(67, 74, 84, 0.92);
  box-shadow: 0 10px 22px rgba(25, 32, 41, 0.12);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.mascot-shadow {
  fill: rgba(25, 32, 41, 0.12);
  transform-origin: 110px 230px;
}

.mascot-ring {
  stroke: rgba(67, 74, 84, 0.22);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 111px 122px;
}

.mascot-root,
.mascot-body-bob,
.mascot-head-group,
.mascot-left-thigh,
.mascot-right-thigh,
.mascot-left-shin,
.mascot-right-shin,
.mascot-left-upperarm,
.mascot-right-upperarm,
.mascot-left-forearm,
.mascot-right-forearm {
  transform-box: fill-box;
}

.mascot-root {
  transform-origin: 111px 205px;
}

.mascot-body-bob {
  transform-origin: 111px 165px;
}

.mascot-head-group {
  transform-origin: 111px 58px;
}

.mascot-left-thigh,
.mascot-right-thigh,
.mascot-left-upperarm,
.mascot-right-upperarm {
  transform-origin: center top;
}

.mascot-left-shin,
.mascot-right-shin,
.mascot-left-forearm,
.mascot-right-forearm {
  transform-origin: center top;
}

.mascot-body-fill {
  fill: rgba(255, 255, 255, 0.98);
}

.mascot-head,
.mascot-helmet,
.mascot-helmet-brim,
.mascot-helmet-ridge,
.mascot-ear,
.mascot-hair,
.mascot-brow,
.mascot-eye,
.mascot-eye-x,
.mascot-mouth,
.mascot-mouth-flat,
.mascot-nose,
.mascot-neck,
.mascot-body-outline,
.mascot-collar,
.mascot-pocket,
.mascot-pocket-flap,
.mascot-seam,
.mascot-belt-line,
.mascot-limb,
.mascot-hand,
.mascot-boot,
.mascot-sketch {
  fill: none;
  stroke: #434a54;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mascot-head,
.mascot-helmet,
.mascot-helmet-brim,
.mascot-body-outline,
.mascot-limb,
.mascot-hand,
.mascot-boot {
  stroke-width: 3.6;
}

.mascot-head,
.mascot-helmet {
  fill: rgba(255, 255, 255, 0.98);
}

.mascot-ear,
.mascot-collar,
.mascot-pocket,
.mascot-pocket-flap,
.mascot-seam,
.mascot-belt-line,
.mascot-neck,
.mascot-hair,
.mascot-brow,
.mascot-eye,
.mascot-eye-x,
.mascot-mouth,
.mascot-mouth-flat,
.mascot-nose,
.mascot-helmet-ridge {
  stroke-width: 3;
}

.mascot-sketch {
  stroke-width: 1.8;
  opacity: 0.42;
}

.mascot-button {
  fill: #434a54;
  opacity: 0.9;
}

.mascot-face-down {
  opacity: 0;
}

.site-mascot.is-moving .mascot-body-bob {
  animation: mascotBodyWalk 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-head-group {
  animation: mascotHeadWalk 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-left-thigh {
  animation: mascotLeftThigh 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-right-thigh {
  animation: mascotRightThigh 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-left-shin {
  animation: mascotLeftShin 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-right-shin {
  animation: mascotRightShin 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-left-upperarm {
  animation: mascotLeftUpperArm 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-right-upperarm {
  animation: mascotRightUpperArm 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-left-forearm {
  animation: mascotLeftForearm 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-right-forearm {
  animation: mascotRightForearm 1.68s ease-in-out infinite;
}

.site-mascot.is-moving .mascot-shadow {
  animation: mascotShadowWalk 1.68s ease-in-out infinite;
}

.site-mascot.is-down .mascot-face-awake {
  opacity: 0;
}

.site-mascot.is-down .mascot-face-down {
  opacity: 1;
}

.site-mascot.is-down .mascot-tooltip {
  max-width: 250px;
  border-color: rgba(67, 74, 84, 0.24);
}

.site-mascot.is-reviving .mascot-ring.ring-1 {
  animation: mascotPulseRing 0.74s ease-out 2;
}

.site-mascot.is-reviving .mascot-ring.ring-2 {
  animation: mascotPulseRing 0.74s ease-out 2 0.18s;
}

.site-mascot.is-clicked .mascot-stage {
  animation: mascotClickPulse 0.26s ease;
}

@keyframes mascotBodyWalk {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-1.5px) rotate(-0.3deg);
  }
  50% {
    transform: translateY(-3.2px) rotate(0.2deg);
  }
  75% {
    transform: translateY(-1.2px) rotate(0.35deg);
  }
}

@keyframes mascotHeadWalk {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-1px) rotate(-0.7deg);
  }
}

@keyframes mascotLeftThigh {
  0%,
  100% {
    transform: rotate(-11deg) translateY(0);
  }
  50% {
    transform: rotate(13deg) translateY(-1px);
  }
}

@keyframes mascotRightThigh {
  0%,
  100% {
    transform: rotate(11deg) translateY(-1px);
  }
  50% {
    transform: rotate(-12deg) translateY(0);
  }
}

@keyframes mascotLeftShin {
  0%,
  100% {
    transform: rotate(12deg);
  }
  50% {
    transform: rotate(-9deg) translateY(1px);
  }
}

@keyframes mascotRightShin {
  0%,
  100% {
    transform: rotate(-8deg) translateY(1px);
  }
  50% {
    transform: rotate(12deg);
  }
}

@keyframes mascotLeftUpperArm {
  0%,
  100% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-14deg);
  }
}

@keyframes mascotRightUpperArm {
  0%,
  100% {
    transform: rotate(-9deg);
  }
  50% {
    transform: rotate(13deg);
  }
}

@keyframes mascotLeftForearm {
  0%,
  100% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(16deg);
  }
}

@keyframes mascotRightForearm {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}

@keyframes mascotShadowWalk {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.12;
  }
  50% {
    transform: scaleX(0.92);
    opacity: 0.09;
  }
}

@keyframes mascotPulseRing {
  0% {
    opacity: 0;
    transform: scale(0.52);
  }
  15% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

@keyframes mascotClickPulse {
  0%,
  100% {
    transform: scaleX(var(--mascot-facing)) scale(1);
  }
  50% {
    transform: scaleX(var(--mascot-facing)) scale(1.03);
  }
}

@media (max-width: 768px) {
  .site-mascot {
    transform: translate3d(calc(100vw - 156px), calc(100vh - 202px), 0);
  }

  .mascot-hitbox {
    width: 128px;
    height: 160px;
  }

  .mascot-tooltip {
    top: -22px;
    max-width: 210px;
    padding: 0.54rem 0.72rem;
    font-size: 0.72rem;
  }
}

/* Filet de sécurité : la mascotte est réservée à tablette/desktop (>=768px). Le JS
   (main.js) n'initialise déjà sa logique qu'à partir de cette largeur ; cette règle
   garantit qu'elle reste masquée même si le JS échoue ou lors d'un redimensionnement. */
@media (max-width: 767px) {
  .site-mascot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-mascot.is-moving .mascot-body-bob,
  .site-mascot.is-moving .mascot-head-group,
  .site-mascot.is-moving .mascot-left-thigh,
  .site-mascot.is-moving .mascot-right-thigh,
  .site-mascot.is-moving .mascot-left-shin,
  .site-mascot.is-moving .mascot-right-shin,
  .site-mascot.is-moving .mascot-left-upperarm,
  .site-mascot.is-moving .mascot-right-upperarm,
  .site-mascot.is-moving .mascot-left-forearm,
  .site-mascot.is-moving .mascot-right-forearm,
  .site-mascot.is-moving .mascot-shadow,
  .site-mascot.is-clicked .mascot-stage,
  .site-mascot.is-reviving .mascot-ring {
    animation: none;
  }
}