/* Page Guide : sommaire, chapitres et scènes propres au guide (assets/guide-scenes.js) */
.guide-hero { padding: 56px 0 24px; }
.guide-hero h1 { font-size: clamp(32px, 5vw, 50px); margin: 10px 0 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a { text-decoration: none; color: var(--text); font-size: 14px; padding: 7px 12px; border-radius: 999px; background: var(--layer); border: 1px solid var(--line); }
.toc a:hover { border-color: rgba(157, 184, 255, .5); }
.toc a.star { border-color: rgba(127, 224, 200, .45); background: rgba(127, 224, 200, .07); }

.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.chapter:first-of-type { border-top: 0; }
.chapter.flip { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.chapter.flip .ch-text { order: 2; }
@media (max-width: 860px) { .chapter, .chapter.flip { grid-template-columns: minmax(0, 1fr); gap: 18px; } .chapter.flip .ch-text { order: 0; } }
.ch-num { font-size: 13px; font-weight: 700; color: var(--mint); letter-spacing: .06em; text-transform: uppercase; }
.ch-text h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 6px 0 10px; }
.ch-text > p { color: var(--muted); margin: 0 0 14px; }
.where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; background: var(--layer2); border: 1px solid var(--line); border-radius: 12px; padding: 7px 12px; margin-bottom: 14px; }
.where b { color: var(--peri); font-weight: 600; }
.ch-steps { margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.ch-steps li { position: relative; padding-left: 34px; color: #d3d7e6; }
.ch-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--peri); color: #0b1533; }
.tip { font-size: 14px; color: var(--muted); border-left: 3px solid var(--mint); padding: 6px 0 6px 12px; margin: 0; }
.tip b { color: var(--text); }
.pro { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1e1240; background: var(--lav); border-radius: 999px; padding: 2px 8px; margin-left: 8px; }
.free { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 700; color: #0b2a24; background: var(--mint); border-radius: 999px; padding: 2px 8px; margin-left: 8px; }
.ch-art .stage { margin: 0; height: 320px; border: 1px solid var(--line); }
.ch-art .stage[data-scene="rescue"], .ch-art .stage[data-scene="crypto"] { height: 280px; }
.ch-art .backup, .ch-art .vaults { margin: 0; }
.chapter.wide { grid-template-columns: minmax(0, 1fr); }

/* éléments communs */
.gd-top { font-weight: 700; font-size: 14px; }
.gd-sub { color: var(--muted); font-size: 12px; margin: 3px 0 10px; }
.gd-btn { display: inline-block; margin-top: 10px; background: var(--peri); color: #0b1533; font-weight: 700; font-size: 12px; border-radius: 10px; padding: 7px 12px; transition: transform .15s; }
.stage.press .gd-btn { transform: scale(.92); }
.gd-chip { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; padding: 4px 8px; border-radius: 10px; background: rgba(157, 184, 255, .12); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; }
.gd-chip small { font-size: 8.5px; color: var(--muted); }
.gd-chip.on { opacity: 1; transform: none; }
.gd-sent { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 7px 0; }
.gd-sent > b { color: var(--muted); font-size: 12px; margin-right: 2px; }

/* mosaïque */
.gd-mosaic { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.gd-mosaic i { position: absolute; width: 15px; height: 15px; margin: -7.5px; transform: rotate(45deg); border-radius: 3px; background: #2a3150; transition: background .2s, box-shadow .2s; }
.gd-mosaic i.on { background: #b79cff; box-shadow: 0 0 10px #b79cff; }

/* création */
.stage[data-scene="setup"] .gd-top { position: absolute; top: 18px; width: 100%; text-align: center; }
.gd-bar { position: absolute; left: 30px; right: 30px; bottom: 50px; text-align: center; color: var(--mint); font-size: 12px; opacity: 0; transition: opacity .3s; }
.gd-bar i { display: block; height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(127, 224, 200, .15); position: relative; overflow: hidden; }
.gd-bar i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--mint); animation: bar 1s ease-in-out infinite; }
.stage.busy .gd-bar { opacity: 1; }
.stage.done .sc-ok, .stage.done > .sc-ok { opacity: 1; transform: translate(-50%, 0); }

/* histoire secrète */
.gd-card { position: absolute; inset: 14px; padding: 14px; border-radius: 14px; background: var(--layer2); transition: opacity .4s, transform .4s; }
.gd-paper { margin-top: 10px; font-size: 12px; color: var(--amber); opacity: 0; transition: opacity .4s; }
.stage.paper .gd-paper { opacity: 1; }
.gd-verify { position: absolute; inset: 14px; padding: 14px; border-radius: 14px; background: var(--layer2); opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .4s; }
.stage.verify .gd-card { opacity: 0; transform: translateX(-30px); }
.stage.verify .gd-verify { opacity: 1; transform: none; }
.gd-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.gd-pick span { font-size: 10.5px; text-align: center; padding: 6px 2px; border-radius: 8px; background: rgba(255, 255, 255, .04); transition: background .3s, box-shadow .3s; }
.gd-pick span.on { background: rgba(127, 224, 200, .2); box-shadow: inset 0 0 0 1px var(--mint); }
.stage[data-scene="story"] .sc-ok { bottom: 22px; }

/* appareil photo */
.gd-viewfinder { position: absolute; left: 14px; right: 14px; top: 14px; height: 200px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #7aa7ff, #c4b1ff 60%, #ffc970); }
.gd-viewfinder .sun { position: absolute; left: 62%; top: 34px; width: 30px; height: 30px; border-radius: 50%; background: #fff6d6; box-shadow: 0 0 24px #fff6d6; }
.gd-viewfinder .hill { position: absolute; left: -20px; right: -20px; bottom: -50px; height: 110px; border-radius: 50%; background: #2d6b63; }
.gd-direct { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600; color: var(--mint); background: rgba(11, 13, 23, .75); border-radius: 999px; padding: 4px 10px; }
.gd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.stage.snap .gd-flash { animation: flash .35s; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.gd-cambar { position: absolute; left: 0; right: 0; top: 224px; display: flex; justify-content: center; align-items: center; gap: 26px; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.gd-cambar span.on { color: var(--amber); }
.gd-shutter { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); transition: transform .15s; }
.stage.snap .gd-shutter { animation: press .3s; }
@keyframes press { 50% { transform: scale(.82); } }
.gd-vault { position: absolute; right: 14px; bottom: 12px; font-size: 12px; font-weight: 600; background: rgba(127, 224, 200, .12); color: var(--mint); border: 1px solid rgba(127, 224, 200, .35); border-radius: 999px; padding: 5px 11px; }
.gd-vault em { font-style: normal; color: var(--text); }
.gd-gallery { position: absolute; left: 14px; bottom: 12px; font-size: 11px; color: var(--muted); }
.gd-shot { position: absolute; left: 50%; top: 40px; width: 120px; height: 110px; margin-left: -60px; border-radius: 10px; background: linear-gradient(180deg, #7aa7ff, #c4b1ff 60%, #2d6b63); opacity: 0; box-shadow: 0 0 0 2px #fff; }
.stage.snap .gd-shot { animation: shot 1.1s .15s cubic-bezier(.4, .1, .3, 1); }
@keyframes shot { 0% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(120px, 190px) scale(.12); } }

/* scanner */
.gd-scanview { position: absolute; left: 14px; right: 14px; top: 34px; height: 180px; border-radius: 14px; overflow: hidden; background: #3a2f2a; display: grid; place-items: center; }
.gd-page { width: 108px; height: 140px; background: #f3efe6; border-radius: 3px; padding: 14px 12px; transform: rotate(-9deg) skewX(-6deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .4); transition: transform .6s, filter .6s; }
.gd-page i { display: block; height: 5px; margin-bottom: 9px; background: #8a8a96; border-radius: 3px; }
.gd-corners { position: absolute; width: 124px; height: 156px; border: 2px solid var(--mint); border-radius: 4px; transform: rotate(-9deg) skewX(-6deg); opacity: 0; transition: opacity .3s, transform .6s; }
.stage.detect .gd-corners { opacity: 1; }
.stage.shot .gd-page { transform: none; filter: grayscale(1) contrast(1.4); }
.stage.shot .gd-corners { transform: none; opacity: 0; }
.stage[data-scene="scanner"] .gd-hint { position: absolute; top: 10px; width: 100%; text-align: center; font-size: 12px; color: var(--muted); }
.gd-count { position: absolute; left: 18px; top: 228px; font-size: 12px; color: var(--muted); }
.stage[data-scene="scanner"] .gd-btn { position: absolute; right: 18px; top: 220px; margin: 0; }
.gd-pdf { position: absolute; left: 14px; right: 14px; bottom: 12px; padding: 8px 10px; border-radius: 10px; background: var(--layer2); font-size: 12px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.gd-pdf b { font-size: 9px; background: #4a2f3a; color: #ff9ec7; padding: 2px 5px; border-radius: 5px; }
.gd-pdf span { color: var(--mint); float: right; }
.gd-pdf small { display: block; color: var(--amber); margin-top: 3px; }
.stage.saved .gd-pdf { opacity: 1; transform: none; }

/* import depuis la galerie */
.stage[data-scene="import"] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.gd-col { background: var(--layer2); border-radius: 12px; padding: 10px; }
.gd-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.gd-thumbs i { aspect-ratio: 1; border-radius: 7px; position: relative; transition: opacity .4s, transform .4s, box-shadow .2s; }
.gd-thumbs i.sel { box-shadow: 0 0 0 2px var(--peri); }
.gd-thumbs i.sel::after { content: "✓"; position: absolute; right: 3px; top: 1px; font-size: 10px; font-weight: 700; color: #fff; }
.gd-thumbs i.gone { opacity: .08; transform: scale(.8); }
.gd-col + .gd-col .gd-thumbs i { opacity: 0; transform: scale(.6); }
.gd-col + .gd-col .gd-thumbs i.in { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(127, 224, 200, .5); }
.gd-snack { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #262c45; border-radius: 10px; padding: 9px 12px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.gd-snack b { color: var(--peri); white-space: nowrap; }
.stage.snack .gd-snack { opacity: 1; transform: none; }
.gd-dialog { position: absolute; left: 30px; right: 30px; top: 34%; background: #2a3150; border-radius: 14px; padding: 14px; font-size: 13px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.94); transition: opacity .3s, transform .3s; }
.gd-dialog b { display: block; text-align: right; color: #ff8a80; margin-top: 10px; }
.stage.ask .gd-dialog { opacity: 1; transform: none; }

/* colis */
.gd-file { position: absolute; left: 22px; width: 54px; height: 54px; border-radius: 10px; transition: transform .8s, opacity .8s; }
.gd-file.f0 { top: 40px; } .gd-file.f1 { top: 104px; } .gd-file.f2 { top: 168px; }
.stage.pack .gd-file { transform: translateX(110px) scale(.3); opacity: 0; }
.gd-parcel { position: absolute; left: 100px; right: 14px; top: 20px; padding: 12px; border-radius: 14px; background: var(--layer2); opacity: .25; transition: opacity .5s; }
.stage.pack .gd-parcel { opacity: 1; }
.gd-opt { font-size: 12px; color: var(--muted); margin-top: 6px; }
.stage[data-scene="parcel"] .sc-ok { white-space: normal; width: 84%; text-align: center; bottom: 12px; }

/* code oublié */
.gd-game { position: absolute; inset: 0; transition: opacity .4s; }
.gd-touch { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); opacity: 0; transition: opacity .3s; }
.gd-touch.t1 { left: 32%; top: 40%; } .gd-touch.t2 { left: 56%; top: 52%; }
.stage.touch .gd-touch { opacity: 1; }
.gd-hold { position: absolute; left: 40px; right: 40px; bottom: 26px; text-align: center; font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .3s; }
.gd-hold i { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(157, 184, 255, .15); position: relative; overflow: hidden; }
.gd-hold i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--peri); }
.stage.touch .gd-hold { opacity: 1; }
.stage.touch .gd-hold i::after { width: 100%; transition: width 3s linear; }
.gd-entry { position: absolute; inset: 14px; padding: 14px; border-radius: 14px; background: var(--layer2); opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .4s; }
.stage.entry .gd-game { opacity: 0; }
.stage.entry .gd-entry { opacity: 1; transform: none; }
.stage[data-scene="forgot"] .sc-ok { bottom: 22px; }

.stage.still .gd-flash, .stage.still .gd-shot { display: none; }

.ch-art .stage[data-picker] { grid-template-columns: 170px minmax(0, 1fr); }
.ch-art .pk-list { padding-left: 12px; }
.ch-art .pk-preview { padding: 0 14px; }