*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0a0714;color:#f0e8d8;font-family:Georgia,serif;-webkit-font-smoothing:antialiased}
:root{--gold:#c9a84c;--gold-l:#e8c97a;--deep:#0a0714;--muted:#8a7a9a;--dim:#4a3f5a;--text:#f0e8d8}
#bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(58,26,107,0.5),transparent),radial-gradient(ellipse 50% 40% at 80% 60%,rgba(155,77,138,0.15),transparent),#0a0714}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;pointer-events:none;transition:opacity 0.4s;padding-bottom:2rem}
.screen.active{opacity:1;pointer-events:all}
.topbar{width:100%;display:flex;align-items:center;gap:0.6rem;padding:0.7rem 1rem;background:rgba(10,7,20,0.85);position:sticky;top:0;z-index:10;flex-shrink:0}
.back-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(201,168,76,0.3);background:none;color:var(--gold);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prog-track{flex:1;height:2px;background:rgba(201,168,76,0.15);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--gold);border-radius:2px;transition:width 0.5s}
.step-lbl{font-size:0.65rem;color:var(--muted);letter-spacing:0.1em;flex-shrink:0}
#testBar{width:100%;background:rgba(212,175,106,0.1);border-bottom:1px solid rgba(212,175,106,0.25);padding:0.4rem 1rem;display:flex;align-items:center;justify-content:center;gap:0.8rem;font-size:0.62rem;letter-spacing:0.08em;color:var(--gold-l);flex-shrink:0}
#testBar button{background:rgba(212,175,106,0.12);border:1px solid rgba(212,175,106,0.35);color:var(--gold);border-radius:20px;padding:2px 10px;font-size:0.58rem;cursor:pointer}
.content{width:100%;max-width:440px;padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:1rem}
.ttl{font-size:clamp(1.4rem,5vw,2rem);color:var(--gold);letter-spacing:0.06em;text-align:center;line-height:1.2}
.sub{font-size:0.88rem;color:var(--muted);font-style:italic;text-align:center;line-height:1.6}
.slbl{font-size:0.62rem;letter-spacing:0.18em;color:var(--muted);text-transform:uppercase}
.div{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0.6rem auto}
.btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;border-radius:50px;font-family:Georgia,serif;letter-spacing:0.08em;font-size:0.82rem;padding:0.85rem 2rem;cursor:pointer;border:none;transition:all 0.2s}
.btn-g{background:linear-gradient(135deg,#c9a84c,#8a6530,#c9a84c);background-size:200%;color:#0a0714;font-weight:bold;box-shadow:0 4px 20px rgba(201,168,76,0.25)}
.btn-g:active{transform:scale(0.97);background-position:100%}
.btn-gh{background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,76,0.25);color:var(--gold)}
.btn-gh:active{background:rgba(201,168,76,0.1);transform:scale(0.97)}
.btn-full{width:100%}
.btn-sm{padding:0.5rem 1rem;font-size:0.72rem}

/* Plan cards */
.plan-card{border-radius:14px;padding:1.2rem 1.4rem;cursor:pointer;border:1px solid rgba(201,168,76,0.2);background:rgba(20,15,40,0.8);transition:all 0.2s;-webkit-tap-highlight-color:transparent}
.plan-card:active{transform:scale(0.99)}
.plan-card.prem{border-color:rgba(212,175,106,0.4);background:rgba(25,16,8,0.9);box-shadow:0 4px 24px rgba(212,175,106,0.08)}
.pbadge{display:inline-block;font-size:0.58rem;letter-spacing:0.15em;padding:2px 10px;border-radius:20px;margin-bottom:0.5rem}
.pb-f{background:rgba(201,168,76,0.1);color:var(--gold);border:1px solid rgba(201,168,76,0.3)}
.pb-p{background:rgba(212,175,106,0.15);color:#d4af6a;border:1px solid rgba(212,175,106,0.4)}
.pl-name{font-size:1.05rem;color:#f5e8c0;margin-bottom:0.2rem}
.pl-price{font-size:1.25rem;color:var(--gold);margin-bottom:0.45rem}
.pl-price span{font-size:0.72rem;color:var(--muted)}
.feats{list-style:none;display:flex;flex-direction:column;gap:0.22rem}
.feats li{font-size:0.8rem;color:var(--muted);display:flex;gap:0.4rem}
.feats li.on{color:var(--text)}

/* Ambiance */
.br-ring{width:68px;height:68px;border-radius:50%;border:1.5px solid rgba(201,168,76,0.35);display:flex;align-items:center;justify-content:center;margin:0 auto}
.br-dot{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,0.3),rgba(58,26,107,0.2));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(0.7);opacity:0.5}50%{transform:scale(1.2);opacity:1}}
.br-lbl{font-size:0.58rem;letter-spacing:0.12em;color:var(--gold);text-align:center;margin-top:0.5rem;animation:breathe 6s ease-in-out infinite}
.step-item{display:flex;gap:0.8rem;padding-bottom:1.1rem;opacity:0;transform:translateY(14px);transition:all 0.5s}
.step-item.show{opacity:1;transform:translateY(0)}
.step-ico{width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,168,76,0.2);background:rgba(201,168,76,0.04);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;transition:all 0.4s}
.step-ico.lit{border-color:var(--gold);background:rgba(201,168,76,0.1);box-shadow:0 0 14px rgba(201,168,76,0.2)}
.step-title{font-size:0.85rem;color:var(--gold);letter-spacing:0.05em;margin-bottom:0.2rem}
.step-desc{font-size:0.82rem;color:var(--muted);line-height:1.6;font-style:italic}

