/* ===== V4 : par-dessus base.css ===== */
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.tirage svg{cursor:crosshair;touch-action:pan-y}
.torche-anneau{fill:none;stroke:var(--acide);stroke-width:2.5;stroke-dasharray:5 7;opacity:.6;pointer-events:none}
.laser{background-image:url("../img/d/laser.png");image-rendering:pixelated}
#fondu{position:fixed;inset:0;width:100%;height:100%;z-index:58;pointer-events:none;image-rendering:pixelated;display:block}

/* persos : stop-motion façon collage animé à 8 images/s */
.perso{cursor:pointer}
.perso image{filter:drop-shadow(0 12px 10px rgba(0,0,0,.55))}
.perso:focus-visible{outline:none}
.perso:focus-visible image,.perso:hover image{filter:drop-shadow(0 0 10px rgba(216,255,56,.9)) drop-shadow(0 12px 10px rgba(0,0,0,.55))}
.stopmo{transform-box:fill-box;transform-origin:50% 90%}
.reel-vivant .stopmo,.reel-fond .stopmo{animation:stopmo 1.6s steps(1) infinite}
.reel-fond .stopmo{animation-duration:.8s}
@keyframes stopmo{
  0%{transform:translate(0,0) rotate(0)}
  12.5%{transform:translate(1px,-3px) rotate(-1.4deg)}
  25%{transform:translate(-1px,-1px) rotate(.8deg)}
  37.5%{transform:translate(2px,-4px) rotate(1.6deg)}
  50%{transform:translate(0,-2px) rotate(-.6deg)}
  62.5%{transform:translate(-2px,-4px) rotate(-1.8deg)}
  75%{transform:translate(1px,-1px) rotate(.4deg)}
  87.5%{transform:translate(-1px,-3px) rotate(1.2deg)}
}
.flotte2{transform-box:fill-box;transform-origin:center}
.reel-vivant .flotte2,.reel-fond .flotte2{animation:flotte2 5s ease-in-out infinite alternate}
@keyframes flotte2{to{transform:translateY(-18px) rotate(-4deg)}}
.marque-badge{pointer-events:none}
.marque-badge rect{fill:var(--acide)}
.marque-badge text{font-family:var(--f-mono);font-size:15px;letter-spacing:1px;fill:var(--noir)}
.reel-vivant .marque-badge,.reel-fond .marque-badge{animation:badge 1.4s steps(2) infinite}
@keyframes badge{50%{opacity:.35}}

/* décalages d'impression (comme sur le site AR) */
.reel-vivant h1,.reel-fond h1,.reel-vivant .dlg-nom,.reel-fond .dlg-nom{animation:misreg 11s steps(1) infinite}
.reel-fond h1,.reel-fond .dlg-nom{animation-duration:3.2s}
@keyframes misreg{
  0%,91%,100%{text-shadow:none;transform:none}
  92%{text-shadow:3px 0 0 rgba(255,81,0,.9),-3px 0 0 rgba(63,230,200,.8);transform:translateX(1px)}
  94%{text-shadow:-2px 1px 0 rgba(255,81,0,.9),2px -1px 0 rgba(157,107,255,.8);transform:translateX(-2px)}
  96%{text-shadow:1px 0 0 rgba(216,255,56,.9);transform:none}
}
.reel-fond .tirage{animation:tremble 6s steps(1) infinite}
@keyframes tremble{0%,96%,100%{translate:0 0}97%{translate:3px -2px}98%{translate:-4px 1px}99%{translate:2px 2px}}
#scan{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.reel-fond #scan{opacity:1}
.secousse{animation:secousse .45s steps(1)}
@keyframes secousse{0%{translate:0 0}20%{translate:-8px 4px}40%{translate:7px -5px}60%{translate:-5px -3px}80%{translate:4px 5px}100%{translate:0 0}}

/* réglage du réel */
.reel{display:flex;align-items:center;gap:0}
.reel>span{margin-right:8px;color:var(--texte-2)}
.reel button{padding:7px 9px;border:1px solid var(--ligne);margin-left:-1px;color:var(--texte-2)}
.reel button[aria-pressed="true"]{background:var(--papier);color:var(--noir);border-color:var(--papier)}
.poche{cursor:pointer}
.poche:hover li{border-color:var(--acide)}
.poche .nobj{margin-left:6px;padding:4px 6px;border:1px solid var(--ligne);color:var(--texte-2)}
.poche .nobj.ok{background:var(--acide);color:var(--noir);border-color:var(--acide)}

