/* Modélisation 3D : rangée « à la Netflix » + visionneuse 3D au clic */
.m3d-sec{padding-top:clamp(18px,4vw,36px)}
.rail-wrap{position:relative}
.rail{display:flex;gap:16px;list-style:none;margin:-10px -12px -22px;padding:24px 16px 44px;scroll-padding-inline:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail li{flex:none;scroll-snap-align:start}
.m3d-card{position:relative;display:flex;flex-direction:column;width:clamp(270px,30vw,352px);height:100%;border-radius:var(--r);overflow:hidden;background:#101823;color:#fff;box-shadow:0 8px 18px -10px rgba(14,26,40,.45);transition:transform .22s ease,box-shadow .22s ease}
.m3d-card:hover,.m3d-card:focus-within{transform:translateY(-6px);box-shadow:0 18px 30px -14px rgba(14,26,40,.55)}
.m3d-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--accent);z-index:2}
.m3d-art{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 80%,#fff 6%),color-mix(in srgb,var(--accent) 55%,#000))}
.m3d-stage{display:flex;align-items:center;justify-content:center;gap:12px;height:250px;padding:22px 16px 14px}
.m3d-stage img{width:100%;height:auto;max-height:200px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.m3d-info{flex:1 1 auto;padding:14px 16px 18px;background:#0b111b}
.m3d-info h2{font:700 var(--fs-md)/1.15 var(--display);margin:0 0 6px}
.m3d-info p{margin:0;font-size:var(--fs-sm);line-height:1.4;color:#c3ceda}
.rail-btn{position:absolute;top:calc(50% - 30px);z-index:5;width:44px;height:64px;border:0;border-radius:var(--r-sm);background:rgba(11,17,27,.82);color:#fff;font:700 2rem/1 var(--display);cursor:pointer;display:grid;place-items:center}
.rail-btn:hover{background:#0b111b}
.rail-btn.prev{left:-14px}.rail-btn.next{right:-14px}
.rail-btn[hidden]{display:none}
@media (hover:none){.rail-btn{display:none}.m3d-card:hover{transform:none}}

/* bouton « Voir en 3D » et visionneuse */
.m3d-btn{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;border-radius:var(--r)}
.m3d-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.m3d-btn img{transition:transform .25s ease}
.m3d-btn:hover img{transform:scale(1.05) rotate(-2deg)}
.m3d-hint{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#0b111b;color:#fff;font:700 var(--fs-xs)/1.2 var(--display);box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.m3d-hint svg{width:18px;height:18px}
.m3d-btn[data-state="loading"]{cursor:progress}
.m3d-stage.two .m3d-btn,.m3d-stage.two .m3d-live{width:calc(50% - 6px)}
.m3d-stage.two .m3d-hint{font-size:var(--fs-xs);padding:5px 9px}
.m3d-live{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.m3d-viewer{width:100%;flex:1 1 auto;min-height:0;--poster-color:transparent;background:transparent;border-radius:var(--r)}
.m3d-viewer:focus-visible{outline:3px solid #fff;outline-offset:4px}
.m3d-help{margin:0;font-size:var(--fs-xs);color:#fff;opacity:.85;text-align:center}
@media (max-width:640px){.m3d-card{width:min(84vw,320px)}}
@media (prefers-reduced-motion:reduce){.m3d-card,.m3d-btn img{transition:none}.m3d-card:hover,.m3d-card:focus-within,.m3d-btn:hover img{transform:none}}

/* bouton Télécharger */
.m3d-info{display:flex;flex-direction:column}
.m3d-dl{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font:700 var(--fs-xs)/1.2 var(--display);transition:filter .2s ease}
.m3d-info>p{margin-bottom:14px}
.m3d-dl span{font-weight:400;opacity:.85;font-size:var(--fs-xs)}
.m3d-dl svg{width:17px;height:17px;flex:none}
.m3d-dl:hover{filter:brightness(1.12)}
.m3d-dl:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* textes justifiés */
.phero .plead{max-width:none;margin:0}
.m3d-info p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.m3d-dl{align-self:center}

/* téléphone : texte aligné à gauche plutôt que justifié */
@media (max-width:600px){.m3d-info p{text-align:left;hyphens:manual;-webkit-hyphens:manual}}
