/* BatiFlow — couche de marque (batiflow.app) posée sur style.css.
   Typo Outfit (titres, étiquettes) + Manrope (texte), encre #121212, orange #E4572E.
   L'iPhone est une reproduction des écrans réels de l'app (vidéo promo v4), en vue subjective. */
:root{--ink:#121212;--paper:#F1F0F0;--accent:#E4572E;--gold:#F08A65;--white:#F4F4F4;--doux:rgba(255,255,255,.68);--ease-b:cubic-bezier(.2,.7,.1,1)}
body{background:var(--ink);font-family:Manrope,system-ui,sans-serif}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.02}
h1 em,h2 em{color:rgba(255,255,255,.58);font-style:normal}
.vignette{background:linear-gradient(90deg,rgba(14,14,16,.86),transparent 72%),linear-gradient(0deg,rgba(12,12,14,.92),transparent 27%,transparent 78%,rgba(12,12,14,.55))}
#transition{background:var(--ink)}

/* Étiquettes : comme les .kicker du site */
.eyebrow,#phaseLabel,#completed,.simulation,#location small,#location .eyebrow,#stageCaption small,.issue-category,#visitHint{font-family:Outfit,system-ui,sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{color:rgba(255,255,255,.72)}
.eyebrow i{background:var(--accent)}
.live-dot{background:var(--accent);box-shadow:0 0 12px rgba(228,87,46,.45)}

/* Logo : batiflow. */
#brand{gap:0;align-items:center}
#brand>.logo{display:inline;border:0;margin:0;padding:0;font:700 26px/1 Outfit,system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
#brand>.logo i{font-style:normal;color:var(--accent)}
#brand>.brand-tag{border-left:1px solid rgba(255,255,255,.25);margin-left:18px;padding-left:18px;font:500 10px/1 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.7)}

