/* ===== V5 : épure + psychédélisme (chargé en dernier) ===== */
html,body{height:auto}
body{overflow-x:hidden}
.app{height:100svh;min-height:600px;grid-template-rows:auto minmax(0,1fr)}

/* --- en-tête : une seule ligne --- */
.top{display:grid;grid-template-columns:auto 1fr auto;gap:12px 28px;padding-block:10px;border-bottom:1px solid var(--ligne)}
.marque b{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.03em;text-transform:uppercase;color:var(--papier);line-height:1}
.marque img{width:38px}
.lieux{display:flex;justify-content:center;gap:2px;background:none;border:0;padding:0;position:static}
.lieux button{border:0;padding:8px 12px;gap:6px;font-size:12px;color:var(--texte-2)}
.lieux button[aria-current="page"]{background:var(--papier);color:var(--noir)}
.top-droite{gap:10px}
.poche li{width:22px;height:26px;font-size:16px}
#reelBtn,#son{padding:7px 10px}

/* --- panneaux plus légers --- */
.panel{background:linear-gradient(90deg,rgba(20,21,17,.9),rgba(20,21,17,.62));border-right:0;gap:14px;padding-top:30px}
.cote{background:linear-gradient(270deg,rgba(20,21,17,.88),rgba(20,21,17,.6));border-left:0}
.poeme-epi{font-size:13px;color:var(--texte-2);border-left-color:rgba(255,81,0,.6)}
.poeme-epi small{opacity:.7}
.panel p em{font-style:normal;color:var(--rose)}
.astuce{color:var(--acide);opacity:.8;margin:0}
.gagne b{width:36px;height:42px;font-size:28px}
.jauge{margin-top:auto}
.place.sans-cote .panel{max-width:440px}

