/* ============================================================
   3D BAKERS — V2 SUR-MESURE (styles page, source : maquette)
   ============================================================ */
.v2-sm img.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.v2-sm a{text-decoration:none;}
.v2-sm #proc-progress{width:max-content;}
.v2-sm #proc-count{white-space:nowrap;}
.v2-sm .devis-title{text-wrap:balance;}
.v2-sm #real-track::-webkit-scrollbar{display:none;}
.v2-sm #solchips::-webkit-scrollbar{display:none;}
.v2-sm #real-track>.realcard{width:calc((100% - 60px)/4);}
@media (max-width:1080px){.v2-sm #real-track>.realcard{width:calc((100% - 20px)/2);}}

/* Keyframes spécifiques (bubblepop/rise/spin déjà dans tokens) */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes solswapimg{from{opacity:0;transform:translateX(-26px) rotate(-1.5deg);}to{opacity:1;transform:none;}}
@keyframes solswaptxt{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes mockscr{0%{opacity:0;transform:translateY(12px);}2.5%,13.5%{opacity:1;transform:translateY(0);}16.6%,100%{opacity:0;transform:translateY(-8px);}}
@keyframes mockdot{0%,2%{color:#2A328A;border-color:#2A328A;}13.5%{color:#2A328A;border-color:#2A328A;}16.6%,100%{color:rgba(39,34,34,.45);border-color:transparent;}}
@keyframes mockfill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes mockgen{0%,6%{opacity:1;}9%,100%{opacity:0;}}
@keyframes mockprop{0%,6.5%{opacity:0;transform:scale(.75);}9.5%,13.5%{opacity:1;transform:scale(1);}16.6%,100%{opacity:0;transform:scale(.9);}}
@keyframes mocksel{0%,5%{border-color:rgba(39,34,34,.14);background:#fff;}8%,13.5%{border-color:#2A328A;background:rgba(42,50,138,.08);}16.6%,100%{border-color:rgba(39,34,34,.14);background:#fff;}}
@keyframes shimmer{from{background-position:-260px 0;}to{background-position:260px 0;}}

/* Panneaux du process (entrées en glissé/rotation) */
.v2-sm [data-panel] .pi{border-radius:20px;overflow:hidden;position:relative;background:#1B2040;transition:transform 1s cubic-bezier(.18,.85,.25,1.12),opacity .7s;}
.v2-sm [data-panel] .pw .pi{transform:translateX(-110px) translateY(24px) rotate(-7deg) scale(.82);opacity:0;}
.v2-sm [data-panel] .pw2 .pi{transform:translateX(90px) translateY(-40px) rotate(8deg) scale(.8);opacity:0;transition-delay:.16s;}
.v2-sm [data-panel]:nth-child(even) .pw .pi{transform:translateX(110px) translateY(24px) rotate(7deg) scale(.82);}
.v2-sm [data-panel]:nth-child(even) .pw2 .pi{transform:translateX(-90px) translateY(40px) rotate(-8deg) scale(.8);}
.v2-sm [data-panel] .ptxt{transition:opacity .8s ease .1s,transform .8s cubic-bezier(.2,.7,.2,1) .1s;opacity:.2;transform:translateY(20px);}
.v2-sm [data-panel].on .pw .pi,.v2-sm [data-panel].on .pw2 .pi,.v2-sm [data-panel].on:nth-child(even) .pw .pi,.v2-sm [data-panel].on:nth-child(even) .pw2 .pi{transform:none;opacity:1;}
.v2-sm [data-panel].on .ptxt{opacity:1;transform:translateY(0);}

/* Responsive process + solutions (maquette) */
@media (max-width:1080px){
.v2-sm #solutions .solgrid{grid-template-columns:1fr!important;}
.v2-sm #solutions .solimgs{aspect-ratio:auto!important;flex-direction:row!important;gap:10px!important;}
.v2-sm #solutions .solimgs>div{aspect-ratio:4/3!important;flex:1 1 0!important;min-width:0;}
.v2-sm #proc-head{padding:24px 20px 0!important;}
.v2-sm #proc-head h2{font-size:19px!important;}
.v2-sm #proc-head h2 span{font-size:25px!important;}
.v2-sm #proc-track{padding-left:0!important;}
.v2-sm #proc-track>[data-panel]{box-sizing:border-box!important;width:100vw!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:18px;padding:150px 22px 68px!important;}
.v2-sm #proc-track>[data-panel] .pw{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;transform:none!important;animation:none!important;margin:0!important;flex:1 1 40vh!important;min-height:34vh;order:1;}
.v2-sm #proc-track>[data-panel] .pw .pi{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;max-width:none;}
.v2-sm #proc-track>[data-panel] .pw2{display:none!important;}
.v2-sm #proc-track>[data-panel] .ptxt{position:static!important;max-width:none!important;margin:0!important;padding:0!important;flex:none;order:2;}
.v2-sm #proc-progress{bottom:14px!important;}
.v2-sm #proc-progress>div:first-child{width:140px!important;}
.v2-sm [data-rs="split"]{grid-template-columns:1fr!important;gap:44px!important;}
.v2-sm [data-rs="ig"]{grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width:640px){
.v2-sm .devis-cta{gap:10px!important;padding:10px 18px!important;}
.v2-sm .devis-cta>span:nth-child(2){font-size:15.5px!important;line-height:21px!important;}
.v2-sm .devis-cta>span:last-child{width:28px!important;height:28px!important;font-size:13px!important;}
.v2-sm .devis-cta>span:first-child{top:-24px!important;right:0!important;font-size:10px!important;}
.v2-sm #real-track>.realcard{width:78vw;}
.v2-sm [data-rs="ig"]{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:12px!important;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:10px;}
.v2-sm [data-rs="ig"]::-webkit-scrollbar{display:none;}
.v2-sm [data-rs="ig"]>a{flex:none;width:74vw;scroll-snap-align:start;}
.v2-sm [data-rs="hcta"]{gap:12px!important;flex-wrap:wrap!important;justify-content:center!important;}
.v2-sm [data-rs="hcta"] a{padding:11px 18px!important;font-size:12.5px!important;white-space:nowrap;flex:none!important;justify-content:center!important;text-align:center;}
.v2-sm [data-rs="hcta"] a.devis-cta{gap:8px!important;}
.v2-sm [data-rs="hcta"] a.devis-cta>span:nth-child(2){font-size:15.5px!important;line-height:19px!important;}
.v2-sm [data-rs="hcta"] a.devis-cta>span:last-child{width:22px!important;height:22px!important;font-size:12px!important;}
.v2-sm [data-rs="hcta"] a:not(.devis-cta) span{font-size:15.5px!important;line-height:19px!important;}
.v2-sm [data-rs="hcta"] a.devis-cta>span:first-child{top:-30px!important;left:0!important;right:0!important;width:max-content;margin:0 auto;font-size:10px!important;padding:5px 10px!important;}
.v2-sm [data-mock="props"]{gap:6px!important;}
.v2-sm [data-mock="props"]>div{height:auto!important;width:calc(25% - 5px)!important;}
.v2-sm [data-rs="real"]{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:12px!important;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:10px;}
.v2-sm [data-rs="real"]::-webkit-scrollbar{display:none;}
.v2-sm [data-rs="row"]{flex-direction:column!important;align-items:flex-start!important;row-gap:16px!important;}
.v2-sm #solutions .solgrid{gap:16px!important;margin-top:18px!important;}
.v2-sm #solutions .soltxt p{font-size:14px!important;line-height:1.65!important;margin-top:12px!important;}
.v2-sm #solutions .soltxt .devis-cta{margin-top:22px!important;}
.v2-sm .ia-badge{top:-14px!important;right:-6px!important;width:44px!important;height:44px!important;font-size:12.5px!important;}
.v2-sm .mocksteps{justify-content:flex-start!important;gap:5px 12px!important;font-size:9px!important;letter-spacing:1px!important;}
/* Lisibilite mobile (passe 28/07) : chips solutions, faux bouton mockup, pilules Instagram */
.v2-sm .solchip>span{font-size:15.5px!important;}
.v2-sm #devis a[style*="border-radius:26px"] div[style*="background:#2A328A"][style*="border-radius:999px"]{font-size:13.5px!important;}
.v2-sm [data-reveal="80"][data-rs="row"]>a[href*="instagram.com"]{font-size:15px!important;}
.v2-sm [data-reveal="0"][data-rs="row"] a[href*="instagram.com"]{font-size:15px!important;}
}
@media (max-width:412px){
.v2-sm [data-rs="hcta"]{gap:10px!important;}
.v2-sm [data-rs="hcta"] a{padding:10px 16px!important;}
.v2-sm [data-rs="hcta"] a.devis-cta>span:nth-child(2){font-size:15.5px!important;line-height:19px!important;}
.v2-sm [data-rs="hcta"] a:not(.devis-cta) span{font-size:15.5px!important;line-height:19px!important;}
.v2-sm [data-rs="hcta"] a.devis-cta>span:last-child{width:20px!important;height:20px!important;font-size:11px!important;}
}
/* Harmonisation tablette 641-768 : le badge bulle garde ses 10px de lisibilite */
@media (min-width:641px) and (max-width:768px){
.v2-sm .devis-cta>span:first-child{font-size:10px!important;}
}

/* ---- Tablette (audit 24/07) ---- */
@media (min-width:641px) and (max-width:1080px){
.v2-sm [data-rs="split"] [style*="max-width:520"]{max-width:none!important;}
.v2-sm #solutions [style*="max-width:520"]{max-width:none!important;}
}

/* Tablette : le bandeau titre du scrollytelling doit passer sous le header fixe (~79px),
   et le panneau demarre sous le titre (230px), image plafonnee, vide reparti autour (aere) */
@media (min-width:641px) and (max-width:1080px){
.v2-sm #proc-head{padding:96px 20px 0!important;}
.v2-sm #proc-track>[data-panel]{padding:clamp(190px,17vh,230px) 28px clamp(72px,7vh,96px)!important;justify-content:center!important;gap:26px;}
.v2-sm #proc-track>[data-panel] .pw{max-height:56vh;min-height:24vh;}
}

/* ---- Solutions : les 2 photos a la MEME hauteur, largeurs naturelles, dimensionnees par fitFrames() ---- */
@media (min-width:641px){
.v2-sm #solutions .solimgs{aspect-ratio:auto!important;align-items:flex-start;justify-content:flex-start;}
.v2-sm #solutions .solimgs>div{aspect-ratio:auto!important;min-width:0;}
}

/* Reduced motion : le mockup animé devient un aperçu statique (1er écran seul, pas de shimmer) */
@media (prefers-reduced-motion:reduce){
.v2-sm [style*="animation:mockscr"]{animation:none!important;opacity:0!important;}
.v2-sm [style*="animation:mockscr 21s ease-in-out 0s"]{opacity:1!important;transform:none!important;}
.v2-sm [style*="animation:mockprop"]{animation:none!important;opacity:1!important;transform:none!important;}
.v2-sm [style*="animation:shimmer"]{display:none!important;}
}

/* Zones tactiles des CTA héro (41-42px rendus) : étendues à 44px sans changement visuel */
.v2-sm [data-rs="hcta"] a{position:relative;}
.v2-sm [data-rs="hcta"] a::after{content:'';position:absolute;inset:-2px 0;border-radius:999px;}

/* Écrans larges/courts : la zone de titre (~175px) est réservée, les images des
   étapes ne remontent plus dessus (retour collègue d'Enzo) */
@media (min-width:641px){
.v2-sm #proc-track>[data-panel]{padding-top:180px!important;padding-bottom:26px!important;}
/* Écrans courts : la largeur des images est plafonnée par la hauteur disponible
   (image 4/5 : h = l x 1.25), sinon le centrage flex les fait déborder sur le titre */
.v2-sm #proc-track>[data-panel] .pw{max-width:calc((100vh - 320px) * .75);}
}