/* ============================================================
   compagnons.css — Octave, Mousse, leurs bulles, les fêtes et les secrets
   (partagé par toutes les pages où les mascottes se promènent)
   ============================================================ */
/* ---------- Mascotte 3D ---------- */
.mascotte { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; will-change: transform; transition: opacity .4s var(--ease), visibility .4s; }
.mascotte.cachee, html.fige .mascotte, html.fige .m-bulle { opacity: 0; visibility: hidden; }
.mascotte::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 3%; height: 7px; border-radius: 50%; background: rgba(10, 8, 30, .2); filter: blur(2px); transition: opacity .4s; }
.mascotte.en-haut::after { opacity: 0; }
.m-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-repli { display: none; position: absolute; left: 16%; bottom: 6%; width: 68%; animation: monte 1s var(--ease); }
.mascotte.sans-3d .m-repli { display: block; }
.mascotte.sans-3d .m-canvas { display: none; }
.m-zone { position: absolute; left: 18%; width: 64%; top: 30%; height: 64%; pointer-events: auto; border: 0; padding: 0; background: transparent; border-radius: 45% 45% 40% 40%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.m-zone:active { cursor: grabbing; }
.m-bulle {
  position: fixed; left: 0; top: 0; z-index: 55; width: min(19rem, calc(100vw - 20px)); padding: .75rem .95rem .9rem;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre);
  transform-origin: 70% 100%; animation: bulle-in .45s var(--ease);
}
.m-bulle.dessous { transform-origin: 70% 0; }
.m-bulle.sort { animation: bulle-out .28s var(--ease) forwards; }
@keyframes bulle-in { from { opacity: 0; scale: .85; } }
@keyframes bulle-out { to { opacity: 0; scale: .9; } }
.m-bulle::after { content: ""; position: absolute; left: var(--queue, 70%); bottom: -7px; width: 13px; height: 13px; margin-left: -6.5px; background: var(--surface); border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); transform: rotate(45deg); }
.m-bulle.dessous::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.m-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.m-nom { font: 600 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.m-outils { display: flex; margin-right: -.5rem; }
.m-outils button { width: 2rem; height: 2rem; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--brume); transition: background-color .2s, color .2s; }
.m-outils button:hover { background: var(--rose-voile); color: var(--encre); }
.m-outils svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-texte { margin: 0; font-size: .96rem; line-height: 1.45; }
.m-texte q { font-family: var(--f-vers); font-style: italic; quotes: "« " " »"; }
.m-texte strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.m-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.m-actions:empty { display: none; }
.m-actions .btn { min-height: 2.3rem; padding: 0 .95rem; font-size: .86rem; animation: monte .4s var(--ease) backwards; }
.m-actions .btn:nth-child(2) { animation-delay: .06s; }
.m-effets { position: fixed; inset: 0; pointer-events: none; z-index: 56; overflow: hidden; }
.m-part { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; animation: part 1.4s var(--ease) forwards; }
.m-part svg { width: 100%; height: 100%; }
.m-z { font: italic 400 20px/1 var(--f-vers); color: var(--brume); animation-duration: 1.7s; }
.m-exclam { font: 400 28px/1 var(--f-titre); color: var(--rose); }
.m-encre { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, rgba(24, 20, 60, .9) 35%, rgba(40, 34, 96, .55) 65%, transparent 72%); animation: encre-part 1.8s var(--ease) forwards; }
@keyframes encre-part { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(3); } }
.m-pop { width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; animation-duration: .8s; }
@keyframes part {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  15% { opacity: 1; transform: translate(calc(var(--dx) * .15), calc(var(--dy) * .15)) scale(1.15) rotate(calc(var(--r) * .3)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.9) rotate(var(--r)); }
}

