/* Shared editorial presentation of actual product screenshots.
   One desktop, one mobile view and two details, with the same hierarchy in each case. */
.screen-stage{position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:1.65;margin:0}
.screen-stage::before{content:"";position:absolute;inset:15% 2% 0;z-index:-1;background:radial-gradient(ellipse,color-mix(in srgb,var(--screen-accent) 12%,transparent),transparent 68%);pointer-events:none}
.screen-stage--bnp{--screen-accent:#219981}
.screen-stage--speos{--screen-accent:#7770c9}
.screen-stage--hms{--screen-accent:#488eb1}
/* CVE 2026-09-25 · remarque #1 du 11/09 : « l'ombre coupée » du carrousel de
   la home, « pas comme celle de la hero zone où l'ombre est plus belle ».
   L'ombre plate à 2 couches est remplacée par la même famille à 4 couches que
   scene.css (--om, composer.py, OMBRE_REF) : offsets et flous croissants,
   opacité dégressive (49/36/25/16 %), calculés ici pour la pièce desktop
   (70 % de .screen-stage, ombre(70) dans composer.py) et réutilisés pour
   toutes les pièces. .home-cases__list gagne le padding-block qui va avec
   (assets/style.css) : sans lui, la nouvelle ombre plus large se faisait
   justement couper par le scroll-container. */
.screen-stage__piece{position:absolute;overflow:hidden;border:0;border-radius:.9cqw;box-shadow:.112cqw .28cqw .784cqw #02060d7d,.336cqw 1.008cqw 2.352cqw #02060d5c,.784cqw 2.688cqw 6.272cqw #02060d40,1.568cqw 5.6cqw 13.44cqw #02060d29}
.screen-stage__piece img{display:block;width:100%;height:auto;max-width:none;margin:0;filter:none;transform:none}
.screen-stage__desktop{left:10%;top:9%;width:70%;z-index:1}
.screen-stage__phone{left:76%;top:33%;width:18%;z-index:4;border-radius:2cqw}
.screen-stage__detail-a{left:1%;top:62%;width:25%;z-index:3}
.screen-stage__detail-b{left:65%;top:2%;width:25%;z-index:5}
.screen-stage--bnp .screen-stage__detail-b{top:4%}
.home-case__cover .screen-stage{max-width:1080px;margin-inline:auto}
.home-case__cover .screen-stage img{height:auto;object-fit:initial;filter:none;transform:none}
.screen-evidence .pi:not(.pi--nu){border:0;border-radius:.9cqw;box-shadow:0 .7cqw 1.7cqw #02060d26,0 2.6cqw 5cqw #02060d38}
@media(max-width:600px){
 .screen-stage{aspect-ratio:1.2}
 .screen-stage__desktop{left:4%;top:13%;width:87%}
 .screen-stage__phone{left:73%;top:35%;width:24%;border-radius:2.8cqw}
 .screen-stage__detail-a{left:0;top:62%;width:33%}
 .screen-stage__detail-b{left:60%;top:1%;width:34%}
 /* CVE 2026-09-25 · même famille d'ombre, ombre(87) : la pièce desktop passe
    à 87 % de large sous 600px. */
 .screen-stage__piece{box-shadow:.1392cqw .348cqw .9744cqw #02060d7d,.4176cqw 1.2528cqw 2.9232cqw #02060d5c,.9744cqw 3.3408cqw 7.7952cqw #02060d40,1.9488cqw 6.96cqw 16.704cqw #02060d29}
}