/* Boutons : pilules du site */
.pill{font:500 15px/1 Outfit,system-ui,sans-serif;background:#fff;color:var(--ink);border-radius:999px;padding:16px 24px;gap:14px}
.pill:hover{background:var(--accent);color:#fff;filter:none}
.secondary-pill{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
#routeBtn,.residences-button{font:500 13px/1 Outfit,system-ui,sans-serif;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(18,18,18,.25)}
.text-btn{font-family:Outfit,system-ui,sans-serif;font-weight:500}

/* ================= iPhone en vue subjective ================= */
#pov{--ph:clamp(560px,104vh,1100px);left:63%;top:5vh;z-index:17;height:var(--ph);width:calc(var(--ph)*.48913);aspect-ratio:auto;margin-left:calc(var(--ph)*-.24457);transform-origin:50% 100%;perspective:1600px}
#pov .pov-light,#pov .pov-caption{display:none}
/* Contour officiel iPhone 17 Pro Cosmic Orange (le même que les vidéos : batiflow-reel/public/front) ;
   écran 1206 × 2622 à (72 ; 69) dans 1350 × 2760, posé SOUS le contour, qui porte l'îlot et les coins. */
#phone{height:100%;width:100%;padding:0;border-radius:0;background:none;box-shadow:none;transform-origin:50% 90%;transform-style:preserve-3d}
#phone .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20;filter:drop-shadow(0 50px 70px rgba(0,0,0,.5)) drop-shadow(0 14px 24px rgba(0,0,0,.35))}
#phone .side-key,#phone .bezel{display:none}
#phone .screen{position:absolute;left:5.333%;top:2.5%;width:89.333%;height:95%;border:0;border-radius:14.6% / 6.75%;overflow:hidden;background:#000;color:#fff;container-type:size;font-family:-apple-system,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;letter-spacing:0}
.screen .homebar{position:absolute;z-index:9;bottom:1.1cqh;left:50%;width:34cqw;height:.55cqh;margin-left:-17cqw;border-radius:9px;background:#fff;opacity:.85}
.screen.claire .homebar{background:#111}
.sb{position:absolute;z-index:8;top:0;left:0;right:0;height:8cqh;display:flex;align-items:center;justify-content:space-between;padding:0 9cqw 0 12cqw;font:600 4.1cqw/1 -apple-system,system-ui,sans-serif;color:#fff}
.sb-i{display:flex;gap:1.6cqw;align-items:center}.sb svg{height:3cqw}.sb svg.f,.sb .f{fill:currentColor}.sb .bat{height:3.1cqw;fill:none;stroke:currentColor;stroke-opacity:.45}.sb .bat .lvl{fill:#34c759;stroke:none}
.screen.claire .sb{color:#111}
.screen svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg{position:absolute;inset:0;padding-top:8cqh}
.pg.dark{background:#000;color:#fff}
.pg.light{background:#fff;color:#111}

/* Caméra */
.cam-top{height:7cqh;display:flex;align-items:center;justify-content:space-between;padding:0 4.5cqw}
.cam-top strong{font:600 3.9cqw/1 -apple-system,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62cqw}
.rbtn{width:8.6cqw;height:8.6cqw;border-radius:50%;background:#1c1c1e;display:grid;place-items:center}.rbtn svg{width:4.6cqw}
.rbtn.bleu{background:#1d2a44;color:#3d8bff}
#livePhoto.vf{position:relative;width:auto;margin:1cqh 4.2cqw 0;height:52cqh;border-radius:5.5cqw;overflow:hidden;background:#222}
.vf #phonePhoto{position:absolute;max-width:none;left:0;top:0;transform-origin:0 0}
.lieu{position:absolute;left:3cqw;top:2.6cqw;display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 2.8cqw 1.3cqw 2cqw;border-radius:99px;background:rgba(40,40,40,.62);backdrop-filter:blur(8px);font:500 3.1cqw/1 -apple-system,system-ui,sans-serif}.lieu svg{width:3.3cqw}
.rec{position:absolute;left:2.4cqw;right:2.4cqw;top:2.4cqw;height:8.6cqw;display:flex;align-items:center;justify-content:space-between;padding:0 1.2cqw 0 3cqw;border-radius:99px;background:rgba(28,28,30,.86);backdrop-filter:blur(10px);font:500 3cqw/1 -apple-system,system-ui,sans-serif;opacity:0}
.rec-l{display:flex;align-items:center;gap:1.6cqw}.rec-l b{font-weight:600;font-variant-numeric:tabular-nums}
.rd{width:2cqw;height:2cqw;border-radius:50%;background:#ff3b30}
.vu{display:flex;gap:.6cqw;align-items:center;height:3cqw}.vu i{width:.6cqw;background:#ff9f0a;border-radius:1px;height:60%}
.stop{display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 3cqw;border-radius:99px;background:var(--accent);font-weight:600}.stop i{width:2.6cqw;height:2.6cqw;border-radius:50%;border:.7cqw solid #fff}
.rec-hint{position:absolute;left:50%;top:13.4cqw;transform:translateX(-50%);white-space:nowrap;padding:1.1cqw 2.6cqw;border-radius:99px;background:rgba(28,28,30,.72);font:500 2.6cqw/1 -apple-system,system-ui,sans-serif;opacity:0}
.say{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2.4cqw;min-height:46%;padding:3.4cqw 4cqw;border-radius:4.6cqw;background:#fff;color:#111;box-shadow:0 6px 22px rgba(0,0,0,.35);transform:translateY(110%)}
.say-h{display:flex;justify-content:space-between;align-items:center;font:600 2.5cqw/1 -apple-system,system-ui,sans-serif;letter-spacing:.06em;color:#8e8e93}
.say-h .ard{display:flex;align-items:center;gap:1.4cqw;color:#2f6fe4;letter-spacing:0;font-weight:500}.say-h svg{width:3.6cqw;color:#111}
.say p{margin:3.6cqw 0 2.6cqw;font:600 3.7cqw/1.32 -apple-system,system-ui,sans-serif;min-height:5cqw}
.say-ph{display:flex;gap:1.6cqw}.say-ph i{width:11cqw;height:9cqw;border-radius:1.6cqw;background-size:cover;background-position:center}
.say-note{position:absolute;left:4cqw;bottom:3cqw;font:400 2.4cqw/1 -apple-system,system-ui,sans-serif;color:#aeaeb2}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.modebar{margin:2.6cqh 4.2cqw 0;height:15cqw;border-radius:99px;background:#1c1c1e;display:flex;align-items:center;justify-content:space-around;padding:0 2cqw}
.mb{width:9.4cqw;height:9.4cqw;border-radius:50%;background:#2c2c2e;display:grid;place-items:center;color:#fff}.mb svg{width:4.6cqw}
.mb.blanc{background:#fff;color:#111}
#shutter.shut{position:static;padding:0;width:13.4cqw;height:13.4cqw;margin:0;border-radius:50%;border:.9cqw solid #fff;background:transparent;box-shadow:none;display:grid;place-items:center;transform:scale(var(--tap,1))}
#shutter.shut i{position:static;display:block;width:10.4cqw;height:10.4cqw;margin:0;border:0;border-radius:50%;background:var(--accent);box-shadow:none;transition:none}
.cam-hint{margin-top:1.4cqh;text-align:center;font:400 2.9cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}
.last{margin:1.2cqh 4.2cqw 0;height:9.6cqw;border-radius:2.6cqw;background:#fff;color:#111;display:flex;align-items:center;justify-content:space-between;padding:0 3cqw;font:500 3.1cqw/1 -apple-system,system-ui,sans-serif}
.last svg{width:3.8cqw}.last-t{display:flex;align-items:center;gap:1.8cqw;min-width:0}.last-t em{font-style:normal;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46cqw}
.last-p{display:flex;align-items:center;gap:1.4cqw;flex:none}.last-p .chev{width:3.6cqw}
.tabs{position:absolute;left:0;right:0;bottom:2.4cqh;display:flex;justify-content:space-around;padding:0 4cqw}
.tabs span{display:flex;flex-direction:column;align-items:center;gap:1cqw;color:#fff;opacity:.85}.tabs span.on{opacity:1}.tabs svg{width:6cqw}.tabs small{font:500 2.3cqw/1 -apple-system,system-ui,sans-serif}

/* Préparer le constat */
#prepPage{transform:translateX(100%);overflow:hidden}
.pp-nav{display:flex;justify-content:space-between;align-items:center;padding:1.4cqh 5cqw 0;font:400 3.6cqw/1 -apple-system,system-ui,sans-serif}
.pp-nav span{display:flex;align-items:center;gap:1.4cqw}.pp-nav svg{width:4.2cqw}.pp-nav .dots{letter-spacing:.1em}
.pp-body{will-change:transform}
.pp-head{display:flex;align-items:center;justify-content:space-between;padding:2.6cqh 5cqw 0}
.pp-head h3{margin:0;font:700 5.4cqw/1.1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em}
.badge{display:flex;align-items:center;gap:1.2cqw;padding:1.2cqw 2.6cqw;border-radius:99px;border:1px solid var(--accent);color:var(--accent);font:500 2.8cqw/1 -apple-system,system-ui,sans-serif}.badge svg{width:3.2cqw}
.badge.ok{border-color:#34c759;color:#1f9d45}
.ia{display:flex;justify-content:flex-end;align-items:center;gap:1.2cqw;padding:1.4cqh 5cqw 0;font:500 2.7cqw/1 -apple-system,system-ui,sans-serif;color:#3a3a3c}.ia svg{width:3.2cqw}
.sel2{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin:1.6cqh 5cqw 0}
.sel2 div{border:1px solid #e5e5ea;border-radius:2.2cqw;padding:1.8cqw 2.6cqw}
.sel2 small{display:block;font:400 2.5cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}.sel2 b{display:block;margin-top:1cqw;font:500 3.2cqw/1.15 -apple-system,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proof{margin:1.8cqh 5cqw 0;border:1px solid #e5e5ea;border-radius:2.6cqw;padding:2.8cqw 3.2cqw}
.proof b{font:600 3.1cqw/1 -apple-system,system-ui,sans-serif}
.pl{display:flex;align-items:center;gap:2.4cqw;margin:2.4cqw 0}
.play{width:7cqw;height:7cqw;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff}.play svg{width:3.6cqw;fill:#fff;stroke:none}
.wave{flex:1;display:flex;align-items:center;gap:.7cqw;height:6cqw}.wave i{width:.7cqw;border-radius:1px;background:var(--accent)}
.dur{font:500 2.8cqw/1 -apple-system,system-ui,sans-serif;color:#3a3a3c;font-variant-numeric:tabular-nums}
.proof small{display:block;font:400 2.5cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}
.proof p{margin:1.2cqw 0 0;font:400 2.8cqw/1.35 -apple-system,system-ui,sans-serif;color:#3a3a3c;max-height:7.8cqw;overflow:hidden}
.prop{margin:2.2cqh 5cqw 0}.prop b{display:block;font:600 3.2cqw/1 -apple-system,system-ui,sans-serif}.prop small{display:block;margin-top:.9cqw;font:400 2.5cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}
.rows{margin:1.4cqh 5cqw 0;border:1px solid #e5e5ea;border-radius:2.6cqw}
.row{display:grid;grid-template-columns:23cqw 1fr;gap:2cqw;padding:2.2cqw 3cqw;border-top:1px solid #f0f0f2;font:400 2.9cqw/1.32 -apple-system,system-ui,sans-serif}
.row:first-child{border-top:0}.row small{font-size:2.6cqw;color:#8e8e93}
.row span{color:#111;min-height:3.6cqw}.row .dot{display:inline-block;width:2cqw;height:2cqw;border-radius:50%;background:#3B82F6;margin-right:1.4cqw;vertical-align:.1cqw}
.row.ph i{display:inline-block;width:13cqw;height:10cqw;border-radius:1.6cqw;background-size:cover;background-position:center;opacity:0}
.pp-actions{position:absolute;left:0;right:0;bottom:0;padding:2.4cqw 5cqw 6.4cqh;background:linear-gradient(transparent,#fff 18%);display:grid;gap:1.6cqh}
.approve{height:10.4cqw;border-radius:2.6cqw;background:var(--accent);color:#fff;display:grid;place-items:center;font:600 3.5cqw/1 -apple-system,system-ui,sans-serif;transform:scale(var(--tap,1))}
.approve.ok{background:#34c759}
.later{height:9.4cqw;border-radius:2.6cqw;background:#f2f2f7;color:#111;display:grid;place-items:center;font:500 3.3cqw/1 -apple-system,system-ui,sans-serif}

/* Le doigt (curseur tactile translucide, comme dans les vidéos) */
#touch{position:absolute;z-index:12;left:0;top:0;width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;border-radius:50%;background:rgba(255,255,255,.42);box-shadow:0 0 0 1.2cqw rgba(255,255,255,.18);opacity:0;pointer-events:none;transform:scale(var(--press,1))}
#touch i{display:none}

/* Légendes autour du téléphone */
#stageCaption>span{font-family:Outfit,system-ui,sans-serif;color:#fff;border-color:rgba(228,87,46,.6);background:rgba(228,87,46,.18)}
#stageCaption small{color:var(--accent)}
#stageCaption p{color:rgba(255,255,255,.75)}
#savedToast>span{border-color:rgba(52,199,89,.6);color:#5fd07c}
#savedToast>div{font-family:Outfit,system-ui,sans-serif;font-weight:500}

@media (max-width:900px){
 #pov{--ph:clamp(520px,96vh,900px);left:50%;top:20vh}
 #stageCaption{top:10.5vh;left:6%;max-width:88%}
 #savedToast{top:10.5vh}
}
@media (max-width:600px){
 #brand>.brand-tag{display:none}
 #pov{--ph:min(88vh,calc(92vw/.4875));top:19vh}
}
#helpBtn{z-index:16}
.intro-note{font-family:Manrope,system-ui,sans-serif}

/* Bouton blanc : maison, ou ✓ quand la caméra ajoute des photos à une fiche */
#whiteBtn .ico-ok{display:none}#whiteBtn.ok .ico-maison{display:none}#whiteBtn.ok .ico-ok{display:block;stroke-width:2.6}
/* Banque de constats (glisser ← sur le viseur) */
#bankPage{transform:translateX(100%);z-index:3}
.bk-nav{display:flex;align-items:center;gap:1.4cqw;padding:1.4cqh 5cqw 0;font:400 3.3cqw/1 -apple-system,system-ui,sans-serif;color:#3a3a3c}.bk-nav svg{width:3.8cqw}
.bk-head{display:flex;align-items:center;justify-content:space-between;padding:2cqh 5cqw 0}.bk-head h3{margin:0;font:700 5.4cqw/1.1 -apple-system,system-ui,sans-serif}
.top10{display:flex;align-items:center;gap:1cqw;padding:1.2cqw 2.4cqw;border-radius:99px;background:#f2f2f7;font:600 2.8cqw/1 -apple-system,system-ui,sans-serif}.top10 svg{width:3cqw;fill:#f5a524;stroke:none}
.bk-sub{display:block;padding:.8cqh 5cqw 0;font:400 2.7cqw/1.2 -apple-system,system-ui,sans-serif;color:#8e8e93}.bk-sub b{font-weight:500;color:#3a3a3c}
.bk-list{margin:1.6cqh 4cqw 0;display:grid;gap:1.1cqh}
.bk-row{display:grid;grid-template-columns:7cqw 1fr 6cqw;align-items:center;gap:2cqw;padding:2.2cqw 3cqw;border:1px solid #e5e5ea;border-radius:2.6cqw;font:400 3cqw/1.25 -apple-system,system-ui,sans-serif;background:#fff}
.bk-row b{font:600 3cqw/1 -apple-system,system-ui,sans-serif;color:#3a3a3c}.bk-row em{font-style:normal;color:#111}.bk-row .pl{width:5cqw;height:5cqw;border-radius:50%;border:1.5px solid #8e8e93;display:grid;place-items:center;color:#8e8e93;font:500 3.6cqw/1 -apple-system,system-ui,sans-serif;margin:0}
.bk-row.hit{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset;background:#fff6f2}
.bk-voice{position:absolute;left:5cqw;right:5cqw;bottom:17cqh;display:flex;align-items:center;gap:3cqw;padding:2.4cqw 3cqw;border-radius:2.6cqw;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.bk-voice .bars{display:flex;gap:.7cqw;align-items:center;height:6cqw}.bk-voice .bars i{width:.8cqw;border-radius:1px;background:var(--accent);height:50%}
.bk-voice b{display:block;font:600 3cqw/1 -apple-system,system-ui,sans-serif;color:var(--accent)}.bk-voice small{display:block;margin-top:.8cqw;font:400 2.5cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}
.bk-search{position:absolute;left:5cqw;right:5cqw;bottom:8.5cqh;height:10cqw;display:flex;align-items:center;gap:2cqw;padding:0 1.6cqw 0 3cqw;border-radius:99px;background:#f2f2f7;color:#8e8e93;font:400 3.1cqw/1 -apple-system,system-ui,sans-serif}.bk-search svg{width:4cqw}.bk-search span{flex:1}
.stopc{width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--accent);position:relative}.stopc:after{content:'';position:absolute;inset:2.5cqw;border-radius:.6cqw;background:#fff}
/* Fiche : variante banque (rien à rédiger) / variante dictée (proposition IA) */
#prepPage{z-index:4}
#prepPage.banque .ia,#prepPage.banque .proof,#prepPage.banque .prop,#prepPage.banque .row.ph{display:none}
#prepPage.dictee .loc,#prepPage.dictee .loc-n,#prepPage.dictee .photos{display:none}
#prepPage.banque .badge{border-color:#d1d1d6;color:#3a3a3c;background:#f2f2f7}
#prepPage.banque .rows{margin-top:2cqh}
.loc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.4cqw;margin:1.6cqh 5cqw 0;padding:2cqw 2.4cqw 2cqw 3cqw;border:1px solid #e5e5ea;border-radius:2.6cqw;font:400 2.9cqw/1 -apple-system,system-ui,sans-serif}
.lieu-l{display:flex;align-items:center;gap:1.2cqw;color:#8e8e93}.lieu-l i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#ff3b30}
.loc b{font-weight:500}.conf{padding:1.8cqw 3.4cqw;border-radius:99px;background:#111;color:#fff;font-weight:600;transform:scale(var(--tap,1))}.conf.ok{background:#e8f7ed;color:#1f9d45}
.loc-n{display:block;margin:.8cqh 6cqw 0;font:400 2.5cqw/1 -apple-system,system-ui,sans-serif;color:#8e8e93}
.photos{margin:1.8cqh 5cqw 0}.photos b{font:600 3.2cqw/1 -apple-system,system-ui,sans-serif}
.ph-row{display:flex;gap:2cqw;margin-top:1.6cqw}.ph-row i{width:16cqw;height:12cqw;border-radius:2cqw;background-size:cover;background-position:center;display:none}.ph-row i.on{display:block}
.plus{width:16cqw;height:12cqw;border-radius:2cqw;border:1.5px dashed #c7c7cc;display:grid;place-items:center;color:#8e8e93;font:300 6cqw/1 -apple-system,system-ui,sans-serif;transform:scale(var(--tap,1))}
.approve.noir{background:#111}.approve.gris{background:#d1d1d6;color:#fff}
/* l'ancien #approve (id) écrasait la classe */
#approve.approve{width:auto;margin:0;padding:0;border-radius:2.6cqw;font:600 3.5cqw/1 -apple-system,system-ui,sans-serif;background:var(--accent);color:#fff}
#approve.approve.noir{background:#111}#approve.approve.gris{background:#d1d1d6}#approve.approve.ok{background:#34c759}

/* Champ focal : flou d'arrière-plan masqué autour du défaut (le point visé reste net) */
#dof{position:absolute;inset:0;pointer-events:none;opacity:0;--b:0px;--r:300px;--fx:50%;--fy:50%;backdrop-filter:blur(var(--b));-webkit-backdrop-filter:blur(var(--b));
 -webkit-mask-image:radial-gradient(circle at var(--fx) var(--fy),transparent var(--r),#000 calc(var(--r)*1.9 + 40px));mask-image:radial-gradient(circle at var(--fx) var(--fy),transparent var(--r),#000 calc(var(--r)*1.9 + 40px))}
/* Vues en relief : le canvas WebGL remplace la photo dès que sa profondeur est chargée */
.c3d{position:absolute;inset:0;width:100%;height:100%;display:block}
#travelView,#midView{position:absolute;inset:0;overflow:hidden}
#travelView.gl img,#midView.gl img,#exitView.gl img,#closeView.gl img{visibility:hidden}
#travelView:not(.gl) .c3d,#midView:not(.gl) .c3d,#exitView:not(.gl) .c3d,#closeView:not(.gl) .c3d{visibility:hidden}
#vfCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html,body{overflow:hidden;height:100%;overscroll-behavior:none;touch-action:none}
/* Titres = vrais constats (plus longs) */
#issueTitle{font-size:clamp(30px,3.3vw,54px);line-height:1.04;max-width:16ch;text-wrap:balance}
#issueDescription{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);max-width:44ch}
/* Les gestes dans BatiFlow : liste visible, comme dans les vidéos */
#steps{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:min(34vw,470px);z-index:14;opacity:0;visibility:hidden;font-family:Outfit,system-ui,sans-serif}
#steps .steps-k{display:block;font:500 12px/1 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:var(--accent)}
#steps h3{margin:12px 0 10px;font-size:clamp(22px,2vw,30px);line-height:1.08;color:#fff;text-wrap:balance}
#steps .mode{display:inline-block;margin-bottom:20px;padding:7px 12px;border-radius:999px;font:500 13px/1 Outfit,system-ui,sans-serif}
#steps .mode.banque{background:rgba(52,199,89,.16);color:#7ee09a;border:1px solid rgba(52,199,89,.4)}
#steps .mode.dictee{background:rgba(228,87,46,.16);color:#ffb08f;border:1px solid rgba(228,87,46,.45)}
#stepsList{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#stepsList li{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(18,18,18,.42);border:1px solid rgba(255,255,255,.08);opacity:.55;transition:opacity .25s,background .25s,border-color .25s}
#stepsList li i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 Outfit,system-ui,sans-serif;font-style:normal;background:rgba(255,255,255,.1);color:#fff}
#stepsList li b{display:block;font:600 18px/1.2 Outfit,system-ui,sans-serif;color:#fff}
#stepsList li small{display:block;margin-top:4px;font:400 14px/1.4 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.7)}
#stepsList li.cours{opacity:1;background:rgba(228,87,46,.2);border-color:rgba(228,87,46,.7)}
#stepsList li.cours i{background:var(--accent)}
#stepsList li.fait{opacity:.9}#stepsList li.fait i{background:#34c759;color:#fff}
/* Rappel : comment avancer */
#walkHint{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:18;display:flex;align-items:center;gap:14px;padding:14px 22px 14px 16px;border-radius:999px;background:rgba(18,18,18,.66);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none}
#walkHint b{font:600 18px/1 Outfit,system-ui,sans-serif;color:#fff;white-space:nowrap}
#walkHint .fl{width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;overflow:hidden}
#walkHint .fl i{display:block;width:12px;height:12px;border-left:3px solid #fff;border-top:3px solid #fff;transform:rotate(45deg);margin-top:5px;animation:fleche 1.2s ease-in-out infinite}
#walkHint.bas .fl i{transform:rotate(225deg);margin-top:-5px;animation-name:flecheb}
@keyframes fleche{0%,100%{translate:0 3px}50%{translate:0 -4px}}@keyframes flecheb{0%,100%{translate:0 -3px}50%{translate:0 4px}}
@media (max-width:900px){#steps{left:5%;right:5%;width:auto;top:9vh;transform:none}#steps h3{font-size:19px;margin:8px 0}#steps .mode{margin-bottom:10px;font-size:12px}#stepsList{gap:6px}#stepsList li{padding:7px 10px;gap:10px}#stepsList li:not(.cours){display:none}#stepsList li b{font-size:16px}#stepsList li small{font-size:13px}#walkHint{bottom:110px}#walkHint b{font-size:15px}}
@media (prefers-reduced-motion:reduce){#walkHint .fl i{animation:none}}
@media (max-width:900px){#steps{z-index:19;top:8.5vh}#steps .steps-k{display:none}#steps h3{margin:0 0 6px;font-size:17px}#steps .mode{margin-bottom:8px;padding:5px 10px;font-size:11.5px}#stepsList li.cours{background:rgba(40,20,14,.88)}}
@media (max-width:600px){#pov{top:28vh}}