/* Essai guidé — ordinateur : l'iPhone dans la pièce, la consigne à gauche.
   Téléphone (body.plein) : l'écran devient l'app BatiFlow, en plein écran, vrais gestes au doigt. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body.guide{margin:0;padding:0;background:var(--ink);color:#fff;font-family:Manrope,system-ui,sans-serif}
#scene{position:fixed;inset:0;overflow:hidden;background:#111}
#scene{transition:filter .9s}
body.leve #scene{filter:blur(3px) brightness(.72)}
/* la marche (marche.js) : mêmes vues que la visite ; pas de souris sur la scène */
#scene>div{pointer-events:none}
.g-head{position:fixed;left:5%;right:5%;top:26px;z-index:30;display:flex;align-items:center;gap:16px}
.g-head .logo{font:700 26px/1 Outfit,system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-decoration:none}.g-head .logo i{font-style:normal;color:var(--accent)}
.g-head .brand-tag{border-left:1px solid rgba(255,255,255,.25);padding-left:16px;font:500 10px/1 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.75)}.g-head .brand-tag b{font-weight:500}
.g-prog{margin-left:auto;width:min(220px,22vw);height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}.g-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .6s}
.g-num{font:500 12px/1 Outfit,system-ui,sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
/* Consigne */
#coach{position:fixed;left:6%;top:50%;transform:translateY(-50%);width:min(34vw,470px);z-index:25;font-family:Outfit,system-ui,sans-serif}
#coach .steps-k{display:block;font:500 12px/1.3 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:var(--accent)}
#coach h2{margin:14px 0 10px;font-size:clamp(30px,3vw,46px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
#coach p{margin:0 0 24px;font:400 17px/1.5 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.8);max-width:40ch}
body[data-etape="parler"] #coachDetail{font:500 21px/1.4 Outfit,system-ui,sans-serif;color:#fff;padding:14px 18px;border-radius:16px;background:rgba(18,18,18,.5);border-left:3px solid var(--accent)}
#entend{margin:-8px 0 22px!important;padding:10px 14px;border-radius:14px;background:rgba(18,18,18,.4)}#entend small{display:block;font:500 11px/1 Outfit,system-ui,sans-serif;letter-spacing:.12em;color:#ffb08f;margin-bottom:6px}#entend span{font:400 15px/1.4 Manrope,system-ui,sans-serif;color:#fff}
#coachList{list-style:none;margin:26px 0 14px;padding:0;display:grid;gap:8px}
#coachList li{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:14px;background:rgba(18,18,18,.4);border:1px solid rgba(255,255,255,.08);opacity:.5}
#coachList li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 Outfit,system-ui,sans-serif;font-style:normal;background:rgba(255,255,255,.12)}
#coachList li b{font:500 15px/1.25 Outfit,system-ui,sans-serif}
#coachList li.cours{opacity:1;background:rgba(228,87,46,.2);border-color:rgba(228,87,46,.7)}#coachList li.cours i{background:var(--accent)}
#coachList li.fait{opacity:.85}#coachList li.fait i{background:#34c759}
.g-liens{display:flex;gap:22px;flex-wrap:wrap}
#montrer{color:#ffb08f;font-size:15px}#passer{color:rgba(255,255,255,.55);font-size:14px}
body:not(.leve) #coachList,body:not(.leve) #montrer{display:none}
#actionBtn[hidden],#montrer[hidden],#bulleBtn[hidden],#entend[hidden]{display:none!important}
/* L'iPhone : baissé, puis levé */
body.guide #pov{opacity:1;visibility:visible;pointer-events:auto;transition:transform 1s cubic-bezier(.2,.7,.1,1);transform:translateY(78%) rotate(4deg)}
body.guide.leve #pov{transform:none}
body.guide.marche #pov{transition-duration:.55s}
body.guide #phone{transform:rotateX(6deg)}
#phone .screen{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Cible du geste : halo, et le doigt de démonstration */
.cible{box-shadow:0 0 0 0 rgba(228,87,46,.7);animation:halo 1.6s ease-out infinite}
#viseur.cible{animation-name:halo-vf}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(241,90,36,.75)}100%{box-shadow:0 0 0 3.4cqw rgba(241,90,36,0)}}
@keyframes halo-vf{0%{box-shadow:inset 0 0 0 .8cqw rgba(241,90,36,.85)}100%{box-shadow:inset 0 0 0 .8cqw rgba(241,90,36,0)}}
.a-b.cible,.a-decl.cible{animation-name:halo-b}
@keyframes halo-b{0%{box-shadow:inset 0 0 0 calc(4 * 100cqw / 402) #fff,0 0 0 0 rgba(241,90,36,.85)}100%{box-shadow:inset 0 0 0 calc(4 * 100cqw / 402) #fff,0 0 0 3.4cqw rgba(241,90,36,0)}}
.a-b.cible{animation-name:halo}
#ghost{position:absolute;z-index:50;left:50%;top:50%;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;background:rgba(255,255,255,.62);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1.4cqw rgba(255,255,255,.2),0 4px 18px rgba(0,0,0,.35);opacity:0;pointer-events:none}
/* Aide en cas de mauvais geste */
#aide{position:fixed;left:63%;bottom:7vh;transform:translate(-50%,20px);z-index:40;max-width:min(420px,86vw);padding:12px 18px;border-radius:14px;background:rgba(18,18,18,.88);border:1px solid rgba(228,87,46,.7);font:500 15px/1.35 Outfit,system-ui,sans-serif;text-align:center;opacity:0;pointer-events:none}
#aide.affiche{animation:aide 2.8s ease forwards}
@keyframes aide{0%{opacity:0;transform:translate(-50%,20px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
#bulle{display:none}
/* Bilan */
#bilan{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(14,14,16,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#bilan[hidden]{display:none}
#bilan .steps-k{font:500 12px/1 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:#5fd07c}
#bilan h2{margin:8px 0;font-size:clamp(32px,5vw,64px);line-height:1.02}
#bilan p{margin:0 0 22px;max-width:56ch;font:400 17px/1.55 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.82)}
.b-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.b-actions a{text-decoration:none}

/* ================= Téléphone : l'écran devient l'app ================= */
body.plein .g-head{left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px)}body.plein .g-head .brand-tag{display:none}
body.plein #coach{left:16px;right:16px;width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:none;padding:20px;border-radius:22px;background:rgba(14,14,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.plein #coach h2{font-size:28px}body.plein #coach p{font-size:15px;margin-bottom:16px}
body.plein.leve #coach,body.plein.marche #coach{display:none}
body.plein #pov{position:fixed;inset:0;left:0;top:0;width:100vw;height:100svh;margin:0;transform:translateY(105%);z-index:20}
body.plein.leve #pov{transform:none}
body.plein #phone{transform:none}body.plein #phone .frame{display:none}
body.plein #phone .screen{left:0;top:0;width:100%;height:100%;border-radius:0}
body.plein #screen.app{--haut:calc(env(safe-area-inset-top,0px) + 4px);--bas:calc(env(safe-area-inset-bottom,0px) + 4px)}
body.plein .a-sb,body.plein #screen .homebar{display:none}
body.plein.leve .g-head{display:none}
/* La consigne est une bande AU-DESSUS de l'app : elle ne couvre jamais l'écran ni la cible */
body.plein #pov{top:var(--bande,0px);bottom:0;height:auto}
body.plein #screen.app{--haut:calc(8 * var(--p))}
body.plein.leve #bulle{display:block;position:fixed;z-index:30;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 10px) 18px 12px;background:#141210;border-bottom:2px solid var(--accent);pointer-events:none}
#bulle b{display:block;font:600 19px/1.2 Outfit,system-ui,sans-serif;color:#fff}#bulle small{display:block;margin-top:3px;font:400 14px/1.35 Manrope,system-ui,sans-serif;color:rgba(255,255,255,.78)}
#bulleBtn{pointer-events:auto;margin-top:10px;padding:11px 18px;font-size:14px}
body[data-etape="parler"] #bulle small{font:500 16px/1.4 Outfit,system-ui,sans-serif;color:#fff}
body.plein #aide{left:0;right:0;top:0;bottom:auto;max-width:none;min-height:var(--bande,0px);box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 18px 12px;border:0;border-bottom:2px solid #fff;border-radius:0;background:#B83A14;transform:none;font-size:17px;z-index:45}
body.plein #aide.affiche{animation:aidem 2.8s ease forwards}
@keyframes aidem{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
/* Capture de contrôle (?nu) : l'écran seul, 402 × 874, pour le comparer aux captures de l'app */
body.nu #pov{position:fixed!important;left:0!important;top:0!important;width:402px!important;height:874px!important;margin:0!important;transform:none!important}
body.nu #phone{transform:none!important}body.nu #phone .frame,body.nu #coach,body.nu .g-head,body.nu #aide{display:none}
body.nu #phone .screen{left:0;top:0;width:100%;height:100%;border-radius:0}
#maCam{color:rgba(255,255,255,.75);font-size:14px}
/* Téléphone : pas d'indicateur d'accueil sous les boutons de la fiche, on récupère l'espace */
body.plein .a-boutons{bottom:calc(var(--bas) + 8 * var(--p))}
body.plein .a-defile{bottom:calc(var(--bas) + 108 * var(--p))}body.plein .a-defile.dictee{bottom:calc(var(--bas) + 117 * var(--p))}
#bulleEntend{display:block;margin-top:8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.08)}#bulleEntend[hidden]{display:none}#bulleEntend small{display:block;margin:0 0 3px;font:500 11px/1 Outfit,system-ui,sans-serif;letter-spacing:.12em;color:#ffb08f;text-transform:uppercase}#bulleEntend span{font:400 15px/1.35 Manrope,system-ui,sans-serif;color:#fff}
/* Le dégradé de la visite : la consigne reste lisible sur un ciel ou un mur clair */
#scene:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(13,13,13,.78),rgba(13,13,13,.35) 38%,transparent 62%),linear-gradient(0deg,rgba(13,13,13,.45),transparent 30%)}
body.plein #scene:after{background:linear-gradient(0deg,rgba(13,13,13,.7),transparent 55%)}
/* Téléphone : les mots dictés s'écrivent dans la fiche « CE QUE TU DIS » de l'app, pas dans la bande */
body.plein #bulleEntend{display:none!important}
/* Téléphone : bande de consigne plus compacte (le viseur garde sa hauteur) */
body.plein.leve #bulle{padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 10px}
body.plein #bulle b{font-size:17px}body.plein #bulle small{font-size:13.5px}
body.plein[data-etape="parler"] #bulle small{font-size:15px;line-height:1.35}
body.plein #bulleBtn{margin-top:8px;padding:8px 14px;font-size:13px;gap:10px}
body.plein #toile{--haut-calque:8px}
body.en-onglet #ghost{display:none}
/* Onglets de la simulation : leur bas se tient au-dessus de la barre d'onglets de l'essai */
#screen #toile #calque .contenu{padding-bottom:100px}
#screen #toile #calque{top:var(--haut-calque,62px);height:auto;bottom:0}

/* Ordinateur : l'iPhone tient en entier dans la fenêtre — la barre d'onglets doit rester à portée */
body.guide:not(.plein):not(.nu) #pov{--ph:min(94vh,calc(56vw / .48913));top:3vh}
/* Ordinateur : l'aide s'affiche sous la consigne, jamais sur l'iPhone */
body.guide:not(.plein) #aide{left:6%;bottom:6vh;transform:none;text-align:left}
body.guide:not(.plein) #aide.affiche{animation:aideo 2.8s ease forwards}
@keyframes aideo{0%{opacity:0;transform:translateY(16px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}
/* Carte des Constats sur un écran court : le titre et le texte gardent leur place, les photos rapetissent */
#screen #toile .recto h4{flex:none;-webkit-line-clamp:2}
#screen #toile .recto .txt{flex:0 1 auto;min-height:37.4px;-webkit-line-clamp:3}
#screen #toile .photos{flex:1 1 132px;height:auto;min-height:60px;max-height:132px}
#screen #toile .photos img{height:auto;align-self:stretch}
#screen #toile .photos .ajout{align-self:stretch;height:auto}
/* Onglet ouvert au téléphone : la bande de consigne tient sur une ligne */
body.plein.en-onglet #bulle{display:flex;align-items:center;gap:12px;padding-bottom:10px}
body.plein.en-onglet #bulle small{display:none}
body.plein.en-onglet #bulle b{flex:1;font-size:15px}
body.plein.en-onglet #bulleBtn{margin:0;flex:none}
/* Empilement : onglets (calque 12) < barre d'onglets (13) < banque et sa voile (14-15) < fiche (16) < menus (45) */
#screen.app .a-voile{z-index:14}#screen.app .a-banque{z-index:15}#screen.app .a-prep{z-index:16}

/* Le repère du défaut pendant la marche (marche.js) : anneau qui respire ; le toucher lève l'iPhone */
#repere{position:absolute;left:-40px;top:-40px;width:80px;height:80px;padding:0;border:0;border-radius:50%;background:none;opacity:0;z-index:3;cursor:pointer}
#repere i{margin:40px 0 0 40px}
#repere i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 2px rgba(241,90,36,.9),0 0 18px rgba(0,0,0,.45);animation:repere 1.6s ease-in-out infinite}
#repere i::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#F15A24}
@keyframes repere{50%{transform:scale(1.14)}}