/* Question */
.chip{font-size:0.78rem;padding:0.33rem 0.82rem;border-radius:20px;border:1px solid rgba(201,168,76,0.2);background:rgba(201,168,76,0.03);color:var(--muted);cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent}
.chip.on{border-color:var(--gold);background:rgba(201,168,76,0.11);color:var(--gold-l)}
.qarea{width:100%;min-height:108px;background:rgba(255,255,255,0.04);border:1px solid rgba(201,168,76,0.2);border-radius:13px;color:var(--text);font-family:Georgia,serif;font-size:0.95rem;line-height:1.7;padding:0.85rem 1rem;resize:none;outline:none;transition:border-color 0.3s}
.qarea:focus{border-color:rgba(201,168,76,0.5)}
.qarea::placeholder{color:var(--dim);font-style:italic}
.tips-box{background:rgba(201,168,76,0.03);border:1px solid rgba(201,168,76,0.1);border-radius:10px;padding:0.85rem 1rem}
.tips-t{font-size:0.6rem;letter-spacing:0.14em;color:var(--gold);margin-bottom:0.35rem;text-transform:uppercase}
.tips-list{list-style:none;display:flex;flex-direction:column;gap:0.22rem}
.tips-list li{font-size:0.78rem;color:var(--muted);display:flex;gap:0.4rem;line-height:1.4}

