/* =========================================================
   SHOWROOM — services présentés avec les vraies réalisations
   ========================================================= */

/* ---------- en-tête ---------- */
.sr-head{padding:8px 2px 4px}
.sr-head small{font-family:var(--mono);font-size:11px;color:#3ddc84}
.sr-head h2{font-family:"Russo One";font-weight:400;font-size:30px;line-height:1.05;margin:4px 0 6px}
.sr-head p{font-size:12.5px;color:var(--mute)}

/* ---------- showreel des catégories ---------- */
#reel{height:auto;border-radius:0;background:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:6px -16px 18px;padding:14px 16px 18px;scrollbar-width:none;perspective:1100px;align-items:flex-start}
#reel::-webkit-scrollbar{display:none}
.rc{flex:0 0 72%;align-self:flex-start;height:auto;scroll-snap-align:center;position:relative;aspect-ratio:3/4.2;border-radius:28px;overflow:hidden;text-align:left;background:#0b0a08;border:1px solid #f5b40044;box-shadow:0 24px 50px #000c;transition:box-shadow .4s,border-color .4s;animation:rcIn .8s cubic-bezier(.2,1.3,.35,1) both;animation-delay:calc(var(--i) * 80ms + .1s)}
.rc.mid{border-color:#ffd65aaa;box-shadow:0 24px 60px #000c,0 0 40px #f5b40033}
@keyframes rcIn{from{opacity:0;transform:translate3d(60px,30px,0) rotate(6deg) scale(.85)}}
.rc-m{position:absolute;inset:0}
.rc-m:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#000a 70%,#000e);pointer-events:none;z-index:1}
.rc-t{position:absolute;left:0;right:0;bottom:0;padding:18px;z-index:2}
.rc-t small{font-family:var(--mono);font-size:10.5px;color:var(--gold2);letter-spacing:.5px}
.rc-t b{display:block;font-family:"Russo One";font-weight:400;font-size:32px;line-height:1.05;margin:4px 0 2px;color:#fff;text-shadow:0 4px 20px #000}
.rc-t span{display:block;font-size:13px;color:#d8d3c6}
.rc-t em{display:inline-block;margin-top:10px;font-style:normal;font-weight:800;font-size:12.5px;padding:6px 11px;border-radius:99px;background:var(--goldgrad);color:#1a1200;box-shadow:0 6px 18px #f5b40055}
.rc .sr-phone{height:70%;top:6%;transform:translateX(-50%) rotate(-7deg)}

/* ---------- médias communs ---------- */
.sr-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sr-slides{position:absolute;inset:0;overflow:hidden}
.sr-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .9s ease,transform 4.5s linear}
.sr-slides img.on{opacity:1;transform:scale(1.14)}
/* téléphone avec la vraie app qui tourne dedans */
.sr-phone{position:absolute;left:50%;top:7%;height:86%;aspect-ratio:9/19;transform:translateX(-50%) rotate(-6deg);border-radius:22px;overflow:hidden;background:#000;border:3px solid #26262e;box-shadow:0 0 0 1.5px #ffd65a66,0 24px 50px #000e,0 0 50px #f5b40033;z-index:1}
.sr-phone video{width:100%;height:100%;object-fit:cover;display:block}
.sr-phone .notch{position:absolute;top:5px;left:50%;width:34%;height:9px;margin-left:-17%;border-radius:9px;background:#000;z-index:2}
.sr-phone .glass{position:absolute;inset:0;background:linear-gradient(120deg,#ffffff22,transparent 35%);pointer-events:none;z-index:2}
/* bot : conversation qui se joue en boucle */
.sr-chat{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:radial-gradient(90% 70% at 80% 0%,#1a3350,#0e1621 70%);font-size:12px}
.sr-chat b{font-size:12px;color:#fff;padding-bottom:6px;border-bottom:1px solid #ffffff14}
.sr-chat p{max-width:78%;padding:6px 10px;border-radius:12px;color:#e9eef3;opacity:0;animation:chatLoop 7s infinite}
.sr-chat .in1,.sr-chat .in2{align-self:flex-end;background:#2b5278;border-bottom-right-radius:4px}
.sr-chat .out1,.sr-chat .out2,.sr-chat .out3{align-self:flex-start;background:#182533;border-bottom-left-radius:4px}
.sr-chat .out1{animation-delay:.6s}.sr-chat .out2{animation-delay:1.2s}.sr-chat .in2{animation-delay:2s}.sr-chat .out3{animation-delay:2.7s}
@keyframes chatLoop{0%{opacity:0;transform:translate3d(0,10px,0) scale(.95)}6%,85%{opacity:1;transform:none}95%,100%{opacity:0}}

/* ---------- cartes service en affiche ---------- */
#svcs{gap:16px}
.svc.sr{flex-direction:column;gap:0;padding:0;border-radius:24px;background:linear-gradient(180deg,#14131a,#0b0b0f)}
.svc.sr>.em{display:none}
.svc.sr .bd{padding:12px 16px 16px}
.svc.sr h3{font-size:18px}
.svc.sr .fname{z-index:4}
.sr-m{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(90% 90% at 50% 20%,#3a2a00,#0b0a08 70%)}
.sr-m:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:22px 22px}
.sr-m .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#14131a);pointer-events:none;z-index:2}
.sr-m.none{display:grid;place-items:center}
.sr-m .big{position:relative;font-size:70px;filter:drop-shadow(0 10px 30px #f5b40088);animation:bigFloat 4s ease-in-out infinite}
@keyframes bigFloat{50%{transform:translate3d(0,-8px,0) rotate(-6deg) scale(1.06)}}
.svc.sr .sr-phone{height:92%;top:6%}

/* ---------- fiche : grand visuel ---------- */
.sh-hero{position:relative;margin:0 -18px;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(90% 90% at 50% 20%,#3a2a00,#0b0a08 70%)}
.sh-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,#15120a00 50%,#15120a);pointer-events:none;z-index:2}
.sh-hero .sr-phone{height:90%;top:5%}
.sh-hero .sr-chat{font-size:14px;padding:20px 22px}
.sheet .em.on-hero{position:relative;z-index:3;margin-top:-40px}
.sh-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:-6px 0 16px}
.sh-trust span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:99px;background:#ffffff0a;border:1px solid #ffffff14;color:#d8d3c6}

.paused .sr-chat p,.paused .sr-m .big{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.sr-slides img{transition:none}.sr-chat p{opacity:1;animation:none}}