/* --- persos : aura qui change de couleur, badge au survol seulement --- */
.perso:focus,.tete:focus,.hot:focus{outline:none}
.perso .marque-badge{opacity:0;transition:opacity .2s}
.perso:hover .marque-badge,.perso:focus-visible .marque-badge{opacity:1}
.reel-vivant .marque-badge,.reel-fond .marque-badge{animation:none}
@media (hover:none){.perso .marque-badge{opacity:.85}}
.reel-vivant .perso image,.reel-fond .perso image,.reel-vivant .tete image,.reel-fond .tete image{animation:aura 8s steps(1) infinite}
@keyframes aura{
  0%{filter:drop-shadow(0 0 7px rgba(216,255,56,.75)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  25%{filter:drop-shadow(0 0 9px rgba(255,95,174,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 7px rgba(157,107,255,.85)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  75%{filter:drop-shadow(0 0 9px rgba(63,230,200,.8)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
  100%{filter:drop-shadow(0 0 7px rgba(216,255,56,.75)) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
}
.reel-fond .perso image,.reel-fond .tete image{animation:aura 2.4s steps(1) infinite}
@keyframes teinte{to{filter:hue-rotate(360deg) drop-shadow(0 0 10px rgba(255,95,174,.8))}}

/* --- fonds qui respirent, trame en cycle de couleurs --- */
.fond{filter:brightness(.42) saturate(1.8);inset:-40px}
.reel-vivant .fond{animation:respire 18s ease-in-out infinite alternate,teinteF 30s steps(15) infinite alternate}
.reel-fond .fond{animation:respire 6s ease-in-out infinite alternate,teinteFF 8s steps(24) infinite}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.14) rotate(2deg)}}
@keyframes teinteF{from{filter:brightness(.4) saturate(1.8) hue-rotate(-30deg)}to{filter:brightness(.48) saturate(2.3) hue-rotate(70deg)}}
@keyframes teinteFF{from{filter:brightness(.5) saturate(2.4) hue-rotate(0deg)}to{filter:brightness(.5) saturate(2.4) hue-rotate(360deg)}}
.reel-vivant .tramee{animation:trame 10s steps(10) infinite alternate}
.reel-fond .tramee{animation:tramefond 4s steps(16) infinite}
@keyframes trame{from{filter:brightness(.72) hue-rotate(-22deg) saturate(1.1)}to{filter:brightness(.78) hue-rotate(28deg) saturate(1.35)}}
@keyframes tramefond{from{filter:brightness(.8) hue-rotate(0deg) saturate(1.6)}to{filter:brightness(.8) hue-rotate(360deg) saturate(1.6)}}
.torche-anneau{animation:irise 2s steps(1) infinite}
@keyframes irise{0%{stroke:#d8ff38}25%{stroke:#ff5fae}50%{stroke:#9d6bff}75%{stroke:#3fe6c8}100%{stroke:#d8ff38}}
#poussiere{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;image-rendering:pixelated;mix-blend-mode:screen}
.reel-calme #poussiere{display:none}

/* --- transition : plus de flash laser --- */
.laser{display:none}
.place.on{animation:arrive .5s cubic-bezier(.2,.7,.2,1)}
@keyframes arrive{from{opacity:.5}to{opacity:1}}

/* --- éléments flottants recalés (plus de barre en bas) --- */
.dlg{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.bestiole{bottom:calc(20px + env(safe-area-inset-bottom,0px));width:78px;height:78px}
.bulle{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
#chien{bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* --- pied de page, sous le premier écran --- */
.pied{background:var(--nuit);border-top:1px solid var(--ligne)}
.pied .bandeau{position:static}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:24px 48px;align-items:start;padding-block:36px 56px;padding-left:var(--gl);padding-right:var(--gr)}
.pied-titre{display:block;font-family:var(--f-display);font-weight:700;font-size:44px;line-height:.86;letter-spacing:-.04em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.pied p{margin:0;max-width:52ch;color:var(--texte-2)}
.pied-liens{display:grid;gap:10px;justify-items:start}
.pied-liens a,.pied-liens button{color:var(--texte);text-decoration:none;border-bottom:1px dashed var(--ligne);padding-bottom:2px}
.pied-liens a:hover,.pied-liens button:hover{color:var(--acide)}
.pied-reel{display:grid;gap:10px;color:var(--texte-2)}
.inutile{border:0}

@media (max-width:900px){
  .app{height:auto;min-height:0}
  .top{grid-template-columns:1fr auto;padding-block:8px}
  .marque b{font-size:17px}
  .marque img{width:30px}
  #reelBtn{display:none}
  .lieux{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:var(--nuit);border-top:1px solid var(--ligne);padding-left:var(--gl);padding-right:var(--gr);padding-bottom:env(safe-area-inset-bottom,0px)}
  .lieux button{flex-direction:column;gap:0;padding:9px 2px;font-size:11px}
  body{padding-bottom:58px}
  .panel{background:var(--nuit)}
  .cote{background:var(--nuit);padding-bottom:40px}
  .dlg{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .bestiole{bottom:calc(68px + env(safe-area-inset-bottom,0px));width:60px;height:60px}
  .bulle{bottom:calc(138px + env(safe-area-inset-bottom,0px))}
  #chien{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .pied-grille{grid-template-columns:1fr;padding-block:28px 36px}
  .pied-titre{font-size:34px}
}
@media (prefers-reduced-motion:reduce){#poussiere{display:none}}
@media (max-width:900px){
  .fond{inset:0}
  .stage{overflow:clip}
  .place.on{overflow:clip}
}

/* textes tagués lisibles : contour noir épais + halo, comme un sticker */
.tag{paint-order:stroke fill;stroke:#191a17;stroke-width:7px;stroke-linejoin:round;letter-spacing:1px;filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}

/* ===== LA VILLE BASSE ===== */
.plan-btn small{color:var(--acide)!important}
.flamme{transform-box:fill-box;transform-origin:50% 100%}
.reel-vivant .flamme,.reel-fond .flamme{animation:flamme .9s steps(3) infinite alternate}
.flamme.f2{animation-delay:-.4s}
@keyframes flamme{from{opacity:.55;transform:scale(1,1)}to{opacity:1;transform:scale(1.08,1.18)}}
.objets-titre{grid-column:1/-1;color:var(--acide);margin-top:6px}

/* radio */
.radio{display:grid;gap:14px}
.radio-ecran{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 14px;background:#0f0820;border:1px solid #4a2a8a;padding:12px 16px;color:var(--rose)}
.radio-freq{font-family:var(--f-display);font-weight:700;font-size:64px;line-height:.9;letter-spacing:-.03em;color:var(--rose);text-shadow:0 0 18px rgba(255,95,174,.6)}
.radio-station{grid-column:1/-1;color:var(--acide)}
#radioMolette{width:100%;accent-color:var(--rose);height:28px}
.radio-reglages{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:var(--texte-2)}
.radio-reglages button{padding:6px 10px;border:1px solid var(--ligne);color:var(--texte)}
.radio-reglages button:hover{border-color:var(--acide);color:var(--acide)}
.radio-reglages label{display:flex;gap:8px;align-items:center}
.radio-reglages input{accent-color:var(--acide)}
#radioPoeme{min-height:7em}

/* plan de la ville */
.plan-dlg{width:min(1000px,calc(100vw - 24px))}
.plan{position:relative;aspect-ratio:4/3;background:#0c0a14 url("../img/d/plan.png") center/cover;image-rendering:pixelated;overflow:hidden;border:1px solid var(--ligne)}
.plan-chemin{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plan-lieu,.plan-gris{position:absolute;width:22%;background:var(--papier);padding:5px 5px 0;transform:rotate(var(--r));box-shadow:0 12px 26px rgba(0,0,0,.6);text-align:left}
.plan-lieu img,.plan-gris img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.plan-lieu .px{image-rendering:pixelated}
.plan-lieu span,.plan-gris span{display:block;padding:5px 2px 6px;color:var(--noir);font-size:10px}
.plan-lieu{cursor:pointer;z-index:2;transition:transform .2s}
.plan-lieu:hover,.plan-lieu:focus-visible{transform:rotate(0) scale(1.06);z-index:3}
.plan-lieu.ici{outline:3px solid var(--orange);outline-offset:2px}
.plan-gris{width:14%;filter:grayscale(1) brightness(.55);z-index:1;pointer-events:none}
.plan-gris span{color:#5c5d55}
.plan-ici{position:absolute;width:9%;z-index:4;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.reel-vivant .plan-ici,.reel-fond .plan-ici{animation:trot .6s steps(1) infinite}

@media (max-width:900px){
  .lieux{grid-template-columns:repeat(5,1fr)}
  .plan{aspect-ratio:3/4}
  .plan-lieu{width:30%;--lw:30%}
  .plan-gris{width:18%}
  .radio-freq{font-size:48px}
}

/* ===== le bateau à vapeur oublié ===== */
#bateau .coque{transform-box:fill-box;transform-origin:50% 100%;transition:filter 2s,opacity 2s}
#bateau.oublie .coque{filter:grayscale(1) brightness(.75);opacity:.72;transform:rotate(5deg) translateY(10px)}
#bateau.oublie .fumee{display:none}
#bateau.rallume .coque{filter:none;opacity:1}
#bateau.rallume .hublot{fill:#ffd23f}
.reel-vivant #bateau.rallume .coque,.reel-fond #bateau.rallume .coque{animation:tangue 3s ease-in-out infinite alternate}
@keyframes tangue{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg) translateY(3px)}}
#bateau .fumee circle{fill:rgba(241,242,236,.75);transform-box:fill-box;transform-origin:center;animation:fumee 2.4s ease-out infinite}
#bateau .fumee circle:nth-child(2){animation-delay:.8s}#bateau .fumee circle:nth-child(3){animation-delay:1.6s}
@keyframes fumee{0%{opacity:0;transform:translate(0,20px) scale(.4)}30%{opacity:.9}100%{opacity:0;transform:translate(26px,-40px) scale(1.6)}}
#bateau{transition:transform 7s cubic-bezier(.5,0,.6,1),opacity 7s}
#bateau.part,#bateau.parti{transform:translate(905px,206px) scale(.16);opacity:.6}
#bateau.parti{transition:none}

/* barre : haute ville / basse ville */
.lieux[data-ville="haute"] .basse,.lieux[data-ville="basse"] .haute{display:none}
.lieux:not([data-ville="periph"]) .periph,.lieux[data-ville="periph"] .haute,.lieux[data-ville="periph"] .basse{display:none}
.ville-btn small{color:var(--rose)!important}
.ville-btn{color:var(--texte)!important}
/* la vache fait des allers-retours dans le bowl */
.vache-ride{transform-box:fill-box}
.reel-vivant .vache-ride,.reel-fond .vache-ride{animation:ride 7s ease-in-out infinite alternate}
.reel-fond .vache-ride{animation-duration:3s}
@keyframes ride{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(18px,-26px) rotate(5deg)}100%{transform:translate(34px,6px) rotate(-2deg)}}
@media (max-width:900px){.lieux{grid-template-columns:repeat(6,1fr)}.lieux button{font-size:10px}}

/* la bestiole ne cache plus les sous-titres des tirages (le padding-bottom de .scene suffit) */
.scene{padding-bottom:96px}
@media (max-width:900px){.scene{padding-bottom:30px}}
/* légendes sur une ligne : sur les tirages étroits (porte, radio) elles se chevauchaient */
.tirage .legende span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tirage .legende span:last-child{flex-shrink:2;text-align:right}

/* en-tête sur une ligne entre 900 et 1440 px (avant : jusqu'à 3 lignes, 150 px de haut) */
.poche .nobj,#reelBtn,#son{white-space:nowrap}
@media (min-width:901px) and (max-width:1440px){
  .top{gap:10px 14px}
  .top-droite{flex-wrap:nowrap;gap:6px}
  .lieux button{padding:8px 7px;gap:4px}
}
@media (min-width:901px) and (max-width:1300px){.marque b{display:none}}
@media (min-width:901px) and (max-width:1040px){
  .poche ol{display:none}
  .lieux button small{display:none}
}

/* les tirages en paysage tiennent dans la largeur */
.tirage[data-scene="lac"]{height:auto;width:100%;max-height:100%}