/* ---------- Mousse, la loutre ---------- */
.loutre { position: fixed; left: 0; top: 0; z-index: 49; pointer-events: none; will-change: transform; transition: opacity .4s var(--ease), visibility .4s; }
.loutre.cachee, html.fige .loutre { opacity: 0; visibility: hidden; }
.l-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-repli { display: none; position: absolute; inset: 10% 4% 0; width: 92%; }
.loutre.sans-3d .l-repli { display: block; }
.loutre.sans-3d .l-canvas { display: none; }
.l-zone { position: absolute; left: 14%; right: 6%; top: 18%; bottom: 14%; pointer-events: auto; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.loutre:not(.dehors) .l-zone { left: 30%; right: 30%; top: 40%; bottom: 20%; }
.m-bulle-loutre .m-nom { color: #1f8fb8; }
html.fige .m-bulle-loutre { opacity: 0; visibility: hidden; }
.m-chapeau { position: absolute; left: 0; top: 0; width: 40px; height: 30px; pointer-events: auto; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mascotte.sans-3d .m-chapeau { display: none; }
.m-bulle-air { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1.5px solid rgba(120, 200, 240, .9); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9) 0 18%, rgba(160, 220, 250, .25) 40%, transparent 70%); animation: bulle-air 1.5s ease-out forwards; }
@keyframes bulle-air { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
.m-goutte { width: 8px; height: 11px; margin: -5px 0 0 -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #2e2b72; animation: goutte-tombe 1.2s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes goutte-tombe { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * .3), var(--dy)) scale(1); } }
.m-eclabousse { width: 7px; height: 9px; margin: -4px 0 0 -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #6cc8ef; animation: eclabousse 1s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes eclabousse { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 45% { transform: translate(calc(var(--dx) * .6), var(--dy)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -.2)) scale(.7); } }
.m-toc { width: auto; height: auto; margin: -10px 0 0 -12px; font: 600 13px/1 var(--f-ui); color: #1f8fb8; text-transform: uppercase; letter-spacing: .08em; }
.m-plus { width: auto; height: auto; margin: -12px 0 0 -14px; font: 400 26px/1 var(--f-titre); color: var(--rose); text-shadow: 0 2px 0 var(--surface); }
.m-chauve { width: 34px; height: 22px; }
.m-flocon { width: 18px; height: 18px; }

/* La balle de plage */
.ballon-plage { position: fixed; left: 0; top: 0; z-index: 57; width: 40px; height: 40px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; will-change: transform; filter: drop-shadow(0 6px 6px rgba(20, 16, 50, .25)); -webkit-tap-highlight-color: transparent; }
.ballon-plage::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }
.ballon-plage svg { width: 100%; height: 100%; display: block; }
.ballon-plage.boing svg { animation: boing .35s var(--ease); }
@keyframes boing { 40% { transform: scale(1.35, .8); } 70% { transform: scale(.9, 1.1); } }
.ballon-plage.plouf { transition: opacity .45s, transform .45s; opacity: 0; }

/* Sondages */
.sondage { display: grid; gap: .35rem; margin-top: .65rem; }
.s-ligne { position: relative; display: flex; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; border-radius: 8px; background: var(--rose-voile); overflow: hidden; font-size: .84rem; }
.s-barre { position: absolute; inset: 0 auto 0 0; width: var(--pc); background: color-mix(in srgb, var(--rose) 22%, transparent); border-radius: 8px; animation: s-barre 1s var(--ease) backwards .2s; }
@keyframes s-barre { from { width: 0; } }
.s-nom, .s-pc { position: relative; }
.s-pc { font-variant-numeric: tabular-nums; color: var(--brume); }
.s-ligne.mien .s-nom { font-weight: 600; }
.s-ligne.mien .s-nom::after { content: " ✓"; color: var(--rose); }

/* Secret trouvé */
.secret-pop { position: fixed; left: 50%; top: calc(4.4rem + env(safe-area-inset-top, 0px)); z-index: 96; display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: 999px; background: var(--encre); color: var(--fond); box-shadow: var(--ombre); transform: translateX(-50%); animation: secret-in .7s cubic-bezier(.3, 1.5, .5, 1); max-width: calc(100vw - 24px); }
.secret-pop.sort { animation: secret-out .5s var(--ease) forwards; }
@keyframes secret-in { from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.6); } }
@keyframes secret-out { to { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.9); } }
.sp-medaille { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffe08a, #f0a43c); flex: none; animation: medaille 1.2s var(--ease) .3s; }
.sp-medaille svg { width: 1.4rem; height: 1.4rem; fill: #fff; }
@keyframes medaille { 50% { transform: rotateY(180deg) scale(1.2); } 100% { transform: rotateY(360deg); } }
.sp-txt { display: grid; line-height: 1.2; min-width: 0; }
.sp-txt small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.sp-txt strong { font: 400 1.15rem/1.15 var(--f-titre); }
.chip-secrets { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); font-size: .82rem; color: var(--brume); text-decoration: none; transition: transform .3s var(--ease); }
.chip-secrets:hover { transform: translateY(-2px); }
.chip-secrets svg { width: 1rem; height: 1rem; fill: #f0a43c; animation: tourne-etoile 6s linear infinite; }
.chip-secrets strong { color: var(--encre); font-variant-numeric: tabular-nums; }
@keyframes tourne-etoile { to { transform: rotate(360deg); } }

/* Jeux : balle et armoire */
.jeu-boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.jeu-boutons .btn svg { width: 1.6rem; height: 1.6rem; }
.jeu-armoire { grid-column: 1 / -1; }
.garde-robe { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .55rem; }
.garde-robe button { display: grid; justify-items: center; gap: .35rem; padding: .8rem .4rem .7rem; border-radius: 14px; border: 1px solid var(--trait); background: var(--fond); font-size: .82rem; color: var(--brume); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .25s, border-color .25s, color .25s; }
.garde-robe button svg { width: 3rem; height: 2.5rem; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.garde-robe button:hover svg { transform: translateY(-4px) rotate(-6deg); }
.garde-robe button[aria-pressed="true"] { border-color: var(--rose); background: var(--rose-voile); color: var(--encre); font-weight: 600; }
.garde-robe button.hop svg { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-12px) rotate(10deg) scale(1.15); } }

/* Le prénom de l'auteur (secret) */
#titre-auteur .lp { display: inline-block; cursor: pointer; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
#titre-auteur .lp.saute { animation: lp-saute .5s cubic-bezier(.3, 1.6, .5, 1); }
#titre-auteur .lp.bon { color: var(--rose); }
@keyframes lp-saute { 40% { transform: translateY(-.22em) rotate(-6deg); } }
.vers-histoire { justify-self: center; margin-top: .4rem; }
.credit { margin: 0; flex-basis: 100%; font: italic 400 1rem/1.4 var(--f-vers); color: var(--encre); }
.credit a { color: var(--rose); }

/* ---------- Décors des fêtes ---------- */
.deco-fete { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
html.fige .deco-fete { opacity: 0; }
.araignee { position: absolute; right: 16%; top: calc(3.6rem + env(safe-area-inset-top, 0px)); width: 44px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; transform-origin: 50% 0; animation: araignee 7s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.araignee .fil { display: block; width: 1.5px; margin: 0 auto; height: var(--h, 40px); background: rgba(120, 110, 150, .6); animation: fil 7s ease-in-out infinite; }
.araignee svg { display: block; width: 44px; height: 36px; animation: pattes .5s ease-in-out infinite alternate; }
.araignee.remonte .fil { animation: remonte 3.2s var(--ease) forwards; }
@keyframes fil { 0%, 100% { height: 18px; } 45%, 60% { height: 120px; } }
@keyframes remonte { 0% { height: 120px; } 18% { height: 0; } 80% { height: 0; } 100% { height: 18px; } }
@keyframes araignee { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes pattes { to { transform: scaleY(.94) translateY(1px); } }
.chauve-vol { position: absolute; top: var(--y0); left: 0; width: 64px; height: 32px; animation: chauve-vol var(--d) linear forwards; }
.chauve-vol svg { width: 100%; height: 100%; animation: battre .18s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes battre { to { transform: scaleY(.35) translateY(6px); } }
@keyframes chauve-vol {
  0% { transform: translate(calc(var(--sens) * -55vw + 50vw - 32px), 0) scale(var(--t)); }
  25% { transform: translate(calc(var(--sens) * -25vw + 50vw - 32px), calc(var(--y1) - var(--y0))) scale(var(--t)); }
  50% { transform: translate(calc(50vw - 32px), 2vh) scale(var(--t)); }
  75% { transform: translate(calc(var(--sens) * 25vw + 50vw - 32px), calc(var(--y1) - var(--y0) - 3vh)) scale(var(--t)); }
  100% { transform: translate(calc(var(--sens) * 58vw + 50vw - 32px), -4vh) scale(var(--t)); }
}
.deco-hero { position: absolute; inset: auto 0 -14px; z-index: 4; pointer-events: none; display: flex; justify-content: space-between; padding: 0 .6rem; }
.citrouille { width: clamp(46px, 9vw, 70px); height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); animation: monte .9s var(--ease) backwards .8s; }
.citrouille.c2 { width: clamp(36px, 7vw, 54px); margin-top: auto; animation-delay: 1s; }
.citrouille .lueur { animation: lueur 2.4s ease-in-out infinite; }
.citrouille.c2 .lueur { animation-delay: -1.1s; }
@keyframes lueur { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 45% { opacity: .95; } 70% { opacity: .7; } }
.flocon { position: absolute; top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(190, 220, 255, .9); animation: neige var(--d) linear infinite; animation-delay: var(--del); }
@keyframes neige { to { transform: translate(var(--x), 106vh); } }
.guirlande { position: absolute; left: 0; right: 0; top: calc(3.6rem + env(safe-area-inset-top, 0px)); height: 20px; }
.guirlande svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ampoules { position: absolute; inset: 0; display: flex; justify-content: space-around; }
.ampoules i { width: 7px; height: 10px; margin-top: 7px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: clignote 1.6s ease-in-out infinite; animation-delay: var(--del); }
.ampoules i:nth-child(odd) { margin-top: 2px; }
@keyframes clignote { 50% { opacity: .35; box-shadow: none; } }
.coeur-monte { position: absolute; bottom: -30px; opacity: .55; animation: coeur-monte var(--d) linear infinite; animation-delay: var(--del); }
.coeur-monte svg { width: 100%; height: 100%; display: block; animation: balance 2.2s ease-in-out infinite alternate; }
@keyframes coeur-monte { to { transform: translate(var(--x), -112vh); } }
@keyframes balance { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.feux { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-fete="halloween"] { --rose: #d9661a; --rose-voile: rgba(217, 102, 26, .1); }
:root[data-fete="noel"] { --rose: #c8323f; --rose-voile: rgba(200, 50, 63, .09); }
:root[data-fete="nouvelan"] { --rose: #a8730a; --rose-voile: rgba(168, 115, 10, .1); }
@media (prefers-color-scheme: dark) {
  :root[data-fete="halloween"]:not([data-theme="light"]) { --rose: #ff9a4a; --rose-voile: rgba(255, 154, 74, .12); }
  :root[data-fete="noel"]:not([data-theme="light"]) { --rose: #ff6b72; --rose-voile: rgba(255, 107, 114, .12); }
  :root[data-fete="nouvelan"]:not([data-theme="light"]) { --rose: #ffd36e; --rose-voile: rgba(255, 211, 110, .12); }
}
@media (prefers-reduced-motion: reduce) { .deco-fete { display: none; } }

/* ============================================================
   v4 : Mousse qui se promène, leurs jeux à deux, cache-cache
   ============================================================ */
.loutre { transition: opacity .4s var(--ease), visibility .4s; }
.loutre .l-zone { left: 18%; right: 8%; top: 20%; bottom: 12%; touch-action: none; cursor: grab; }
.loutre .l-zone:active { cursor: grabbing; }
.loutre:not(.dehors) .l-zone { left: 30%; right: 30%; top: 45%; bottom: 15%; }
/* La bulle de savon dans laquelle elle s'envole */
.l-savon { position: absolute; left: 50%; top: 52%; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .85) 0 7%, transparent 15%), radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .4) 0 4%, transparent 9%),
    radial-gradient(circle, rgba(190, 230, 255, .06) 55%, rgba(170, 140, 255, .28) 70%, rgba(120, 220, 255, .45) 76%, rgba(255, 170, 220, .35) 82%, transparent 86%);
  box-shadow: inset 0 0 18px rgba(160, 200, 255, .35); transition: transform .9s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; }
.l-savon.on { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: savon 3.2s ease-in-out infinite; }
.l-savon.pop { transition: transform .22s ease-out, opacity .22s; transform: translate(-50%, -50%) scale(1.25); opacity: 0; animation: none; }
@keyframes savon { 0%, 100% { border-radius: 50%; } 33% { border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; } 66% { border-radius: 48% 52% 51% 49% / 52% 48% 52% 48%; } }
.l-sillage { position: absolute; width: 46px; height: 14px; margin: -7px 0 0 -23px; border-radius: 50%; border: 2px solid rgba(120, 200, 240, .7); animation: sillage 1.4s ease-out forwards; }
@keyframes sillage { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.m-onde { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rose) 55%, transparent); animation: onde .9s ease-out forwards; pointer-events: none; }
.m-onde.grande { border-color: rgba(120, 200, 240, .8); width: 40px; height: 40px; margin: -20px 0 0 -20px; }
@keyframes onde { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.m-question { font: 400 30px/1 var(--f-titre); color: var(--heure); width: auto; height: auto; margin: -14px 0 0 -8px; }
.m-grr, .m-miam, .m-clap { width: auto; height: auto; margin: -10px 0 0 -18px; font: italic 600 15px/1 var(--f-vers); color: #c06a2a; white-space: nowrap; }
.m-miam { color: var(--rose); }
.m-clap { font: 400 24px/1 var(--f-titre); color: #f0a43c; margin-left: -30px; text-shadow: 0 2px 0 var(--surface); }
.m-bulle-savon { border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .9) 0 12%, transparent 22%), radial-gradient(circle, transparent 55%, rgba(170, 140, 255, .45) 70%, rgba(110, 210, 255, .55) 80%, transparent 86%); animation: bulle-savon 2.2s ease-out forwards; }
@keyframes bulle-savon { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
.m-savon-vol { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .95) 0 12%, transparent 22%), radial-gradient(circle, transparent 55%, rgba(170, 140, 255, .5) 70%, rgba(110, 210, 255, .6) 80%, transparent 86%); }
.m-cadeau, .m-poisson-tombe { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
.m-poisson-tombe { width: 38px; height: 26px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.m-cadeau svg, .m-poisson-tombe svg { width: 100%; height: 100%; display: block; }
.mascotte.pouf { opacity: 0; transform-origin: 50% 80%; transition: opacity .15s; }
/* Les dessins à l'encre d'Octave */
.m-dessin { position: absolute; width: 120px; height: 120px; transition: opacity 1.1s, filter 1.1s, transform 1.1s; }
.m-dessin svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #2e2b72; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(46, 43, 114, .15)); }
.m-dessin svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.3s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.m-dessin.efface { opacity: 0; filter: blur(3px); transform: translateY(14px) scaleY(1.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-dessin svg { stroke: #b9b5ff; } }
/* Course : 3, 2, 1, partez ! */
.m-decompte { position: fixed; left: 50%; bottom: 34vh; z-index: 58; transform: translateX(-50%); font: 400 clamp(3rem, 14vw, 5.5rem)/1 var(--f-titre); color: var(--rose); text-shadow: 0 4px 0 var(--surface), 0 10px 30px rgba(0, 0, 0, .15); pointer-events: none; white-space: nowrap; }
.m-decompte.pop { animation: decompte .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes decompte { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
/* Cache-cache */
.cc-voile { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: .6rem; background: color-mix(in srgb, var(--encre) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fond); animation: monte .3s var(--ease); text-align: center; padding: 16px; }
.cc-voile.sort { transition: opacity .35s; opacity: 0; }
.cc-voile p { margin: 0; font: italic 400 1.4rem/1.3 var(--f-vers); }
.cc-num { font: 400 7rem/1 var(--f-titre); color: #ffc94d; min-height: 1em; }
.cc-num.pop { animation: decompte-cc .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes decompte-cc { from { transform: scale(.2); opacity: 0; } }
.cc-cible { position: fixed; z-index: 57; border: 0; padding: 0; background: transparent; border-radius: 40%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-cible:focus-visible { outline: 3px dashed var(--rose); }
/* Le carnet (jauges) dans la bulle */
.jauges { display: grid; gap: .45rem; margin-top: .6rem; }
.jauge { display: grid; grid-template-columns: 6.8rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .84rem; }
.jauge .barre { height: .6rem; border-radius: 999px; background: var(--rose-voile); overflow: hidden; }
.jauge .barre i { display: block; height: 100%; width: var(--v); border-radius: 999px; background: var(--c); animation: s-barre 1s var(--ease) backwards .15s; }
.jauge b { font-variant-numeric: tabular-nums; text-align: right; color: var(--brume); font-weight: 500; }
.m-champ { width: 100%; height: 2.6rem; margin-top: .6rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--fond); font-size: 1rem; }
.m-champ:focus { outline: 2px solid var(--rose); outline-offset: 1px; }