/* Tirage */
.sp-opt{border-radius:11px;padding:0.9rem 1rem;cursor:pointer;border:1px solid rgba(201,168,76,0.15);background:rgba(20,15,40,0.6);display:flex;align-items:center;gap:0.8rem;transition:all 0.2s;-webkit-tap-highlight-color:transparent}
.sp-opt:active{transform:scale(0.99)}
.sp-opt.chosen{border-color:var(--gold);background:rgba(201,168,76,0.07)}
.sp-opt.locked{opacity:0.4;cursor:default}
.mc{width:11px;height:19px;border-radius:2px;border:1px solid rgba(201,168,76,0.35);background:rgba(201,168,76,0.05)}
.mc.hi{background:rgba(201,168,76,0.2);border-color:var(--gold)}
.sp-name{font-size:0.88rem;color:#f5e8c0;margin-bottom:0.12rem}
.sp-sub{font-size:0.75rem;color:var(--muted);line-height:1.4}
.sp-n{font-size:0.58rem;color:var(--dim);margin-top:0.12rem;letter-spacing:0.05em}
.prem-ban{background:rgba(25,16,8,0.85);border:1px solid rgba(212,175,106,0.3);border-radius:11px;padding:0.85rem 1rem;display:flex;align-items:center;gap:0.7rem}
.prem-txt{flex:1;font-size:0.78rem;color:var(--muted);line-height:1.5}
.prem-txt strong{color:#d4af6a}

/* Battement */
.card-anim{width:160px;height:100px;position:relative;margin:0 auto}
.acard{position:absolute;width:52px;height:86px;border-radius:5px;border:1px solid rgba(201,168,76,0.35);background:linear-gradient(135deg,#1a0e2e,#0a0714);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:rgba(201,168,76,0.3)}
.acard:nth-child(1){left:6px;top:6px;animation:f1 3s ease-in-out infinite}
.acard:nth-child(2){left:54px;top:2px;animation:f2 3s ease-in-out infinite}
.acard:nth-child(3){left:102px;top:6px;animation:f3 3s ease-in-out infinite}
@keyframes f1{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(0)}}
@keyframes f2{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes f3{0%,100%{transform:rotate(17deg)}50%{transform:rotate(0)}}
.q-remind{background:rgba(58,26,107,0.2);border:1px solid rgba(201,168,76,0.14);border-radius:9px;padding:0.7rem 0.9rem;font-size:0.88rem;color:var(--muted);font-style:italic;line-height:1.5}
.q-remind strong{color:var(--gold-l);font-style:normal}
.sh-step{display:flex;gap:0.65rem;padding:0.65rem 0.85rem;background:rgba(201,168,76,0.03);border:1px solid rgba(201,168,76,0.07);border-radius:8px;opacity:0.4;transition:all 0.4s}
.sh-step.lit{opacity:1;border-color:rgba(201,168,76,0.2);background:rgba(201,168,76,0.06)}
.sh-num{font-size:0.58rem;color:var(--gold);width:16px;flex-shrink:0;padding-top:2px}
.sh-txt{font-size:0.82rem;color:var(--muted);line-height:1.5}
.sh-step.lit .sh-txt{color:var(--text)}

/* Capture */
.cam-wrap{position:relative;width:calc(100% - 2rem);margin:0 auto;border-radius:13px;overflow:hidden;background:#000;aspect-ratio:4/3;flex-shrink:0}
.cam-v,.cam-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam-s{display:none}
.cam-ov{position:absolute;inset:0;pointer-events:none}
.cc{position:absolute;width:20px;height:20px;border-color:rgba(201,168,76,0.7);border-style:solid}
.tl{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.tr{top:10px;right:10px;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.bl{bottom:10px;left:10px;border-width:0 0 2px 2px;border-radius:0 0 0 3px}
.br{bottom:10px;right:10px;border-width:0 2px 2px 0;border-radius:0 0 3px 0}
.cam-guide{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:0.6rem;letter-spacing:0.1em;color:rgba(201,168,76,0.8)}
.cam-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.65rem;background:rgba(10,7,20,0.92);cursor:pointer}
.cam-ico{width:50px;height:50px;border-radius:50%;border:1px solid rgba(201,168,76,0.3);background:rgba(201,168,76,0.07);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.cam-txt{font-size:0.68rem;letter-spacing:0.1em;color:var(--gold);text-align:center}

/* Analyse en cours overlay */
.analyzing-ov{position:absolute;inset:0;background:rgba(10,7,20,0.88);display:none;flex-direction:column;align-items:center;justify-content:center;gap:0.8rem;border-radius:13px}
.analyzing-ov.show{display:flex}
.spin{width:36px;height:36px;border:1.5px solid rgba(201,168,76,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.analyzing-txt{font-size:0.75rem;letter-spacing:0.1em;color:var(--gold-l);font-style:italic}

/* Cards result grid */
.cards-result-grid{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;padding:0.5rem 1rem}
.crd-slot{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.crd-visual{width:52px;height:84px;border-radius:5px;border:1px solid rgba(201,168,76,0.5);background:linear-gradient(135deg,#1a0e2e,#0d0a1a);display:flex;align-items:center;justify-content:center;padding:3px;position:relative;transition:all 0.2s}
.crd-visual:active{transform:scale(0.96)}
.crd-visual.rev{transform:rotate(180deg)}
.crd-visual.rev:active{transform:rotate(180deg) scale(0.96)}
.crd-name{font-size:0.42rem;color:var(--gold);text-align:center;line-height:1.25;letter-spacing:0.02em}
.crd-pos{font-size:0.48rem;color:var(--muted);text-align:center;max-width:56px}
.crd-slot.edit-mode .crd-visual{border-color:rgba(255,200,50,0.7);box-shadow:0 0 8px rgba(255,200,50,0.3)}

/* Bottom sheet pour édition carte */
.sheet-ov{position:fixed;inset:0;background:rgba(10,7,20,0.82);z-index:200;display:none;align-items:flex-end;justify-content:center}
.sheet-ov.open{display:flex}
.sheet{width:100%;max-width:440px;background:linear-gradient(180deg,#1a0e2e,#0a0714);border-radius:18px 18px 0 0;border:1px solid rgba(201,168,76,0.2);padding:1.1rem 1.2rem 2rem}
.sheet-handle{width:32px;height:4px;background:rgba(255,255,255,0.14);border-radius:2px;margin:0 auto 0.9rem}
.sh-field-label{font-size:0.58rem;letter-spacing:0.12em;color:var(--muted);margin-bottom:0.3rem}
.sh-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,76,0.2);border-radius:9px;color:var(--text);font-family:Georgia,serif;font-size:0.95rem;padding:0.6rem 0.85rem;outline:none}
.sh-input:focus{border-color:rgba(201,168,76,0.5)}
.sh-sugg{background:rgba(20,12,35,0.98);border:1px solid rgba(201,168,76,0.2);border-radius:9px;margin-top:3px;display:none;max-height:180px;overflow-y:auto}
.sh-sugg.open{display:block}
.sug-i{padding:0.5rem 0.85rem;font-size:0.85rem;color:var(--muted);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.04)}
.sug-i:hover,.sug-i:active{background:rgba(201,168,76,0.08);color:var(--gold-l)}
.rev-row{display:flex;align-items:center;gap:0.5rem;margin:0.7rem 0}
.rev-lbl{font-size:0.6rem;letter-spacing:0.1em;color:var(--muted)}
.tog{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);position:relative;cursor:pointer;transition:background 0.2s}
.tog-k{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.5);transition:all 0.2s}
.tog.on{background:rgba(155,77,138,0.4);border-color:rgba(155,77,138,0.6)}
.tog.on .tog-k{left:18px;background:#9b4d8a}

/* Slots progress */
.slots-bar{display:flex;gap:5px;justify-content:center;padding:0.3rem 1rem;width:100%}
.slot-pip{height:4px;border-radius:2px;flex:1;max-width:44px;background:rgba(201,168,76,0.14);transition:background 0.3s}
.slot-pip.done{background:var(--gold)}
.slot-pip.cur{background:var(--gold-l);animation:pp 1s infinite}
@keyframes pp{0%,100%{opacity:1}50%{opacity:0.4}}

/* Lecture */
.q-recap{background:rgba(58,26,107,0.18);border:1px solid rgba(201,168,76,0.14);border-radius:10px;padding:0.75rem 0.9rem;font-size:0.85rem;color:var(--muted);font-style:italic;line-height:1.6}
.q-recap::before{content:'Votre question';display:block;font-style:normal;font-size:0.56rem;letter-spacing:0.12em;color:var(--gold);margin-bottom:0.25rem}
.drawn-row{display:flex;gap:0.45rem;justify-content:center;flex-wrap:wrap}
.d-card{display:flex;flex-direction:column;align-items:center;gap:2px}
.d-vis{width:48px;height:78px;border-radius:5px;border:1px solid rgba(201,168,76,0.4);background:linear-gradient(135deg,#1a0e2e,#0d0a1a);display:flex;align-items:center;justify-content:center;padding:3px}
.d-vis.rev{transform:rotate(180deg)}
.d-name{font-size:0.42rem;color:var(--gold);text-align:center;line-height:1.2}
.d-pos{font-size:0.48rem;color:var(--muted);text-align:center;max-width:52px}
.d-rev{font-size:0.44rem;color:#9b4d8a}
.r-block{background:rgba(255,255,255,0.02);border:1px solid rgba(201,168,76,0.11);border-radius:12px;padding:1rem;position:relative;overflow:hidden}
.r-block::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.32),transparent)}
.r-lbl{font-size:0.58rem;letter-spacing:0.13em;color:var(--gold);text-transform:uppercase;margin-bottom:0.55rem;display:flex;align-items:center;gap:0.35rem}
.r-text{font-size:0.92rem;line-height:1.82;color:var(--text);font-weight:300}
.r-text em{color:var(--gold-l);font-style:italic}
.r-text p{margin-bottom:0.65rem}
.r-text p:last-child{margin-bottom:0}
.prem-block{background:linear-gradient(135deg,rgba(25,16,8,0.9),rgba(18,10,4,0.9));border:1px solid rgba(212,175,106,0.28);border-radius:12px;padding:1rem}
.prem-lbl{font-size:0.58rem;letter-spacing:0.13em;color:#d4af6a;margin-bottom:0.55rem}
.load-wrap{display:flex;flex-direction:column;align-items:center;gap:0.7rem;padding:1rem}
.load-txt{font-size:0.82rem;color:var(--muted);font-style:italic}

/* Toast */
#toast{position:fixed;bottom:1.8rem;left:50%;transform:translateX(-50%) translateY(80px);background:rgba(30,20,50,0.97);border:1px solid rgba(201,168,76,0.3);border-radius:30px;padding:0.5rem 1.2rem;font-size:0.7rem;letter-spacing:0.08em;color:var(--gold);z-index:999;transition:transform 0.3s;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* Mode toggle */
.m-tog{display:flex;background:rgba(255,255,255,0.04);border:1px solid rgba(201,168,76,0.14);border-radius:8px;overflow:hidden;width:100%}
.m-btn{flex:1;padding:0.48rem;font-family:Georgia,serif;font-size:0.63rem;letter-spacing:0.06em;color:var(--muted);text-align:center;cursor:pointer;border:none;background:none;transition:all 0.2s}
.m-btn.on{background:rgba(201,168,76,0.13);color:var(--gold)}

/* Error block */
.err-block{background:rgba(220,50,50,0.08);border:1px solid rgba(220,50,50,0.25);border-radius:10px;padding:0.85rem;font-size:0.82rem;color:#ff8080;line-height:1.6}
.err-block strong{color:#ff6060}

/* ─── LECTEUR AMBIANCE ──────────────────────────────────────── */
.ambiance-player{width:100%;background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.2);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:0.75rem}
.ambiance-title{font-size:0.6rem;letter-spacing:0.16em;color:var(--gold);text-transform:uppercase;text-align:center}
.ambiance-select-wrap{display:flex;flex-direction:column;gap:0.35rem}
.ambiance-select{width:100%;background:rgba(20,15,40,0.9);border:1px solid rgba(201,168,76,0.25);border-radius:9px;color:var(--text);font-family:Georgia,serif;font-size:0.88rem;padding:0.55rem 0.85rem;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.8rem center}
.ambiance-select:focus{border-color:rgba(201,168,76,0.5)}
.ambiance-select option{background:#1a0e2e;color:#f0e8d8}
.ambiance-controls{display:flex;align-items:center;gap:0.7rem}
.play-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,168,76,0.4);background:rgba(201,168,76,0.08);color:var(--gold);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s}
.play-btn:active{transform:scale(0.92);background:rgba(201,168,76,0.18)}
.play-btn.playing{background:rgba(201,168,76,0.15);border-color:var(--gold)}
.vol-wrap{flex:1;display:flex;align-items:center;gap:0.5rem}
.vol-label{font-size:0.7rem;color:var(--muted)}
.vol-slider{flex:1;-webkit-appearance:none;height:3px;border-radius:2px;background:rgba(201,168,76,0.2);outline:none;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer}
.stop-btn{font-size:0.68rem;background:rgba(255,255,255,0.04);border:1px solid rgba(201,168,76,0.2);color:var(--muted);border-radius:20px;padding:3px 10px;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0}
.stop-btn:hover{border-color:var(--gold);color:var(--gold)}
.ambiance-info{font-size:0.72rem;color:var(--muted);font-style:italic;text-align:center;min-height:1.1rem}
.ambiance-wave{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:14px;opacity:0;transition:opacity 0.4s}
.ambiance-wave.active{opacity:1}
.wave-bar{width:3px;border-radius:2px;background:var(--gold);animation:wv 1.2s ease-in-out infinite;opacity:0.65}
.wave-bar:nth-child(1){animation-delay:0s;height:5px}.wave-bar:nth-child(2){animation-delay:.15s;height:11px}.wave-bar:nth-child(3){animation-delay:.3s;height:7px}.wave-bar:nth-child(4){animation-delay:.1s;height:13px}.wave-bar:nth-child(5){animation-delay:.25s;height:5px}.wave-bar:nth-child(6){animation-delay:.4s;height:9px}.wave-bar:nth-child(7){animation-delay:.05s;height:7px}
@keyframes wv{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}
.wave-bar{width:3px;border-radius:2px;background:var(--gold);
  animation:wave-anim 1.2s ease-in-out infinite;opacity:0.6}
.wave-bar:nth-child(1){animation-delay:0s;height:6px}
.wave-bar:nth-child(2){animation-delay:0.15s;height:12px}
.wave-bar:nth-child(3){animation-delay:0.3s;height:8px}
.wave-bar:nth-child(4){animation-delay:0.1s;height:14px}
.wave-bar:nth-child(5){animation-delay:0.25s;height:6px}
.wave-bar:nth-child(6){animation-delay:0.4s;height:10px}
.wave-bar:nth-child(7){animation-delay:0.05s;height:8px}
@keyframes wave-anim{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}



/* ─── IMAGES DE CARTES ──────────────────────────────────── */
.added-card{display:flex;align-items:center;gap:0.7rem;padding:0.5rem 0.8rem;
  background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.2);
  border-radius:9px;margin-bottom:0.35rem}

/* ─── BOUTON PLAY PHOTO GWEN ────────────────────────────── */
.guide-play-btn{position:absolute;top:10px;left:10px;z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:rgba(10,7,20,0.65);border:2px solid rgba(201,168,76,0.7);
  color:#c9a84c;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:all 0.2s;-webkit-tap-highlight-color:transparent}
.guide-play-btn.playing{background:rgba(201,168,76,0.2);border-color:var(--gold)}
.guide-play-wave{display:none;align-items:center;gap:2px;height:14px}
.guide-play-btn.playing .guide-play-wave{display:flex}
.guide-play-btn.playing #introPlayIcon{display:none}
.guide-play-wave span{width:2px;border-radius:2px;background:#c9a84c;
  animation:pw 0.8s ease-in-out infinite;opacity:0.9}
.guide-play-wave span:nth-child(1){height:5px;animation-delay:0s}
.guide-play-wave span:nth-child(2){height:11px;animation-delay:0.15s}
.guide-play-wave span:nth-child(3){height:7px;animation-delay:0.08s}
@keyframes pw{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

/* ─── LECTEUR INTRO (éléments conservés) ────────────────── */
.intro-player{width:100%;max-width:440px;background:rgba(201,168,76,0.06);
  border:1px solid rgba(201,168,76,0.2);border-radius:14px;padding:0.75rem 1rem;
  display:flex;flex-direction:column;gap:0.5rem}

/* ─── ORACLE LOADER ─────────────────────────────────────── */
.oracle-loader{display:flex;flex-direction:column;align-items:center;
  padding:2rem 1rem;gap:0;position:relative}
.oracle-eye{position:relative;width:90px;height:90px;margin-bottom:1.5rem}
.oracle-ring{position:absolute;border-radius:50%;border:2px solid transparent}
.oracle-ring-1{inset:0;border-top-color:#c9a84c;border-right-color:rgba(201,168,76,0.3);
  animation:ring-spin 2s linear infinite}
.oracle-ring-2{inset:8px;border-top-color:rgba(201,168,76,0.7);
  border-left-color:rgba(155,107,154,0.5);animation:ring-spin 3s linear infinite reverse}
.oracle-ring-3{inset:16px;border-top-color:rgba(155,107,154,0.8);
  border-bottom-color:rgba(201,168,76,0.4);animation:ring-spin 1.5s linear infinite}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.oracle-center{position:absolute;inset:24px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(201,168,76,0.3),rgba(10,7,20,0.9));
  display:flex;align-items:center;justify-content:center;
  animation:eye-pulse 2s ease-in-out infinite}
@keyframes eye-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.oracle-eye-symbol{font-size:1.3rem;animation:symbol-glow 2s ease-in-out infinite}
@keyframes symbol-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.8) drop-shadow(0 0 6px #c9a84c)}}
.oracle-stars{position:absolute;width:90px;height:90px;inset:0}
.oracle-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#c9a84c}
.oracle-star:nth-child(1){top:5%;left:50%;animation:star-float 2.1s ease-in-out infinite 0s}
.oracle-star:nth-child(2){top:50%;right:5%;animation:star-float 1.8s ease-in-out infinite 0.3s}
.oracle-star:nth-child(3){bottom:5%;left:30%;animation:star-float 2.4s ease-in-out infinite 0.6s}
.oracle-star:nth-child(4){top:20%;left:5%;animation:star-float 1.6s ease-in-out infinite 0.9s}
.oracle-star:nth-child(5){bottom:20%;right:10%;animation:star-float 2.2s ease-in-out infinite 0.4s}
@keyframes star-float{0%,100%{opacity:0;transform:scale(0) translateY(0)}
  20%{opacity:1;transform:scale(1.5) translateY(-3px)}
  80%{opacity:0.6;transform:scale(1) translateY(-8px)}}
.oracle-phrase{font-family:Georgia,serif;font-size:0.88rem;color:var(--gold);
  font-style:italic;text-align:center;letter-spacing:0.05em;min-height:1.3rem;
  max-width:260px;line-height:1.4}
.oracle-sub{font-size:0.68rem;color:var(--muted);text-align:center;
  margin-top:0.4rem;letter-spacing:0.08em}
.oracle-runes{font-size:1.1rem;letter-spacing:0.3em;color:rgba(201,168,76,0.4);
  margin-top:0.8rem;width:220px;text-align:center}
.oracle-progress{width:200px;height:2px;background:rgba(201,168,76,0.1);
  border-radius:1px;margin-top:1rem;overflow:hidden}
.oracle-progress-fill{height:100%;
  background:linear-gradient(90deg,transparent,#c9a84c,rgba(155,107,154,0.8),#c9a84c,transparent);
  background-size:200% 100%;width:100%;animation:oracle-progress-anim 2s ease-in-out infinite}
@keyframes oracle-progress-anim{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ─── ANIMATION CARTE (SIMPLE — sans pseudo-elements) ────── */
.card-flip{animation:card-flip-in 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both}
@keyframes card-flip-in{
  0%{opacity:0;transform:rotateY(90deg) scale(0.8)}
  100%{opacity:1;transform:rotateY(0deg) scale(1)}}

/* ═══════════════════════════════════════════════════════════
   ANIMATION SPECTACULAIRE DES CARTES
   Technique : animation sur l'img directement, pas de pseudo-elements
   largement positionnés qui pourraient intercepter des taps
═══════════════════════════════════════════════════════════════ */

/* Wrapper de la carte — taille fixe, pas de débordement */
.card-reveal-wrap {
  position: relative;
  width: 44px;
  height: 72px;
  flex-shrink: 0;
  /* PAS de overflow:visible ni de z-index élevé */
}

/* L'image elle-même porte toute l'animation */
.card-reveal-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  transform-origin: center bottom;
  animation:
    card-appear 1.1s cubic-bezier(0.23, 1, 0.32, 1) both,
    card-glow   2s   ease-out 0.8s both;
}

/* Apparition : surgit du bas avec flash doré */
@keyframes card-appear {
  0%   {
    opacity: 0;
    transform: perspective(500px) rotateX(80deg) translateY(30px) scale(0.4);
    filter: brightness(4) blur(6px) saturate(0);
  }
  30%  {
    opacity: 0.8;
    transform: perspective(500px) rotateX(-18deg) translateY(-8px) scale(1.12);
    filter: brightness(2.5) blur(1px) saturate(1.5);
  }
  60%  {
    transform: perspective(500px) rotateX(6deg) translateY(2px) scale(0.97);
    filter: brightness(1.3) blur(0) saturate(1.2);
  }
  80%  {
    transform: perspective(500px) rotateX(-2deg) scale(1.02);
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: perspective(500px) rotateX(0deg) translateY(0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
}

/* Halo doré qui explose puis se stabilise */
@keyframes card-glow {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0), 0 0 40px 20px rgba(201,168,76,0.9); }
  30%  { box-shadow: 0 0 0 4px rgba(201,168,76,0.7), 0 0 30px 10px rgba(201,168,76,0.5); }
  70%  { box-shadow: 0 0 0 2px rgba(201,168,76,0.35), 0 0 12px 4px rgba(201,168,76,0.2); }
  100% { box-shadow: 0 0 0 1px rgba(201,168,76,0.2), 0 0 6px 1px rgba(201,168,76,0.1); }
}

/* Délais en cascade — plus espacés pour un effet dramatique */
.card-reveal-wrap:nth-child(1) img { animation-delay: 0s,    0.8s; }
.card-reveal-wrap:nth-child(2) img { animation-delay: 0.25s, 1.05s; }
.card-reveal-wrap:nth-child(3) img { animation-delay: 0.5s,  1.3s; }
.card-reveal-wrap:nth-child(4) img { animation-delay: 0.75s, 1.55s; }
.card-reveal-wrap:nth-child(5) img { animation-delay: 1s,    1.8s; }
  50%  { box-shadow: 0 0 0 3px rgba(201,168,76,0.6), 0 0 30px 12px rgba(201,168,76,0.4); }
  100% { box-shadow: 0 0 0 1px rgba(201,168,76,0.25), 0 0 8px 2px rgba(201,168,76,0.15); }
}

/* Délais en cascade pour plusieurs cartes */
.card-reveal-wrap:nth-child(1) img { animation-delay: 0s,    0.5s; }
.card-reveal-wrap:nth-child(2) img { animation-delay: 0.12s, 0.62s; }
.card-reveal-wrap:nth-child(3) img { animation-delay: 0.24s, 0.74s; }
.card-reveal-wrap:nth-child(4) img { animation-delay: 0.36s, 0.86s; }
.card-reveal-wrap:nth-child(5) img { animation-delay: 0.48s, 0.98s; }

/* Entrée de la ligne de carte (added-card) */
.added-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 9px;
  margin-bottom: 0.35rem;
  animation: row-enter 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes row-enter {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Particules dorées — SVG filter sur l'image, pas de DOM supplémentaire */
@keyframes card-flash {
  0%   { filter: brightness(3) saturate(0); }
  15%  { filter: brightness(2) saturate(2); }
  100% { filter: brightness(1) saturate(1); }
}

/* Version grande pour l'écran de lecture */
.d-card-img {
  width: 60px;
  height: 98px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(201,168,76,0.4);
  animation: card-appear-big 1.3s cubic-bezier(0.23, 1, 0.32, 1) both,
             card-glow-big   2.5s ease-out 1s both;
  transform-origin: center bottom;
}

@keyframes card-appear-big {
  0%   { opacity:0; transform:perspective(700px) rotateY(180deg) scale(0.3); filter:brightness(5) blur(8px); }
  25%  { opacity:0.6; transform:perspective(700px) rotateY(30deg) scale(0.9); filter:brightness(3) blur(2px); }
  50%  { transform:perspective(700px) rotateY(-12deg) scale(1.08); filter:brightness(1.8); }
  75%  { transform:perspective(700px) rotateY(4deg) scale(0.98); filter:brightness(1.2); }
  100% { opacity:1; transform:perspective(700px) rotateY(0deg) scale(1); filter:brightness(1); }
}
  40%  { transform: perspective(600px) rotateY(-10deg) scale(1.05); filter: brightness(1.5); }
  70%  { transform: perspective(600px) rotateY(3deg) scale(0.98); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0deg) scale(1); filter: brightness(1); }
}

@keyframes card-glow-big {
  0%   { box-shadow: 0 0 30px 15px rgba(201,168,76,0.7); }
  60%  { box-shadow: 0 0 15px 5px rgba(201,168,76,0.3); }
  100% { box-shadow: 0 0 6px 2px rgba(201,168,76,0.15); }
}



/* ─── CAPTURE — TOGGLE RENVERSÉE ────────────────────────────── */



/* ═══════════════════════════════════════════════════════════
   ÉCRAN CAPTURE — Styles complets
═══════════════════════════════════════════════════════════ */

/* Onglets Saisie / Voix */
.input-mode-tabs{display:flex;gap:0.4rem;background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.15);border-radius:10px;padding:0.25rem}
.imt-btn{flex:1;padding:0.4rem 0.6rem;border-radius:7px;border:none;
  background:transparent;color:var(--muted);font-size:0.78rem;
  font-family:Georgia,serif;cursor:pointer;transition:all 0.2s;
  -webkit-tap-highlight-color:transparent;letter-spacing:0.03em}
.imt-btn.active{background:rgba(201,168,76,0.18);color:var(--gold);
  border:1px solid rgba(201,168,76,0.35)}

/* Champ saisie */
.card-search-wrap{position:relative;width:100%;max-width:440px;padding:0 1rem;
  margin:0 auto}
.card-search-icon{position:absolute;left:1.7rem;top:50%;transform:translateY(-50%);
  font-size:0.9rem;pointer-events:none;opacity:0.5;z-index:1}
.card-search-input{width:100%;box-sizing:border-box;
  padding:0.65rem 0.9rem 0.65rem 2.4rem;
  background:rgba(10,7,20,0.7);border:1px solid rgba(201,168,76,0.25);
  border-radius:10px;color:#e8d4a0;font-family:Georgia,serif;font-size:0.88rem;
  outline:none;transition:border-color 0.2s;-webkit-appearance:none}
.card-search-input::placeholder{color:rgba(200,180,140,0.35);font-style:italic}
.card-search-input:focus{border-color:rgba(201,168,76,0.55);background:rgba(10,7,20,0.85)}

/* Suggestions */
.card-suggestions{position:absolute;left:1rem;right:1rem;top:calc(100% + 2px);
  background:rgba(14,9,28,0.98);border:1px solid rgba(201,168,76,0.3);
  border-radius:10px;z-index:100;overflow:hidden;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.6)}
.card-suggestions.open{display:block}
.sug-item{padding:0.55rem 1rem;color:#d4c4a0;font-size:0.84rem;
  font-family:Georgia,serif;cursor:pointer;
  border-bottom:1px solid rgba(201,168,76,0.08);transition:background 0.15s;
  -webkit-tap-highlight-color:transparent}
.sug-item:last-child{border-bottom:none}
.sug-item:active,.sug-item.hi{background:rgba(201,168,76,0.12);color:var(--gold)}

/* Boutons aléatoires */
.btn-rnd{flex:1;padding:0.55rem 0.5rem;background:rgba(201,168,76,0.06);
  border:1px solid rgba(201,168,76,0.2);border-radius:10px;color:var(--muted);
  font-size:0.75rem;font-family:Georgia,serif;cursor:pointer;text-align:center;
  transition:all 0.15s;-webkit-tap-highlight-color:transparent}
.btn-rnd:active{background:rgba(201,168,76,0.14);color:var(--gold);transform:scale(0.97)}

/* Toggle renversée */
.rev-toggle-wrap{width:100%;max-width:440px;padding:0.25rem 1rem;
  display:flex;align-items:center;gap:0.6rem}
.rev-toggle-label{font-size:0.72rem;color:var(--muted);letter-spacing:0.05em;flex:1}
.rev-tog{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);position:relative;cursor:pointer;
  transition:background 0.2s,border-color 0.2s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent}
.rev-tog.on{background:rgba(155,77,138,0.45);border-color:rgba(155,77,138,0.7)}
.rev-tog-k{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,0.4);transition:left 0.2s,background 0.2s}
.rev-tog.on .rev-tog-k{left:18px;background:#c47fba}

/* Slots progression */
.slots-bar{width:100%;max-width:440px;padding:0.2rem 1rem;
  display:flex;gap:0.35rem;justify-content:center}
.slot-pip{width:28px;height:4px;border-radius:2px;background:rgba(201,168,76,0.15);
  transition:background 0.3s}
.slot-pip.done{background:var(--gold)}
.slot-pip.cur{background:rgba(201,168,76,0.5)}

/* Carte ajoutée */
.added-card{display:flex;align-items:center;gap:0.7rem;padding:0.5rem 0.8rem;
  background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.18);
  border-radius:10px;margin-bottom:0.3rem}
.ac-name{font-size:0.88rem;color:#e0cda0;font-family:Georgia,serif}
.ac-pos{font-size:0.68rem;color:var(--muted);margin-top:0.1rem;letter-spacing:0.05em}
.ac-rev{font-size:0.65rem;color:#c47fba;margin-top:0.1rem}
.ac-del{margin-left:auto;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;font-size:0.7rem;
  color:var(--muted);cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.ac-del:active{background:rgba(255,80,80,0.2);color:#ff6b6b}

/* Placeholder carte */
.card-placeholder{width:44px;height:72px;border-radius:5px;
  background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(10,7,20,0.7));
  border:1px solid rgba(201,168,76,0.2);display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;flex-shrink:0}

/* Micro / voix */
.mic-btn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(201,168,76,0.4);
  background:rgba(201,168,76,0.08);font-size:1.6rem;cursor:pointer;
  transition:all 0.2s;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center}
.mic-btn.listening{border-color:#c47fba;background:rgba(155,77,138,0.2);
  animation:mic-pulse 1s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(155,77,138,0.4)}
  50%{box-shadow:0 0 0 12px rgba(155,77,138,0)}}
.mic-status{font-size:0.78rem;color:var(--muted);text-align:center;font-style:italic}
.mic-status.active{color:var(--gold)}
.mic-status.ok{color:#81c784}
.mic-transcript{font-size:0.82rem;color:#e0cda0;font-style:italic;
  text-align:center;min-height:1.2rem}
.voice-wave{display:flex;align-items:center;gap:3px;height:24px;
  opacity:0.3;transition:opacity 0.3s}
.voice-wave.active{opacity:1}
.vw-bar{width:3px;border-radius:2px;background:var(--gold);
  animation:vw 0.8s ease-in-out infinite}
.vw-bar:nth-child(1){height:8px;animation-delay:0s}
.vw-bar:nth-child(2){height:18px;animation-delay:0.1s}
.vw-bar:nth-child(3){height:12px;animation-delay:0.2s}
.vw-bar:nth-child(4){height:20px;animation-delay:0.05s}
.vw-bar:nth-child(5){height:10px;animation-delay:0.15s}
@keyframes vw{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

/* ─── BOUTON MUSIQUE TOPBAR ─────────────────────────────── */
.music-topbar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,168,76,0.45);
  background: rgba(201,168,76,0.08);
  color: var(--gold);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.music-topbar-btn:active {
  background: rgba(201,168,76,0.2);
  transform: scale(0.92);
}
.music-topbar-btn.playing {
  background: rgba(201,168,76,0.18);
  border-color: var(--gold);
  animation: music-glow 2s ease-in-out infinite;
}
@keyframes music-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(201,168,76,0); }
}