/* =========================================================
   Foxy, le renard guide (assets/js/foxy/) — repris du site vitrine
   ========================================================= */
.fw { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 85; pointer-events: none; }
.fw-sprite { position: absolute; left: 0; bottom: 4px; width: var(--fw-w, 150px); aspect-ratio: 244 / 148; will-change: transform; }
.fw-rot { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.fw svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fw path, .fw circle { stroke-linejoin: round; stroke-linecap: round; }
.fw .o { fill: #EC7430; }
.fw .os { fill: #CF5C22; }
.fw .of { fill: #B44E1C; }
.fw .p { fill: #F6EFE3; }
.fw .k { fill: #2E211B; }
.fw .ink { fill: #1A1310; }
.fw .gl { fill: #fff; }
.fw .iris { fill: #7A4220; }
.fw .brow { fill: none; stroke: #CF5C22; stroke-width: 1.1; stroke-linecap: round; }
.fw .liner { fill: none; stroke: #1A1310; stroke-width: 1.1; stroke-linecap: round; }
.fw .pk { fill: #FF7BA3; }
.fw .lap { fill: #2E211B; }
.fw .scr { fill: #14110E; stroke: var(--accent); stroke-width: 1.4; }
.fw .code { fill: none; stroke: #3DDC84; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.fw .px { fill: #FFB627; }
.fw .px2 { fill: #FF6FA3; }
.fw .px3 { fill: #3DB8FF; }
.fw .knob { fill: #FF4D4D; }
.fw .bt { fill: #FFB627; }
.fw .bt2 { fill: #3DB8FF; }
.fw .tg { opacity: 0; }
.fw .mouth { fill: none; stroke: #5A3A2A; stroke-width: .9; stroke-linecap: round; }
.fw path, .fw circle, .fw ellipse { pointer-events: fill; cursor: grab; touch-action: none; }
.fw path:active { cursor: grabbing; }
.has-cursor .fw path, .has-cursor .fw circle { cursor: none; }

.fw-bubble {
  position: absolute; left: 0; bottom: 0; max-width: min(280px, 72vw);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-3); color: var(--paper);
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.35; letter-spacing: .01em;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; pointer-events: none; will-change: transform;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}
.fw-bubble.on { opacity: 1; visibility: visible; }
.fw-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink-3); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); }
.fw-bubble-sad { display: none; width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.fw-bubble.is-sad { border-color: rgba(255, 107, 94, 0.45); }
.fw-bubble.is-sad .fw-bubble-sad { display: block; }

.fw-fx { position: absolute; left: 0; bottom: 0; }
.fw-p { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.fw-p.dust { border-radius: 50%; background: rgba(236, 234, 227, 0.5); }
.fw-p.heart { color: #FF6FA3; font-size: 18px; line-height: 1; }
.fw-p.zz { color: var(--accent); font-family: var(--f-mono); font-size: 16px; font-weight: 500; line-height: 1; }
.fw-p.star { color: #FFB627; font-size: 15px; line-height: 1; }
.fw-p.note { color: var(--paper); font-size: 18px; line-height: 1; }
.fw-toy { position: absolute; left: 0; bottom: 0; pointer-events: none; will-change: transform; }
.fw-treat { width: calc(var(--fw-w, 150px) * .065); aspect-ratio: 1.35; border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 34% 30%, #D69A5A, #8A5328 72%); box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.3); }
.fw-ball { width: calc(var(--fw-w, 150px) * .1); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFE7A3, #FFB627 46%, #C27D0C); pointer-events: auto; cursor: grab; touch-action: none; }
.fw-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-left-color: rgba(255, 255, 255, 0.75); border-right-color: rgba(255, 255, 255, 0.75); transform: scaleX(.45); }
.has-cursor .fw-ball { cursor: none; }
/* la lettre (inscription, tickets) */
.fw-letter { width: var(--lw, 30px); aspect-ratio: 1.5; border-radius: 3px; background: linear-gradient(160deg, #FFFDF7, #E9E3D6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); transform-origin: 50% 100%; }
.fw-letter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent 49%, rgba(90, 70, 50, 0.35) 50%, transparent 52%), linear-gradient(to bottom left, transparent 49%, rgba(90, 70, 50, 0.35) 50%, transparent 52%); background-size: 100% 70%; background-repeat: no-repeat; }
.fw-letter::after { content: ''; position: absolute; left: 50%; top: 46%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.fw-laser { position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 8px 3px rgba(255, 59, 59, 0.75), 0 0 26px 8px rgba(255, 59, 59, 0.3); opacity: 0; transition: opacity .3s; pointer-events: none; }
.fw.is-laser .fw-laser { opacity: 1; }
.fw.is-front { z-index: 170; }
.fw.is-super .fw-sprite { animation: fw-super 1.1s linear infinite; }
@keyframes fw-super { from { filter: hue-rotate(0deg) saturate(1.5) drop-shadow(0 0 10px rgba(255, 182, 39, 0.7)); } to { filter: hue-rotate(360deg) saturate(1.5) drop-shadow(0 0 10px rgba(255, 182, 39, 0.7)); } }
@media (max-width: 640px) { .fw-bubble { font-size: 10.5px; padding: 6px 10px; } }
/* sous le menu, la fiche, la palette, le rideau */
body.menu-open .fw { visibility: hidden; }

/* =========================================================
   Foxy immobile (mouvement réduit)
   ========================================================= */
.foxy-static { position: fixed; left: 16px; bottom: 16px; z-index: 85; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.foxy-static[hidden] { display: none; }
.foxy-static-medal { width: 54px; height: 54px; border-radius: 50%; padding: 9px 8px 8px; background: var(--ink-3); border: 1px solid var(--line-2); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8); flex-shrink: 0; }
.foxy-static-sad { display: none; width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.foxy-static.is-sad .foxy-static-medal { display: none; }
.foxy-static.is-sad .foxy-static-sad { display: block; }
.foxy-static-bubble { display: none; max-width: min(300px, 70vw); margin-bottom: 10px; padding: 8px 12px; border-radius: 12px 12px 12px 4px; border: 1px solid var(--line-2); background: var(--ink-3); color: var(--paper); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.4; }
.foxy-static.is-talking .foxy-static-bubble { display: block; }

/* =========================================================
   Commandes de Foxy (sourdine, masquer)
   ========================================================= */
.foxy-ctl { position: fixed; right: 16px; bottom: 16px; z-index: 86; display: flex; gap: 8px; }
.foxy-ctl .icon-btn { width: 40px; height: 40px; background: rgba(20, 17, 16, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-layout="world"] .foxy-ctl { display: none; }
body.is-loading .foxy-ctl { display: none; }
@media (max-width: 640px) { .foxy-ctl { right: 10px; bottom: 10px; } .foxy-ctl .icon-btn { width: 36px; height: 36px; } }