/* ===== V6 : mobile plus léger, texte qui danse, bocaux vivants, trucs cachés (chargé en dernier) ===== */

/* --- boutons de l'en-tête : libellé long sur grand écran, icône sur téléphone --- */
.btn-ligne .ic{display:none}
.nobj .sep{opacity:.6}

/* --- la porte et le vitrail partagent la même case : le vitrail ne déborde plus à droite --- */
#scene-porte>.tirage{grid-area:1/1}
.tirage.aube{position:relative;inset:auto;margin:0}

/* --- grand écran : le tirage garde ses proportions et tient toujours dans sa colonne
   (avant, vers 1000 px, la photo de l'herboristerie passait sous la colonne des bocaux) --- */
@supports (width:1cqw){
  @media (min-width:901px){
    .scene{container-type:size}
    .tirage,.tirage[data-scene="lac"]{height:auto;max-height:none;max-width:none;width:min(100cqw,100cqh*var(--ar))}
  }
}
@media (min-width:901px) and (max-width:1300px){
  .place{grid-template-columns:minmax(260px,330px) minmax(0,1fr) minmax(0,310px)}
  .place.sans-cote{grid-template-columns:minmax(280px,380px) minmax(0,1fr)}
}

/* --- les vœux : jamais devant les têtes ---
   grand écran : dans les marges du vitrail (placés par moteur.js) ; sinon : en fil, sous le tirage */
.voeux{position:absolute;inset:0;z-index:3;pointer-events:none}
.voeux:empty{display:none}
.voeu{max-width:200px}
.voeux-titre{display:none}
.voeux.fil{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;pointer-events:auto;padding:14px 16px 12px}
.voeux.fil::-webkit-scrollbar{display:none}
.voeux.fil .voeu{position:relative;flex:0 0 156px;max-width:none;scroll-snap-align:start;cursor:pointer;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;animation:voeuFil 4.5s ease-in-out infinite alternate}
.voeux.fil .voeu.ouvert{-webkit-line-clamp:unset;overflow:visible}
.voeux.fil .voeux-titre{display:block;flex:0 0 auto;align-self:center;color:var(--acide);writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;scroll-snap-align:start}
@keyframes voeuFil{to{translate:0 -4px;rotate:1.2deg}}
@media (min-width:901px){
  .voeux.fil{top:auto;bottom:0;right:96px;height:96px;align-items:center;padding:6px 16px}
  .voeux.fil .voeu{flex-basis:178px;font-size:12px;-webkit-line-clamp:3}
}
@media (max-width:900px){
  .tirage.aube{width:min(100%,460px)}
  .voeux.fil{position:relative;inset:auto;grid-row:2;width:calc(100% + 44px);margin:4px -22px -10px}
}

/* --- scanlines : plus fines, sans mélange, avec une bande qui roule (façon VHS) --- */
#scan{mix-blend-mode:normal;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
#scan::after{content:"";position:absolute;left:0;right:0;top:0;height:24vh;opacity:0;background:linear-gradient(180deg,transparent,rgba(241,242,236,.04) 42%,rgba(216,255,56,.07) 50%,rgba(241,242,236,.04) 58%,transparent)}
.reel-calme #scan{opacity:.3}.reel-vivant #scan{opacity:.6}.reel-fond #scan{opacity:1}
.anim #scan::after{opacity:1;animation:roule calc(16s*var(--vit)) linear infinite}
@keyframes roule{from{transform:translateY(-24vh)}to{transform:translateY(100vh)}}

/* --- téléphone : moins chargé --- */
@media (max-width:900px),(hover:none){
  /* lignes de 4 px, très légères : plus de moiré sur les écrans à haute densité */
  #scan{background:linear-gradient(rgba(0,0,0,.07) 50%,transparent 0) 0 0/100% 4px}
  body::after{opacity:.06}
}
/* badges « parler » : sur écran tactile, ils s'allument quand la lampe passe près du perso, et 2 s en arrivant */
@media (hover:none){
  .perso .marque-badge{opacity:0}
  .perso.proche .marque-badge,.montre-badges .perso .marque-badge{opacity:.95}
}
/* poèmes en épigraphe : repliés partout (moins de texte d'un coup), « lire tout le poème » les déplie */
.poeme-epi{max-height:4.8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);transition:max-height .45s ease}
.poeme-epi.deplie{max-height:70em;-webkit-mask-image:none;mask-image:none}
.epi-plus{display:inline-block;align-self:flex-start;margin-top:-6px}

/* --- en-tête et barre du bas sur téléphone : tout tient sur une ligne, plus rien ne déborde --- */
@media (max-width:900px){
  .top{grid-template-columns:auto minmax(0,1fr);gap:8px}
  .top-droite{flex-wrap:nowrap;gap:6px;justify-self:end;min-width:0}
  #reelBtn{display:inline-block}
  .btn-ligne .lg{display:none}
  .btn-ligne .ic{display:inline}
  #reelBtn,#son{padding:7px 8px}
  .poche{gap:5px}
  .poche ol{gap:2px}
  .poche li{width:19px;height:23px;font-size:14px}
  .poche .nobj{margin-left:2px;padding:4px 5px}
  .nobj .sep{display:none}
  .lieux{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lieux button{min-width:0;overflow:hidden}
  .lieux .lg{display:none}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){.marque b{display:none}}
@media (max-width:350px){.poche .nobj{display:none}}

/* ===== INTENSITÉ : les mêmes animations dans les trois réels =====
   --amp : la force (calme .4, vivant 1, à fond 1.6) · --vit : la lenteur (calme 1.8, vivant 1, à fond .5)
   --rare : l'écart entre deux accrocs, néons et décalages (calme 2.4, vivant 1, à fond .3) */
body{--amp:.4;--vit:1.8;--rare:2.4}
body.reel-vivant{--amp:1;--vit:1;--rare:1}
body.reel-fond{--amp:1.6;--vit:.5;--rare:.3}

/* ===== LE TEXTE DANSE (à peine en calme, franchement en vivant, à bout à fond) ===== */
.mot{display:inline-block;white-space:nowrap}
.geant .mot,.geant .l{color:inherit}   /* « .geant span » ne doit toucher que « l'aube. », pas chaque lettre */
.l{display:inline-block;animation:danse calc(3.6s*var(--vit)) ease-in-out infinite,vague calc(10s*var(--rare)) steps(1) infinite;animation-delay:calc(var(--i)*-.24s*var(--vit)),calc(var(--i)*.06s)}
@keyframes danse{0%,100%{transform:none}25%{transform:translateY(calc(-.056em*var(--amp))) rotate(calc(-3.1deg*var(--amp)))}50%{transform:translateY(calc(.02em*var(--amp))) rotate(calc(1.25deg*var(--amp)))}75%{transform:translateY(calc(-.03em*var(--amp))) rotate(calc(2.5deg*var(--amp)))}}
@keyframes vague{88%{text-shadow:calc(1.25px*var(--amp)) 0 0 rgba(255,95,174,.9),calc(-1.25px*var(--amp)) 0 0 rgba(63,230,200,.85)}94%{text-shadow:calc(-.6px*var(--amp)) calc(.6px*var(--amp)) 0 rgba(216,255,56,.95)}}
.surtitre .l{animation:grelotte calc(1s*var(--vit)) steps(2) infinite;animation-delay:calc(var(--i)*-.14s*var(--vit))}
@keyframes grelotte{50%{transform:translateY(calc(-.95px*var(--amp))) rotate(calc(-1.9deg*var(--amp)))}}
.danse-mots .mot{animation:tangueMot calc(6.8s*var(--vit)) ease-in-out infinite;animation-delay:calc(var(--i)*-.74s*var(--vit))}
@keyframes tangueMot{0%,100%{transform:none}50%{transform:translateY(calc(-.95px*var(--amp))) rotate(calc(-.62deg*var(--amp)))}}
.bandeau .mb{display:inline-block;animation:sautille calc(2.4s*var(--vit)) ease-in-out infinite;animation-delay:calc(var(--i)*-.38s*var(--vit))}
@keyframes sautille{50%{transform:translateY(calc(-1.9px*var(--amp))) rotate(calc(-1.25deg*var(--amp)))}}
/* les lettres tapées par les persos sautent en arrivant */
.tape{position:relative;animation:tape .24s cubic-bezier(.2,1.6,.4,1)}
@keyframes tape{from{top:calc(-.28em*var(--amp));color:var(--orange)}}
/* les tags bouillonnent, comme un dessin animé fait main */
.tirage .tag{animation:bout calc(.9s*var(--vit)) steps(1) infinite}
@keyframes bout{25%{translate:calc(.6px*var(--amp)) calc(-.6px*var(--amp))}50%{translate:calc(-.6px*var(--amp)) calc(.6px*var(--amp))}75%{translate:calc(.6px*var(--amp)) calc(.95px*var(--amp))}}

/* ===== LES BOCAUX ===== */
.etagere{gap:40px 18px;padding:16px 10px 22px}
.bocal{position:relative;display:block;background:none;padding:0;box-shadow:none;transform:none;color:var(--noir)}
.bocal:hover,.bocal:focus-visible{transform:none}
.bocal::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-15px;height:9px;background:linear-gradient(#6d5541,#3a2c1f);box-shadow:0 12px 16px rgba(0,0,0,.55)}
.pot{position:relative;display:block;transform:rotate(var(--r));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.couvercle{position:relative;z-index:3;display:block;width:72%;height:13px;margin:0 auto -4px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#e2e3d9,#8d8e86 55%,#4f504a);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.couvercle::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:2px;background:rgba(255,255,255,.55)}
.verre{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;container-type:inline-size;border:2px solid rgba(241,242,236,.38);border-radius:24% 24% 15% 15% / 12% 12% 9% 9%;background:linear-gradient(90deg,rgba(241,242,236,.12),rgba(241,242,236,.03) 45%,rgba(241,242,236,.09));box-shadow:inset 0 0 18px rgba(241,242,236,.12),0 14px 24px rgba(0,0,0,.45)}
.verre::after{content:"";position:absolute;z-index:4;top:9%;bottom:12%;left:8%;width:8%;border-radius:40%;background:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.04));pointer-events:none}
.bocal .zine{position:absolute;z-index:1;left:13%;top:15%;width:74%;height:auto;aspect-ratio:420/544;object-fit:cover;box-shadow:0 6px 12px rgba(0,0,0,.45);animation:nage 7s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes nage{0%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(2px,-5px) rotate(2deg)}100%{transform:translate(-2px,4px) rotate(-1deg)}}
.bocal .zine.feuillette{animation:nage 7s ease-in-out infinite alternate,feuillette .3s ease-in-out;animation-delay:var(--d),0s}
@keyframes feuillette{50%{scale:.06 1}}
.liquide{position:absolute;z-index:2;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,color-mix(in srgb,var(--liq) 40%,transparent),color-mix(in srgb,var(--liq) 22%,transparent));pointer-events:none}
.liquide::before{content:"";position:absolute;left:0;top:-7px;width:200%;height:8px;background:color-mix(in srgb,var(--liq) 40%,transparent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='8'><path d='M0 4 Q8 0 16 4 T32 4 V8 H0Z'/></svg>") repeat-x 0 0/32px 8px;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='8'><path d='M0 4 Q8 0 16 4 T32 4 V8 H0Z'/></svg>") repeat-x 0 0/32px 8px;animation:vaguelette 2.8s linear infinite}
@keyframes vaguelette{to{transform:translateX(-32px)}}
.verre i{position:absolute;z-index:3;bottom:5%;left:30%;width:6px;height:6px;border-radius:50%;border:1px solid rgba(241,242,236,.75);opacity:0;animation:bulle 4.2s ease-in infinite;animation-delay:calc(var(--d)*-.5)}
.verre i:nth-of-type(2){left:58%;width:4px;height:4px;animation-duration:3.4s;animation-delay:calc(var(--d)*-.9 - 1.3s)}
.verre i:nth-of-type(3){left:72%;animation-duration:5s;animation-delay:calc(var(--d)*-.3 - 2.6s)}
@keyframes bulle{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:.9}80%{opacity:.7}100%{opacity:0;transform:translate(5px,-72cqw) scale(1.15)}}
.bocal .etiquette{position:absolute;z-index:5;left:11%;right:11%;bottom:9%;padding:5px 6px 6px;background:var(--papier);color:var(--noir);font-size:10px;line-height:1.25;letter-spacing:.05em;text-align:left;transform:rotate(calc(var(--r) * -1.3));box-shadow:0 4px 8px rgba(0,0,0,.35)}
.bocal:hover .pot,.bocal:focus-visible .pot{transform:rotate(0) translateY(-5px)}
.bocal:hover .couvercle,.bocal:focus-visible .couvercle{transform:translateY(-7px) rotate(-7deg)}
.bocal.ouvre .pot{animation:remue .3s ease-out}
.bocal.ouvre .couvercle{transform:translateY(-16px) rotate(-20deg)}
@keyframes remue{30%{transform:rotate(-6deg)}65%{transform:rotate(5deg)}}
/* le locataire : un rien qui nage de temps en temps dans un des bocaux */
.bocal .locataire{position:absolute;z-index:3;left:-28%;top:60%;width:26%;height:auto;aspect-ratio:1;image-rendering:pixelated;opacity:0;pointer-events:none}
.bocal.habite .locataire{opacity:1;animation:locataire 5.2s ease-in-out forwards}
.bocal span{padding:0}   /* base.css donnait du jeu à tous les span des anciens bocaux */
.bocal.habite .verre i{animation-duration:1.4s}
@keyframes locataire{0%{transform:translate(0,0)}30%{transform:translate(170%,-35%) rotate(12deg)}55%{transform:translate(260%,15%) rotate(-10deg)}80%{transform:translate(390%,-25%) rotate(8deg)}100%{transform:translate(520%,0)}}