/* ===== boîte de dialogue ===== */
.dlg{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(860px,calc(100vw - 32px));z-index:46;display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 20px;padding:16px 20px 18px 14px;background:var(--papier);color:var(--noir);box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 2px var(--noir)}
.dlg::before{content:"";position:absolute;top:-10px;right:40px;width:110px;height:22px;background:rgba(255,81,0,.75);transform:rotate(2deg)}
.dlg-portrait{position:relative;min-height:120px}
.dlg-portrait img{position:absolute;left:-6px;bottom:-4px;width:196px;max-height:260px;object-fit:contain;object-position:bottom;transform:rotate(-4deg);filter:drop-shadow(0 14px 14px rgba(0,0,0,.45))}
.reel-vivant .dlg-portrait img,.reel-fond .dlg-portrait img{animation:parle .5s steps(1) infinite}
.dlg.muet .dlg-portrait img{animation:none}
@keyframes parle{0%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-4px) scaleY(1.02)}}
.dlg-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dlg-nom{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.dlg-role{color:var(--orange)}
.dlg-texte{margin-top:8px;font-size:18px;line-height:1.4;min-height:4.3em;white-space:pre-line;cursor:pointer}
.dlg-choix{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;counter-reset:ch}
.dlg-choix button{width:100%;display:flex;gap:12px;align-items:baseline;text-align:left;padding:9px 12px;border:1px solid var(--noir);font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;counter-increment:ch}
.dlg-choix button::before{content:counter(ch);font-family:var(--f-display);font-size:18px;color:var(--orange)}
.dlg-choix button:hover,.dlg-choix button:focus-visible{background:var(--noir);color:var(--papier);outline:none}
.dlg-choix button:hover::before{color:var(--acide)}
.dlg-fermer{position:absolute;top:10px;right:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5c5d55}
.dlg-fermer:hover{color:var(--orange)}

/* ===== canette, éclats, ovni ===== */
.canette{cursor:pointer}
.canette .corps{transform-box:fill-box;transform-origin:50% 100%}
.canette.secoue .corps{animation:canette .22s steps(2)}
@keyframes canette{0%{transform:rotate(-14deg)}50%{transform:rotate(14deg) translateY(-6px)}100%{transform:rotate(0)}}
.eclat{position:fixed;width:9px;height:9px;z-index:57;pointer-events:none;background:var(--c);animation:eclat 1s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes eclat{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rr));opacity:0}}
.ovni-g{transform-box:fill-box;transform-origin:center}
.ovni-g.arrive{animation:ovni 2.8s cubic-bezier(.2,.8,.25,1) both}
@keyframes ovni{0%{transform:translateY(-900px) rotate(-12deg)}70%{transform:translateY(20px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
.faisceau{animation:faisceau 1.6s ease-in-out infinite alternate}
@keyframes faisceau{from{opacity:.35}to{opacity:.75}}
.trouve-pop{transform-box:fill-box;transform-origin:center;animation:pop .7s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pop{0%{transform:scale(.2)}100%{transform:scale(1.4);opacity:0}}
.mot-bulle rect{fill:var(--papier)}
.mot-bulle text{font-family:var(--f-display);font-weight:700;font-size:44px;letter-spacing:-1px;fill:var(--noir);text-transform:uppercase}
.tete.mauvais{animation:secousse .45s steps(1)}
.seq{display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.seq span{padding:5px 9px 3px;background:var(--papier);color:var(--noir);font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:-.02em}
.seq span.vide{background:transparent;border:1px dashed var(--ligne);color:var(--texte-2)}

/* ===== chien qui passe ===== */
#chien{position:fixed;bottom:calc(104px + env(safe-area-inset-bottom,0px));left:0;z-index:44;width:150px;height:auto;display:none}
#chien img{width:100%;display:block;filter:drop-shadow(0 10px 8px rgba(0,0,0,.6))}
#chien.marche{display:block;animation:traverse 26s linear forwards}
#chien.marche img{animation:trot .35s steps(1) infinite}
@keyframes traverse{from{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes trot{50%{transform:translateY(-6px) rotate(-3deg)}}

/* ===== poche ===== */
.lettres{display:flex;gap:6px}
.lettres b{display:grid;place-items:center;width:52px;height:60px;border:1px solid var(--ligne);font-family:var(--f-display);font-size:38px;color:var(--texte-2)}
.lettres b.ok{background:var(--orange);color:var(--noir);border-color:var(--orange)}
.objets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.objet{background:var(--papier);color:var(--noir);padding:10px 12px 12px;display:grid;gap:6px;transform:rotate(var(--r,0deg))}
.objet svg{width:64px;height:64px}
.objet b{font-family:var(--f-display);text-transform:uppercase;letter-spacing:-.02em;font-size:18px;line-height:.95}
.objet .mono{color:#5c5d55;font-size:10px}
.objet.manque{background:transparent;color:var(--texte-2);border:1px dashed var(--ligne)}
.objet.manque svg{opacity:.18}
.carte-zone canvas{width:100%;height:auto;display:block;box-shadow:0 20px 40px rgba(0,0,0,.5);transform:rotate(-1deg)}
.trace .qui .av{width:30px;height:30px;image-rendering:pixelated;margin:-4px 6px -4px 0;vertical-align:middle}
.trace .qui>span:first-child{display:flex;align-items:center}
.indice-lampe{color:var(--acide)}

@media (max-width:900px){
  .dlg{grid-template-columns:1fr;bottom:calc(92px + env(safe-area-inset-bottom,0px));padding:14px 14px 14px}
  .dlg-texte{max-height:34svh;overflow:auto}
  .dlg-portrait{position:absolute;right:6px;top:-78px;min-height:0;width:110px;height:100px}
  .dlg-portrait img{width:110px;max-height:130px;left:auto;right:0}
  .dlg-nom{font-size:24px;padding-right:96px}
  .dlg-texte{font-size:16px}
  .reel>span{display:none}
  #chien{width:100px;bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .lettres b{width:44px;height:52px;font-size:32px}
}
@media (prefers-reduced-motion:reduce){#chien{display:none!important}}

.tirage.aube{pointer-events:none}
.est-aube .tirage.aube{pointer-events:auto}

/* la lampe : la trame est éteinte, la photo est éclairée */
.tramee{filter:brightness(.72) contrast(1.05)}
.eclairee{filter:brightness(1.22) saturate(1.35) contrast(1.05)}
.torche-anneau{stroke-width:3.5;opacity:.85;stroke:#d8ff38}
.toast{top:calc(84px + env(safe-area-inset-top,0px));bottom:auto}
@media (max-width:900px){.toast{top:calc(10px + env(safe-area-inset-top,0px))}}