/* Trois moments 3D supplémentaires : l'app écran par écran, l'urbanisme en couches,
   tout se relie. Même principe que l'immeuble : une scène épinglée pendant qu'on
   fait défiler, des étapes de texte à gauche. */
.g3p{position:relative;background:#F7F6F2}
.g3p-scene{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden}
.g3p-scene.fixe{position:fixed;top:0}
.g3p-scene.fin{top:auto;bottom:0}
.g3p-textes{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);width:min(440px,38vw);height:60vh;pointer-events:none;z-index:3}
.g3p-etape{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}
.g3p-etape.actif{opacity:1;transform:none;pointer-events:auto}
.g3p-etape .num{font-size:14px;font-weight:700;color:#C52626}
.g3p-etape h2{margin-top:10px;font-size:clamp(30px,3.8vw,54px);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:#191917}
.g3p-etape p{margin-top:16px;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(25,25,23,.62);max-width:40ch}
.g3p-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.g3p-etiquette{position:absolute;transform:translate(-50%,-100%);background:#fff;font-weight:700;font-size:12px;padding:6px 10px;border-radius:9px;white-space:nowrap;box-shadow:0 8px 20px rgba(25,25,23,.12),0 0 0 1px #E8E6E0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:2}
.g3p-etiquette.rouge{color:#C52626}.g3p-etiquette.bleu{color:#3B5BA9}.g3p-etiquette.ambre{color:#B45309}.g3p-etiquette.vert{color:#1E7A4C}.g3p-etiquette.gris{color:#555}

/* 1 · l'ordinateur et ses écrans : façon MacBook, vu de face, bordures fines */
.g3p-lap{position:absolute;right:clamp(10px,4vw,80px);top:52%;width:min(940px,56vw);aspect-ratio:16/9.47;transform:translateY(-50%);perspective:2400px}
.g3p-lap-corps{position:absolute;inset:0;transform-style:preserve-3d}
.g3p-lap-ecran{position:absolute;left:6%;right:6%;top:0;height:94.9%;border-radius:2.2% / 3.4%;background:#0b0b0d;padding:0.9% 0.9% 1.4%;
  box-shadow:0 0 0 1.5px #c9ccd1,0 0 0 3px #e4e6ea,0 50px 90px rgba(25,25,23,.22)}
.g3p-lap-ecran::after{content:"";position:absolute;left:50%;top:0;width:9%;height:1.6%;margin-left:-4.5%;border-radius:0 0 8px 8px;background:#0b0b0d}
.g3p-lap-vitre{position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;background:#fff}
.g3p-lap-vitre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;image-rendering:-webkit-optimize-contrast;image-rendering:high-quality;opacity:0;transition:opacity .5s ease}
.g3p-lap-vitre img.actif{opacity:1}
.g3p-lap-reflet{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%);pointer-events:none}
.g3p-lap-base{position:absolute;left:0;right:0;top:94.9%;height:3.4%;border-radius:2px 2px 40% 40% / 2px 2px 100% 100%;
  background:linear-gradient(#f2f3f5 0%,#d9dce1 45%,#b7bbc2 100%);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 24px rgba(25,25,23,.18)}
.g3p-lap-base::before{content:"";position:absolute;left:44%;right:44%;top:0;height:42%;border-radius:0 0 10px 10px;background:linear-gradient(#c9ccd2,#dfe1e5)}
.g3p-lap-ombre{position:absolute;left:4%;right:4%;top:97%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(25,25,23,.22),transparent);filter:blur(8px)}
.g3p-pastille{position:absolute;padding:8px 13px;border-radius:12px;background:#fff;color:#191917;font-weight:800;font-size:13px;box-shadow:0 16px 34px rgba(25,25,23,.16),0 0 0 1px #E8E6E0;opacity:0;transform:translateZ(80px) translateY(10px);transition:opacity .4s,transform .4s;white-space:nowrap}
.g3p-pastille.actif{opacity:1;transform:translateZ(80px)}
.g3p-pastille b{color:#C52626}

/* 3 · tout se relie */
.g3p-scene-relie{perspective:1600px}
.g3p-plateau{position:absolute;right:clamp(10px,4vw,80px);top:50%;width:min(820px,56vw);height:min(560px,70vh);transform:translateY(-50%) rotateX(18deg) rotateZ(-2deg)}
.g3p-plateau svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g3p-mod{position:absolute;width:28%;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(25,25,23,.12),0 0 0 1px #E8E6E0;transform:translate(-50%,-50%);transition:box-shadow .35s,transform .35s}
.g3p-mod small{display:block;font-size:12px;font-weight:700;color:#9CA3AF}
.g3p-mod b{display:block;margin-top:4px;font-size:22px;font-weight:900;letter-spacing:-.02em;color:#191917}
.g3p-mod i{display:block;margin-top:2px;font-style:normal;font-size:12px;color:#6B7280}
.g3p-mod.allume{box-shadow:0 26px 56px rgba(197,38,38,.22),0 0 0 2px #C52626;transform:translate(-50%,-50%) scale(1.06)}
.g3p-mod.allume b{color:#C52626}

@media (max-width:820px){
  .g3p-textes{left:16px;right:16px;width:auto;top:auto;bottom:5vh;transform:none;height:42vh}
  .g3p-etape{justify-content:flex-end;background:rgba(247,246,242,.92);border-radius:16px;padding:16px;inset:auto 0 0 0}
  .g3p-lap{left:50%;right:auto;top:28%;width:88vw;transform:translate(-50%,-50%)}
  .g3p-plateau{left:50%;right:auto;top:30%;width:94vw;height:46vh;transform:translate(-50%,-50%) rotateX(18deg)}
  .g3p-mod{padding:9px 10px}.g3p-mod b{font-size:15px}.g3p-mod i{display:none}
  .g3p-pastille{left:auto!important;right:3%;font-size:11px;padding:6px 9px}
}
@media (prefers-reduced-motion: reduce){.g3p-etape,.g3p-lap-vitre img{transition:none}}

/* ===== Moments 3D supplémentaires (3, 4, 5, 7, 8, 9, 10, 11) ===== */
.g3p-droite{position:absolute;right:clamp(10px,4vw,80px);top:50%;width:min(820px,56vw);height:min(600px,72vh);transform:translateY(-50%)}
/* 5 · l'escalier */
.esc-scene{perspective:1500px}
.esc-plan{position:absolute;left:62%;top:56%;width:620px;height:300px;margin:-150px 0 0 -310px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-32deg)}
.esc-marche{position:absolute;width:150px;height:260px;transform-style:preserve-3d}
.esc-face{position:absolute}
.esc-dessus{width:150px;height:260px;background:#fff;box-shadow:inset 0 0 0 1px #E8E6E0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;font-weight:900;font-size:22px;color:#191917;transition:background .35s,color .35s}
.esc-dessus.atteint{background:#FBEAEA;color:#C52626;box-shadow:inset 0 0 0 2px #C52626}
.esc-avant{width:150px;background:linear-gradient(#e7e3da,#d8d3c8);transform-origin:0 0}
.esc-cote{height:260px;background:linear-gradient(90deg,#d2ccbf,#c4bdaf);transform-origin:0 0}
.esc-maison{position:absolute;width:64px;height:64px;transform-style:preserve-3d}
.esc-maison span{position:absolute;inset:0;transform:rotateZ(32deg) rotateX(-58deg) translateY(-34px);transform-origin:50% 100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;box-shadow:0 16px 30px rgba(197,38,38,.25),0 0 0 2px #C52626}
/* 4 · le devis */
.dv-scene{perspective:1500px}
.dv-feuille{position:absolute;inset:6% 4%;background:#fff;border-radius:16px;box-shadow:0 40px 90px rgba(25,25,23,.18),0 0 0 1px #E8E6E0;padding:22px 24px;transform-origin:50% 60%;font-size:14px}
.dv-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;color:#191917}
.dv-tete small{display:block;font-size:12px;font-weight:600;color:#9CA3AF}
.dv-pdf{padding:6px 10px;border-radius:9px;background:#FBEAEA;color:#C52626;font-size:12px;font-weight:800}
.dv-ligne{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F0EEE8;opacity:0;transform:translateX(30px);transition:opacity .35s,transform .35s}
.dv-ligne.vue{opacity:1;transform:none}
.dv-case{width:22px;height:22px;border-radius:6px;border:2px solid #CBD2D9;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:13px;transition:background .25s,border-color .25s}
.dv-ligne.coche .dv-case{background:#1E7A4C;border-color:#1E7A4C}
.dv-marche{font-size:11px;padding:3px 8px;border-radius:999px;background:#F3F1EC;color:#6B7280;font-weight:700}
.dv-prix{font-weight:800;min-width:90px;text-align:right}
.dv-bas{display:flex;align-items:center;gap:14px;margin-top:16px;font-weight:800}
.dv-barre{flex:1;height:10px;border-radius:6px;background:#EFEDE7;overflow:hidden}
.dv-barre i{display:block;height:100%;width:0;background:#1E7A4C;transition:width .4s}
.dv-chip{position:absolute;right:-18px;top:-22px;padding:12px 16px;border-radius:14px;background:#191917;color:#fff;font-weight:800;box-shadow:0 20px 40px rgba(25,25,23,.3);opacity:0;transform:translateZ(60px) scale(.9);transition:opacity .35s,transform .35s}
.dv-chip.vue{opacity:1;transform:translateZ(60px)}
.dv-chip b{color:#7EE2A8}
/* 8 · le partage */
.pt-scene{perspective:1600px}
.pt-dossier{position:absolute;left:8%;top:50%;width:200px;height:150px;margin-top:-75px;transform-style:preserve-3d;transform:rotateX(20deg) rotateY(18deg)}
.pt-dos,.pt-rabat{position:absolute;inset:0;border-radius:10px 10px 14px 14px;background:linear-gradient(#E3B866,#D4A24C);box-shadow:0 30px 60px rgba(25,25,23,.2)}
.pt-rabat{background:linear-gradient(#EBC77E,#DDAE58);transform-origin:50% 100%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#5c3d0c;font-size:15px}
.pt-fiche{position:absolute;left:8%;top:50%;width:190px;padding:12px 14px;margin:-40px 0 0 6px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(25,25,23,.16),0 0 0 1px #E8E6E0;font-size:12.5px;font-weight:700;color:#191917;opacity:0}
.pt-fiche small{display:block;color:#9CA3AF;font-weight:600;margin-top:3px}
.pt-perso{position:absolute;width:150px;text-align:center;font-weight:800;color:#191917;font-size:14px}
.pt-perso i{display:block;width:64px;height:64px;margin:0 auto 8px;border-radius:50%;background:#fff;box-shadow:0 12px 26px rgba(25,25,23,.12),0 0 0 2px #E8E6E0;font-style:normal;font-size:30px;line-height:64px;transition:box-shadow .3s}
.pt-perso.recu i{box-shadow:0 14px 30px rgba(197,38,38,.25),0 0 0 3px #C52626}
.pt-perso small{display:block;font-weight:600;color:#6B7280;font-size:12px;margin-top:2px}
/* 10 · le téléphone */
.g3p-tel{transform-style:preserve-3d}
/* 11 · le logo en relief */
.g3p-logo{position:fixed;left:18px;bottom:18px;width:84px;height:84px;z-index:40;pointer-events:none}
@media (max-width:820px){
  .g3p-droite{left:50%;right:auto;top:30%;width:94vw;height:48vh;transform:translate(-50%,-50%)}
  .esc-plan{transform:rotateX(58deg) rotateZ(-32deg) scale(.55)}
  .dv-marche{display:none}.dv-feuille{padding:14px 14px;font-size:12.5px}.dv-ligne{grid-template-columns:24px 1fr auto;padding:8px 0}.dv-bas{flex-wrap:wrap;gap:8px}.dv-barre{min-width:120px}
  .pt-fiche{width:150px;font-size:11.5px;padding:9px 10px}
  .g3p-logo{display:none}
}
/* tablettes en portrait : la scène descend au centre de l'espace libre */
@media (min-width:600px) and (max-width:820px){
  .g3p-lap{top:38%}.g3p-plateau{top:38%}.g3p-droite{top:38%;height:52vh}
}