/* lecteur de zine : la page tourne */
#zImg{touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#zImg.tourne-d{animation:tourneD .35s ease-out}
#zImg.tourne-g{animation:tourneG .35s ease-out}
@keyframes tourneD{from{transform:perspective(900px) rotateY(-26deg) translateX(18px);opacity:.35}}
@keyframes tourneG{from{transform:perspective(900px) rotateY(26deg) translateX(-18px);opacity:.35}}

/* ===== LES RIENS ===== */
.rien-cache{transform-box:fill-box;transform-origin:50% 90%;animation:stopmo 1.2s steps(1) infinite}
/* les riens et les cachettes du dossier de collage : un liseré papier, comme les persos découpés */
.rien-vrai,.cachette{filter:drop-shadow(1.5px 0 0 #f1f2ec) drop-shadow(-1.5px 0 0 #f1f2ec) drop-shadow(0 1.5px 0 #f1f2ec) drop-shadow(0 -1.5px 0 #f1f2ec) drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.bocal img.locataire:not(.px){width:34%;left:-36%;filter:drop-shadow(0 0 6px rgba(63,230,200,.7))}
.soleil-leve{position:fixed;left:50%;bottom:-34vh;z-index:57;width:min(46vw,340px);pointer-events:none;animation:soleilLeve 3.4s ease-in-out forwards}
@keyframes soleilLeve{0%{transform:translate(-50%,0) rotate(-12deg);opacity:0}35%{opacity:1}100%{transform:translate(-50%,-70vh) rotate(10deg);opacity:0}}
.riens{display:flex;flex-wrap:wrap;gap:10px}
.riens figure{margin:0;width:70px;display:grid;justify-items:center;gap:4px}
.riens img,.riens .manque{width:48px;height:48px}
.riens img{image-rendering:pixelated}
.riens .manque{display:grid;place-items:center;border:1px dashed var(--ligne);color:var(--texte-2);font-family:var(--f-display);font-size:22px}
.riens figcaption{font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte-2);text-align:center;line-height:1.2}

/* ===== trucs cachés : pluie de riens, aube pour de faux, nuée de Papiphants, logo-disque ===== */
.pluie{position:fixed;top:-60px;z-index:57;pointer-events:none;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--c);font-size:var(--s);animation:pluie var(--t) cubic-bezier(.4,0,.8,.6) both}
@keyframes pluie{to{transform:translateY(calc(100vh + 120px)) rotate(var(--rr))}}
.leve{position:fixed;inset:0;z-index:57;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(130% 75% at 50% 115%,rgba(255,210,63,.75),rgba(255,81,0,.5) 35%,rgba(255,95,174,.25) 60%,transparent 80%);animation:leve 3.4s ease-in-out forwards}
@keyframes leve{0%{opacity:0;transform:translateY(40%)}45%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10%)}}
.nuee{position:fixed;left:0;z-index:56;pointer-events:none;animation:nuee var(--t) linear var(--dl) both}
.nuee img{display:block;width:100%;animation:bat .3s steps(1) infinite;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
@keyframes nuee{from{transform:translate(-220px,0)}to{transform:translate(calc(100vw + 40px),var(--dy))}}
@keyframes bat{50%{transform:scaleY(.86) translateY(-4px)}}
.marque img.disque{animation:disque .5s linear 4}
@keyframes disque{to{transform:rotate(356deg)}}
/* ===== ANIMATIONS (deuxième passe) ===== */
/* arrivée dans un lieu : le tirage se pose, le panneau monte ligne par ligne */
.anim .place.arrivee .tirage{animation:pose .75s cubic-bezier(.2,1.25,.35,1) backwards}
@keyframes pose{from{translate:0 calc(-34px*var(--amp));scale:calc(1 + .07*var(--amp));rotate:calc(-2.5deg*var(--amp))}}
.anim .place.arrivee .panel>*,.anim .place.arrivee .cote{animation:monte .6s cubic-bezier(.2,.8,.3,1) backwards}
.place.arrivee .panel>:nth-child(2){animation-delay:.05s}.place.arrivee .panel>:nth-child(3){animation-delay:.1s}
.place.arrivee .panel>:nth-child(4){animation-delay:.15s}.place.arrivee .panel>:nth-child(5){animation-delay:.2s}
.place.arrivee .panel>:nth-child(6){animation-delay:.25s}.place.arrivee .panel>:nth-child(n+7){animation-delay:.3s}
.place.arrivee .cote{animation-delay:.18s}
@keyframes monte{from{opacity:0;translate:0 calc(16px*var(--amp))}}
/* le dialogue arrive en glissant, le portrait saute dedans, les choix tombent un par un */
.anim .dlg:not([hidden]){animation:dlgArrive .4s cubic-bezier(.2,1.35,.4,1)}
@keyframes dlgArrive{from{opacity:0;translate:0 calc(40px*var(--amp));rotate:calc(1.5deg*var(--amp))}}
.anim .dlg:not([hidden]) .dlg-portrait{animation:portraitPop .55s cubic-bezier(.2,1.6,.4,1) .08s backwards}
@keyframes portraitPop{from{opacity:0;translate:calc(-10px*var(--amp)) calc(30px*var(--amp));rotate:calc(-14deg*var(--amp));scale:.6}}
.anim .dlg-choix:not([hidden]) li{animation:monte .32s cubic-bezier(.2,.8,.3,1) backwards}
.dlg-choix li:nth-child(2){animation-delay:.05s}.dlg-choix li:nth-child(3){animation-delay:.1s}.dlg-choix li:nth-child(n+4){animation-delay:.15s}
.dlg{transition:translate .22s ease,opacity .22s ease}
.dlg.glisse{transition:none}
.dlg-poignee{display:none}
/* les fenêtres s'ouvrent comme une feuille qu'on pose */
.anim dialog[open]{animation:modale .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes modale{from{opacity:0;translate:0 calc(22px*var(--amp));scale:calc(1 - .04*var(--amp));rotate:calc(-.6deg*var(--amp))}}
.anim dialog[open]::backdrop{animation:voile .3s ease}
@keyframes voile{from{opacity:0}}
/* le toast tombe comme un tampon, la bulle de la bestiole sort de la bestiole */
.toast.tamponne{animation:tampon .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes tampon{from{opacity:0;scale:calc(1 + .4*var(--amp));rotate:calc(-5deg*var(--amp))}}
.bulle{transform-origin:90% 100%}
.bulle:not([hidden]){animation:bulleSort .38s cubic-bezier(.2,1.5,.4,1)}
@keyframes bulleSort{from{opacity:0;translate:20px 24px;scale:.6}}
/* une lettre qui arrive dans la poche saute, le compteur bombe le torse */
.poche li.neuf{animation:lettre .8s cubic-bezier(.2,1.6,.4,1)}
@keyframes lettre{0%{scale:.2;rotate:-30deg}60%{scale:1.35;rotate:8deg;box-shadow:0 0 0 6px rgba(216,255,56,.5)}}
.nobj.neuf{animation:bosse .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes bosse{40%{scale:1.25;background:var(--acide);color:var(--noir)}}
/* le perso sursaute quand on lui parle */
.perso.saute{animation:saute .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes saute{35%{translate:0 calc(-16px*var(--amp))}}
@media (hover:hover){
  .btn:hover{animation:frisson .35s}
  @keyframes frisson{30%{rotate:-2deg}65%{rotate:1.5deg}}
}

/* ===== AMBIANCE : chaque lieu a sa lumière ===== */
/* le néon de la cabine et celui du passage grésillent, le skate rougeoie, la radio a des parasites, le lac respire */
.anim [data-scene="cabine"] svg{animation:neon calc(9s*var(--rare)) steps(1) infinite}
.anim [data-scene="passage"] svg{animation:neon calc(17s*var(--rare)) steps(1) infinite -5s}
@keyframes neon{0%,90%,100%{filter:none}91%{filter:brightness(calc(1 - .28*var(--amp)))}92%{filter:none}94%{filter:brightness(calc(1 - .18*var(--amp))) saturate(calc(1 + .25*var(--amp)))}95%{filter:none}}
.anim .en-feu [data-scene="skate"] svg{animation:brasier calc(1.6s*var(--vit)) steps(4) infinite alternate}
@keyframes brasier{from{filter:brightness(1)}to{filter:brightness(calc(1 + .09*var(--amp))) saturate(calc(1 + .16*var(--amp)))}}
.anim [data-scene="radio"] svg{animation:friture calc(7s*var(--rare)) steps(1) infinite}
@keyframes friture{0%,95%,100%{filter:none}96%{filter:contrast(calc(1 + .22*var(--amp))) brightness(calc(1 + .09*var(--amp))) hue-rotate(calc(22deg*var(--amp)))}97%{filter:none}98%{filter:hue-rotate(calc(-16deg*var(--amp)))}99%{filter:none}}
.anim [data-scene="lac"] svg{animation:crepuscule calc(12s*var(--vit)) steps(10) infinite alternate}
@keyframes crepuscule{from{filter:brightness(calc(1 - .04*var(--amp)))}to{filter:brightness(calc(1 + .04*var(--amp))) saturate(calc(1 + .08*var(--amp)))}}
/* derrière la porte : un rayon de lumière balaie lentement les vitraux */
.anim .est-aube .tirage.aube::after{content:"";position:absolute;inset:9px 9px 34px;pointer-events:none;mix-blend-mode:screen;opacity:calc(.35 + .4*var(--amp));background:linear-gradient(105deg,transparent 38%,rgba(255,240,200,.14) 50%,transparent 62%) 0 0/300% 100%;animation:rayon calc(11s*var(--vit)) linear infinite}
@keyframes rayon{from{background-position:110% 0}to{background-position:-110% 0}}

/* ===== AU DOIGT ===== */
/* l'onde au point touché, la lampe attrapée (appui d'un instant) */
.onde{fill:none;stroke:#d8ff38;stroke-width:4;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:onde .6s ease-out forwards}
@keyframes onde{from{transform:scale(.25);opacity:.9}to{transform:scale(1.9);opacity:0}}
.tenue .torche-anneau{stroke-width:7;opacity:1;stroke-dasharray:none}
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent}
  .lieux button:active{background:rgba(241,242,236,.14)}
  .btn:active{scale:.97}
  .bocal:active .pot{scale:.96}
}
@media (max-width:900px){
  /* la poignée du dialogue : on le glisse vers le bas pour le fermer */
  .dlg-poignee{display:block;grid-column:1/-1;justify-self:center;width:44px;height:5px;margin:-4px 0 8px;border-radius:3px;background:rgba(25,26,23,.28)}
  .dlg-poignee,.dlg-tete,.dlg-portrait{touch-action:none}
}
@media (prefers-reduced-motion:reduce){*::after{animation:none!important}}

/* l'heure qu'il est vraiment : entre 5 h et 8 h, une lueur d'aube monte du bas */
body.heure-aube::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 55% at 50% 112%,rgba(255,81,0,.3),rgba(255,95,174,.12) 45%,transparent 72%)}

/* ===== INTENSITÉ (suite) : les animations des versions précédentes tournent dans les trois réels =====
   valeurs de base = l'ancien « vivant » ; calme les adoucit, à fond les pousse (--amp, --vit, --rare plus haut) */
/* persos : stop-motion, flottement, aura, portrait qui parle */
.anim .stopmo{animation:stopmo calc(1.6s*var(--vit)) steps(1) infinite}
@keyframes stopmo{
  0%{transform:none}
  12.5%{transform:translate(calc(1px*var(--amp)),calc(-3px*var(--amp))) rotate(calc(-1.4deg*var(--amp)))}
  25%{transform:translate(calc(-1px*var(--amp)),calc(-1px*var(--amp))) rotate(calc(.8deg*var(--amp)))}
  37.5%{transform:translate(calc(2px*var(--amp)),calc(-4px*var(--amp))) rotate(calc(1.6deg*var(--amp)))}
  50%{transform:translate(0,calc(-2px*var(--amp))) rotate(calc(-.6deg*var(--amp)))}
  62.5%{transform:translate(calc(-2px*var(--amp)),calc(-4px*var(--amp))) rotate(calc(-1.8deg*var(--amp)))}
  75%{transform:translate(calc(1px*var(--amp)),calc(-1px*var(--amp))) rotate(calc(.4deg*var(--amp)))}
  87.5%{transform:translate(calc(-1px*var(--amp)),calc(-3px*var(--amp))) rotate(calc(1.2deg*var(--amp)))}
}
.anim .flotte2{animation:flotte2 calc(5s*var(--vit)) ease-in-out infinite alternate}
@keyframes flotte2{to{transform:translateY(calc(-18px*var(--amp))) rotate(calc(-4deg*var(--amp)))}}
.anim .perso image,.anim .tete image{animation:aura calc(7s*var(--vit)) steps(1) infinite}
@keyframes aura{
  0%,100%{filter:drop-shadow(0 0 calc(3px + 3px*var(--amp)) rgba(216,255,56,.75)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  25%{filter:drop-shadow(0 0 calc(3px + 4px*var(--amp)) rgba(255,95,174,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 calc(3px + 3px*var(--amp)) rgba(157,107,255,.85)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  75%{filter:drop-shadow(0 0 calc(3px + 4px*var(--amp)) rgba(63,230,200,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
}
.anim .dlg-portrait img{animation:parle calc(.5s*var(--vit)) steps(1) infinite}
@keyframes parle{0%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(calc(-4deg + 1.5deg*var(--amp))) translateY(calc(-4px*var(--amp))) scaleY(calc(1 + .02*var(--amp)))}}
/* les accrocs : décalage d'impression des titres, tirages qui tremblent, secousses */
.anim h1,.anim .dlg-nom{animation:misreg calc(11s*var(--rare)) steps(1) infinite}
@keyframes misreg{
  0%,91%,100%{text-shadow:none;transform:none}
  92%{text-shadow:calc(3px*var(--amp)) 0 0 rgba(255,81,0,.9),calc(-3px*var(--amp)) 0 0 rgba(63,230,200,.8);transform:translateX(calc(1px*var(--amp)))}
  94%{text-shadow:calc(-2px*var(--amp)) calc(1px*var(--amp)) 0 rgba(255,81,0,.9),calc(2px*var(--amp)) calc(-1px*var(--amp)) 0 rgba(157,107,255,.8);transform:translateX(calc(-2px*var(--amp)))}
  96%{text-shadow:calc(1px*var(--amp)) 0 0 rgba(216,255,56,.9);transform:none}
}
.anim .tirage{animation:tremble calc(20s*var(--rare)) steps(1) infinite}
@keyframes tremble{0%,96%,100%{translate:0 0}97%{translate:calc(1.9px*var(--amp)) calc(-1.25px*var(--amp))}98%{translate:calc(-2.5px*var(--amp)) calc(.6px*var(--amp))}99%{translate:calc(1.25px*var(--amp)) calc(1.25px*var(--amp))}}
@keyframes secousse{0%,100%{translate:0 0}20%{translate:calc(-8px*var(--amp)) calc(4px*var(--amp))}40%{translate:calc(7px*var(--amp)) calc(-5px*var(--amp))}60%{translate:calc(-5px*var(--amp)) calc(-3px*var(--amp))}80%{translate:calc(4px*var(--amp)) calc(5px*var(--amp))}}
/* les fonds respirent, la trame tourne ses couleurs (à fond : le tour complet) */
.anim .fond{animation:respire calc(18s*var(--vit)) ease-in-out infinite alternate,teinteF calc(30s*var(--vit)) steps(15) infinite alternate}
.anim.reel-fond .fond{animation:respire 7s ease-in-out infinite alternate,teinteFF 8s steps(24) infinite}
@keyframes respire{from{transform:scale(1)}to{transform:scale(calc(1 + .14*var(--amp))) rotate(calc(2deg*var(--amp)))}}
@keyframes teinteF{from{filter:brightness(.4) saturate(1.8) hue-rotate(calc(-30deg*var(--amp)))}to{filter:brightness(.48) saturate(2.3) hue-rotate(calc(70deg*var(--amp)))}}
.anim .tramee{animation:trame calc(10s*var(--vit)) steps(10) infinite alternate}
.anim.reel-fond .tramee{animation:tramefond 4s steps(16) infinite}
@keyframes trame{from{filter:brightness(.72) hue-rotate(calc(-22deg*var(--amp))) saturate(1.1)}to{filter:brightness(.78) hue-rotate(calc(28deg*var(--amp))) saturate(1.35)}}
.reel-calme #poussiere{display:block}
@media (prefers-reduced-motion:reduce){.anim #poussiere{display:none}}
/* le feu, la vache, le bateau, le chat du plan, le chien */
.anim .flamme{animation:flamme calc(.9s*var(--vit)) steps(3) infinite alternate}
.anim .flamme.f2{animation-delay:-.4s}
@keyframes flamme{from{opacity:calc(1 - .28*var(--amp));transform:scale(1,1)}to{opacity:1;transform:scale(calc(1 + .08*var(--amp)),calc(1 + .18*var(--amp)))}}
.anim .vache-ride{animation:ride calc(7s*var(--vit)) ease-in-out infinite alternate}
@keyframes ride{0%{transform:translate(0,0) rotate(calc(-4deg*var(--amp)))}50%{transform:translate(calc(18px*var(--amp)),calc(-26px*var(--amp))) rotate(calc(5deg*var(--amp)))}100%{transform:translate(calc(34px*var(--amp)),calc(6px*var(--amp))) rotate(calc(-2deg*var(--amp)))}}
.anim #bateau.rallume .coque{animation:tangue calc(3s*var(--vit)) ease-in-out infinite alternate}
@keyframes tangue{from{transform:rotate(calc(-1.2deg*var(--amp)))}to{transform:rotate(calc(1.2deg*var(--amp))) translateY(calc(3px*var(--amp)))}}
.anim .plan-ici{animation:trot calc(.6s*var(--vit)) steps(1) infinite}
#chien.marche img{animation:trot calc(.35s*var(--vit)) steps(1) infinite}
@keyframes trot{50%{transform:translateY(calc(-6px*var(--amp))) rotate(calc(-3deg*var(--amp)))}}
/* la bestiole, les cibles qui pulsent, les vœux, les bocaux */
.bestiole img{animation-duration:calc(18s*var(--vit))}
.pouls{animation-duration:calc(2.2s*var(--vit))}
.voeu{animation-duration:calc(8s*var(--vit))}
@keyframes voeu{to{translate:0 calc(-12px*var(--amp))}}
.voeux.fil .voeu{animation-duration:calc(4.5s*var(--vit))}
@keyframes voeuFil{to{translate:0 calc(-4px*var(--amp));rotate:calc(1.2deg*var(--amp))}}
.bocal .zine{animation-duration:calc(7s*var(--vit))}
.bocal .zine.feuillette{animation-duration:calc(7s*var(--vit)),.3s}
@keyframes nage{0%{transform:translate(0,0) rotate(calc(-3deg*var(--amp)))}50%{transform:translate(calc(2px*var(--amp)),calc(-5px*var(--amp))) rotate(calc(2deg*var(--amp)))}100%{transform:translate(calc(-2px*var(--amp)),calc(4px*var(--amp))) rotate(calc(-1deg*var(--amp)))}}
.verre i{animation-duration:calc(4.2s*var(--vit))}
.verre i:nth-of-type(2){animation-duration:calc(3.4s*var(--vit))}
.verre i:nth-of-type(3){animation-duration:calc(5s*var(--vit))}
.liquide::before{animation-duration:calc(2.8s*var(--vit))}
@keyframes onde{from{transform:scale(.25);opacity:.9}to{transform:scale(calc(1.3 + .4*var(--amp)));opacity:0}}

/* ===== LA POLICE DES DIALOGUES : Notepen (par jeti) ===== */
@font-face{font-family:"Notepen";src:url("../fonts/notepen.ttf") format("truetype");font-display:swap}
:root{--f-bulle:"Notepen","Comic Sans MS","Marker Felt",cursive}
.dlg-texte{font-family:var(--f-bulle);font-size:27px;line-height:1.12;letter-spacing:.01em}
.dlg-choix button{font-family:var(--f-bulle);font-size:22px;line-height:1.1;letter-spacing:0;text-transform:none;padding:7px 12px}
.dlg-choix button::before{font-size:17px}
#bulleTexte{font-family:var(--f-bulle);font-size:22px;line-height:1.1}
@media (max-width:900px){
  .dlg-texte{font-size:21px;max-height:30svh}
  .dlg-choix{gap:5px}
  .dlg-choix button{font-size:18px;padding:6px 10px}
}

/* ===== LE QUAI 2 : le tableau des départs, l'horloge, la lune ===== */
.departs{display:grid;gap:3px;padding:8px 10px 9px;background:#0b0f1e;border:1px solid #2a3560;box-shadow:inset 0 0 18px rgba(63,230,200,.08)}
.dep-tete,.dep-ligne{display:grid;grid-template-columns:4.4em minmax(0,1fr) auto;gap:10px;align-items:baseline}
.dep-tete{font-size:10px;color:#5c6a9a;border-bottom:1px dashed #2a3560;padding-bottom:3px}
.dep-ligne{font-size:12px;color:#ffd23f;text-shadow:0 0 6px rgba(255,210,63,.45);animation:lueur calc(3s*var(--vit)) ease-in-out infinite alternate}
.dep-ligne:nth-child(odd){animation-delay:-1.3s}
@keyframes lueur{to{text-shadow:0 0 calc(4px + 5px*var(--amp)) rgba(255,210,63,.65)}}
.dep-ligne .dep-d{color:#f1f2ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-ligne .dep-e{color:#3fe6c8}
.dep-ligne.claque .dep-d{color:#ffd23f}
#horloge text{filter:drop-shadow(0 0 4px rgba(255,210,63,.75))}
#lune:hover,#lune:focus-visible{fill:rgba(255,240,200,.18)}

/* ===== LA VILLE : légendes sur le plan, chronique, liens recousus ===== */
.plan-gris{pointer-events:auto;cursor:pointer;border:0;font:inherit;transition:filter .2s,transform .2s}
.plan-gris:hover,.plan-gris:focus-visible{filter:grayscale(.6) brightness(.8);transform:rotate(0) scale(1.05)}
.plan-gris.su{filter:grayscale(.25) brightness(.92);z-index:2}
.plan-gris.su span{color:var(--orange)}
.plan-legende{margin-top:14px;padding:14px 16px 16px;background:var(--papier);color:var(--noir);transform:rotate(-.5deg);box-shadow:0 14px 30px rgba(0,0,0,.5);animation:monte .35s cubic-bezier(.2,.8,.3,1)}
.plan-legende b{display:block;font-family:var(--f-display);font-size:24px;line-height:.95;text-transform:uppercase;letter-spacing:-.03em}
.plan-legende p{margin:8px 0;font-family:var(--f-bulle);font-size:22px;line-height:1.15}
.plan-legende .mono{color:var(--orange);font-size:10px}
.plan-ville{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:16px}
.chronique summary{cursor:pointer;color:var(--acide)}
.chronique ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;border-left:2px solid var(--orange);padding-left:12px}
.chronique li{display:grid;gap:2px;font-size:14px;color:var(--texte)}
.chronique li b{color:var(--orange);font-weight:400}
.legendes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.legendes .lien{text-align:left;text-transform:none;letter-spacing:0;font-family:var(--f-bulle);font-size:19px;color:var(--papier)}
.legendes .manque,.liens .manque{color:var(--texte-2);font-size:13px;font-style:italic}
#legendesTitre{color:var(--acide)}
.liens{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.liens li{font-family:var(--f-bulle);font-size:19px;line-height:1.15;color:var(--papier)}
.liens li.manque{font-family:var(--f-sans)}
@media (max-width:900px){
  .plan-ville{grid-template-columns:1fr}
  /* le portrait dépasse AU-DESSUS de la boîte (top:-78px dans aube.css) : la boîte ne doit jamais couper ce qui déborde,
     sinon le perso disparaît. C'est la colonne de texte qui défile quand il y a trop de choix. */
  .dlg{max-height:none;overflow:visible}
  .dlg>div:not(.dlg-portrait){max-height:calc(100svh - 230px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;padding-top:6px;margin-top:-6px}
}

/* ===== UX RESSERRÉE : gains visibles, cabine-téléphone, fenêtres plein écran sur mobile ===== */
/* le gain (lettre, objet) : au milieu, au-dessus de tout, même d'une fenêtre ouverte */
.gain{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;padding:20px}
.gain-carte{display:grid;justify-items:center;gap:10px;max-width:min(380px,90vw);padding:20px 24px 18px;background:var(--papier);color:var(--noir);text-align:center;transform:rotate(-2.5deg);box-shadow:0 24px 60px rgba(0,0,0,.75),0 0 0 2px var(--noir);animation:gainArrive .55s cubic-bezier(.2,1.6,.4,1)}
.gain-carte b{font-family:var(--f-display);font-size:26px;line-height:.95;text-transform:uppercase;letter-spacing:-.03em}
.gain-carte .mono{color:var(--orange);font-size:11px;line-height:1.4}
.gain-lettre{display:grid;place-items:center;width:92px;height:106px;background:var(--orange);color:var(--noir);font-family:var(--f-display);font-weight:700;font-size:86px;line-height:1;transform:rotate(-6deg);box-shadow:0 8px 0 var(--noir)}
.gain-picto svg{width:96px;height:96px}
.gain.part .gain-carte{animation:gainPart .45s ease-in forwards}
@keyframes gainArrive{from{opacity:0;scale:.4;rotate:-14deg}}
@keyframes gainPart{to{opacity:0;translate:0 -30px;scale:.9}}
dialog .toast{top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px))}

/* la cabine : le bouton appeler est collé au clavier, comme sur un vrai téléphone */
.clavier{display:grid;gap:10px;align-content:start}
.cab-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
#appeler{flex:1;justify-content:center;font-size:15px;padding:14px 16px}
@media (max-width:900px){
  #dlg-cabine .dlg-img{display:none}
  #dlg-cabine h2{font-size:30px;margin:0 0 8px}
  .cadran{gap:12px}
  .ecran{min-height:0;padding:8px 12px}
  .ecran .num{font-size:28px}
  .touches{gap:6px}
  .touches button{aspect-ratio:auto;height:52px;font-size:24px}
  .poeme{min-height:0;font-size:14px}
}

/* téléphone : les fenêtres prennent tout l'écran, le bouton fermer reste toujours en vue en haut à droite */
@media (max-width:900px){
  dialog{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;padding:54px 16px calc(24px + env(safe-area-inset-bottom,0px));border:0}
  dialog .fermer{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));right:10px;z-index:20;padding:9px 12px;background:var(--nuit-2);border:1px solid var(--ligne);color:var(--texte)}
  dialog .dlg-img{width:calc(100% + 32px);margin:-54px -16px 14px;height:110px}
  dialog > span.mono{display:none}   /* les sous-titres décoratifs des fenêtres : en trop sur un petit écran */
  dialog h2{font-size:32px;margin:0 0 10px}
  .plan-dlg{width:100vw}
}

/* l'intro : ce dont parle la bestiole s'allume */
.montre{animation:montre 1.1s ease-in-out 3}   /* une lueur qui pulse trois fois, puis plus rien : pas de cadre */
@keyframes montre{50%{filter:drop-shadow(0 0 14px rgba(216,255,56,.8)) brightness(1.12);scale:1.04}}
.montre-badges .perso .marque-badge{opacity:.95}
/* la bestiole s'agite quand rien n'avance : elle a peut-être un indice */
.bestiole.sagite img{animation:tourne calc(18s*var(--vit)) linear infinite,sagite 1.1s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(216,255,56,.9))}
@keyframes sagite{0%,100%{translate:0 0}20%{translate:-3px -6px}40%{translate:3px 0}60%{translate:-2px -4px}80%{translate:2px 0}}
.bestiole.sagite::after{content:"?";position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acide);color:var(--noir);font-family:var(--f-display);font-size:16px;animation:clignoteQ 1.2s steps(2) infinite}
@keyframes clignoteQ{50%{opacity:.35}}
#bulleIntro{display:block;margin-top:8px;color:#5c5d55}

/* ===== PUNK : les mots en orange des titres, en lettres découpées façon lettre anonyme de fanzine ===== */
h1 .o .l{padding:.02em .05em .05em;margin:0 .015em;line-height:.95}
h1 .o .mot .l:nth-child(3n+1){background:var(--orange);color:var(--noir)}
h1 .o .mot .l:nth-child(3n+2){background:var(--papier);color:var(--noir)}
h1 .o .mot .l:nth-child(3n){background:var(--noir);color:var(--orange);box-shadow:inset 0 0 0 1px rgba(255,81,0,.55)}
h1 .o .mot .l:nth-child(4n+1){rotate:-4deg}
h1 .o .mot .l:nth-child(4n+2){rotate:3deg;translate:0 -.03em}
h1 .o .mot .l:nth-child(4n+3){rotate:-1.5deg}
h1 .o .mot .l:nth-child(4n){rotate:5deg;translate:0 .02em}

/* ===== MODES SOMBRES FORCÉS ET CONTRASTE ÉLEVÉ ===== */
/* la page dit qu'elle est sombre (aussi dans index.html), pour que les « forcer le mode sombre » des navigateurs la laissent tranquille */
:root{color-scheme:only dark}
/* contraste élevé de Windows : le texte suit les couleurs du système, mais les photos, la trame et les créatures gardent les leurs */
@media (forced-colors:active){
  .tirage svg,.fond,#poussiere,#fondu,.bocal .verre,.riens img,.dlg-portrait img,.objet svg,.carte-zone canvas,.trace img,.marque img,.bestiole img,#chien img{forced-color-adjust:none}
  .tirage,.dlg,.voeu,.trace,.ordo,.objet,.departs{border:1px solid CanvasText}
}

/* =====================================================================
   LA VILLE VIVANTE — le ciel de l'événement, les figurants qui passent,
   les persos de passage, la rue grise en chantier, le fond de l'histoire.
   Tout suit le réglage du réel (--amp, --vit, --rare).
   ===================================================================== */
.ciel{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ciel::before,.ciel::after{content:"";position:absolute;inset:0;opacity:0}
/* orage : un ciel un peu bleu, des éclairs (déclenchés par le moteur) */
.ev-orage .ciel{background:linear-gradient(rgba(70,90,160,calc(.1 * var(--amp))),transparent 55%)}
.ciel.eclair::after{background:#eef3ff;mix-blend-mode:screen;animation:eclair .8s ease-out}
@keyframes eclair{0%{opacity:0}6%{opacity:calc(.4 * var(--amp))}12%{opacity:0}20%{opacity:calc(.25 * var(--amp))}100%{opacity:0}}
/* panne : la ville baisse, les bords tombent dans le noir, ça vacille */
.ev-panne .place .fond{filter:brightness(.45) saturate(.6)}
.ev-panne .ciel::before{opacity:1;background:radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.6));animation:panne calc(11s * var(--rare)) steps(1) infinite}
@keyframes panne{0%,100%{opacity:1}47%{opacity:.75}48%{opacity:1}49%{opacity:.6}50%{opacity:1}}
/* descente : un gyrophare qui balaie les bords, rouge puis bleu */
.ev-descente .ciel::before{background:radial-gradient(ellipse at 0% 0%,rgba(255,40,60,.5),transparent 45%);mix-blend-mode:screen;animation:gyro calc(1.6s * var(--vit)) steps(1) infinite}
.ev-descente .ciel::after{background:radial-gradient(ellipse at 100% 0%,rgba(40,90,255,.55),transparent 45%);mix-blend-mode:screen;animation:gyro calc(1.6s * var(--vit)) steps(1) infinite calc(.8s * var(--vit))}
@keyframes gyro{0%{opacity:calc(.5 * var(--amp))}50%{opacity:0}}
/* fête : des taches de couleur qui tournent */
.ev-fete .ciel::before{opacity:calc(.35 * var(--amp));mix-blend-mode:screen;background:radial-gradient(circle at 20% 30%,rgba(255,60,200,.5),transparent 18%),radial-gradient(circle at 75% 20%,rgba(216,255,56,.45),transparent 16%),radial-gradient(circle at 60% 75%,rgba(60,200,255,.45),transparent 18%),radial-gradient(circle at 30% 80%,rgba(255,81,0,.45),transparent 15%);animation:fete calc(9s * var(--vit)) linear infinite}
@keyframes fete{0%{filter:hue-rotate(0)}50%{transform:translate(2%,-2%)}100%{filter:hue-rotate(360deg)}}
/* manif : des fumigènes qui montent du bas */
.ev-manif .ciel::before{opacity:calc(.45 * var(--amp));mix-blend-mode:screen;background:radial-gradient(ellipse at 25% 105%,rgba(255,81,0,.55),transparent 40%),radial-gradient(ellipse at 80% 110%,rgba(255,60,160,.45),transparent 38%);animation:fumi calc(7s * var(--vit)) ease-in-out infinite alternate}
@keyframes fumi{to{transform:translateY(calc(-4% * var(--amp))) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ciel::before,.ciel::after,.ciel.eclair::after{animation:none}}

/* chantier : de la rubalise en travers des photos */
.rubalise{position:absolute;inset:9px 9px 34px;overflow:hidden;pointer-events:none;z-index:4}
.rubalise span{position:absolute;left:-10%;right:-10%;bottom:16%;transform:rotate(-7deg);background:#ffd400;color:#111;font:700 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;padding:5px 0;box-shadow:0 3px 0 #111,0 -3px 0 #111,0 8px 14px rgba(0,0,0,.5)}

/* les figurants : ils traversent la photo, on peut les toucher */
.passants{position:absolute;inset:9px 9px 34px;overflow:hidden;pointer-events:none;z-index:4}
.passant{position:absolute;left:-30%;bottom:var(--bas,8%);height:var(--h,20%);padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;animation:passe calc(var(--dur,18s) * var(--vit)) linear forwards}
.passant img{display:block;height:100%;width:auto;filter:drop-shadow(0 5px 6px rgba(0,0,0,.65));animation:clopin calc(.7s * var(--vit)) ease-in-out infinite alternate}
.passant.retour{animation-direction:reverse}
.passant.retour img{scale:-1 1}
/* touché : il s'arrête de marcher, mais il continue de danser sur place pendant qu'il parle */
.passant.arrete{animation-play-state:paused}
.passant.arrete img{animation:dansePassant calc(.34s * var(--vit)) ease-in-out infinite alternate}
@keyframes dansePassant{from{translate:0 0;rotate:calc(-5deg * var(--amp))}to{translate:0 calc(-9% * var(--amp));rotate:calc(5deg * var(--amp))}}
.passant:hover img,.passant:focus-visible img{filter:drop-shadow(0 0 10px rgba(255,81,0,.7)) brightness(1.1)}
@keyframes passe{from{left:-30%}to{left:105%}}
@keyframes clopin{from{translate:0 0;rotate:calc(-2deg * var(--amp))}to{translate:0 calc(-5% * var(--amp));rotate:calc(2deg * var(--amp))}}
@media (prefers-reduced-motion:reduce){
  .passant{left:6%;animation:passe 14s linear forwards}
  .passant img{animation:none}
  @keyframes passe{0%{opacity:0}8%,92%{opacity:1}100%{opacity:0}}
}

/* les persos de passage : un sticker dans le panneau du lieu */
.visite{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:6px 14px 6px 6px;border:0;background:var(--papier);color:var(--noir);font:inherit;text-align:left;cursor:pointer;rotate:-2deg;box-shadow:0 10px 24px rgba(0,0,0,.55);animation:visite calc(3.4s * var(--vit)) ease-in-out infinite alternate;transition:rotate .2s,scale .2s}
.visite img{width:56px;height:56px;object-fit:contain}
.visite small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.visite b{display:block;font-size:16px;line-height:1.15}
.visite:hover,.visite:focus-visible{rotate:0deg;scale:1.04}
@keyframes visite{to{translate:0 calc(-4px * var(--amp))}}
@media (prefers-reduced-motion:reduce){.visite{animation:none}}

/* le plan : la nuit en cours, la rue en chantier, les dates pas encore racontées, le fond de l'histoire */
.plan-nuit{margin:-4px 0 10px;color:var(--orange);font-size:12px;letter-spacing:.08em}
.plan-gris.chantier{filter:grayscale(.2) brightness(.95);z-index:3;animation:chantier calc(1.4s * var(--vit)) ease-in-out infinite alternate}
.plan-gris.chantier span{background:#ffd400;color:#111;font-weight:700}
@keyframes chantier{to{rotate:calc(3deg * var(--amp))}}
#chronique li.manque{opacity:.55;font-style:italic}
.plan-secret{margin-top:20px;padding:16px 18px 18px;background:var(--papier);color:var(--noir);rotate:-.6deg;box-shadow:0 14px 34px rgba(0,0,0,.6)}
.plan-secret b{display:block;font-size:20px;margin-bottom:8px}
.plan-secret p{margin:0;white-space:pre-line;font-family:var(--f-bulle,inherit);font-size:20px;line-height:1.35}
@media (max-width:900px){.passant{min-height:64px}.visite img{width:48px;height:48px}}

/* =====================================================================
   LA PÉRIPHÉRIE (09-11) — le wagon, le tunnel des allôs, la porte sur la plage
   ===================================================================== */
/* le compteur en haut ne montre que le quartier où on est : lettres (haute), lac (basse), enquête du 08:19 (périphérie) */
.nobj .sep{display:none}
body[data-ville="haute"] .nobj .nl,body[data-ville="haute"] .nobj .ne,
body[data-ville="basse"] .nobj .nh,body[data-ville="basse"] .nobj .ne,
body[data-ville="periph"] .nobj .nh,body[data-ville="periph"] .nobj .nl{display:none}
.plan-lieu.periph{width:15%;--lw:15%}
@media (max-width:900px){.plan-lieu.periph{width:21%;--lw:21%}}

/* l'humeur du perso quand quelque chose a changé : un petit saut de joie, ou un tremblement ému (selon le réel) */
.dlg.ton-joie .dlg-portrait img{animation:tonJoie calc(.42s * var(--vit)) ease-in-out 4 alternate}
.dlg.ton-emu .dlg-portrait img{animation:tonEmu calc(.18s * var(--vit)) linear 8 alternate}
@keyframes tonJoie{to{translate:0 calc(-10px * var(--amp));rotate:calc(4deg * var(--amp))}}
@keyframes tonEmu{from{rotate:calc(-1.5deg * var(--amp))}to{rotate:calc(1.5deg * var(--amp))}}
@media (prefers-reduced-motion:reduce){.dlg.ton-joie .dlg-portrait img,.dlg.ton-emu .dlg-portrait img{animation:none}}
@media (prefers-reduced-motion:reduce){.passant.arrete img{animation:none}}

/* =====================================================================
   LA FENÊTRE DE DIALOGUE — arrondie, légèrement teintée par le perso, vivante.
   --teinte est posée par moteur.js (contenu.js : AUBE.PERSOS[id].teinte).
   ===================================================================== */
.dlg{--teinte:#d8ff38;border-radius:26px;padding:18px 24px 20px 16px;
  background:var(--papier);background:color-mix(in oklab,var(--papier) 89%,var(--teinte));
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(25,26,23,.1),inset 0 1px 0 rgba(255,255,255,.75),0 0 70px color-mix(in oklab,var(--teinte) 30%,transparent);
  transition:translate .22s ease,opacity .22s ease,background-color .5s,box-shadow .5s}
/* plus de scotch : à la place, une lueur de la teinte qui respire en haut à droite (sous le texte) */
.dlg::before{content:"";position:absolute;inset:0;top:0;right:0;width:auto;height:auto;transform:none;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 90% at 92% -12%,color-mix(in oklab,var(--teinte) 42%,transparent),transparent 62%);opacity:.75}
.anim .dlg::before{animation:lueurDlg calc(4.5s * var(--vit)) ease-in-out infinite}
@keyframes lueurDlg{50%{opacity:calc(.75 - .35 * var(--amp))}}
/* derrière le portrait, un halo de la teinte */
.dlg-portrait::before{content:"";position:absolute;left:0;bottom:-6px;width:180px;height:180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in oklab,var(--teinte) 50%,transparent),transparent 68%)}
.anim .dlg-portrait::before{animation:haloDlg calc(3.2s * var(--vit)) ease-in-out infinite}
@keyframes haloDlg{50%{scale:calc(1 + .08 * var(--amp));opacity:.7}}
/* le nom, le rôle en pastille teintée, et trois points qui battent pendant que le perso parle */
.dlg-role{padding:3px 11px;border-radius:999px;background:color-mix(in oklab,var(--teinte) 38%,transparent);color:var(--noir)}
.dlg-tete::after{content:"";display:inline-block;width:26px;height:8px;align-self:center;opacity:.8;
  background:radial-gradient(circle,var(--noir) 2.2px,transparent 2.8px) 0 50%/9px 8px repeat-x;animation:parleDlg calc(.9s * var(--vit)) steps(3) infinite}
.dlg.muet .dlg-tete::after{opacity:0;animation:none;transition:opacity .3s}
@keyframes parleDlg{0%{clip-path:inset(0 66% 0 0)}33%{clip-path:inset(0 33% 0 0)}66%{clip-path:inset(0 0 0 0)}}
/* les choix : des pastilles arrondies qui glissent au survol */
.dlg-choix{gap:7px}
.dlg-choix button{border:1px solid rgba(25,26,23,.14);border-radius:15px;padding:8px 14px;align-items:center;
  background:rgba(255,255,255,.4);background:color-mix(in oklab,#fff 42%,transparent);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1),background .18s,color .18s,border-color .18s,box-shadow .18s}
.dlg-choix button::before{display:inline-grid;place-items:center;flex:0 0 auto;min-width:24px;height:24px;border-radius:50%;font-size:14px;line-height:1;
  background:color-mix(in oklab,var(--teinte) 50%,var(--papier));color:var(--noir)}
.dlg-choix button:hover,.dlg-choix button:focus-visible{background:var(--noir);color:var(--papier);border-color:var(--noir);transform:translateX(5px);box-shadow:0 10px 22px rgba(0,0,0,.2)}
.dlg-choix button:hover::before,.dlg-choix button:focus-visible::before{background:var(--teinte);color:var(--noir)}
/* « partir » en pastille */
.dlg-fermer{top:12px;right:14px;padding:5px 12px;border-radius:999px;background:rgba(25,26,23,.07);transition:background .15s,color .15s}
.dlg-fermer:hover,.dlg-fermer:focus-visible{background:var(--noir);color:var(--papier)}
@media (max-width:900px){
  .dlg{border-radius:22px;padding:14px 14px 16px}
  .dlg-portrait::before{width:120px;height:120px;left:auto;right:-6px;bottom:-10px}
  .dlg-choix button{border-radius:13px;padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){.dlg::before,.dlg-portrait::before,.dlg-tete::after{animation:none}}
@media (forced-colors:active){.dlg::before,.dlg-portrait::before,.dlg-tete::after{display:none}}

/* =====================================================================
   PLUS JOYEUX — les bulles des persos, les confettis, la fête des liens
   ===================================================================== */
/* les piques : une bulle de BD au-dessus du perso, teintée de sa couleur */
.pique{--teinte:#d8ff38;position:absolute;z-index:6;max-width:min(220px,62%);padding:7px 13px 8px;border:0;border-radius:16px;cursor:pointer;
  background:var(--papier);background:color-mix(in oklab,var(--papier) 84%,var(--teinte));color:var(--noir);
  font-family:var(--f-bulle);font-size:19px;line-height:1.08;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px rgba(25,26,23,.12);
  translate:-50% -100%;transform-origin:50% 100%;animation:piquePop .45s cubic-bezier(.2,1.6,.4,1)}
.pique::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;translate:-50% 0;rotate:45deg;background:inherit;border-radius:0 0 4px 0;z-index:-1}
.anim .pique{animation:piquePop .45s cubic-bezier(.2,1.6,.4,1),piqueFlotte calc(1.6s * var(--vit)) ease-in-out .45s infinite alternate}
.pique.part{opacity:0;scale:.6;transition:opacity .4s,scale .4s}
.pique:hover{filter:brightness(1.06)}
@keyframes piquePop{from{scale:.2;rotate:-8deg;opacity:0}}
@keyframes piqueFlotte{to{rotate:calc(2deg * var(--amp));margin-top:calc(-3px * var(--amp))}}
@media (max-width:900px){.pique{font-size:16px;padding:6px 10px 7px;max-width:58%}}
/* les confettis */
.confetti{position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w) * .6);background:var(--c);border-radius:1px;pointer-events:none;
  animation:confetti var(--t) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes confetti{from{transform:translate(-50%,-50%) rotate(0)}70%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 170px)) rotate(var(--r));opacity:0}}
/* la carte d'un lien recousu : deux portraits et un cœur qui bat */
.gain-duo{display:flex;align-items:center;gap:6px}
.gain-duo img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.gain-duo img:first-child{rotate:-8deg;animation:duoG .9s cubic-bezier(.2,1.5,.4,1)}
.gain-duo img:last-child{rotate:8deg;animation:duoD .9s cubic-bezier(.2,1.5,.4,1)}
.gain-duo i{font-style:normal;font-size:34px;color:var(--rose);animation:coeurBat .7s ease-in-out infinite}
@keyframes duoG{from{translate:-60px 0;opacity:0}}
@keyframes duoD{from{translate:60px 0;opacity:0}}
@keyframes coeurBat{50%{scale:1.3}}
@media (prefers-reduced-motion:reduce){.pique,.anim .pique,.gain-duo img,.gain-duo i{animation:none}}

/* la piste de l'enquête, dans la poche */
.poche-enquete{display:grid;gap:4px;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(216,255,56,.08);border:1px solid rgba(216,255,56,.3);font-size:15px;line-height:1.35}
.poche-enquete b{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acide)}
.poche-enquete.finie{background:rgba(241,242,236,.05);border-color:var(--ligne);color:var(--texte-2)}

/* la vie de nuit, par-dessus les vraies photos de nuit (lac, plage) : fenêtres qui clignotent, étoiles qui scintillent,
   chemin de lune qui frémit, aube qui respire dans la porte. Tout suit le réglage du réel. */
.fenetre-scint{opacity:0;animation:fenetreScint 7s steps(1) infinite}
@keyframes fenetreScint{0%,62%{opacity:0}63%{opacity:calc(.35 + .5 * var(--amp))}64%{opacity:.15}66%,92%{opacity:calc(.35 + .5 * var(--amp))}93%,100%{opacity:0}}
.etoile-scint{opacity:.15;animation:etoileScint 3s ease-in-out infinite}
@keyframes etoileScint{50%{opacity:calc(.25 + .55 * var(--amp))}}
.paillette{opacity:0;animation:paillette calc(2.2s * var(--vit)) ease-in-out infinite}
@keyframes paillette{0%,100%{opacity:0;translate:0 0}45%{opacity:calc(.3 + .55 * var(--amp));translate:calc(3px * var(--amp)) 0}}
.aube-porte{opacity:.12;animation:aubePorte calc(5s * var(--vit)) ease-in-out infinite alternate}
@keyframes aubePorte{to{opacity:calc(.14 + .2 * var(--amp))}}

/* la pastille de l'événement de la nuit, sous le surtitre de chaque lieu (et dans la poche) */
.nuit-pill{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:4px 12px 4px 10px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--acide);color:var(--noir);box-shadow:0 6px 16px rgba(0,0,0,.35)}
button.nuit-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:nuitPoint 1.4s ease-in-out infinite}
@keyframes nuitPoint{50%{opacity:.25}}
.nuit-pill.ev-manif{background:var(--orange)}
.nuit-pill.ev-descente{background:linear-gradient(90deg,#ff2a4f,#2a5bff);color:#fff}
.nuit-pill.ev-panne{background:#2b2c27;color:var(--acide);box-shadow:inset 0 0 0 1px rgba(216,255,56,.4)}
.nuit-pill.ev-orage{background:var(--violet);color:#fff}
.nuit-pill.ev-fete{background:var(--rose)}
.nuit-pill.ev-chantier{background:#ffd400;color:#111}
.nuit-pill.pas-vecue{background:rgba(241,242,236,.08);color:var(--texte-2);box-shadow:none}
.poche-nuits{display:grid;gap:8px;margin:12px 0 0;padding:12px 14px;border-radius:14px;background:rgba(241,242,236,.04);border:1px solid var(--ligne)}
.poche-nuits b{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acide)}
.poche-nuits .nuits{display:flex;flex-wrap:wrap;gap:6px}
.poche-nuits .nuit-pill{cursor:default}
.poche-nuits small{color:var(--texte-2);font-size:13px;line-height:1.35}
@media (prefers-reduced-motion:reduce){button.nuit-pill::before,.fenetre-scint,.etoile-scint,.paillette,.aube-porte{animation:none}.fenetre-scint,.paillette{opacity:0}}

/* =====================================================================
   LES ÉVÉNEMENTS DANS LES PHOTOS — posés par moteur.js (METEO) dans chaque tirage.
   ===================================================================== */
.meteo{position:absolute;inset:9px 9px 34px;overflow:hidden;pointer-events:none;z-index:3;container-type:size}
/* orage : deux rideaux de pluie et des éclairs dessinés */
.pluie{position:absolute;inset:-12% -22%;opacity:calc(.22 + .3 * var(--amp));
  background:repeating-linear-gradient(104deg,transparent 0 11px,rgba(214,226,255,.6) 11px 12px,transparent 12px 23px);
  -webkit-mask:repeating-linear-gradient(to bottom,#000 0 15px,transparent 15px 44px);mask:repeating-linear-gradient(to bottom,#000 0 15px,transparent 15px 44px);
  animation:pluie calc(.5s * var(--vit)) linear infinite}
.pluie.p2{opacity:calc(.12 + .2 * var(--amp));filter:blur(.7px);-webkit-mask-size:100% 70px;mask-size:100% 70px;background-size:31px 100%;animation-name:pluie2;animation-duration:calc(.85s * var(--vit))}
@keyframes pluie{to{-webkit-mask-position:0 44px;mask-position:0 44px}}
@keyframes pluie2{to{-webkit-mask-position:0 70px;mask-position:0 70px}}
.ev-orage .meteo{background:linear-gradient(rgba(40,50,90,calc(.12 + .1 * var(--amp))),transparent 70%)}
.foudre{position:absolute;inset:0;width:100%;height:100%;animation:foudre .8s ease-out forwards}
.foudre polyline{fill:none;stroke:#f5f7ff;stroke-width:2.4;stroke-linejoin:bevel;filter:drop-shadow(0 0 5px #c9d4ff) drop-shadow(0 0 14px #8ea4ff)}
.foudre .branche polyline{stroke-width:1.4;opacity:.8}
@keyframes foudre{0%{opacity:0}4%{opacity:1}14%{opacity:.15}22%{opacity:1}100%{opacity:0}}
/* panne : la photo s'éteint (la lampe, elle, éclaire toujours), et ça essaie de se rallumer */
.ev-panne .tirage .tramee{filter:brightness(.24) saturate(.5);animation:panneEssai calc(13s * var(--rare)) steps(1) infinite}
@keyframes panneEssai{0%,70%,74%,100%{filter:brightness(.24) saturate(.5)}71%{filter:brightness(.65) saturate(.85)}72%{filter:brightness(.3) saturate(.5)}73%{filter:brightness(.55) saturate(.8)}}
.ev-panne .fenetre-scint{display:none}
/* descente : deux torches qui balaient la scène */
.torche-flic{position:absolute;bottom:-6%;width:40%;height:122%;transform-origin:50% 100%;mix-blend-mode:screen;
  background:linear-gradient(to top,rgba(236,243,255,.55),rgba(236,243,255,.10) 70%,transparent);clip-path:polygon(44% 100%,56% 100%,100% 0,0 0);
  opacity:calc(.28 + .32 * var(--amp));animation:balaye calc(6.5s * var(--vit)) ease-in-out infinite alternate}
.torche-flic.t1{left:0}
.torche-flic.t2{right:0;animation-delay:calc(-3.2s * var(--vit));animation-duration:calc(8s * var(--vit))}
@keyframes balaye{from{rotate:-28deg}to{rotate:24deg}}
/* manif : des fumigènes et un cortège de pancartes qui traverse la photo */
.meteo.ev-manif::before{content:"";position:absolute;inset:auto 0 0 0;height:48%;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 25% 100%,rgba(255,81,0,.42),transparent 60%),radial-gradient(ellipse at 78% 100%,rgba(255,60,160,.36),transparent 55%);animation:fumi calc(7s * var(--vit)) ease-in-out infinite alternate}
.cortege{position:absolute;bottom:2%;left:0;display:flex;gap:26px;align-items:flex-end;white-space:nowrap;animation:cortege calc(46s * var(--vit)) linear infinite}
@keyframes cortege{from{translate:100cqw 0}to{translate:-100% 0}}
.pancarte{position:relative;display:block;margin-bottom:16px;padding:4px 7px;background:var(--papier);color:var(--noir);border:2px solid var(--noir);
  font:700 11px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;animation:pancarte calc(.9s * var(--vit)) ease-in-out infinite alternate}
.pancarte::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:16px;margin-left:-1.5px;background:#5a3a1a}
.pancarte:nth-child(3n+1){background:var(--orange)}
.pancarte:nth-child(3n+2){background:var(--acide)}
@keyframes pancarte{from{translate:0 0;rotate:calc(-4deg * var(--amp))}to{translate:0 calc(-5px * var(--amp));rotate:calc(4deg * var(--amp))}}
/* fête : une guirlande d'ampoules qui clignote, des spots de couleur qui tournent */
.guirlande{position:absolute;top:0;left:0;width:100%;aspect-ratio:100/24;filter:drop-shadow(0 0 3px rgba(255,255,255,.5))}
.ampoule{animation:ampoule calc(.9s * var(--vit)) steps(1) infinite}
.ampoule.a1{animation-delay:calc(-.45s * var(--vit))}
@keyframes ampoule{50%{opacity:.25}}
.spot{position:absolute;width:44%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;filter:blur(10px);opacity:calc(.2 + .28 * var(--amp));animation:spot calc(7s * var(--vit)) ease-in-out infinite alternate}
.spot.s1{left:-6%;top:12%;background:radial-gradient(circle,rgba(255,95,174,.9),transparent 65%)}
.spot.s2{left:34%;top:38%;background:radial-gradient(circle,rgba(63,230,200,.85),transparent 65%);animation-delay:calc(-2.5s * var(--vit))}
.spot.s3{right:-8%;top:4%;background:radial-gradient(circle,rgba(216,255,56,.8),transparent 65%);animation-delay:calc(-4.5s * var(--vit))}
@keyframes spot{0%{translate:0 0}50%{translate:30% 18%}100%{translate:-12% 34%}}
/* chantier : le panneau du promoteur, à côté de la rubalise */
.panneau-chantier{position:absolute;z-index:4;top:5%;right:5%;max-width:48%;padding:6px 8px;background:#f1f2ec;color:#111;border:3px solid #111;
  box-shadow:inset 0 0 0 2px #ffd400,0 8px 18px rgba(0,0,0,.45);font:10px/1.25 var(--f-mono);rotate:3deg;pointer-events:none}
.panneau-chantier b{display:block;margin-bottom:3px;font:700 12px/1 var(--f-display)}
.panneau-chantier i{color:#b00}
@media (max-width:900px){.pancarte{font-size:9px;padding:3px 5px}.panneau-chantier{font-size:8.5px}.panneau-chantier b{font-size:10px}}
@media (prefers-reduced-motion:reduce){.pluie,.torche-flic,.cortege,.pancarte,.ampoule,.spot,.ev-panne .tirage .tramee{animation:none}.cortege{translate:6% 0}}

/* =====================================================================
   LA NUIT QUI AVANCE : l'horloge en haut, les cartes des heures, le ciel qui pâlit de 3 h à 6 h (--aube, posé par
   moteur.js), la porte de la plage qui appelle quand l'aube attend, les persos qui réagissent à la lampe.
   ===================================================================== */
body{--aube:0}
.horloge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--ligne);color:var(--papier);white-space:nowrap;font-size:13px}
.horloge .ic{color:var(--acide);font-size:14px;letter-spacing:0}
.horloge:hover{border-color:var(--acide);color:var(--acide)}
.horloge.neuf{animation:bosse .6s cubic-bezier(.2,1.6,.4,1)}
.aube-prete .horloge{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 18px rgba(255,81,0,.45)}
.aube-prete .horloge .ic{color:#ffb070}
.anim.aube-prete .horloge{animation:horlogeAube calc(2.6s * var(--vit)) ease-in-out infinite alternate}
@keyframes horlogeAube{to{box-shadow:0 0 0 1px var(--orange),0 0 30px rgba(255,140,60,.7)}}

/* la carte de l'heure pile, en haut à droite, sous l'horloge : compacte, pour mordre le moins possible sur les photos */
.heure-carte{position:fixed;z-index:70;top:calc(74px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;max-width:min(300px,calc(100vw - 32px));
  padding:9px 14px 10px;border:0;border-radius:14px;text-align:left;cursor:pointer;background:rgba(20,21,17,.93);color:var(--papier);
  box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(216,255,56,.35);animation:heureArrive .6s cubic-bezier(.2,1.5,.4,1)}
.heure-carte b{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:.9;letter-spacing:-.03em;color:var(--acide)}
.heure-carte span{font-family:var(--f-mono);font-size:11.5px;line-height:1.4;letter-spacing:.03em;color:var(--texte)}
.heure-carte.part{animation:heurePart .5s ease-in forwards}
@keyframes heureArrive{from{opacity:0;translate:30px -10px;rotate:3deg}}
@keyframes heurePart{to{opacity:0;translate:30px -6px}}
.gain-heure{display:grid;place-items:center;padding:6px 14px;background:var(--noir);color:#ffb070;font-family:var(--f-display);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.03em;transform:rotate(-4deg);box-shadow:0 8px 0 var(--orange)}
/* téléphone : l'heure sans son icône, le réel réduit à la sienne, pour que l'en-tête tienne sans toucher au logo */
@media (max-width:480px){.horloge .ic{display:none}.horloge{padding:6px 7px}#reelBtn .nom{display:none}}
/* tout petit écran : le son réduit à son icône, et les quatre lettres s'effacent une fois toutes trouvées (elles restent dans la poche) */
@media (max-width:380px){.top-droite{gap:4px}.horloge{padding:6px 5px;font-size:11px}#son .nom{display:none}.poche ol:not(:has(li:not(.ok))){display:none}}
@media (max-width:900px){
  /* téléphone : en bas, au-dessus de la barre des lieux et à gauche de la bestiole, plus jamais sur la photo */
  .heure-carte{top:auto;bottom:calc(62px + env(safe-area-inset-bottom,0px));left:12px;right:86px;max-width:none}
  .toast{top:calc(60px + env(safe-area-inset-top,0px))}   /* sous l'en-tête, plus par-dessus */
  .horloge{padding:6px 8px;font-size:12px}
}

/* le ciel pâlit : un dégradé d'aube posé sur le fond flouté de chaque lieu, et un reflet chaud sur les photos */
.place::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--aube);transition:opacity 4s ease;mix-blend-mode:screen;
  background:linear-gradient(to top,rgba(255,140,70,.62),rgba(255,95,174,.36) 34%,rgba(130,95,235,.22) 64%,rgba(60,75,170,.14))}
.tirage::after{content:"";position:absolute;inset:9px 9px 34px;z-index:2;pointer-events:none;opacity:calc(var(--aube) * .85);transition:opacity 4s ease;mix-blend-mode:screen;
  background:linear-gradient(to bottom,rgba(255,160,120,.34),rgba(255,95,174,.14) 34%,transparent 62%)}

/* l'aube attend : la porte de la plage respire plus fort, la note s'allume */
.aube-prete .aube-porte{opacity:.5;animation:aubeAppelle calc(2.4s * var(--vit)) ease-in-out infinite alternate}
@keyframes aubeAppelle{from{opacity:.3}to{opacity:.9}}
.aube-prete #plageNote{color:#ffb070;opacity:1}

/* la lampe s'attarde sur quelqu'un : il réagit */
.eh{font-family:var(--f-display);font-weight:700;font-size:58px;fill:var(--acide);stroke:#191a17;stroke-width:9px;stroke-linejoin:round;paint-order:stroke;pointer-events:none;
  transform-box:fill-box;transform-origin:50% 100%;animation:eh 1.3s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes eh{0%{opacity:0;transform:translateY(16px) scale(.5)}18%{opacity:1;transform:translateY(0) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}

/* la piste (bulle de la bestiole, poche) et les gens de la nuit */
.bulle-aller{display:flex;width:max-content;max-width:100%;margin:10px 0 2px;padding:8px 12px;font-size:11px}
.poche-nuit{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(216,255,56,.12),rgba(157,107,255,.1));border:1px solid rgba(216,255,56,.35)}
.poche-nuit b{color:var(--acide)}
.poche-nuit p{margin:0;font-size:15px;line-height:1.4}
.poche-nuit .rang{margin-top:4px}
.poche-nuit.aube{background:linear-gradient(135deg,rgba(255,176,112,.18),rgba(255,95,174,.14));border-color:rgba(255,176,112,.5)}
.poche-nuit.aube b{color:#ffb070}
.gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.gen{display:grid;justify-items:center;align-content:start;gap:5px;margin:0;padding:8px 6px 8px;border:0;border-radius:12px;background:rgba(241,242,236,.05);color:var(--texte);text-align:center;font:inherit}
button.gen{cursor:pointer;transition:background .2s,translate .2s}
button.gen:hover{background:rgba(216,255,56,.12);translate:0 -2px}
.gen img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.gen span{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;line-height:1.25}
.gen.ombre img{filter:brightness(0) drop-shadow(0 0 1px rgba(241,242,236,.6));opacity:.6}
.gen.ombre span{color:var(--texte-2);font-family:var(--f-sans);text-transform:none;letter-spacing:0;font-size:11.5px}

/* =====================================================================
   L'AUBE : le final sur la plage (moteur.js : finale). La lumière part de la porte (43,7 % · 60,4 % de la photo)
   et grandit avec chaque personne qui arrive (--p, de 0 à 1).
   ===================================================================== */
.finale{--p:0;position:fixed;inset:0;z-index:90;overflow:hidden;background:#05060c;color:var(--papier);cursor:pointer;animation:finArrive 1.6s ease both}
.finale.part{animation:finPart .9s ease forwards}
@keyframes finArrive{from{opacity:0}}
@keyframes finPart{to{opacity:0}}
.fin-plage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:43.7% 60.4%;filter:brightness(calc(.5 + var(--p) * .4)) saturate(calc(.85 + var(--p) * .45));transition:filter 2.6s ease}
.fin-ciel{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:calc(.1 + var(--p) * .9);transition:opacity 2.6s ease;
  background:linear-gradient(to top,rgba(255,150,80,.5),rgba(255,95,174,.32) 32%,rgba(130,90,230,.22) 62%,rgba(30,40,110,.12))}
.fin-lumiere{position:absolute;left:43.7%;top:60.4%;width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,240,210,.95),rgba(255,190,120,.6) 30%,rgba(255,120,80,.18) 55%,transparent 70%);
  transform:scale(calc(.25 + var(--p) * 1.4));opacity:calc(.45 + var(--p) * .55);transition:transform 2.8s cubic-bezier(.3,.7,.3,1),opacity 2.8s}
.finale.ouverte .fin-lumiere{transform:scale(4.2);opacity:1;transition-duration:5s}
.finale.ouverte .fin-plage{filter:brightness(1.05) saturate(1.35)}
.fin-gens{position:absolute;left:0;right:0;bottom:calc(1vh + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;align-items:flex-end;padding:0 3vw;pointer-events:none}
.fin-gens img{flex:0 1 auto;min-width:0;width:auto;height:clamp(84px,23vh,230px);max-width:15vw;object-fit:contain;margin:0 -1vw;rotate:var(--r,0deg);
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.6));animation:finGens .7s cubic-bezier(.2,1.6,.4,1) both,finBob calc(1.2s * var(--vit)) steps(2) .7s infinite alternate;transition:translate .35s,scale .35s,filter .35s}
.fin-gens img.parle{translate:0 -16px;scale:1.14;z-index:1;filter:drop-shadow(0 0 16px rgba(255,220,160,.95)) drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.fin-gens img.fin-rien{height:clamp(30px,7vh,64px);margin:0 .3vw}
@keyframes finGens{from{opacity:0;transform:translateY(70%) scale(.5)}}
@keyframes finBob{to{transform:translateY(-5px)}}
.fin-bulle{position:absolute;left:50%;top:calc(8vh + env(safe-area-inset-top,0px));width:min(660px,calc(100vw - 32px));translate:-50% 0;rotate:-1deg;padding:16px 22px 18px;border-radius:20px;
  background:rgba(241,242,236,.95);color:var(--noir);box-shadow:0 20px 60px rgba(0,0,0,.5);font-family:var(--f-bulle);font-size:clamp(18px,2.1vw,24px);line-height:1.35;transition:opacity .4s}
.fin-bulle b{display:block;margin-bottom:6px;color:var(--orange)}
.fin-bulle p{margin:0}
.fin-bulle.vide{opacity:0}
.fin-bulle.pop{animation:finPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes finPop{from{opacity:.4;scale:.94;rotate:1deg}}
.fin-carte{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-1.5deg;width:min(560px,calc(100vw - 28px));max-height:calc(100svh - 40px);overflow:auto;padding:22px 24px 20px;cursor:auto;
  background:var(--papier);color:var(--noir);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 2px var(--noir);animation:finCarte .7s cubic-bezier(.2,1.5,.4,1)}
.fin-heure{color:var(--orange)}
.fin-carte h2{font-size:clamp(70px,13vw,128px);line-height:.8;color:var(--orange);margin:10px 0 6px}
.fin-sous{margin:0 0 12px;color:var(--noir)}
.fin-recit{list-style:none;margin:0 0 16px;padding:12px 0 0;border-top:1px dashed #9a9b90;display:grid;gap:7px;font-family:var(--f-mono);font-size:13px;line-height:1.4}
.fin-recit li{position:relative;padding-left:20px}
.fin-recit li::before{content:"✶";position:absolute;left:0;color:var(--orange)}
.fin-carte .lien{color:#5c5d55}
@keyframes finCarte{from{opacity:0;scale:.8;rotate:4deg}}
.fin-passer{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));padding:8px 12px;border:1px solid rgba(241,242,236,.3);border-radius:999px;background:rgba(10,10,20,.55);color:var(--papier)}
.fin-passer:hover{border-color:var(--acide);color:var(--acide)}
body.en-finale .bestiole,body.en-finale #chien,body.en-finale .heure-carte{visibility:hidden}
@media (max-width:700px){
  .fin-gens img{max-width:22vw;height:clamp(70px,16vh,150px);margin:0 -2.4vw}
  .fin-bulle{top:calc(64px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion:reduce){
  .finale,.fin-gens img,.fin-bulle.pop,.fin-carte,.heure-carte,.eh,.anim.aube-prete .horloge,.aube-prete .aube-porte{animation:none}
  .fin-lumiere,.fin-plage,.fin-ciel,.place::after,.tirage::after{transition:none}
}
/* =====================================================================
   ENCORE MIEUX : la piste qui se voit sans ouvrir la poche, les gens croisés cette nuit, les étoiles qui
   s'éteignent à l'aube, et dans le final, le soleil qui se lève dans l'ouverture de la porte et les oiseaux.
   ===================================================================== */
/* un point sur le bouton du lieu où mène la piste (ou sur celui du quartier), et sur le plan */
.lieux button{position:relative}
.lieux button.piste::after{content:"";position:absolute;top:5px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 2px var(--nuit),0 0 10px rgba(255,81,0,.85);animation:pistePoint calc(1.6s * var(--vit)) ease-in-out infinite}
@keyframes pistePoint{50%{scale:1.45;opacity:.65}}
.plan-lieu.piste{outline:3px dashed var(--orange);outline-offset:3px;animation:planPiste calc(1.6s * var(--vit)) steps(2) infinite}
@keyframes planPiste{50%{outline-color:var(--acide)}}
/* les gens de la nuit : une petite lune sur ceux qu'on a déjà croisés cette nuit (dès la 2e nuit) */
.gen{position:relative}
.gen.cette-nuit{box-shadow:inset 0 0 0 1px rgba(216,255,56,.5)}
.gen.cette-nuit::after{content:"☾";position:absolute;top:4px;right:7px;color:var(--acide);font-size:13px;line-height:1}
/* les étoiles des photos de nuit s'éteignent quand l'aube monte */
.etoile-scint{opacity:calc(.15 * (1 - var(--aube) * .85))}
@keyframes etoileScint{50%{opacity:calc((.25 + .55 * var(--amp)) * (1 - var(--aube) * .85))}}

/* le final : le soleil (celui du mot « aube » tapé au clavier) se lève dans le ciel de l'ouverture, au-dessus de la mer.
   moteur.js découpe .fin-porte à la forme de l'ouverture (placerPorte) et pose --hx, --hy (l'horizon) et --s (l'échelle). */
.fin-porte{position:absolute;inset:0;pointer-events:none}
.fin-soleil{position:absolute;left:var(--hx,44%);top:var(--hy,56%);width:calc(118px * var(--s,1));height:auto;translate:-50% calc(8% - var(--p) * 62%);
  filter:drop-shadow(0 0 calc(18px * var(--s,1)) rgba(255,214,120,.95));transition:translate 3s cubic-bezier(.3,.7,.3,1)}
.finale.ouverte .fin-soleil{translate:-50% -112%;transition-duration:7s}
/* une volée d'oiseaux traverse le ciel quand la porte s'ouvre */
.fin-oiseaux{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fin-oiseaux i{position:absolute;left:0;top:var(--y);width:calc(30px * var(--z));height:calc(14px * var(--z));opacity:0;
  background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'><path d='M1 8 Q7 1 13 8 Q19 1 25 8' fill='none' stroke='%23241a2e' stroke-width='2.4' stroke-linecap='round'/></svg>")}
.finale.ouverte .fin-oiseaux i{animation:oiseau var(--t) linear var(--d) forwards,bat .32s steps(2) var(--d) infinite}
@keyframes oiseau{0%{opacity:0;transform:translate(-6vw,0)}6%{opacity:.9}90%{opacity:.9}100%{opacity:0;transform:translate(106vw,-7vh)}}
@keyframes bat{50%{scale:1 .35}}
/* la carte : le récit de la nuit, en phrases, puis le bilan de la poche en petit */
.fin-recit-titre{display:block;margin:4px 0 0;padding-top:12px;border-top:1px dashed #9a9b90;color:var(--orange)}
.fin-recit{border-top:0;padding-top:8px;font-family:var(--f-sans);font-size:15px;line-height:1.35;gap:8px}
.fin-bilan{margin:0 0 14px;color:#5c5d55;font-size:10.5px;line-height:1.5;letter-spacing:.05em}
@media (max-width:700px){.fin-recit{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .lieux button.piste::after,.plan-lieu.piste{animation:none}
  .fin-oiseaux{display:none}
  .fin-soleil{transition:none}
}/* la carte de fin tient dans l'écran : le récit défile s'il est long, le titre, le bilan et les boutons restent visibles */
.fin-carte{display:flex;flex-direction:column;width:min(620px,calc(100vw - 28px));overflow:hidden}
.fin-carte h2{font-size:clamp(56px,9vw,108px)}
.fin-recit{flex:1 1 auto;min-height:0;overflow:auto;margin-bottom:10px;padding-right:6px;scrollbar-width:thin}
.fin-carte .rang,.fin-bilan,.fin-recit-titre{flex:none}
@media (max-height:760px){.fin-carte{padding:16px 20px 16px}.fin-carte h2{font-size:clamp(46px,7vw,80px)}}
/* =====================================================================
   LE MYSTÈRE DES NUITS : les événements, moins invasifs et plus étranges. Plus rien ne clignote sur tout l'écran,
   rien ne passe devant les textes. Un voile lent derrière chaque lieu, des effets pâles dans les photos, des présages
   qu'on ne lit qu'à la lampe, un murmure en arrivant, des ombres qui passent (moteur.js : LE MYSTÈRE DES NUITS).
   ===================================================================== */
/* les anciens effets plein écran (gyrophares, flash d'orage, spots, fumigènes, coupures) sont éteints */
.ev-orage .ciel{background:none}
.ev-descente .ciel::before,.ev-descente .ciel::after,.ev-fete .ciel::before,.ev-manif .ciel::before,.ev-panne .ciel::before{animation:none;opacity:0}
.ciel.eclair::after{animation:none;opacity:0}

/* le voile de la nuit : derrière les textes et les photos, sur le fond du lieu, qui respire très lentement */
.ev-orage .place::before,.ev-panne .place::before,.ev-fete .place::before,.ev-manif .place::before,.ev-descente .place::before,.ev-chantier .place::before{
  content:"";position:absolute;inset:-4%;z-index:1;pointer-events:none;animation:voile calc(26s * var(--vit)) ease-in-out infinite alternate}
.ev-orage .place::before{mix-blend-mode:screen;background:radial-gradient(110% 65% at 30% -12%,rgba(110,130,220,.24),transparent 65%),radial-gradient(80% 55% at 92% -4%,rgba(150,120,230,.15),transparent 60%)}
.ev-panne .place::before{mix-blend-mode:multiply;background:radial-gradient(80% 72% at 62% 48%,rgba(255,255,255,0) 30%,rgba(0,0,10,.5))}
.ev-fete .place::before{mix-blend-mode:screen;background:radial-gradient(36% 32% at 18% 82%,rgba(255,95,174,.15),transparent 70%),radial-gradient(32% 30% at 86% 18%,rgba(63,230,200,.13),transparent 70%),radial-gradient(28% 28% at 58% 58%,rgba(216,255,56,.07),transparent 70%)}
.ev-manif .place::before{mix-blend-mode:screen;background:radial-gradient(110% 55% at 50% 112%,rgba(255,110,40,.19),transparent 70%),radial-gradient(55% 40% at 12% 104%,rgba(255,60,140,.11),transparent 70%)}
.ev-descente .place::before{mix-blend-mode:screen;background:radial-gradient(55% 45% at 0% 104%,rgba(255,50,70,.12),transparent 70%),radial-gradient(55% 45% at 100% 104%,rgba(50,90,255,.12),transparent 70%);animation:voileGyro calc(11s * var(--vit)) ease-in-out infinite alternate}
.ev-chantier .place::before{mix-blend-mode:screen;background:linear-gradient(to top,rgba(255,212,0,.06),transparent 40%),radial-gradient(100% 80% at 50% 50%,transparent 55%,rgba(60,45,15,.22))}
@keyframes voile{from{opacity:.65;transform:translate3d(-1.2%,.6%,0) scale(1.01)}to{opacity:1;transform:translate3d(1.2%,-.8%,0) scale(1.05)}}
@keyframes voileGyro{from{opacity:.45}to{opacity:1}}

/* orage : une pluie fine qui s'efface vers le bas, une photo qui s'éclaire à peine, des éclairs rares et pâles */
.meteo.ev-orage{background:none;-webkit-mask-image:linear-gradient(#000 25%,transparent 92%);mask-image:linear-gradient(#000 25%,transparent 92%)}
.meteo.ev-orage .pluie{opacity:calc(.07 + .1 * var(--amp));animation-duration:calc(.8s * var(--vit))}
.meteo.ev-orage .pluie.p2{opacity:calc(.04 + .07 * var(--amp));animation-duration:calc(1.3s * var(--vit))}
.tirage,.tirage:not(.aube){transition:opacity 1.6s ease,filter 1s ease}
.tirage.eclaire{filter:brightness(1.16) saturate(.92);transition:opacity 1.6s ease,filter .07s}
.foudre polyline{stroke-width:1.1;opacity:.55;filter:drop-shadow(0 0 4px #c9d4ff)}
.foudre .branche polyline{opacity:.35}
/* panne : la photo baisse, sans disparaître ; de loin en loin, elle hésite à revenir */
.ev-panne .tirage .tramee{filter:brightness(.44) saturate(.62);animation:panneDoux calc(30s * var(--rare)) ease-in-out infinite}
@keyframes panneDoux{0%,86%,100%{filter:brightness(.44) saturate(.62)}90%{filter:brightness(.62) saturate(.8)}93%{filter:brightness(.47) saturate(.64)}95%{filter:brightness(.58) saturate(.76)}}
/* descente : une seule torche, au loin, qui balaie lentement */
.meteo.ev-descente .torche-flic{width:30%;opacity:calc(.07 + .09 * var(--amp));animation-duration:calc(15s * var(--vit))}
/* manif : des fumées qui montent du bas de la photo, très lentement */
.meteo.ev-manif::before{opacity:.55;animation-duration:calc(14s * var(--vit))}
.fumee{position:absolute;bottom:-18%;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(18px);mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(255,140,80,.32),rgba(255,80,150,.12) 45%,transparent 70%);animation:fumee calc(22s * var(--vit)) ease-in-out infinite}
.fumee.f1{left:-8%}.fumee.f2{left:30%;animation-delay:calc(-8s * var(--vit))}.fumee.f3{left:62%;animation-delay:calc(-15s * var(--vit))}
@keyframes fumee{0%{opacity:0;translate:0 0;scale:.8}25%{opacity:.7}100%{opacity:0;translate:6% -48%;scale:1.5}}
/* fête : la guirlande respire au lieu de clignoter, et quelques halos de couleur flottent */
.guirlande{opacity:.55}
.ampoule{animation:ampouleDoux calc(3.2s * var(--vit)) ease-in-out infinite alternate}
.ampoule.a1{animation-delay:calc(-1.6s * var(--vit))}
@keyframes ampouleDoux{from{opacity:.95}to{opacity:.35}}
.bokeh{position:absolute;width:16%;aspect-ratio:1;border-radius:50%;filter:blur(6px);mix-blend-mode:screen;opacity:calc(.12 + .12 * var(--amp));animation:bokeh calc(16s * var(--vit)) ease-in-out infinite alternate}
.bokeh.k1{left:12%;top:58%;background:radial-gradient(circle,rgba(255,95,174,.8),transparent 65%)}
.bokeh.k2{left:56%;top:32%;background:radial-gradient(circle,rgba(63,230,200,.75),transparent 65%);animation-delay:calc(-5s * var(--vit))}
.bokeh.k3{left:76%;top:66%;background:radial-gradient(circle,rgba(255,210,63,.7),transparent 65%);animation-delay:calc(-10s * var(--vit))}
@keyframes bokeh{from{translate:0 0}to{translate:-14% -22%}}
/* chantier : la rubalise passe en bas, plus fine ; le panneau se fait petit, dans un coin */
.rubalise span{bottom:5%;transform:rotate(-3deg);font-size:8px;padding:3px 0;opacity:.72}
.panneau-chantier{top:auto;bottom:9%;right:4%;max-width:36%;opacity:.86;scale:.86;transform-origin:100% 100%}

/* les présages : à la main, couleur de bougie, dans ce que la lampe éclaire ; plus vifs une fois trouvés.
   Les slogans de la manif sont tagués, comme les autres mots cachés. */
.presage{font-family:var(--f-bulle);fill:#fff1c4;opacity:.82;letter-spacing:.02em;paint-order:stroke;stroke:rgba(20,10,30,.6);stroke-width:4px;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,214,140,.7))}
.presage.lu{fill:#fffbea;opacity:1}
.presage.slogan{font-family:var(--f-tag);fill:#ff8a5c;stroke:#191a17;stroke-width:6px;letter-spacing:1px;filter:drop-shadow(0 0 5px rgba(0,0,0,.9))}

/* le murmure : quelques mots qui montent sur la photo, en arrivant, et s'effacent (pas de cadre, pas de couleur criarde) */
.murmure{position:absolute;z-index:7;left:50%;top:6%;translate:-50% 0;width:min(520px,86%);text-align:center;pointer-events:none;animation:murmureVient 2s ease both}
.murmure p{margin:0;font-family:var(--f-bulle);font-size:clamp(17px,1.7vw,23px);line-height:1.3;color:#fff3cf;
  text-shadow:0 0 12px rgba(255,210,150,.5),0 2px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.95)}
.murmure small{display:block;margin-top:6px;color:rgba(255,243,207,.72);text-shadow:0 1px 6px rgba(0,0,0,.95)}
.murmure.part{animation:murmurePart 2.2s ease forwards}
@keyframes murmureVient{from{opacity:0;filter:blur(6px);translate:-50% 10px}}
@keyframes murmurePart{to{opacity:0;filter:blur(6px);translate:-50% -8px}}

/* les ombres : une silhouette de lumière qui traverse la photo, très lentement, sans s'arrêter */
.ombre-passe{position:absolute;left:-30%;bottom:var(--bas,10%);height:var(--h,28%);width:auto;pointer-events:none;opacity:0;mix-blend-mode:screen;
  filter:brightness(0) invert(1) blur(.8px) drop-shadow(0 0 8px rgba(200,220,255,.9));animation:ombrePasse var(--dur,36s) linear forwards}
.ombre-passe.retour{transform:scaleX(-1);animation-name:ombreRetour}
@keyframes ombrePasse{0%{left:-30%;opacity:0}14%{opacity:var(--o,.16)}86%{opacity:var(--o,.16)}100%{left:105%;opacity:0}}
@keyframes ombreRetour{0%{left:105%;opacity:0}14%{opacity:var(--o,.16)}86%{opacity:var(--o,.16)}100%{left:-30%;opacity:0}}

/* la pastille « cette nuit : … » dans les lieux : discrète, un point de couleur qui respire doucement (dans la poche, elles gardent leurs couleurs) */
.panel .nuit-pill{background:rgba(241,242,236,.07);color:var(--papier);box-shadow:inset 0 0 0 1px rgba(241,242,236,.2)}
.panel button.nuit-pill::before{animation-duration:4.2s}
.panel .nuit-pill.ev-orage::before{background:#9db0ff}.panel .nuit-pill.ev-panne::before{background:#d8ffb0}.panel .nuit-pill.ev-fete::before{background:var(--rose)}
.panel .nuit-pill.ev-manif::before{background:var(--orange)}.panel .nuit-pill.ev-descente::before{background:linear-gradient(90deg,#ff5a6e 50%,#5a8cff 50%)}.panel .nuit-pill.ev-chantier::before{background:#ffd400}

@media (prefers-reduced-motion:reduce){
  .ev-orage .place::before,.ev-panne .place::before,.ev-fete .place::before,.ev-manif .place::before,.ev-descente .place::before,.ev-chantier .place::before,
  .fumee,.bokeh,.ampoule,.murmure,.murmure.part,.ev-panne .tirage .tramee{animation:none}
  .fumee{opacity:.35}.ombre-passe{display:none}.tirage.eclaire{filter:none}
}/* sur ordinateur, le murmure s'écrit sous la photo, dans le noir, au lieu de passer dessus */
@media (min-width:901px){.murmure{top:auto;bottom:16px}}/* sur téléphone, le murmure prend place dans le panneau, sous la pastille, puis se replie */
.panel .murmure{position:static;translate:none;width:auto;max-height:140px;overflow:hidden;text-align:left;margin:-6px 0 0;animation:murmurePanelVient 2s ease both}
.panel .murmure p{font-size:18px;text-shadow:0 0 12px rgba(255,210,150,.45)}
.panel .murmure.part{animation:murmurePanelPart 2.2s ease forwards}
@keyframes murmurePanelVient{from{opacity:0;filter:blur(6px)}}
@keyframes murmurePanelPart{60%{opacity:0;filter:blur(6px)}to{opacity:0;max-height:0;margin:0}}
@media (prefers-reduced-motion:reduce){.panel .murmure,.panel .murmure.part{animation:none}}
/* =====================================================================
   LE TÉLÉPHONE SONNE : un petit combiné qui tremble sur le bouton de la cabine (ou du quartier), la photo de la cabine
   qui vibre à chaque sonnerie. Et le poème 67, en fin de récit, sur la carte de l'aube.
   ===================================================================== */
.lieux button.sonne::before{content:"☎";position:absolute;top:-3px;left:3px;font-size:13px;line-height:1;color:var(--acide);text-shadow:0 0 8px rgba(216,255,56,.9);animation:combine .18s steps(2) infinite}
@keyframes combine{0%{rotate:-14deg}100%{rotate:14deg}}
.lieux button.sonne{color:var(--acide)}
.tirage.sonne{animation:cabineSonne .5s steps(5) 2}
@keyframes cabineSonne{0%,100%{translate:0 0}25%{translate:-2px 0}50%{translate:2px -1px}75%{translate:-1px 1px}}
.fin-recit li.poeme67{display:grid;gap:6px;margin-top:6px;padding:12px 0 2px;border-top:1px dashed #9a9b90}
.fin-recit li.poeme67::before{content:none}
.fin-recit li.poeme67 b{color:var(--orange);font-size:11px}
.fin-recit li.poeme67 span{font-family:var(--f-mono);font-size:13px;line-height:1.55;white-space:pre-line;color:#3a3b35}
@media (prefers-reduced-motion:reduce){.lieux button.sonne::before,.tirage.sonne{animation:none}}.fin-recit li.poeme67{padding-left:0}
/* le récit qui défile s'efface en douceur en haut et en bas, au lieu de se couper net */
.fin-recit{padding-top:12px;padding-bottom:12px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}

/* =====================================================================
   LA LUNE (12, cachée)
   ===================================================================== */
/* le bouton « 12 lune » n'existe qu'une fois la lune trouvée, avec la ville basse (on y monte depuis le quai 2) */
.lieux .lune-btn{display:none}
body.lune-connue .lieux[data-ville="basse"] .lune-btn{display:flex}
.lieux .lune-btn small{color:#ffd23f}
@media (max-width:900px){body.lune-connue .lieux[data-ville="basse"]{grid-template-columns:repeat(7,minmax(0,1fr))}}
.redescendre{margin-top:16px}
/* le bus flotte un peu au-dessus de la poussière, son phare balaie la ville */
.flotte-bus{transform-box:view-box;transform-origin:750px 650px}
.anim .flotte-bus{animation:flotteBus calc(6s*var(--vit)) ease-in-out infinite alternate}
@keyframes flotteBus{to{transform:translateY(calc(-12px*var(--amp))) rotate(calc(-1.2deg*var(--amp)))}}
.faisceau-g{opacity:.78}
.faisceau{transform-box:view-box;transform-origin:750px 558px}
.anim .faisceau{animation:balaye calc(11s*var(--vit)) ease-in-out infinite alternate}
@keyframes balaye{from{transform:rotate(-2.5deg)}to{transform:rotate(2deg)}}
.faisceau-g.flash{animation:phareFlash .5s ease-out}
@keyframes phareFlash{0%{opacity:1;filter:brightness(2.4)}100%{opacity:.78;filter:none}}
/* la ville de nuit, vue d'en haut : les lieux traversés cette nuit brillent ; le quai 2 répond à l'appel de phare */
#villeLune circle{opacity:.26;transition:opacity .8s}
#villeLune circle.allume{opacity:1;animation:villeLune 3.4s ease-in-out infinite}
@keyframes villeLune{50%{opacity:.5}}
#villeLune.pulse circle{animation:villePulse 1s ease-out}
@keyframes villePulse{35%{opacity:1;r:4.5px}}
#villeLune #villeMetro.repond{animation:repond 2s steps(1) both}
@keyframes repond{0%,40%,80%{opacity:1;r:6px;fill:#fff8dc}20%,60%{opacity:.1;r:2.4px}100%{opacity:1}}
/* ce qui flotte : ça dérive, doucement */
.flottant{cursor:pointer}
.flottant .derive{transform-box:fill-box;transform-origin:center}
.anim .flottant .derive{animation:derive calc(var(--dur,8s)*var(--vit)) ease-in-out infinite alternate}
@keyframes derive{to{transform:translate(calc(var(--dx)*var(--amp)),calc(var(--dy)*var(--amp))) rotate(calc(var(--r)*var(--amp)))}}
.flottant:hover,.flottant:focus-visible{filter:drop-shadow(0 0 7px rgba(255,240,190,.85))}
.flottant.pris{transition:opacity .7s,transform .7s;opacity:0;transform:translateY(-60px)}
#hot-terre,#hot-greve,#hot-arret{cursor:pointer}
#hot-terre .marque-badge,#hot-greve .marque-badge{opacity:0;transition:opacity .2s}
#hot-terre:hover .marque-badge,#hot-terre:focus-visible .marque-badge{opacity:1}
@media (hover:none){#hot-terre .marque-badge{opacity:.85}}   /* au doigt, pas de survol : le badge reste visible, comme ceux des persos */
#hot-greve:hover,#hot-arret:hover{filter:drop-shadow(0 0 6px rgba(216,255,56,.6))}
/* le voyage en train : le ciel tramé en gros pixels, la voix du train sur une girouette */
.voyage{position:fixed;inset:0;z-index:95;background:#04060e;overflow:hidden;animation:voyageVient .45s ease both}
.voyage canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.voyage-flash{position:absolute;inset:0;background:#fff6dc;opacity:0;pointer-events:none;animation:voyageFlash 1s ease-out both}
.voyage.arrive .voyage-flash{animation:voyageFlashFin .3s ease-in forwards}
.voyage.part{animation:voyagePart .85s ease forwards}
.voyage-ligne{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:calc(16px + env(safe-area-inset-left,0px));margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,200,140,.8);text-shadow:0 1px 6px #000}
.voyage-annonce{position:absolute;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom,0px));margin:0 auto;width:fit-content;max-width:min(580px,calc(100vw - 32px));box-sizing:border-box;padding:10px 16px;background:#0b0c09;border:2px solid #2c2d27;
  color:#ffb23c;font-size:clamp(13px,1.6vw,16px);line-height:1.45;letter-spacing:.08em;text-transform:uppercase;text-align:center;text-shadow:0 0 10px rgba(255,160,60,.6);box-shadow:0 0 0 4px rgba(0,0,0,.45)}
.voyage-annonce:empty{display:none}
.voyage-annonce.claque{color:#ffd9a0}
.voyage-passer{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:rgba(4,6,14,.6);border:1px solid rgba(241,242,236,.35);color:rgba(241,242,236,.85);padding:7px 11px;font-size:12px;cursor:pointer}
.voyage-passer:hover{color:var(--acide);border-color:var(--acide)}
@keyframes voyageVient{from{opacity:0}}
@keyframes voyageFlash{0%{opacity:.92}100%{opacity:0}}
@keyframes voyageFlashFin{to{opacity:.9}}
@keyframes voyagePart{to{opacity:0;visibility:hidden}}
body.en-voyage .bestiole,body.en-voyage #chien,body.en-voyage .heure-carte,body.en-voyage .bulle{visibility:hidden}
/* la panne coupe la ville, pas la lune : là-haut la photo garde sa lumière, et c'est la ville, sur la Terre, qui s'éteint */
.ev-panne .tirage[data-scene="lune"] .tramee{filter:none;animation:none}
.ev-panne #p-lune .fond{filter:none}
.ev-panne #villeLune circle,.ev-panne #villeLune circle.allume{opacity:.07;animation:none}
@media (prefers-reduced-motion:reduce){.flotte-bus,.faisceau,.flottant .derive,#villeLune circle.allume{animation:none}}