/* Scènes propres aux jeux ; les illustrations et le moteur de tirage restent ceux du dossier. */
html body main .scenic{--scene-ink:#412b2b;--scene-paper:#fff9ee;--scene-line:#a27b45;--scene-accent:#7d1939;overflow-wrap:break-word}
html body main .scenic .scene-shell{margin:28px auto 38px;color:var(--scene-ink)}
html body main .scenic .scene-help{font-size:15px;line-height:1.65;text-align:center;margin:12px auto 28px;max-width:700px;color:inherit}
html body main .scenic .scene-map{isolation:isolate;position:relative;display:grid;gap:18px;align-items:center;max-width:900px;margin:auto;padding:30px 16px;min-width:0}
html body main .scenic .scene-trace{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.scene-trace path{fill:none;stroke:var(--scene-line);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:scene-path 1.3s ease-out both}
html body main .scenic .scene-card{position:relative;min-width:0;border:0;display:flex;flex-direction:column;align-items:center;gap:9px;justify-self:center;width:100%;max-width:170px;padding:12px 6px;background:var(--scene-paper);color:var(--scene-ink);cursor:pointer;border-radius:5px;box-shadow:0 5px 16px #00000014;animation:scene-arrive .45s both;animation-delay:calc(var(--i)*70ms);transition:transform .2s,box-shadow .2s}
html body main .scenic .scene-card:hover{transform:translateY(-4px)}
html body main .scenic .scene-card[aria-pressed=true]{outline:3px solid var(--scene-accent);outline-offset:3px}
html body main .scenic .scene-card:focus-visible{outline:3px solid var(--scene-accent);outline-offset:5px}
html body main .scenic .scene-position{font:600 clamp(11px,1.1vw,14px)/1.35 system-ui,sans-serif;min-height:2.8em;display:grid;place-items:center;text-align:center;color:inherit}
html body main .scenic .scene-title{font:400 clamp(12px,1.3vw,16px)/1.3 Georgia,serif;min-height:2.6em;display:grid;place-items:center;text-align:center;color:inherit}
html body main .scenic .scene-thumbnail{display:block;width:100%;max-width:125px}
html body main .scenic .scene-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;border-radius:2px;background:transparent}
html body main .scenic [class$=-results]{display:block;max-width:1000px;margin:20px auto;text-align:left}
html body main .scenic .scene-detail{display:grid;grid-template-columns:minmax(160px,280px) minmax(0,1fr);gap:0;overflow:hidden;max-width:none;scroll-margin-top:140px;border-radius:3px;min-width:0}
html body main .scenic .scene-detail>[class$=-position]{grid-column:1/-1;margin:0;padding:16px 22px;font-size:18px;min-height:0}
html body main .scenic .scene-detail>[class$=-face]{margin:24px;align-self:start;max-width:none;width:auto;min-width:0}
html body main .scenic .scene-detail>[class$=-definition]{padding:24px;min-width:0;display:block}
html body main .scenic .scene-detail [class$=-position-help],html body main .scenic .scene-detail [class$=-meaning],html body main .scenic .scene-detail [class$=-action]>p{min-height:0}
html body main .scenic .scene-detail [class$=-meaning]{font-size:17px;line-height:1.8}
html body main .scenic .scene-detail[hidden]{display:none!important}
html body main .scenic [class$=-reading-actions]{margin-top:28px}

/* Cité : une place centrale, deux niveaux de quartiers et une porte. */
html body main .scenic[data-scene=cites]{background:#f4ead6;border:0;border-block:5px double #ad915f;border-radius:0;box-shadow:none}
.scene-map-cites{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);background:repeating-linear-gradient(0deg,#ad915f0d 0 1px,transparent 1px 25px),repeating-linear-gradient(90deg,#ad915f0d 0 1px,transparent 1px 25px)}
.scene-map-cites .scene-card:nth-of-type(1){grid-area:2/2}.scene-map-cites .scene-card:nth-of-type(2){grid-area:3/1}.scene-map-cites .scene-card:nth-of-type(3){grid-area:3/3}.scene-map-cites .scene-card:nth-of-type(4){grid-area:1/1}.scene-map-cites .scene-card:nth-of-type(5){grid-area:1/2}.scene-map-cites .scene-card:nth-of-type(6){grid-area:1/3}.scene-map-cites .scene-card:nth-of-type(7){grid-area:4/2}
html body main .scenic[data-scene=cites] .scene-card{border-radius:60px 60px 3px 3px;border:1px solid #c8b084;padding-top:22px}
html body main .scenic[data-scene=cites] .scene-detail{border:3px double #ad915f;background:#fffaf0}

/* Horloge Art nouveau : les quatre points du cadran restent visibles. */
html body main .scenic[data-scene=heures]{background:#efe3cd;border:3px double #a27b45;border-radius:48px 48px 8px 8px;box-shadow:inset 0 0 0 8px #fff8e760}
.scene-map-heures{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);max-width:690px!important;border-radius:50%;background:radial-gradient(circle,#c9a76d33 0 13%,transparent 13.3% 41%,#b68e4822 41.5% 42%,transparent 42.5%)}
.scene-map-heures .scene-card:nth-of-type(1){grid-area:1/2}.scene-map-heures .scene-card:nth-of-type(2){grid-area:2/3}.scene-map-heures .scene-card:nth-of-type(3){grid-area:3/2}.scene-map-heures .scene-card:nth-of-type(4){grid-area:2/1}
.scene-map-heures:after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:60px Georgia,serif;color:#875e2c}
html body main .scenic[data-scene=heures] .scene-card{border:3px double #ab854c;border-radius:28px 28px 6px 6px}
html body main .scenic[data-scene=heures] .scene-detail{border:3px double #a27b45;border-radius:30px 30px 4px 4px}

/* Partition : six mouvements sur une portée, y compris après révélation. */
html body main .scenic[data-scene=arts]{--scene-ink:#fff0db;--scene-paper:#4d233b;--scene-line:#d5b884;--scene-accent:#f0ce94;background:#301c2b;border:0;border-radius:0;box-shadow:none;border-left:8px solid #78364d}
html body main .scenic[data-scene=arts] .arts-heading{text-align:left;max-width:none;border-bottom:1px solid #d5b88466;padding-bottom:24px}
.scene-map-arts{grid-template-columns:repeat(6,minmax(0,1fr));padding-block:65px!important}
.scene-map-arts .scene-card:nth-of-type(2),.scene-map-arts .scene-card:nth-of-type(3){margin-bottom:70px}.scene-map-arts .scene-card:nth-of-type(5),.scene-map-arts .scene-card:nth-of-type(6){margin-top:70px}
html body main .scenic[data-scene=arts] .scene-card{border-radius:0;border-bottom:5px solid #bc9252;max-width:140px}
html body main .scenic[data-scene=arts] .scene-detail{border:0;border-left:5px solid #bc9252;background:#fff7e7}
html body main .scenic[data-scene=arts] .arts-slots{padding:45px 0}
html body main .scenic[data-scene=arts] .arts-slot:nth-child(2),html body main .scenic[data-scene=arts] .arts-slot:nth-child(3){transform:translateY(-20px)}
html body main .scenic[data-scene=arts] .arts-slot:nth-child(5),html body main .scenic[data-scene=arts] .arts-slot:nth-child(6){transform:translateY(20px)}

/* Voyage : un billet et trois étapes reliées, en lie-de-vin et bleu ardoise. */
html body main .scenic[data-scene=voyages]{--scene-ink:#334753;--scene-paper:#fffdf4;--scene-line:#8b6b4b;background:#f5eddb;border:0;border-radius:0;box-shadow:none;border-top:8px solid #536975}
html body main .scenic[data-scene=voyages] .voyages-heading{max-width:none;text-align:left;padding:20px 28px;border:1px solid #baa482;border-left:12px solid #7d1939;background:#fffdf4}
.scene-map-voyages{grid-template-columns:repeat(3,minmax(0,1fr));padding-block:65px!important;background:repeating-linear-gradient(0deg,transparent 0 39px,#647e8c15 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#647e8c15 39px 40px)}
.scene-map-voyages .scene-card:nth-of-type(2){margin-bottom:80px}.scene-map-voyages .scene-card:nth-of-type(3){margin-top:80px}
html body main .scenic[data-scene=voyages] .scene-card{border-radius:0;border-top:5px solid #536975}
html body main .scenic[data-scene=voyages] .scene-detail{border:1px solid #baa482;border-right:12px solid #536975}
html body main .scenic[data-scene=voyages] .scene-detail>[class$=-definition]{border-left:2px dashed #c2ad8e}

/* Bascule : deux forces, une diagonale et un point d'appui. */
html body main .scenic[data-scene=imprevus]{background:linear-gradient(112deg,#f5dfcd 49.8%,#fff9e9 50%);border:0;border-radius:0;box-shadow:none;border-bottom:7px solid #8b2942}
.scene-map-imprevus{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px!important;padding-bottom:100px!important}
.scene-map-imprevus .scene-card:nth-of-type(1){margin-bottom:90px;rotate:-5deg}.scene-map-imprevus .scene-card:nth-of-type(2){margin-top:90px;rotate:5deg}
html body main .scenic[data-scene=imprevus] .scene-card{border:2px solid #8b2942;border-radius:0;max-width:200px}
html body main .scenic[data-scene=imprevus] .scene-detail{border:0;border-top:7px solid #8b2942}

/* Marées : une véritable vague, conservée dans la lecture. */
html body main .scenic[data-scene=marees]{--scene-ink:#173e32;--scene-paper:#f5fbf3;--scene-line:#8a6848;--scene-accent:#236052;background:linear-gradient(174deg,#e4f0e8 60%,#c8ded4 60.2%);border:0;border-radius:0 70px 0 0;box-shadow:none;border-top:5px solid #2e6257}
.scene-map-marees{grid-template-columns:repeat(5,minmax(0,1fr));padding-block:80px!important}
.scene-map-marees .scene-card:nth-of-type(2){margin-bottom:100px}.scene-map-marees .scene-card:nth-of-type(4){margin-top:100px}
html body main .scenic[data-scene=marees] .scene-card{border-radius:70px 70px 5px 5px;border-bottom:4px solid #96764f;padding-top:20px}
html body main .scenic[data-scene=marees] .scene-detail{border:0;border-top:5px solid #2e6257;border-radius:0 30px 0 0}
html body main .scenic[data-scene=marees] .marees-wave{padding:70px 0;grid-template-columns:repeat(5,minmax(0,1fr))}
html body main .scenic[data-scene=marees] .marees-step{transform:none!important;min-height:0}
html body main .scenic[data-scene=marees] .marees-step:nth-child(2){translate:0 -45px}
html body main .scenic[data-scene=marees] .marees-step:nth-child(4){translate:0 45px}

/* Cinq sens : cinq alcôves autour d'un centre, puis une lecture unique. */
html body main .scenic[data-scene=sens]{background:radial-gradient(circle at 50% 42%,#e7d19d55,transparent 52%),#f8f2df;border:0;border-radius:50% 50% 8px 8px/60px 60px 8px 8px;box-shadow:none;border-bottom:4px solid #b08a57}
html body main .scenic[data-scene=sens] .sens-lenses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;max-width:850px;margin:28px auto;align-items:center}
html body main .scenic[data-scene=sens] .sens-door{display:flex;flex-direction:column;grid-template-columns:none;border-radius:90px 90px 4px 4px;min-height:0;max-width:none;width:100%;padding:8px}
html body main .scenic[data-scene=sens] .sens-door img{width:100%;height:auto;max-width:135px;aspect-ratio:2/3;object-fit:contain;border-radius:80px 80px 3px 3px}
html body main .scenic[data-scene=sens] .sens-door:nth-child(1){grid-area:1/3/2/5}
html body main .scenic[data-scene=sens] .sens-door:nth-child(2){grid-area:2/1/3/3}
html body main .scenic[data-scene=sens] .sens-door:nth-child(3){grid-area:3/2/4/4}
html body main .scenic[data-scene=sens] .sens-door:nth-child(4){grid-area:3/4/4/6}
html body main .scenic[data-scene=sens] .sens-door:nth-child(5){grid-area:2/5/3/7}
html body main .scenic[data-scene=sens] .sens-result{border-radius:100px 4px 4px 4px;border:3px double #a68350;padding-top:35px;background:#fffaf0}

/* Foyer : les cartes restent dans les quatre pièces de leur maison. */
html body main .scenic[data-scene=foyer]{--scene-ink:#24483b;--scene-paper:#fff5e6;--scene-line:#9a674b;--scene-accent:#31634b;background:#f0e0ce;border:0;border-radius:0;box-shadow:none;border-block:6px solid #9a674b}
.scene-map-foyer{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px!important;padding:135px 50px 32px!important;background:linear-gradient(90deg,transparent 49.8%,#9a674b45 50%,transparent 50.3%)}
html body main .scenic[data-scene=foyer] .scene-card{border:4px solid #b8956c;box-shadow:inset 0 0 0 2px #fffaf0,0 6px 12px #582e1512;border-radius:45px 45px 3px 3px;max-width:180px}
html body main .scenic[data-scene=foyer] .scene-detail{border:0;border-left:12px solid #9a674b;background:#fff8eb}

/* Liens : six places prises dans les fils du métier à tisser. */
html body main .scenic[data-scene=liens]{--scene-ink:#174638;--scene-paper:#fff8e9;--scene-line:#a27157;--scene-accent:#286149;background:repeating-linear-gradient(90deg,#4c5d3f09 0 1px,transparent 1px 5px),#eee8d7;border:0;border-radius:0;box-shadow:none;border-inline:7px solid #957052}
.scene-map-liens{grid-template-columns:repeat(3,minmax(0,1fr));padding:30px!important;border-block:12px solid #957052;background:repeating-linear-gradient(90deg,transparent 0 18px,#a2715755 18px 20px,transparent 20px 38px)}
html body main .scenic[data-scene=liens] .scene-card{border-radius:0;border-block:5px solid #a27157;background:#fff8e9e8}
html body main .scenic[data-scene=liens] .scene-detail{border:0;border-block:6px solid #957052;background:#fff8e9}

/* Métamorphoses : le chemin tourne autour de la première carte. */
html body main .scenic[data-scene=meta]{--scene-ink:#164c3b;--scene-paper:#fffaf0;--scene-line:#a67858;--scene-accent:#2c7658;background:radial-gradient(ellipse at 10% 95%,#debc9d88,transparent 45%),linear-gradient(125deg,#e0eddf,#f3ecdb);border:0;border-radius:90px 4px 90px 4px;box-shadow:none}
.scene-map-meta{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto)}
.scene-map-meta .scene-card:nth-of-type(1){grid-area:2/2}.scene-map-meta .scene-card:nth-of-type(2){grid-area:2/3}.scene-map-meta .scene-card:nth-of-type(3){grid-area:3/3}.scene-map-meta .scene-card:nth-of-type(4){grid-area:3/2}.scene-map-meta .scene-card:nth-of-type(5){grid-area:3/1}.scene-map-meta .scene-card:nth-of-type(6){grid-area:2/1}.scene-map-meta .scene-card:nth-of-type(7){grid-area:1/1}
html body main .scenic[data-scene=meta] .scene-card{border-radius:48px 4px 48px 4px;border:1px solid #a67858}
html body main .scenic[data-scene=meta] .scene-detail{border:0;border-radius:55px 4px 55px 4px;background:#fffaf0}

/* Vocations : maintien de l'arc validé, les cinq marches restent dans le résultat. */
html body main .scenic[data-scene=voc]{--scene-ink:#eef3ed;--scene-paper:#204351;--scene-line:#b8a078;--scene-accent:#edcf9b}
.scene-map-voc{grid-template-columns:repeat(5,minmax(0,1fr));padding-block:45px!important;align-items:end!important}
.scene-map-voc .scene-card{margin-bottom:calc(var(--i)*45px)}
html body main .scenic[data-scene=voc] .scene-card{border-radius:0;border-bottom:4px solid #c3a16b}
html body main .scenic[data-scene=voc] .scene-detail{border:0;border-left:7px solid #c3a16b}

@keyframes scene-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-path{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:760px){
 html body main .scenic .scene-map{gap:10px;padding-inline:8px}
 html body main .scenic .scene-card{padding:9px 4px;gap:6px}
 html body main .scenic .scene-detail{grid-template-columns:minmax(0,1fr)}
 html body main .scenic .scene-detail>[class$=-face]{max-width:280px;width:calc(100% - 36px);margin:20px auto}
 html body main .scenic .scene-detail>[class$=-definition]{padding:20px;min-width:0}
 html body main .scenic .scene-detail>[class$=-position]{font-size:17px;padding:14px}
 html body main .scenic .scene-map-arts{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:42px;padding-block:35px!important}
 .scene-map-arts .scene-card:nth-of-type(n){margin:0}.scene-map-arts .scene-card:nth-of-type(2),.scene-map-arts .scene-card:nth-of-type(5){translate:0 -16px}
 html body main .scenic .scene-map-marees{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:25px 10px}
 .scene-map-marees .scene-card:nth-of-type(n){margin:0}.scene-map-marees .scene-card:nth-of-type(1){grid-area:1/1;translate:0 25px}.scene-map-marees .scene-card:nth-of-type(2){grid-area:1/2;translate:0 -25px}.scene-map-marees .scene-card:nth-of-type(3){grid-area:1/3;translate:0 25px}.scene-map-marees .scene-card:nth-of-type(4){grid-area:2/2;translate:0 25px}.scene-map-marees .scene-card:nth-of-type(5){grid-area:2/3;translate:0 -15px}
 html body main .scenic .scene-map-marees .scene-trace{opacity:.4}
 html body main .scenic[data-scene=marees] .marees-wave{grid-template-columns:repeat(3,minmax(0,1fr));padding-block:45px;gap:28px 7px}
 html body main .scenic[data-scene=marees] .marees-step{display:flex;padding:10px 4px;text-align:center;gap:6px}
 html body main .scenic[data-scene=marees] .marees-step:nth-child(2){translate:0 -22px}
 html body main .scenic[data-scene=marees] .marees-step:nth-child(4){grid-column:2;translate:0 16px}
 html body main .scenic[data-scene=marees] .marees-step:nth-child(5){grid-column:3}
 html body main .scenic[data-scene=marees] .marees-step-title{font-size:12px;min-height:3em}
 html body main .scenic[data-scene=marees] .marees-mini{width:100%;max-width:120px}
 html body main .scenic .scene-map-foyer{padding:85px 15px 20px!important}
 html body main .scenic .scene-map-liens{padding:20px 8px!important}
 html body main .scenic .scene-map-voc{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:650px}
 html body main .scenic .scene-map-voc .scene-card{margin-bottom:calc(var(--i)*24px);padding:8px 2px}
 html body main .scenic .scene-map-voc .scene-position{font-size:10px;min-height:5em}.scene-map-voc .scene-title{display:none!important}
 html body main .scenic[data-scene=sens] .sens-lenses{gap:10px}
 html body main .scenic[data-scene=sens] .sens-door{padding:6px}
 html body main .scenic[data-scene=sens] .sens-door img{max-width:95px}
 html body main .scenic[data-scene=voyages] .voyages-heading{padding:16px;border-left-width:6px}
}
@media(max-width:390px){html body main .scenic .scene-map{gap:8px;padding-inline:3px}.scene-map .scene-title{font-size:11px!important}.scene-map .scene-position{font-size:10px!important}.scene-map-heures:after{font-size:32px}.scene-map-voc .scene-position{font-size:9px!important}}
@media(prefers-reduced-motion:reduce){.scenic *, .scenic *:before,.scenic *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Escalier du résultat : chaque vignette repose sur sa marche. */
html body main .scenic .scene-map-voc{display:block;width:100%;max-width:900px;aspect-ratio:1.3;padding:0!important;container-type:inline-size}
html body main .scenic .scene-map-voc .scene-trace path{fill:#385963;stroke:#b8a078;stroke-width:3;animation:none;stroke-dasharray:none}
html body main .scenic .scene-map-voc .scene-card{position:absolute;left:calc(10% + var(--i)*20%);bottom:calc(8% + var(--i)*16%);translate:-50% 0;width:18%;min-width:44px;max-width:none;margin:0;padding:7px 3px;gap:5px;border:1px solid #b8a078;border-radius:5px 5px 0 0;background:#204351;color:#fff8e9;animation:none}
html body main .scenic .scene-map-voc .scene-thumbnail{width:75%;max-width:min(80px,9cqw)}
html body main .scenic .scene-map-voc .scene-position{font:600 clamp(11px,1.6cqw,14px)/1.3 system-ui,sans-serif;min-height:2.6em}
html body main .scenic .scene-map-voc .scene-title{display:none}
@media(max-width:760px){
 html body main .scenic .scene-map-voc{aspect-ratio:.6}
 html body main .scenic .scene-map-voc .scene-card{padding:5px 2px;gap:4px}
 html body main .scenic .scene-map-voc .scene-thumbnail{width:75%;max-width:none}
 html body main .scenic .scene-map-voc .scene-position{font-size:11px!important;min-height:3.9em}
}