/* ================ MASCOT MOBILE PREMIUM PASS (v2) ================= */ .sb-dots-m{display:none} @media (max-width:840px){ /* ---- 1. SUB-HERO carousel: tidy single-line tabs, arrows -> dots ---- */ .sbsec .sb-bar{flex-wrap:nowrap;gap:10px;align-items:center} .sbsec .sb-tabs{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;gap:8px;padding:2px 0;justify-content:flex-start;-webkit-overflow-scrolling:touch} .sbsec .sb-tabs::-webkit-scrollbar{display:none} .sbsec .sb-tab{flex:0 0 auto;font-size:13px;padding:9px 15px} .sbsec .sb-nav{display:none!important} .sb-dots-m{display:flex;justify-content:center;gap:6px;margin-top:16px} .sb-dots-m button{position:relative;width:24px;height:14px;padding:0;border:0;background:none;cursor:pointer} .sb-dots-m button::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:7px;border-radius:100px;background:rgba(10,12,16,.2);transform:translate(-50%,-50%) scaleX(.32);transform-origin:center;transition:transform .35s cubic-bezier(.22,.61,.36,1),background .35s} .sb-dots-m button.on::after{transform:translate(-50%,-50%) scaleX(1);background:linear-gradient(90deg,var(--amber),var(--orange))} /* ---- shared swipe rails: products / repair / films / engagements ---- */ .nrow,.dark-sec .rgrid,.film-strip,.why-grid{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:10px} .nrow::-webkit-scrollbar,.dark-sec .rgrid::-webkit-scrollbar,.film-strip::-webkit-scrollbar,.why-grid::-webkit-scrollbar{display:none;height:0;width:0} .nrow>*,.dark-sec .rgrid>*,.film-strip>*,.why-grid>*{scroll-snap-align:start} .nrow>.up,.dark-sec .rgrid>.up,.film-strip>.up,.why-grid>.up{opacity:1!important;transform:none!important} .nrow>.ncard{flex:0 0 76%!important;width:76%!important;max-width:290px} .dark-sec .rgrid>.rcard{flex:0 0 80%!important;width:80%!important;max-width:310px;padding:24px 22px!important} /* ---- SERVICE BANNER: slimmer on mobile to reclaim space ---- */ .svc-banner{min-height:auto!important;margin-bottom:clamp(22px,4vw,32px)!important} .svc-banner .sb-inner{padding:24px 20px!important;gap:16px!important} .svc-banner .sb-media{aspect-ratio:16/7!important} .svc-banner .sb-in h3{font-size:clamp(23px,6.6vw,29px)!important;line-height:1.06!important} .svc-banner .sb-in p{font-size:13.5px!important;line-height:1.5!important} /* chips -> 2-col grid (3rd spans full width), CTA gets real breathing room below */ .svc-banner .sb-chips{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:16px 0 0!important} .svc-banner .sb-chips span{display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal!important;font-size:12px!important;padding:10px 10px!important;line-height:1.2} .svc-banner .sb-chips span:last-child:nth-child(odd){grid-column:1 / -1} .svc-banner .sb-in>.btn{margin-top:24px!important;width:100%!important;justify-content:center!important} /* ---- SERVICES cards: horizontal swipe rail (neatest) ---- */ .grid3{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto;overflow-y:hidden;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:10px} .grid3::-webkit-scrollbar{display:none;height:0;width:0} .grid3>.scard{flex:0 0 82%!important;width:82%!important;max-width:320px;scroll-snap-align:start;opacity:1!important;transform:none!important} .grid3>.scard .simg{aspect-ratio:16/10!important} .film-strip{margin-top:20px!important} .film-strip>.fcard{flex:0 0 76%!important;width:76%!important;max-width:300px} .why-grid>.why{flex:0 0 80%!important;width:80%!important;max-width:310px;padding:28px 24px!important} /* ---- 2. GALLERY: 3-col grid of gold-framed prints (frame scaled to the smaller tile) ---- */ .ggrid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;flex-wrap:initial!important;gap:18px 9px!important;overflow:visible!important;padding-bottom:0!important} .ggrid>.art{flex:none!important;width:auto!important;max-width:none!important;min-width:0;opacity:1!important;transform:none!important} /* thin the wood frame + mat so the artwork still reads at ~1/3 width */ .ggrid .art .frame{padding:5px!important;border-radius:2px!important;box-shadow:0 12px 20px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.18)!important} .ggrid .art .mat{padding:4px!important} .ggrid .art .sale{top:-16px!important;font-size:9.5px!important} .ggrid .ameta{display:block!important;padding-top:9px!important} .ggrid .aname{font-size:11.5px!important;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} .ggrid .aartist{font-size:10px!important;display:block;margin-top:1px;opacity:.72} .ggrid .aprice{font-size:11px!important;display:block;margin-top:3px} /* category tiles */ .grid{gap:12px!important} .pcard{gap:10px!important} .pcard .thumb{border-radius:18px} .plink b{font-size:15px} .plink .go{width:26px;height:26px;font-size:13px} /* promos */ .promos{gap:14px!important} .promo{min-height:200px!important;padding:20px!important;border-radius:20px} /* repair card text */ .dark-sec .rcard h4{font-size:19px!important} .dark-sec .rcard p{font-size:14px!important} /* ---- 3. REPAIR trust chips: neat 2-col grid ---- */ .dark-sec .rchips{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:stretch!important} .dark-sec .rchip{justify-content:flex-start!important;width:100%!important;font-size:12px!important;padding:11px 12px!important;line-height:1.25} /* ---- 4. WORKSPACE: steps 2x2, CTAs stacked ---- */ .ws-steps{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:22px 0 24px!important} .ws-step{width:100%!important;justify-content:flex-start!important;font-size:12.5px!important;padding:11px 12px!important} .ws .cta-row{flex-direction:column!important;gap:10px!important;align-items:stretch!important} .ws .cta-row .btn{width:100%!important;justify-content:center!important} .ws-prio{font-size:12.5px!important;text-align:center!important;margin-top:2px!important} /* ---- 5. CAFE teaser: unstick the crest, calm the busy stack, center it premium ---- */ .cafeT{padding-top:38px!important} /* the grid track was sizing to max-content (~622px) and overflowing/clipping the copy — collapse to a plain full-width block */ .cafeT .grid2{display:block!important;grid-template-columns:none!important} .cafeT .grid2>.up,.cafeT .grid2>.vis{width:auto!important;max-width:100%!important;min-width:0!important} .cafeT .grid2>.vis{margin-top:26px!important} .cafeT .seal{position:static!important;display:block!important;inset:auto!important;margin:0 auto 16px!important;width:66px!important;height:auto!important;transform:none!important;animation:none!important;opacity:.97} .cafeT .grid2>.up{text-align:center} .cafeT .kick{display:block;font-size:11px!important;letter-spacing:1.2px!important;line-height:1.45!important;margin-bottom:12px!important;opacity:.9} .cafeT h3{font-size:clamp(27px,7.6vw,34px)!important;line-height:1.06!important;margin-bottom:12px!important} .cafeT p{font-size:14px!important;line-height:1.55!important;margin-bottom:0!important} .cafeT .chips{flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:18px -20px 22px!important;padding:0 20px 2px!important;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch} .cafeT .chips::-webkit-scrollbar{display:none} .cafeT .chips span{flex:0 0 auto;white-space:nowrap;font-size:12.5px!important} .cafeT .btn-cafe,.cafeT .btn-cafe-alt,.cafeT .cafe-fp{width:100%!important;justify-content:center!important;display:flex!important;align-items:center;text-align:center} .cafeT .cafe-fp{background:transparent!important;opacity:.85} /* ---- 6. LOCATOR: tidy contact rows + CTA layout ---- */ .l2row{padding:14px!important} .l2row .v{font-size:13.5px!important} .loc2-cta{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:12px!important} .loc2-cta .btn{grid-column:1 / -1;width:100%!important;justify-content:center!important} .loc2-cta .l2wa,.loc2-cta .l2call{width:100%!important;justify-content:center!important;padding:13px 16px!important;font-size:14.5px!important} /* ---- 7. PARTNERS: compact 3-col logo grid ---- */ .plogos{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;justify-content:stretch!important} .plogo{width:auto!important;height:auto!important;aspect-ratio:16/11!important;padding:12px!important;border-radius:14px!important} .plogo img{max-height:40px!important;max-width:100%!important} /* ---- global premium polish ---- */ h2,h3{letter-spacing:-.02em} .shead h2,.ws-copy h2,.tech h2,.cafeT h3,.loc2-head h3,.film-head h3{line-height:1.06} .btn{font-size:14.5px} .chead h3,.shead h2{margin-bottom:2px} } /* ================ SITE-WIDE SUB-PAGE MOBILE PASS (v7) ================= Sub-pages had no phone breakpoint (their CSS stopped at 920px), so card grids stayed 3-4 columns on a phone. This applies the same premium language as the homepage: swipe rails for cards that carry copy, 2-col grids for short chips/tiles, single column for layout splits. */ @media (max-width:840px){ /* ---- layout splits: always stack ---- */ .mk-page .hgrid,.mk-page .store,.mk-page .story,.mk-page .g2,.mk-page .split, .mk-page .mcat,.mk-page .rev,.mk-page .app,.mk-page .why2,.mk-page .gap-grid, .mk-page .layout,.mk-page .find{grid-template-columns:1fr!important} /* ---- swipe rails: card groups that carry a description ---- */ .pg-impression .g4,.pg-reparation .g4,.pg-reparation .g3, .pg-facture .g3,.pg-imp .feat,.pg-transfert .g3, .pg-about .div5,.pg-about .commit,.pg-about .probs, .pg-cafe .sanct,.pg-cafe .bridge, .pg-workspace .g4,.pg-workspace .g3,.pg-workspace .stations{ display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important; overflow-x:auto;overflow-y:hidden;gap:14px!important;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none; padding-bottom:10px!important} .pg-impression .g4::-webkit-scrollbar,.pg-reparation .g4::-webkit-scrollbar, .pg-reparation .g3::-webkit-scrollbar, .pg-facture .g3::-webkit-scrollbar,.pg-imp .feat::-webkit-scrollbar, .pg-transfert .g3::-webkit-scrollbar,.pg-about .div5::-webkit-scrollbar, .pg-about .commit::-webkit-scrollbar,.pg-about .probs::-webkit-scrollbar, .pg-cafe .sanct::-webkit-scrollbar,.pg-cafe .bridge::-webkit-scrollbar, .pg-workspace .g4::-webkit-scrollbar,.pg-workspace .g3::-webkit-scrollbar, .pg-workspace .stations::-webkit-scrollbar{display:none;height:0;width:0} .pg-impression .g4>*,.pg-reparation .g4>*,.pg-reparation .g3>*, .pg-facture .g3>*,.pg-imp .feat>*,.pg-transfert .g3>*, .pg-about .div5>*,.pg-about .commit>*,.pg-about .probs>*, .pg-cafe .sanct>*,.pg-cafe .bridge>*, .pg-workspace .g4>*,.pg-workspace .g3>*,.pg-workspace .stations>*{ flex:0 0 78%!important;width:78%!important;max-width:300px;min-width:0; scroll-snap-align:start} /* CRITICAL: scroll-reveal children parked off-screen to the right never trigger their observer, so they'd stay invisible inside a rail. Force them visible. */ .pg-impression .g4>.reveal,.pg-reparation .g4>.reveal,.pg-reparation .g3>.reveal, .pg-facture .g3>.reveal,.pg-imp .feat>.reveal, .pg-transfert .g3>.reveal,.pg-about .div5>.reveal,.pg-about .commit>.reveal, .pg-about .probs>.reveal,.pg-cafe .sanct>.reveal,.pg-cafe .bridge>.reveal, .pg-workspace .g4>.reveal,.pg-workspace .g3>.reveal,.pg-workspace .stations>.reveal{ opacity:1!important;transform:none!important} /* ---- 2-col grids: short tiles, chips and photo pairs ---- */ .pg-reparation .rpromise,.pg-reparation .opts,.pg-reparation .rchips, .pg-imp .uses,.pg-imp .rel,.pg-about .mgrid,.pg-about .mgal, .pg-workspace .slots,.pg-workspace .stat-row,.pg-about .stat-row, .pg-cafe .shakes,.pg-cafe .imgs,.pg-cafe .phones{ display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important; overflow:visible!important} .pg-reparation .rpromise>*,.pg-reparation .opts>*,.pg-reparation .rchips>*, .pg-imp .uses>*,.pg-imp .rel>*,.pg-about .mgrid>*,.pg-workspace .slots>*, .pg-cafe .shakes>*{width:auto!important;min-width:0;justify-content:flex-start} .pg-reparation .rchips>*,.pg-imp .uses>*,.pg-imp .rel>*{ font-size:12px!important;padding:11px 12px!important;line-height:1.25;white-space:normal!important} /* an odd last tile fills the row instead of leaving a gap */ .pg-about .mgrid>*:last-child:nth-child(odd), .pg-imp .uses>*:last-child:nth-child(odd), .pg-workspace .slots>*:last-child:nth-child(odd){grid-column:1 / -1} /* ---- the 3-step process must stay readable in order: stack it ---- */ .pg-imp .g3,.pg-facture .steps,.pg-transfert .steps{ display:grid!important;grid-template-columns:1fr!important;gap:12px!important} /* ---- framed print gallery: same 3-col treatment as the homepage ---- */ .pg-impression .hgal{display:grid!important;grid-template-columns:repeat(3,1fr)!important; gap:18px 9px!important;overflow:visible!important} .pg-impression .hgal>.art{width:auto!important;max-width:none!important;min-width:0; opacity:1!important;transform:none!important} .pg-impression .hgal .frame{padding:5px!important;border-radius:2px!important; box-shadow:0 12px 20px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.18)!important} .pg-impression .hgal .mat{padding:4px!important} .pg-impression .hgal .ameta{display:block!important;padding-top:9px!important} .pg-impression .hgal .aname{font-size:11.5px!important;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} .pg-impression .hgal .aartist{font-size:10px!important;display:block;opacity:.72} .pg-impression .hgal .aprice{font-size:11px!important;display:block;margin-top:3px} /* ---- footer info rows stack ---- */ .mk-page .info{display:grid!important;grid-template-columns:1fr!important;gap:10px!important} /* ---- shared premium polish across every sub-page ---- */ .mk-page .hero h1{font-size:clamp(30px,8.4vw,40px)!important;line-height:1.05!important} .mk-page .sec h2,.mk-page .shead h2{font-size:clamp(24px,6.8vw,31px)!important;line-height:1.07!important} .mk-page .cta .btn,.mk-page .hero .btn{width:100%!important;justify-content:center!important} .mk-page .hero .btn+.btn{margin-top:10px!important} .mk-page .crumb{flex-wrap:wrap!important;font-size:12px!important} /* before/after cards own a horizontal drag slider - a swipe rail would fight the gesture */ .pg-reparation .bagrid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;overflow:visible!important} .pg-reparation .bagrid>*{width:auto!important;max-width:none!important;min-width:0} /* ---- FINAL SUB-PAGE TWEAKS ---- */ /* 4 partner logos read better as a 2x2 than 3 + a lone orphan */ .pg-transfert .plogos{grid-template-columns:1fr 1fr!important} /* an odd trailing stat fills its row rather than leaving a hole */ .pg-about .stat-row>*:last-child:nth-child(odd),.pg-workspace .stat-row>*:last-child:nth-child(odd){grid-column:1 / -1} } /* ================= PREMIUM DARK SERVICE + GALERIE (v11, mobile only) ================= From the user's design reference: near-black sections, full-bleed photo cards with a dark gradient, a tinted icon chip, gold kicker, white pill CTA and carousel dots. Desktop is untouched - everything here is inside the 640px breakpoint. */ .mk-dots{display:none} @media (max-width:840px){ /* ---- the two service sections + the galerie go dark, so the already-dark .svc-banner above them flows into the cards as one premium block ---- */ .mk-sv,.mk-gal{background:#08090b!important} .mk-sv .svc-banner,.mk-gal .svc-banner{margin-bottom:22px!important} /* ================= SERVICE CARDS ================= */ .mk-sv .grid3{gap:12px!important;padding-bottom:4px!important} .mk-sv .grid3>.scard{ flex:0 0 84%!important;width:84%!important;max-width:320px; position:relative;aspect-ratio:3/4;border-radius:26px;overflow:hidden; background:#101216;border:1px solid rgba(255,255,255,.09); box-shadow:0 26px 44px -26px rgba(0,0,0,.9); display:block!important;padding:0!important} /* photo fills the whole card instead of sitting in a band on top */ .mk-sv .grid3>.scard .simg{ position:absolute!important;inset:0!important;aspect-ratio:auto!important; height:100%!important;width:100%!important;margin:0!important;border-radius:0!important; overflow:hidden} .mk-sv .grid3>.scard .simg img{width:100%!important;height:100%!important;object-fit:cover!important;display:block} .mk-sv .grid3>.scard .simg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,7,9,.10) 0%,rgba(6,7,9,.34) 38%,rgba(6,7,9,.86) 72%,rgba(6,7,9,.97) 100%)} /* tinted icon chip, top-left */ .mk-sv .grid3>.scard::before{ content:"";position:absolute;z-index:3;top:16px;left:16px;width:50px;height:50px; border-radius:15px;background:var(--mkAccBg,rgba(247,161,43,.22)); border:1px solid var(--mkAccBd,rgba(247,161,43,.42)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); background-repeat:no-repeat;background-position:center;background-size:23px 23px; box-shadow:0 8px 20px -8px rgba(0,0,0,.7)} .mk-sv .grid3>.scard .sbody{ position:absolute!important;left:0;right:0;bottom:0;z-index:3; padding:0 20px 20px!important;background:none!important;text-align:left} .mk-sv .grid3>.scard .sbody h4{ color:#fff!important;font-size:24px!important;line-height:1.08!important; letter-spacing:-.02em;margin:0 0 9px!important} .mk-sv .grid3>.scard .sbody p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important; margin:0 0 16px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* white pill CTA, exactly like the reference */ .mk-sv .grid3>.scard .sbody .btn{ display:inline-flex!important;align-items:center;gap:9px; background:#fff!important;color:#0a0c10!important;border:0!important; padding:12px 22px!important;border-radius:100px!important; font-size:14.5px!important;font-weight:600;box-shadow:0 10px 24px -12px rgba(0,0,0,.8); width:auto!important;justify-content:flex-start!important} .mk-sv .grid3>.scard .sbody .btn .arw{color:#0a0c10!important} /* per-card accent + icon (services: transfert / impression / facture) */ .mk-sv .grid3>.scard:nth-child(3n+1){--mkAccBg:rgba(247,161,43,.24);--mkAccBd:rgba(247,161,43,.45)} .mk-sv .grid3>.scard:nth-child(3n+2){--mkAccBg:rgba(74,125,255,.24);--mkAccBd:rgba(74,125,255,.45)} .mk-sv .grid3>.scard:nth-child(3n+3){--mkAccBg:rgba(19,190,109,.24);--mkAccBd:rgba(19,190,109,.45)} #services .grid3>.scard:nth-child(3n+1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13M14 5l3 3-3 3M20 16H7M10 13l-3 3 3 3'/%3E%3C/svg%3E")} #services .grid3>.scard:nth-child(3n+2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5M7 18H5.5A1.5 1.5 0 0 1 4 16.5v-4A1.5 1.5 0 0 1 5.5 11h13a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5H17M7 15h10v5H7z'/%3E%3C/svg%3E")} #services .grid3>.scard:nth-child(3n+3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/%3E%3Cpath d='M9.5 8h5M9.5 12h5'/%3E%3C/svg%3E")} /* impression section: copy / photo / galerie */ .mk-sv:not(#services) .grid3>.scard:nth-child(3n+1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h9a2 2 0 0 1 2 2v9'/%3E%3Crect x='4' y='7' width='12' height='14' rx='2'/%3E%3C/svg%3E")} .mk-sv:not(#services) .grid3>.scard:nth-child(3n+2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 15.5L16 10.5 5.5 19'/%3E%3C/svg%3E")} .mk-sv:not(#services) .grid3>.scard:nth-child(3n+3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5'/%3E%3Crect x='7' y='7' width='10' height='10' rx='.6'/%3E%3C/svg%3E")} .mk-sv:not(#services) .grid3>.scard:nth-child(3n+2){--mkAccBg:rgba(155,109,255,.24);--mkAccBd:rgba(155,109,255,.45)} .mk-sv:not(#services) .grid3>.scard:nth-child(3n+3){--mkAccBg:rgba(232,184,75,.24);--mkAccBd:rgba(232,184,75,.45)} /* ---- carousel dots (shared by service rails + the art carousel) ---- */ .mk-dots{display:flex;justify-content:center;gap:7px;margin:16px 0 0} .mk-dots button{position:relative;width:22px;height:14px;padding:0;border:0;background:none;cursor:pointer} .mk-dots button::after{ content:"";position:absolute;left:50%;top:50%;width:20px;height:6px;border-radius:100px; background:rgba(255,255,255,.24); transform:translate(-50%,-50%) scaleX(.34);transform-origin:center; transition:transform .35s cubic-bezier(.22,.61,.36,1),background .35s} .mk-dots button.on::after{ transform:translate(-50%,-50%) scaleX(1); background:linear-gradient(90deg,var(--amber,#F7A12B),var(--orange,#F2890E))} /* ================= GALERIE: featured carousel above the grid ================= */ .mk-artfeat{ display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px} .mk-artfeat::-webkit-scrollbar{display:none;height:0;width:0} .mk-af{ flex:0 0 87%;max-width:330px;scroll-snap-align:center; display:block;text-decoration:none;color:inherit; background:linear-gradient(180deg,#131418,#0d0e11); border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:16px 16px 18px; box-shadow:0 30px 50px -28px rgba(0,0,0,.95)} .mk-af-stage{ background:radial-gradient(120% 90% at 50% 0%,rgba(232,184,75,.10),transparent 62%),#0a0b0e; border-radius:16px;padding:20px 22px;display:flex;justify-content:center} /* ornate gold frame: layered gradients read as moulding at this size */ .mk-af-frame{ position:relative;padding:9px;border-radius:3px; background:linear-gradient(135deg,#f2d894 0%,#c8a253 26%,#8f6f34 46%,#e6c87e 62%,#a5813d 82%,#d8b76a 100%); box-shadow:0 20px 34px -18px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.32),inset 0 0 0 4px rgba(255,255,255,.10)} .mk-af-mat{background:#fbfaf7;padding:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .mk-af-mat img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} .mk-af-meta{padding:16px 4px 0} .mk-af-kick{ display:block;color:#E8B84B;font-size:10.5px;font-weight:600; letter-spacing:1.9px;text-transform:uppercase;margin-bottom:7px} .mk-af-name{ color:#fff;font-family:'Clash Display',sans-serif;font-weight:600; font-size:23px;line-height:1.12;letter-spacing:-.02em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mk-af-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:8px} .mk-af-artist{color:rgba(255,255,255,.55);font-size:13px} .mk-af-price{color:#E8B84B;font-size:14px;font-weight:600;white-space:nowrap} .mk-af-cta{ display:flex;align-items:center;justify-content:center;gap:9px; margin-top:16px;background:#fff;color:#0a0c10; padding:13px 22px;border-radius:100px;font-size:14.5px;font-weight:600} .mk-af-cta .arw{color:#0a0c10} /* divider that introduces the full grid underneath */ .mk-allprints{ display:flex;align-items:center;gap:14px;margin:30px 0 18px; color:rgba(255,255,255,.42);font-size:11px;font-weight:600; letter-spacing:2px;text-transform:uppercase} .mk-allprints::before,.mk-allprints::after{ content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)} /* the 3-col grid below now sits on a dark background */ .mk-gal .ggrid .aname{color:#fff!important} .mk-gal .ggrid .aartist{color:rgba(255,255,255,.5)!important} .mk-gal .ggrid .aprice{color:#E8B84B!important} .mk-gal .ggrid .abm{color:rgba(255,255,255,.35)!important} .mk-gal .ggrid .art .frame{ box-shadow:0 14px 24px -12px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.3)!important} /* ---- EDITORIAL PHOTO SWAP (mobile only) ---- 3 of the 6 service cards shipped flat icon-illustrations drawn for small light thumbnails; full-bleed on a dark card they read as clip-art and the scrim has nothing to sit on. Swapped to the client's OWN existing photography via a background image so the (and therefore desktop) is left untouched. */ #services .grid3>.scard:nth-child(3n+1) .simg{background:url('/wp-content/uploads/mascot-hero/money-jump.jpg') center/cover no-repeat} #services .grid3>.scard:nth-child(3n+2) .simg{background:url('/wp-content/uploads/mascot-hero/svc-cartes-visite.jpg') center/cover no-repeat} .mk-sv:not(#services) .grid3>.scard:nth-child(3n+1) .simg{background:url('/wp-content/uploads/mascot-hero/svc-id-photos.jpg') center 42%/cover no-repeat} #services .grid3>.scard:nth-child(3n+1) .simg img, #services .grid3>.scard:nth-child(3n+2) .simg img, .mk-sv:not(#services) .grid3>.scard:nth-child(3n+1) .simg img{opacity:0} /* deepen the scrim so the title/description always clear the photo */ .mk-sv .grid3>.scard .simg::after{ background:linear-gradient(180deg,rgba(6,7,9,.30) 0%,rgba(6,7,9,.12) 22%,rgba(6,7,9,.52) 48%,rgba(6,7,9,.90) 74%,rgba(6,7,9,.98) 100%)!important} } /* ============ v15: tighter banner chips + premium photo cards for Réparation and Pourquoi Mascot (mobile only) ============ */ @media (max-width:840px){ /* ---- sub-banner chips: smaller, and every chip the same width so the third one sits directly under the first instead of spanning ---- */ .svc-banner .sb-chips{gap:8px!important;margin:14px 0 0!important} .svc-banner .sb-chips span{ font-size:11.5px!important;padding:8px 10px!important;line-height:1.25; letter-spacing:.1px;background:rgba(255,255,255,.10)!important; border-color:rgba(255,255,255,.18)!important} .svc-banner .sb-chips span:last-child:nth-child(odd){grid-column:auto!important} .svc-banner .sb-in>.btn{margin-top:20px!important} /* ================= shared premium photo-card recipe ================= .rcard and .why have no , so the photo rides on ::before and the scrim on ::after; the card becomes a bottom-aligned flex column so the existing children stack at the base with no extra wrapper. */ .dark-sec .rgrid>.rcard, .why-grid>.why{ position:relative!important;display:flex!important;flex-direction:column; justify-content:flex-end;flex:0 0 84%!important;width:84%!important;max-width:320px; aspect-ratio:3/4;border-radius:26px!important;overflow:hidden; padding:20px!important;background:#101216!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 26px 44px -26px rgba(0,0,0,.9)!important} .dark-sec .rgrid>.rcard::before, .why-grid>.why::before{ content:"";position:absolute;inset:0;z-index:0; background-size:cover;background-position:center;background-repeat:no-repeat} .dark-sec .rgrid>.rcard::after, .why-grid>.why::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,7,9,.30) 0%,rgba(6,7,9,.12) 22%,rgba(6,7,9,.55) 48%,rgba(6,7,9,.91) 74%,rgba(6,7,9,.98) 100%)} .dark-sec .rgrid>.rcard>*, .why-grid>.why>*{position:relative;z-index:2} /* icon -> tinted chip pinned top-left, matching the service cards */ .dark-sec .rgrid>.rcard .ric, .why-grid>.why .wic{ position:absolute!important;z-index:3;top:16px;left:16px; width:50px!important;height:50px!important;margin:0!important; border-radius:15px!important;display:flex!important;align-items:center;justify-content:center; background:var(--mkAccBg,rgba(247,161,43,.24))!important; border:1px solid var(--mkAccBd,rgba(247,161,43,.45))!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#fff!important;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)} .dark-sec .rgrid>.rcard .ric svg, .why-grid>.why .wic svg{width:23px;height:23px;stroke:#fff} /* typography on the photo */ .dark-sec .rgrid>.rcard h4, .why-grid>.why h4{ color:#fff!important;font-size:24px!important;line-height:1.08!important; letter-spacing:-.02em;margin:0 0 9px!important} .dark-sec .rgrid>.rcard p, .why-grid>.why p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important; margin:0!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* "01 · Confiance" becomes the gold kicker above the title */ .why-grid>.why .wn{ color:#E8B84B!important;font-size:10.5px!important;font-weight:600!important; letter-spacing:1.9px!important;text-transform:uppercase;margin:0 0 7px!important} /* CTA -> white pill */ .dark-sec .rgrid>.rcard .rbtn{ display:inline-flex!important;align-items:center;gap:9px;align-self:flex-start; margin-top:16px!important;background:#fff!important;color:#0a0c10!important; border:0!important;padding:12px 22px!important;border-radius:100px!important; font-size:14.5px!important;font-weight:600;width:auto!important; box-shadow:0 10px 24px -12px rgba(0,0,0,.8)} .dark-sec .rgrid>.rcard .rbtn .arw{color:#0a0c10!important} /* per-card accent, reusing the existing .green/.blue and .g/.b modifiers */ .dark-sec .rgrid>.rcard.green,.why-grid>.why.g{--mkAccBg:rgba(19,190,109,.26);--mkAccBd:rgba(19,190,109,.48)} .dark-sec .rgrid>.rcard.blue,.why-grid>.why.b{--mkAccBg:rgba(74,125,255,.26);--mkAccBd:rgba(74,125,255,.48)} /* photography (Mascot's own shots) */ .dark-sec .rgrid>.rcard:nth-child(3n+1)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-car-1.jpg')} .dark-sec .rgrid>.rcard:nth-child(3n+2)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-ecran-casse.jpg')} .dark-sec .rgrid>.rcard:nth-child(3n+3)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-sub-4.jpg')} .why-grid>.why:nth-child(3n+1)::before{background-image:url('/wp-content/uploads/mascot-hero/contact.jpg')} .why-grid>.why:nth-child(3n+2)::before{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop.jpg')} .why-grid>.why:nth-child(3n+3)::before{background-image:url('/wp-content/uploads/mascot-hero/kids-community.jpg')} /* the base .rcard gives its

flex-grow:1 to equalise heights in the desktop grid; inside the bottom-aligned photo card that stretches the copy and pins the title to the top, colliding with the icon chip. Pin every child to its natural size. */ .dark-sec .rgrid>.rcard>*,.why-grid>.why>*{flex:0 0 auto!important;/*mkstack*/} } /* ============ v17: signup offer card + locator cleanup (mobile only) ============ */ @media (max-width:840px){ /* ---------------- 1. SIGN-UP -> premium offer card ---------------- BUG: the base overlay is a 90deg (left-to-right) scrim built for the desktop two-column layout. On mobile the copy is centred over the whole photo, so at 32-66% opacity the faces punch through the headline. Replaced with the same vertical scrim the service cards use. */ .mk-su{background:#08090b!important} .mk-su .signup{ border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 26px 44px -26px rgba(0,0,0,.9)!important; padding:32px 22px 30px!important} .mk-su .signup img{object-position:center 30%!important} .mk-su .signup::after{ /* the service cards put copy only at the base, so a bottom-weighted scrim works there. Here the copy fills the whole card, so the overlay has to be heavy and even — the photo becomes texture rather than a competing subject. */ background:linear-gradient(180deg,rgba(6,7,9,.82) 0%,rgba(6,7,9,.72) 38%,rgba(6,7,9,.86) 72%,rgba(6,7,9,.95) 100%)!important} .mk-su .su-in{position:relative;z-index:2} /* the offer itself, dramatised as a gold badge above the headline */ .mk-su .su-in::before{ content:"−10%";display:flex;align-items:center;justify-content:center; width:max-content;margin:0 auto 14px;padding:7px 16px;border-radius:100px; background:linear-gradient(135deg,var(--amber,#F7A12B),var(--orange,#F2890E)); color:#12100a;font-family:'Clash Display',sans-serif;font-weight:700; font-size:19px;line-height:1;letter-spacing:-.02em; box-shadow:0 10px 26px -10px rgba(242,137,14,.85)} .mk-su .signup h3{font-size:clamp(24px,6.6vw,30px)!important;line-height:1.08!important;margin-bottom:10px!important} .mk-su .signup p{font-size:13.5px!important;line-height:1.5!important;margin-bottom:18px!important;color:rgba(255,255,255,.76)!important} .mk-su .su-form{gap:9px!important} .mk-su .su-form input{ height:50px!important;font-size:14.5px!important;padding:0 20px!important; background:rgba(255,255,255,.96)!important;border:0!important} /* white pill CTA, matching every other card on the page */ .mk-su .su-form button{ background:#fff!important;background-image:none!important;color:#0a0c10!important; border:0!important;height:50px!important;font-size:15px!important;font-weight:600!important; box-shadow:0 10px 24px -12px rgba(0,0,0,.8)!important} .mk-su .su-note{font-size:11.5px!important;opacity:.62;margin-top:12px!important} /* ---------------- 2. MAP block ---------------- BUG: .loc2-hint overflowed its box (400px of text in 358px) so it read "…couleurs…", and the hidden ending was "au survol" — hover, which does not exist on a phone. It also sat on top of Google's attribution strip. Google's own attribution is left untouched (required by their terms). */ .loc2-hint{display:none!important} /* the invert/desaturate treatment is a hover affordance; on touch it just leaves the map looking muddy grey, so show it in full colour */ .loc2-map iframe{filter:none!important} /* the iframe is absolutely positioned inside .loc2-map, which carries a hard min-height:430px — so the CONTAINER must be resized, not the iframe, or the shrunken iframe just leaves a black gap below it. */ .loc2-map{height:340px!important;min-height:0!important} .loc2-map iframe{height:100%!important;min-height:0!important} /* ---------------- 3. CONTACT rows -> compact grid ---------------- Four identical 72px rows (288px total) become a tighter 2-col block: Adresse full width, Téléphone + Horaires paired, Email full width. `order` re-sequences them without touching the DOM. */ .loc2-info{ display:grid!important;grid-template-columns:1fr 1fr!important; gap:9px!important;align-items:stretch} /* full-width rows keep the icon BESIDE the text (compact); only the narrow half-width tiles stack it above, where a row would not fit. */ .loc2-info .l2row{ display:flex!important;flex-direction:row;align-items:center; gap:11px!important;padding:11px 13px!important;min-width:0;margin:0!important} .loc2-info .l2row[data-mk-row="2"],.loc2-info .l2row[data-mk-row="4"]{ flex-direction:column;align-items:flex-start;gap:8px!important} .loc2-info .l2row[data-mk-row="1"]{grid-column:1 / -1;order:1} /* Adresse */ .loc2-info .l2row[data-mk-row="2"]{order:2} /* Téléphone */ .loc2-info .l2row[data-mk-row="4"]{order:3} /* Horaires */ .loc2-info .l2row[data-mk-row="3"]{grid-column:1 / -1;order:4} /* Email */ /* the CTA block also lives inside .loc2-info — keep it full width, last */ .loc2-info .loc2-cta{grid-column:1 / -1!important;order:9;margin-top:4px!important} .loc2-info .l2row .lic2{ width:36px!important;height:36px!important;border-radius:11px!important;flex:none} .loc2-info .l2row .lic2 svg{width:17px;height:17px} .loc2-info .l2row>div{min-width:0;width:100%} .loc2-info .l2row b{font-size:9.5px!important;letter-spacing:1.4px!important} .loc2-info .l2row .v{ font-size:12.5px!important;line-height:1.35!important;display:block; overflow-wrap:anywhere;word-break:break-word} /* the open/closed badge is promoted out of the map overlay (moved by mk-mobile.js) and becomes the headline fact of the contact block */ .loc2-info #locBadge{ grid-column:1 / -1!important;order:0; display:flex!important;align-items:center;justify-content:center;gap:10px; margin:0 0 3px!important;padding:13px 16px!important;border-radius:100px!important; background:rgba(19,190,109,.13)!important;border:1px solid rgba(19,190,109,.34)!important; color:#fff!important;font-size:13.5px!important;font-weight:600!important; position:static!important;inset:auto!important;transform:none!important} .loc2-info #locBadge .dot{width:9px;height:9px;border-radius:50%;background:#13BE6D;flex:none; box-shadow:0 0 0 4px rgba(19,190,109,.18)} .loc2-info #locBadge.closed{ background:rgba(255,92,80,.13)!important;border-color:rgba(255,92,80,.34)!important} .loc2-info #locBadge.closed .dot{background:#FF5C50;box-shadow:0 0 0 4px rgba(255,92,80,.18)} } /* ============ v22: Apple-style CENTRED LOOP CAROUSELS + hero CTA pills ============ Reference: the apple.com mobile shelf - one card centred, its neighbours peeking at both screen edges, and a scroll that never runs out (mk-mobile.js clones whole sets so the rail wraps around seamlessly). Mobile only. NOTE: the per-card icon / accent / photograph rules above key off :nth-child(3n+k), NOT :nth-child(k) - the JS clones the set, so the index has to repeat every 3 cards or every clone would take card 1's artwork. */ @media (max-width:840px){ /* ---- shared centred rail: full-bleed so the peeks reach the screen edge ---- */ .mk-sv .grid3, .dark-sec .rgrid, .why-grid, .mk-artfeat{ box-sizing:border-box!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:11vw!important;padding-right:11vw!important; gap:10px!important; scroll-snap-type:x mandatory!important; overscroll-behavior-x:contain; scroll-behavior:auto} /* the centred card is 78vw, leaving 11vw of the neighbour showing each side */ .mk-sv .grid3>.scard, .dark-sec .rgrid>.rcard, .why-grid>.why, .mk-artfeat>.mk-af{ scroll-snap-align:center!important; flex:0 0 78vw!important;width:78vw!important;max-width:78vw!important; opacity:1!important;transform:none!important} /* services only: the user asked for bigger cards - taller, not wider */ .mk-sv .grid3>.scard{aspect-ratio:2/3!important} /* ---- dots need a dark-on-light variant for the (light) Pourquoi Mascot band ---- */ .mk-dots.lt button::after{background:rgba(10,12,16,.18)} .mk-dots.lt button.on::after{background:linear-gradient(90deg,var(--amber,#F7A12B),var(--orange,#F2890E))} .why-grid+.mk-dots{margin-top:18px} /* ---- HERO: two glass pills side by side, in the contact block's language ---- They were full-width and stacked (.mk-page .hero .btn rule above). The grid plus margin:0 overrides that; higher specificity beats the !important there. */ .pg-home .hero .cta-row{ display:grid!important;grid-template-columns:1fr 1fr!important; gap:10px!important;width:100%!important;align-items:stretch} .pg-home .hero .cta-row .btn{ width:100%!important;margin:0!important; display:inline-flex!important;align-items:center;justify-content:center;gap:8px; padding:14px 12px!important;border-radius:100px!important; font-size:14.5px!important;font-weight:600!important; letter-spacing:-.01em;white-space:nowrap; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:transform .3s ease,background .3s} .pg-home .hero .cta-row .btn-primary{ background:rgba(242,137,14,.18)!important;background-image:none!important; color:#FFC46B!important;border:1px solid rgba(247,161,43,.45)!important; box-shadow:none!important;text-shadow:none} .pg-home .hero .cta-row .btn-ghost{ background:rgba(255,255,255,.08)!important;color:#fff!important; border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important} .pg-home .hero .cta-row .btn .arw{margin:0!important} } /* ============ v23: HERO IMAGE SHARPNESS on mobile ============ The hero looked pixelated on a phone. Two compounding causes, neither of them the images on disk (those are 2600x1733): 1. The Hostinger CDN caps served images at 1600px WIDE. For a landscape 3:2 photo that drags the HEIGHT down to 1066px - and a portrait phone hero crops to height, so height is the dimension that matters. 2. .kb is inset:-7% (114% of the hero) and kbA zooms it to scale(1.19), so at peak the photo is magnified 1.14 x 1.19 = 1.36x on top of that. 844px of hero x 1.36 x dpr2 = ~2290 device px demanded from a 1066px source: a 2.15x upscale. Fix is both halves: a) '-m' crops: full original HEIGHT, cropped to 1560px wide so they slip UNDER the CDN's 1600px cap untouched (1560x1733 instead of 1600x1066). Nothing visible is lost - at 390px the hero only ever showed the middle ~31% of the frame anyway; the crop just discards what was off-screen. b) a gentler Ken Burns on phones (inset -3%, scale 1.02 -> 1.07), so the zoom stops multiplying whatever softness is left. Now ~1914 device px demanded from 1733 = 1.10x. Desktop keeps the full landscape files and the original 1.19 zoom - both halves are inside the 640px breakpoint, and @keyframes may be redefined inside @media. */ @media (max-width:840px){ .hero .slide .kb{inset:-3%!important;transform:scale(1.02)} @keyframes kbA{from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.07) translate(-1.2%,-.8%)}} @keyframes kbB{from{transform:scale(1.07) translate(1.2%,.6%)}to{transform:scale(1.02) translate(0,0)}} @keyframes kbC{from{transform:scale(1.03) translate(.8%,-.3%)}to{transform:scale(1.07) translate(-.8%,-.6%)}} /* the slide backgrounds are INLINE styles, so these need !important */ .hero .slides>.slide:nth-child(1) .kb{background-image:url('/wp-content/uploads/mascot-hero/celebrations-m.jpg')!important} .hero .slides>.slide:nth-child(2) .kb{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop-m.jpg')!important} .hero .slides>.slide:nth-child(3) .kb{background-image:url('/wp-content/uploads/mascot-hero/hero-kids-m.jpg')!important} .hero .slides>.slide:nth-child(4) .kb{background-image:url('/wp-content/uploads/mascot-hero/contact-m.jpg')!important} .hero .slides>.slide:nth-child(5) .kb{background-image:url('/wp-content/uploads/mascot-hero/kids-community-m.jpg')!important} .hero .slides>.slide:nth-child(6) .kb{background-image:url('/wp-content/uploads/mascot-hero/basilica-m.jpg')!important} } /* ============ v24: SUB-BANNER PHOTO AS BACKGROUND (mobile only) ============ The .sb-media block sat BELOW the copy as a separate 153px card (+16px gap), which cluttered the banner and pushed the service cards down. Per the user's annotations it becomes the banner's own background instead - the same treatment as the sign-up card - keeping the dark theme and each banner's accent identity. 4 banners x 169px = ~676px removed. The markup already supports this: .svc-banner is position:relative + overflow:hidden + isolation:isolate, so .sb-media only has to go absolute behind the copy. No HTML edit, no JS (except moving the repair caption). SCRIM: the copy fills the WHOLE banner, so this needs a heavy EVEN scrim, not the bottom-weighted one the photo CARDS use - same lesson as the v17 sign-up card, where a bottom-weighted overlay let faces punch through the headline. */ @media (max-width:840px){ /* ---- photo -> full-bleed background ---- */ .svc-banner .sb-media{ position:absolute!important;inset:0!important;z-index:0!important; width:auto!important;height:auto!important;aspect-ratio:auto!important; border:0!important;border-radius:0!important;box-shadow:none!important; margin:0!important;overflow:hidden!important} .svc-banner .sb-media>img, .svc-banner .sb-media .rpc-slide img{ width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important} .svc-banner .sb-media .rpc-dots{display:none!important} /* ---- THE SCRIM HAS TO LIVE INSIDE .sb-inner ---- .sb-media is a child of .sb-inner, NOT of .svc-banner, and .sb-inner carries z-index:3 - its own stacking context. So .svc-banner::before (z1) paints BELOW the whole .sb-inner subtree, photo included, and can never scrim it: the first attempt left faces punching through the headline. The scrim must sit between the photo and the copy INSIDE that context, so it rides on .sb-media::after (above the img, below .sb-in's z-index:2). Even, not bottom-weighted - the copy fills the whole banner. */ .svc-banner .sb-media::after, .svc-banner .sb-media.rpc::after{ content:""!important;display:block!important;position:absolute!important; inset:0!important;z-index:2!important;pointer-events:none; background: radial-gradient(620px 380px at 84% 6%,var(--accW),transparent 62%), linear-gradient(180deg,rgba(6,7,9,.88) 0%,rgba(6,7,9,.80) 32%,rgba(6,7,9,.90) 70%,rgba(6,7,9,.97) 100%)!important} .svc-banner .sb-inner{z-index:3!important;padding:30px 20px 30px!important} .svc-banner{min-height:0!important} /* the Galerie painting is the highest-contrast of the four - heavier scrim */ .mk-gal .svc-banner .sb-media::after{ background: radial-gradient(620px 380px at 84% 6%,var(--accW),transparent 62%), linear-gradient(180deg,rgba(6,7,9,.93) 0%,rgba(6,7,9,.88) 32%,rgba(6,7,9,.93) 70%,rgba(6,7,9,.98) 100%)!important} /* ---- Impression: shipped art is flat clip-art on WHITE and cannot work as a full-bleed background. Swap to a real photo mobile-only, via background, so the src (and therefore desktop) is untouched. NOT svc-cartes-visite.jpg: that is a STOCK TEMPLATE MOCKUP carrying a fictitious French estate agent (DUPONT Marc / agenceimmo.fr / Nice). Illegible on the small service card, but readable full-bleed. ---- */ .mk-sv:not(#services) .svc-banner .sb-media{ background:url('/wp-content/uploads/mascot-hero/print-photo.jpg') center 45%/cover no-repeat!important} .mk-sv:not(#services) .svc-banner .sb-media>img{opacity:0!important} /* ---- Reparation: the rotating caption is real content, so mk-mobile.js moves .rpc-caps out of the photo and into the copy, under the chips. It was absolutely positioned inside .sb-media; reset it for its new home. ---- */ .svc-banner .sb-in .rpc-caps{ position:relative!important;left:auto!important;right:auto!important;bottom:auto!important; height:18px!important;margin:14px 0 0!important;z-index:auto!important} .svc-banner .sb-in .rpc-cap{ left:0!important;bottom:auto!important;top:0!important; font-size:12.5px!important;font-weight:500!important; color:rgba(255,255,255,.80)!important;text-shadow:none!important} } /* ============ v27: DOM left behind when the viewport crosses 640px ============ mk-mobile.js builds the carousels ONCE, at load, and only if the viewport is <=640px: it clones whole card sets, injects the galerie carousel and moves the reparation caption. If the viewport then GROWS past 640 WITHOUT a reload - phone rotated to landscape (844x390), a foldable opening, a desktop window dragged wider - the mobile CSS switches off but that injected DOM stays. The clones fall out of their rail into the desktop grid: 15 service cards instead of 3, 15 repair cards, 12 galerie cards, and the homepage goes from 15,046px to 37,935px. Fix is CSS rather than JS teardown: neutralise the injected DOM above the breakpoint. It is instant, needs no reload, and rotating BACK to portrait simply re-shows everything - mkCarousel's own resize handler re-measures and re-centres the rail. RULE: any JS that injects DOM behind a media query must also define what that DOM does on the OTHER side of the query. A one-shot builder is not enough. */ @media (min-width:841px){ [data-mk-clone]{display:none!important} /* v76: the homepage now shows this carousel on desktop too, so the hide is scoped to every OTHER page. Enabling another surface is a one-line edit. */ /* v95: /service-dimpression joins the homepage in showing this on desktop. Everything else still hides it - one class per surface, as designed in v76. */ /* v96: /mascot-galerie joins the homepage and the print page. The guard now lists every surface that OPTS OUT rather than in - if a new page ever builds this carousel it stays hidden on desktop until deliberately enabled. */ body:not(.pg-home):not(.pg-impression):not(.pg-gal) .mk-artfeat, body:not(.pg-home):not(.pg-impression):not(.pg-gal) .mk-allprints{display:none!important} .svc-banner .sb-in .rpc-caps{display:none!important} } /* ============ v28: BREAKPOINT 640px -> 840px, so tablets get the premium mobile design too (user request) ============ Every mk-mobile query moved to max-width:840px and mk-mobile.js's matchMedia with it. But the carousel sizing was written in vw for a 390px phone, and vw does not survive the trip to a tablet: at 840px a card would be 78vw = 655px wide and, at aspect-ratio 2/3, 983px TALL. So the widths are now clamped and the centring padding is derived from the clamped width instead of a fixed 11vw - that keeps the card exactly centred at every width. 390px -> 304px card, 43px peek each side (identical to before) 768px -> 470px card, 149px peek 840px -> 470px card, 185px peek */ @media (max-width:840px){ .mk-sv .grid3>.scard, .dark-sec .rgrid>.rcard, .why-grid>.why, .mk-artfeat>.mk-af{ flex:0 0 clamp(280px,78vw,470px)!important; width:clamp(280px,78vw,470px)!important; max-width:clamp(280px,78vw,470px)!important} .mk-sv .grid3, .dark-sec .rgrid, .why-grid, .mk-artfeat{ padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important} /* the base sheet only collapses the banner to one column at <=760px, so between 761 and 840 the copy would sit in a half-width grid track with the photo now absolutely positioned out of the flow. Force one column across the range. */ .svc-banner .sb-inner{grid-template-columns:1fr!important} } /* ---- tablet-only refinements (641-840px) ---- */ @media (min-width:641px) and (max-width:840px){ /* there are exactly 3 chips per banner - one clean row at this width */ .svc-banner .sb-chips{grid-template-columns:repeat(3,1fr)!important} .svc-banner .sb-inner{padding:38px 34px!important} /* the hero copy is left-aligned; a full 840px button row looks unanchored */ .pg-home .hero .cta-row{max-width:540px!important} .mk-su .signup{padding:40px 34px 38px!important} } /* ============ v29: A PROPOS card groups get the homepage carousel ============ User marked four groups on /a-propos to match the Apple-style shelf: the "Cinq poles" tiles (.div5, 6 cards), "L'acces reste inegal" (.probs, 3), "Bati sur trois convictions" (.commit, 3) and the team cards (.team-grid, 2). v7 had already made the first three START-aligned rails capped at 300px; this converts them to the CENTRED loop treatment and adds .team-grid, which was still a full-width vertical stack. No nth-child conversion needed here - unlike the homepage cards, nothing on this page styles these children by index (the only nth-child rules are the .flag stripes), so cloning is safe as-is. */ @media (max-width:840px){ .pg-about .div5, .pg-about .probs, .pg-about .commit, .pg-about .team-grid{ display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important; box-sizing:border-box!important; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory!important;overscroll-behavior-x:contain;scroll-behavior:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important; gap:10px!important;padding-bottom:10px!important;align-items:stretch!important} .pg-about .div5::-webkit-scrollbar, .pg-about .probs::-webkit-scrollbar, .pg-about .commit::-webkit-scrollbar, .pg-about .team-grid::-webkit-scrollbar{display:none;height:0;width:0} .pg-about .div5>*, .pg-about .probs>*, .pg-about .commit>*, .pg-about .team-grid>*{ scroll-snap-align:center!important; flex:0 0 clamp(280px,78vw,470px)!important; width:clamp(280px,78vw,470px)!important; max-width:clamp(280px,78vw,470px)!important; min-width:0;margin:0!important; opacity:1!important;transform:none!important} } /* ============ v30: TECHNOLOGY CATEGORY PAGES - premium dark redesign ============ /iphone /samsung-galaxy /google-pixel /android-phones /new-phones /macbooks /new-laptops /mascot-tablets /montres /consoles - all 16 render through mascot-category.php, so this styles them all at once. Mobile only (<=840px). The hero was already dark and cinematic; everything BELOW it was a white page with white cards, which is what broke the premium feel. This flips the body and the three content sections to the reference palette and rebuilds the product card as dark glass. The .mch-mq marquee is deliberately LEFT ALONE - the user singled it out as the one element unique to the brand. Only its spacing is touched. */ @media (max-width:840px){ :root{--mkBg:#050505;--mkCard:#111111;--mkLine:rgba(255,255,255,.08);--mkGold:#D8A03D;--mkDim:#A8A8A8;--mkGreen:#32D17B} /* ---- page goes dark ---- */ .pg-cat{background:var(--mkBg)!important;color:#fff!important} .pg-cat .sec{background:transparent!important;padding:44px 0 8px!important} .pg-cat .sec:last-of-type{padding-bottom:56px!important} .pg-cat .wrap{padding-left:20px!important;padding-right:20px!important} .pg-cat h2.sh{ color:#fff!important;font-size:27px!important;line-height:1.08!important; letter-spacing:-.02em!important;margin:0 0 18px!important} /* ---- hero: tighter, single primary CTA, marquee sits closer ---- */ .pg-cat .mch{background:var(--mkBg)!important} .pg-cat .mch-in{padding-top:18px!important;padding-bottom:0!important} /* CLASS COLLISION: .mch-p is used for BOTH the hero paragraph (

) and the primary CTA (). Styling it flat turned the orange button's label grey on orange. Scope the copy rule to the element type, and pin the CTA's own ink. */ .pg-cat p.mch-p{font-size:15.5px!important;line-height:1.55!important;color:var(--mkDim)!important; max-width:34ch;margin-left:auto;margin-right:auto} .pg-cat a.mch-p{color:#12100a!important;font-weight:700!important} .pg-cat .mch-cta{gap:10px!important;margin-top:22px!important} .pg-cat .mch-cta .btn,.pg-cat .mch-cta a{width:100%!important;justify-content:center!important} /* the stat row was a 2+1 orphan block - one tidy row of three */ .pg-cat .mch-stats{ display:grid!important;grid-template-columns:repeat(3,1fr)!important; gap:0!important;margin-top:26px!important; border-top:1px solid var(--mkLine);border-bottom:1px solid var(--mkLine);padding:16px 0!important} .pg-cat .mch-stats div{align-items:center;text-align:center} .pg-cat .mch-stats b{font-size:21px!important} .pg-cat .mch-stats span{font-size:9.5px!important;letter-spacing:.14em!important;line-height:1.3} .pg-cat .mch-mq{padding:22px 0 26px!important} /* ---- category hubs: lime blocks -> dark glass cards with the real photo ---- */ .pg-cat .hubs{ display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important} .pg-cat .hub{ background:var(--mkCard)!important;border:1px solid var(--mkLine)!important; border-radius:22px!important;overflow:hidden!important;padding:0!important; box-shadow:0 18px 34px -22px rgba(0,0,0,.9)!important; opacity:1!important;transform:none!important} .pg-cat .hub *{color:#fff!important} .pg-cat .hub img{width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;display:block} .pg-cat .hub b,.pg-cat .hub span,.pg-cat .hub div{padding:0 14px} .pg-cat .hub b{display:block;font-size:15px!important;padding-top:13px!important;padding-bottom:13px!important} /* ---- accessory pills -> glass ---- */ .pg-cat .pills{display:flex!important;flex-wrap:wrap!important;gap:9px!important} .pg-cat .pills a,.pg-cat .pills span{ background:rgba(255,255,255,.06)!important;color:#fff!important; border:1px solid var(--mkLine)!important;border-radius:100px!important; padding:11px 17px!important;font-size:13.5px!important;font-weight:600!important; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} /* ---- PRODUCT CARD -> dark glass, per the reference ---- */ .pg-cat .grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important} .pg-cat .bc{ background:var(--mkCard)!important;border:1px solid var(--mkLine)!important; border-radius:26px!important;overflow:hidden!important;box-shadow:0 20px 38px -24px rgba(0,0,0,.95)!important; display:flex!important;flex-direction:column!important;position:relative} .pg-cat .bc-img{ background:#fff!important;border:0!important;border-radius:0!important; aspect-ratio:1/1!important;padding:14px!important;display:grid;place-items:center} .pg-cat .bc-img img{max-width:100%!important;max-height:100%!important;object-fit:contain!important} .pg-cat .bc-badge{ position:absolute!important;top:12px;left:12px;z-index:3; background:linear-gradient(135deg,var(--mkGold),#B8842B)!important;color:#12100a!important; border:0!important;border-radius:100px!important; font-size:10px!important;font-weight:700!important;letter-spacing:.09em; text-transform:uppercase;padding:6px 11px!important; box-shadow:0 8px 18px -8px rgba(216,160,61,.9)} .pg-cat .bc-body{padding:14px 14px 16px!important;display:flex;flex-direction:column;gap:0} .pg-cat .bc-name{ color:#fff!important;font-size:15px!important;line-height:1.25!important;font-weight:600!important; letter-spacing:-.01em;margin:0 0 7px!important; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} /* the green "Reconditionne" line becomes a quiet condition chip */ .pg-cat .bc-rate{ color:var(--mkDim)!important;font-size:11.5px!important;font-weight:500!important; margin:0 0 9px!important;display:flex;align-items:center;gap:5px} .pg-cat .bc-price{ color:#fff!important;font-family:'Clash Display',sans-serif;font-weight:600!important; font-size:19px!important;letter-spacing:-.02em;margin:0!important; display:flex;flex-wrap:wrap;align-items:baseline;gap:7px} .pg-cat .bc-price del,.pg-cat .bc-price s{ color:rgba(255,255,255,.36)!important;font-size:12.5px!important;font-weight:400!important; text-decoration:line-through} .pg-cat .bc-price ins{text-decoration:none!important;color:#fff!important} /* savings box -> green pill */ .pg-cat .bc-save,.pg-cat .bc-body .save,.pg-cat .bc-econ{ background:rgba(50,209,123,.12)!important;color:var(--mkGreen)!important; border:1px solid rgba(50,209,123,.28)!important;border-radius:100px!important; font-size:11px!important;font-weight:600!important;padding:6px 11px!important; margin-top:10px!important;display:inline-flex!important;width:max-content;line-height:1.2} /* scroll-reveal children inside the grid must not stay hidden */ .pg-cat .grid>.reveal,.pg-cat .hubs>.reveal{opacity:1!important;transform:none!important} /* footer / breadcrumb legibility on the new dark page */ .pg-cat .crumb,.pg-cat .crumb a{color:rgba(255,255,255,.55)!important} } /* ============ v32: category hero render + badge card, category tiles, single-file accessory pills (mobile only) ============ */ @media (max-width:840px){ /* ---- 1. HERO: floating product render + glass badge card ---- The catalogue is photographed on WHITE, so a raw on the dark hero would be a white rectangle. It sits on a soft plate with a gold ambient glow behind it instead - reads as an Apple-style product spotlight using real stock. */ .pg-cat .mch-shot{ position:relative;margin:22px auto 0;width:min(74vw,300px);aspect-ratio:1/1; display:grid;place-items:center} .pg-cat .mch-glow{ position:absolute;inset:-14%;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(circle at 50% 45%,rgba(216,160,61,.30),rgba(216,160,61,.10) 42%,transparent 70%); filter:blur(6px)} .pg-cat .mch-shot img{ position:relative;z-index:1;width:86%;height:86%;object-fit:contain; border-radius:26px;background:#fff;padding:12px; box-shadow:0 40px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.10)} .pg-cat .mch-badges{ display:grid!important;grid-template-columns:repeat(3,1fr);gap:0; margin:24px auto 0;max-width:360px; background:rgba(255,255,255,.05);border:1px solid var(--mkLine); border-radius:24px;padding:16px 6px; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 22px 44px -28px rgba(0,0,0,.95)} .pg-cat .mch-badge{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:0 4px} .pg-cat .mch-badge svg{width:21px;height:21px;color:var(--mkGold)} .pg-cat .mch-badge b{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:-.01em} .pg-cat .mch-badge span{color:var(--mkDim);font-size:11px} /* the badge card now carries warranty + trust, so the old stat band is a duplicate; the reference layout drops it and the count already sits in the eyebrow pill above. */ .pg-cat .mch-stats{display:none!important} /* eyebrow -> dark glass pill like the reference (was a gold outline) */ .pg-cat .mch-kick{ background:rgba(255,255,255,.06)!important;border-color:var(--mkLine)!important; color:rgba(255,255,255,.82)!important;font-size:10.5px!important;letter-spacing:.16em!important; padding:9px 15px!important} .pg-cat .mch-crumb{font-size:11.5px!important;opacity:.5} /* one dominant CTA; the advice link becomes a quiet text link under it */ .pg-cat .mch-cta{flex-direction:column!important;align-items:stretch!important} .pg-cat a.mch-g{ background:transparent!important;border:0!important;color:var(--mkDim)!important; text-decoration:underline;text-underline-offset:4px;font-size:13.5px!important;padding:4px 0!important} /* ---- 2. CATEGORY TILES: lime blocks -> dark glass, single scroll row ---- The lime is an INLINE style on .tile, so it needs !important to unset. */ .pg-cat .hubs{ display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important; gap:10px!important;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding:2px 20px 10px!important;box-sizing:border-box!important} .pg-cat .hubs::-webkit-scrollbar{display:none;height:0} .pg-cat .hub{ flex:0 0 118px!important;width:118px!important;scroll-snap-align:start; background:rgba(255,255,255,.045)!important;border:1px solid var(--mkLine)!important; border-radius:24px!important;padding:16px 10px 13px!important; display:flex!important;flex-direction:column;align-items:center;gap:10px; text-align:center;box-shadow:none!important; opacity:1!important;transform:none!important} .pg-cat .hub .tile{ background:none!important;background-image:none!important; width:34px!important;height:44px!important;min-height:0!important; border:1.6px solid rgba(255,255,255,.34)!important;border-radius:7px!important; display:block!important;padding:0!important;position:relative} .pg-cat .hub .tile::after{ content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%); width:12px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.34)} .pg-cat .hub .tile b{display:none!important} .pg-cat .hub .lbl{ color:#fff!important;font-size:12.5px!important;font-weight:600!important; line-height:1.2;padding:0!important;display:block} /* first tile reads as the one you are on, per the reference */ .pg-cat .hub:first-child{border-color:rgba(216,160,61,.55)!important;background:rgba(216,160,61,.08)!important} .pg-cat .hub:first-child .tile{border-color:var(--mkGold)!important} .pg-cat .hub:first-child .tile::after{background:var(--mkGold)} /* ---- 3. ACCESSORY PILLS: single file, edge to edge ---- */ .pg-cat .pills{ display:flex!important;flex-wrap:nowrap!important;gap:9px!important; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding:2px 20px 8px!important;box-sizing:border-box!important} .pg-cat .pills::-webkit-scrollbar{display:none;height:0} .pg-cat .pills a{flex:0 0 auto!important;white-space:nowrap!important;padding:10px 16px!important;font-size:13px!important} /* tighten the run-in to the product grid so the sections read as one flow */ .pg-cat .sec{padding-top:38px!important} } /* ============ v33: cut-out hero render (transparent PNG) ============ The catalogue is shot on white, so .mch-shot normally sits the photo on a white plate. Where a background-removed PNG exists (uploads/mascot-hero/cut/ hero-cut-.png, generated server-side with an edge-seeded Imagick flood fill) the device floats free, as in the reference. Drop the plate and let the gold glow read as the light source behind it. */ @media (max-width:840px){ .pg-cat .mch-shot.is-cut{width:min(82vw,330px);aspect-ratio:auto;min-height:240px} .pg-cat .mch-shot.is-cut img{ width:100%!important;height:auto!important;max-height:300px; object-fit:contain!important; background:none!important;padding:0!important;border-radius:0!important; box-shadow:none!important; filter:drop-shadow(0 26px 34px rgba(0,0,0,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.55))} .pg-cat .mch-shot.is-cut .mch-glow{ inset:-8%; background:radial-gradient(circle at 50% 52%,rgba(216,160,61,.34),rgba(216,160,61,.12) 44%,transparent 72%); filter:blur(10px)} } /* ============ v34: WooCommerce screen-reader price text was VISIBLE ============ Variable products ("iPhone 16 et 16 Plus", every Pixel, etc.) render as 145 999 CFA - 185 999 CFA + Price range: 145 999 CFA through 185 999 CFA The self-rendering Mascot templates never shipped the visually-hidden rule for .screen-reader-text, so that accessibility string was painted on screen at the full 19px price size and blew the card open. Simple products were unaffected, which is why it only showed on ranges. Restore the STANDARD visually-hidden pattern - it must stay readable to screen readers, so display:none would be the wrong fix. Deliberately OUTSIDE the media query: the same text was leaking on desktop. */ .screen-reader-text{ position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden!important; clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important; white-space:nowrap!important;border:0!important} .screen-reader-text:focus{ position:static!important;width:auto!important;height:auto!important; clip:auto!important;clip-path:none!important;margin:0!important} @media (max-width:840px){ /* a price RANGE is twice the text of a single price - step it down so it sits on one or two tidy lines instead of towering over the rest of the card */ .pg-cat .bc-price:has([aria-hidden="true"]){font-size:15.5px!important;line-height:1.3!important} .pg-cat .bc-price{overflow-wrap:anywhere} } /* ============ v35: WAVE 2 - featured carousel, why-buy, in-store, avis ============ */ @media (max-width:840px){ /* ---- shared full-bleed rail geometry, same as the homepage carousels ---- */ :is(.pg-cat,.pg-acc) .mfeat,:is(.pg-cat,.pg-acc) .mwhy,:is(.pg-cat,.pg-acc) .mrev{ display:flex!important;flex-wrap:nowrap!important;box-sizing:border-box!important; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;scroll-behavior:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important; gap:10px!important;padding-bottom:10px!important;align-items:stretch} :is(.pg-cat,.pg-acc) .mfeat::-webkit-scrollbar,:is(.pg-cat,.pg-acc) .mwhy::-webkit-scrollbar,:is(.pg-cat,.pg-acc) .mrev::-webkit-scrollbar{display:none;height:0} :is(.pg-cat,.pg-acc) .mfc,:is(.pg-cat,.pg-acc) .mw,:is(.pg-cat,.pg-acc) .mr{ scroll-snap-align:center!important; flex:0 0 clamp(280px,78vw,470px)!important;width:clamp(280px,78vw,470px)!important; min-width:0;opacity:1!important;transform:none!important} /* ---- 1. featured product card ---- */ :is(.pg-cat,.pg-acc) .mfc{ display:flex;flex-direction:column;text-decoration:none; background:var(--mkCard);border:1px solid var(--mkLine);border-radius:32px;overflow:hidden; box-shadow:0 26px 46px -28px rgba(0,0,0,.95)} :is(.pg-cat,.pg-acc) .mfc-img{background:#fff;aspect-ratio:1/1;display:grid;place-items:center;padding:22px} :is(.pg-cat,.pg-acc) .mfc-img img{max-width:100%;max-height:100%;object-fit:contain} :is(.pg-cat,.pg-acc) .mfc-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:0;position:relative} :is(.pg-cat,.pg-acc) .mfc-tag{ position:absolute;top:-15px;right:20px; background:linear-gradient(135deg,var(--mkGold),#B8842B);color:#12100a; font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:7px 13px;border-radius:100px;box-shadow:0 10px 22px -10px rgba(216,160,61,.9)} :is(.pg-cat,.pg-acc) .mfc-n{color:#fff;font-size:21px;line-height:1.16;font-weight:600;letter-spacing:-.02em} :is(.pg-cat,.pg-acc) .mfc-s{color:var(--mkDim);font-size:12.5px;margin-top:7px} /* WooCommerce emits old new; the grid cards render current price first, so flip the order here to match rather than contradict them. */ :is(.pg-cat,.pg-acc) .mfc-p{color:#fff;font-family:'Clash Display',sans-serif;font-size:19px;font-weight:600; margin-top:11px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px} :is(.pg-cat,.pg-acc) .mfc-p ins{order:1;text-decoration:none;color:#fff} :is(.pg-cat,.pg-acc) .mfc-p>.amount{order:1} :is(.pg-cat,.pg-acc) .mfc-p del{order:2;color:rgba(255,255,255,.34);font-size:13px;font-weight:400} :is(.pg-cat,.pg-acc) .mfc-p .screen-reader-text{display:none} :is(.pg-cat,.pg-acc) .mfc-cta{ margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px; background:#fff;color:#0a0c10;border-radius:100px;padding:13px 22px; font-size:14.5px;font-weight:600} :is(.pg-cat,.pg-acc) .mfc-cta .arw{color:#0a0c10} /* ---- 2. pourquoi mascot ---- */ :is(.pg-cat,.pg-acc) .mw{ background:rgba(255,255,255,.045);border:1px solid var(--mkLine);border-radius:26px; padding:22px 20px 24px;display:flex;flex-direction:column} :is(.pg-cat,.pg-acc) .mw-n{ color:var(--mkGold);font-family:'Clash Display',sans-serif;font-size:13px; font-weight:600;letter-spacing:.14em;margin-bottom:12px} :is(.pg-cat,.pg-acc) .mw-t{color:#fff;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.15} :is(.pg-cat,.pg-acc) .mw-p{color:var(--mkDim);font-size:13.5px;line-height:1.55;margin:9px 0 0} /* ---- 3. in-store experience card ---- */ :is(.pg-cat,.pg-acc) .mexp{ position:relative;border-radius:30px;overflow:hidden;isolation:isolate; border:1px solid var(--mkLine);min-height:400px;display:flex;align-items:flex-end; box-shadow:0 30px 54px -30px rgba(0,0,0,.95)} :is(.pg-cat,.pg-acc) .mexp::before{ content:"";position:absolute;inset:0;z-index:0; background-image:var(--mexp-img);background-size:cover;background-position:center 38%} :is(.pg-cat,.pg-acc) .mexp::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,7,9,.34) 0%,rgba(6,7,9,.18) 26%,rgba(6,7,9,.72) 58%,rgba(6,7,9,.96) 100%)} :is(.pg-cat,.pg-acc) .mexp-in{position:relative;z-index:2;padding:26px 22px 28px} :is(.pg-cat,.pg-acc) .mexp-k{ display:block;color:var(--mkGold);font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px} :is(.pg-cat,.pg-acc) .mexp h3{ color:#fff;font-size:28px;line-height:1.08;letter-spacing:-.02em;margin:0 0 10px} :is(.pg-cat,.pg-acc) .mexp h3 em{font-style:normal;color:var(--mkGold)} :is(.pg-cat,.pg-acc) .mexp p{color:rgba(255,255,255,.78);font-size:14px;line-height:1.55;margin:0 0 18px} :is(.pg-cat,.pg-acc) .mexp-cta{ display:inline-flex;align-items:center;gap:9px;background:#fff;color:#0a0c10; border-radius:100px;padding:13px 22px;font-size:14.5px;font-weight:600;text-decoration:none} :is(.pg-cat,.pg-acc) .mexp-cta .arw{color:#0a0c10} /* ---- 4. avis clients ---- */ :is(.pg-cat,.pg-acc) .mrev-note{ color:var(--mkGold);font-size:12px;line-height:1.5;margin:-8px 0 16px; background:rgba(216,160,61,.10);border:1px dashed rgba(216,160,61,.45); border-radius:14px;padding:11px 13px} :is(.pg-cat,.pg-acc) .mr{ background:rgba(255,255,255,.045);border:1px solid var(--mkLine);border-radius:26px; padding:22px 20px;display:flex;flex-direction:column;position:relative} :is(.pg-cat,.pg-acc) .mr.is-ph{border-style:dashed;opacity:.72} :is(.pg-cat,.pg-acc) .mr-ph{ position:absolute;top:-10px;left:20px;background:rgba(216,160,61,.9);color:#12100a; font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:100px} :is(.pg-cat,.pg-acc) .mr-s{color:var(--mkGold);font-size:15px;letter-spacing:2px} :is(.pg-cat,.pg-acc) .mr-t{color:#fff;font-size:15px;line-height:1.55;margin:11px 0 0} :is(.pg-cat,.pg-acc) .mr-w{color:var(--mkDim);font-size:12.5px;margin-top:12px} /* ---- 5. product-card extras ---- */ :is(.pg-cat,.pg-acc) .bc-spec{color:var(--mkDim);font-size:11.5px;margin:0 0 8px;line-height:1.3} :is(.pg-cat,.pg-acc) .bc-warr{ display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:11px; border-top:1px solid var(--mkLine); color:rgba(255,255,255,.55);font-size:10.5px;letter-spacing:.04em} :is(.pg-cat,.pg-acc) .bc-warr::before{ content:"";width:12px;height:12px;flex:none;background:var(--mkGold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 9-8 10.5C7.4 20.5 4 16.5 4 11.5v-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 9-8 10.5C7.4 20.5 4 16.5 4 11.5v-6z'/%3E%3C/svg%3E") center/contain no-repeat} :is(.pg-cat,.pg-acc) .mfeat-sec,:is(.pg-cat,.pg-acc) .mwhy-sec,:is(.pg-cat,.pg-acc) .mrev-sec{padding-top:40px!important} } /* ============ v37: /reparation gets the premium treatment ============ The page alternated dark / white / paper across 11 sections, which is why it read as a different product to the technology pages. This commits it to one dark canvas, gives the hero the technology-banner language (cut-out render + glass badge card + one gold CTA) and turns the card groups into the same centred loop carousels used everywhere else. The before/after band deliberately STAYS LIGHT (user's choice) - the damage is easier to read on paper, and it gives a very long page one contrast beat. .bagrid is never railed: those cards own a horizontal drag gesture and a snap rail would fight the finger. */ @media (max-width:840px){ /* ---- palette: one dark canvas, except the before/after band ---- */ .pg-reparation{background:var(--mkBg,#050505)!important} .pg-reparation .sec.white,.pg-reparation .sec.paper{background:#050505!important} .pg-reparation .sec.white h2,.pg-reparation .sec.paper h2, .pg-reparation .sec.white h3,.pg-reparation .sec.paper h3, .pg-reparation .sec.white h4,.pg-reparation .sec.paper h4{color:#fff!important} .pg-reparation .sec.white p,.pg-reparation .sec.paper p, .pg-reparation .sec.white li,.pg-reparation .sec.paper li{color:#A8A8A8!important} /* the one deliberate light band */ .pg-reparation .sec.paper:has(.bagrid){background:#F1F2F0!important} .pg-reparation .sec.paper:has(.bagrid) h2{color:#0A0C10!important} .pg-reparation .sec.paper:has(.bagrid) p{color:#4b5057!important} /* ---- HERO: technology-banner language ---- */ .pg-reparation .hero{background:#050505!important} .pg-reparation .hero .kick{ display:inline-block;background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.08);border-radius:100px; color:rgba(255,255,255,.82)!important;font-size:10.5px!important; letter-spacing:.16em!important;padding:9px 15px!important;margin-bottom:14px} .pg-reparation .hero .crumb{font-size:11.5px!important;opacity:.5} .pg-reparation .hero h1{font-size:clamp(32px,8.6vw,42px)!important;line-height:1.04!important} .pg-reparation .hero .sub{font-size:15.5px!important;line-height:1.55!important;color:#A8A8A8!important} .rep-shot{ position:relative;margin:24px auto 0;width:min(84vw,340px); display:grid;place-items:center} .rep-glow{ position:absolute;inset:-10%;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(19,190,109,.30),rgba(19,190,109,.10) 46%,transparent 74%); filter:blur(10px)} /* Cut-out render (user-supplied cracked iPhone, white backdrop removed). This one WORKS where the earlier attempt failed because the SUBJECT is bright - gold titanium, luma ~190-230 against a hero of ~5 - so it separates from the page instead of merging into it. No plate, no border: it floats. */ .rep-shot img{ position:relative;z-index:1;width:100%;height:auto;max-height:330px; object-fit:contain; filter:drop-shadow(0 30px 38px rgba(0,0,0,.9)) drop-shadow(0 6px 14px rgba(0,0,0,.6))} .rep-badges{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; margin:24px auto 0;max-width:380px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); border-radius:24px;padding:16px 6px; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 22px 44px -28px rgba(0,0,0,.95)} .rep-badge{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:0 5px} .rep-badge svg{width:21px;height:21px;color:#13BE6D} .rep-badge b{color:#fff;font-size:12px;font-weight:600;line-height:1.15} .rep-badge span{color:#A8A8A8;font-size:10px;line-height:1.25} /* one dominant CTA, second demoted to a text link */ .pg-reparation .hero .cta{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:24px!important} .pg-reparation .hero .cta .btn-o{width:100%!important;justify-content:center!important} .pg-reparation .hero .cta .btn-g{ background:transparent!important;border:0!important;color:#A8A8A8!important; text-decoration:underline;text-underline-offset:4px;font-size:13.5px!important;padding:4px 0!important;width:auto!important} /* ---- booking form -> dark glass, its own block under the hero ---- */ .pg-reparation .book{ background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:28px!important;margin-top:30px!important; box-shadow:0 26px 46px -28px rgba(0,0,0,.95)!important} .pg-reparation .book h4{color:#fff!important} .pg-reparation .book .sub,.pg-reparation .book .lbl{color:#A8A8A8!important} .pg-reparation .book .opt{ background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.10)!important; color:#fff!important} .pg-reparation .book .opt.on{border-color:#13BE6D!important;background:rgba(19,190,109,.14)!important} .pg-reparation .book .num{background:#fff!important;color:#0a0c10!important} /* ---- card groups -> centred loop carousels ---- */ .pg-reparation .g4,.pg-reparation .g3,.pg-reparation .rpromise{ display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important; box-sizing:border-box!important;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory!important;overscroll-behavior-x:contain;scroll-behavior:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important; gap:10px!important;padding-bottom:10px!important;align-items:stretch!important} .pg-reparation .g4::-webkit-scrollbar,.pg-reparation .g3::-webkit-scrollbar, .pg-reparation .rpromise::-webkit-scrollbar{display:none;height:0} .pg-reparation .g4>*,.pg-reparation .g3>*,.pg-reparation .rpromise>*{ scroll-snap-align:center!important; flex:0 0 clamp(280px,78vw,470px)!important;width:clamp(280px,78vw,470px)!important; max-width:clamp(280px,78vw,470px)!important;min-width:0;margin:0!important; opacity:1!important;transform:none!important} /* the cards themselves -> dark glass */ .pg-reparation .sec.white .g4>*,.pg-reparation .sec.paper .g4>*, .pg-reparation .sec.white .g3>*,.pg-reparation .sec.dark .g3>*, .pg-reparation .rpromise>*{ background:#111111!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:26px!important;overflow:hidden!important; box-shadow:0 20px 38px -24px rgba(0,0,0,.95)!important} .pg-reparation .g4>* h3,.pg-reparation .g4>* h4, .pg-reparation .g3>* h3,.pg-reparation .g3>* h4, .pg-reparation .rpromise>* h3,.pg-reparation .rpromise>* h4{color:#fff!important} .pg-reparation .g4>* p,.pg-reparation .g3>* p,.pg-reparation .rpromise>* p{color:#A8A8A8!important} /* ---- before/after band: cards stay light, no rail ---- */ .pg-reparation .bagrid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;overflow:visible!important} .pg-reparation .bagrid>*{width:auto!important;max-width:none!important;min-width:0} /* ---- FAQ -> dark ---- */ .pg-reparation .faq-wrap details,.pg-reparation .faq-wrap .faq{ background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:20px!important;color:#fff!important} .pg-reparation .faq-wrap summary,.pg-reparation .faq-wrap h4{color:#fff!important} .pg-reparation .faq-wrap p{color:#A8A8A8!important} /* ---- trust chips -> glass ---- */ .pg-reparation .rchips>*{ background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important; color:#fff!important} /* the render + badges are a mobile-only addition; keep desktop untouched */ } @media (min-width:841px){ /* v81: /reparation now shows its render + badges on desktop, so the hide is scoped away from it. .rep-shot is SHARED with /impression (v45), and the same guard family covers .tr-shot and .acc-shot, so those stay hidden until their own desktop pass lands - do not widen this without checking them. */ body:not(.pg-reparation) .rep-shot,body:not(.pg-reparation) .rep-badges{display:none!important} } /* ============ v39: repair hero order + before/after side by side ============ */ @media (max-width:840px){ /* the CTA was moved in the markup to sit AFTER the badge card, so the hero now reads headline -> copy -> render -> badges -> orange CTA, matching the technology banner. Give it the spacing that order needs. */ .pg-reparation .hero .cta{margin-top:22px!important;margin-bottom:4px!important} /* ---- before / after: centred loop carousel ---- Earlier note said never rail a draggable widget. That still holds by default, but here the conflict is resolved explicitly: the drag is scoped to the KNOB via touch-action, so a swipe on the rest of the card scrolls the rail, and mk-mobile.js drives the slider through a DELEGATED handler so the cloned cards work too. */ .pg-reparation .bagrid{ display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important; box-sizing:border-box!important;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory!important;overscroll-behavior-x:contain;scroll-behavior:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; width:100vw!important;max-width:100vw!important; padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important; gap:10px!important;padding-bottom:10px!important;align-items:stretch!important} .pg-reparation .bagrid::-webkit-scrollbar{display:none;height:0} .pg-reparation .bagrid>*{ scroll-snap-align:center!important; flex:0 0 clamp(280px,78vw,470px)!important;width:clamp(280px,78vw,470px)!important; max-width:clamp(280px,78vw,470px)!important;min-width:0;margin:0!important; opacity:1!important;transform:none!important} /* the image area may pan the rail horizontally and the page vertically; only the knob swallows the gesture, which is what lets drag and swipe coexist */ .pg-reparation .bagrid .baview{touch-action:pan-y!important} .pg-reparation .bagrid .grip,.pg-reparation .bagrid .handle{touch-action:none!important} .pg-reparation .bagrid .grip{cursor:ew-resize} /* at half width the chrome has to come down or the card is all label */ .pg-reparation .bagrid .ba-cap,.pg-reparation .bagrid figcaption, .pg-reparation .bagrid .cap{padding:11px 12px!important} .pg-reparation .bagrid h4{font-size:17px!important;line-height:1.2!important} .pg-reparation .bagrid p{font-size:13.5px!important;line-height:1.4!important} .pg-reparation .bagrid .tag,.pg-reparation .bagrid .ba-b,.pg-reparation .bagrid .ba-a{ font-size:9.5px!important;padding:5px 9px!important} /* CAREFUL: .handle is the vertical DIVIDER BAR (thin, full height), not the drag knob - sizing it 38x38 turned it into a white block covering the Apres pill. The knob is .grip. Leave .handle alone; only shrink .grip. */ .pg-reparation .bagrid .grip{width:44px!important;height:44px!important} .pg-reparation .bagrid .grip svg{width:18px!important;height:18px!important} /* two 62px pills + insets fit inside a 168px stage, but tighten them so they never crowd the divider in the middle */ .pg-reparation .bagrid .bl{font-size:11px!important;padding:6px 11px!important;left:12px!important;top:12px!important} .pg-reparation .bagrid .bl.aft{left:auto!important;right:12px!important} } /* ============ v43: FIX horizontal page overflow on /reparation ============ The page measured 4,746px wide against a 390px viewport - content visibly ran off the right and the page could be dragged sideways into empty space. Cause: two rails computed `overflow-x: visible`, so their off-screen cards were laid out on the PAGE instead of being clipped by the rail: .bagrid - left over `overflow:visible!important` from the v37 pass that made it a stacked grid, never removed when it became a rail .rpromise - same, from the v7 sub-page 2-col grid rules `body` has overflow-x:hidden but `html` does not, so the overflow escaped. LESSON: when a group is converted from grid -> rail across several passes, re-check computed overflow-x. An !important from an earlier block silently wins and the only symptom is page-level horizontal scroll. */ @media (max-width:840px){ .pg-reparation .bagrid, .pg-reparation .rpromise{overflow-x:auto!important;overflow-y:hidden!important} /* belt and braces: nothing on these pages should ever scroll the page sideways */ .mk-page{overflow-x:hidden} } /* ============ v44a: /impression - dark canvas, hero, premium service cards ==== */ @media (max-width:840px){ .pg-impression{background:#050505!important} .pg-impression .sec.white,.pg-impression .sec.paper,.pg-impression .hero{background:#050505!important} .pg-impression .sec h2,.pg-impression .sec h3,.pg-impression .sec h4{color:#fff!important} .pg-impression .sec p,.pg-impression .sec li{color:#A8A8A8!important} /* hero: one dominant CTA, second demoted - same as repair + technology */ .pg-impression .hero .cta{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:22px!important} .pg-impression .hero .cta .btn-o{width:100%!important;justify-content:center!important} .pg-impression .hero .cta .btn-g{ background:transparent!important;border:0!important;color:#A8A8A8!important; text-decoration:underline;text-underline-offset:4px;font-size:13.5px!important; padding:4px 0!important;width:auto!important} /* service cards -> full-bleed photo cards, the homepage .scard recipe */ .pg-impression .g4>.icard{ position:relative!important;aspect-ratio:3/4;border-radius:26px!important;overflow:hidden!important; background:#111111!important;border:1px solid rgba(255,255,255,.08)!important; box-shadow:0 26px 44px -26px rgba(0,0,0,.9)!important;display:block!important;padding:0!important} .pg-impression .g4>.icard .ic-top{ position:absolute!important;inset:0!important;aspect-ratio:auto!important; height:100%!important;width:100%!important;margin:0!important;border-radius:0!important;overflow:hidden} .pg-impression .g4>.icard .ic-top img{width:100%!important;height:100%!important;object-fit:cover!important;display:block} .pg-impression .g4>.icard .ic-top::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,7,9,.28) 0%,rgba(6,7,9,.12) 24%,rgba(6,7,9,.55) 50%,rgba(6,7,9,.91) 76%,rgba(6,7,9,.98) 100%)} .pg-impression .g4>.icard .ic-body{ position:absolute!important;left:0;right:0;bottom:0;z-index:3; padding:0 20px 20px!important;background:none!important;text-align:left} .pg-impression .g4>.icard .ic-body h4{ color:#fff!important;font-size:22px!important;line-height:1.1!important; letter-spacing:-.02em;margin:0 0 8px!important} .pg-impression .g4>.icard .ic-body p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important; margin:0!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pg-impression .g4>.icard .ic-body .go,.pg-impression .g4>.icard .ic-body a{ display:inline-flex!important;align-items:center;gap:8px;margin-top:14px; background:#fff!important;color:#0a0c10!important;border-radius:100px!important; padding:11px 20px!important;font-size:14px!important;font-weight:600!important;text-decoration:none} } /* ============ v44b: /impression galerie + the shared closing contact card ==== */ @media (max-width:840px){ /* ---- galerie: the homepage treatment. .hgal already uses the same .art/.frame/.mat markup, so mk-mobile.js builds the SAME featured carousel above it and the framed 3-col grid sits underneath. ---- */ .pg-impression .hgal{ display:grid!important;grid-template-columns:repeat(3,1fr)!important; gap:18px 9px!important;overflow:visible!important} .pg-impression .hgal .aname{color:#fff!important} .pg-impression .hgal .aartist{color:rgba(255,255,255,.5)!important} .pg-impression .hgal .aprice{color:#E8B84B!important} .pg-impression .hgal .abm{color:rgba(255,255,255,.35)!important} .pg-impression .hgal .art .frame{ box-shadow:0 14px 24px -12px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.3)!important} /* ---- closing contact card: one treatment for BOTH /impression and /reparation, which also finishes the last light band on the repair page. Dark glass card on the dark canvas, gold CTA, white ghost. ---- */ .pg-reparation .sec.paper:not(:has(.bagrid)), .pg-impression .sec.paper{background:#050505!important} .pg-reparation .store,.pg-impression .store{ background:linear-gradient(180deg,#131417,#0d0e11)!important; border:1px solid rgba(255,255,255,.09)!important;border-radius:30px!important; padding:28px 22px 30px!important; box-shadow:0 30px 54px -30px rgba(0,0,0,.95)!important} .pg-reparation .store h3,.pg-impression .store h3{ color:#fff!important;font-size:26px!important;line-height:1.1!important;letter-spacing:-.02em} .pg-reparation .store p,.pg-impression .store p{ color:rgba(255,255,255,.72)!important;font-size:14px!important;line-height:1.55!important} .pg-reparation .store .cta,.pg-impression .store .cta{ display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:18px!important} .pg-reparation .store .cta .btn,.pg-impression .store .cta .btn{ width:100%!important;justify-content:center!important} .pg-reparation .store .cta .btn-g,.pg-impression .store .cta .btn-g{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important; color:#fff!important} /* the address / phone / hours rows read as glass rows on the dark card */ .pg-reparation .store .l2row,.pg-impression .store .l2row, .pg-reparation .store .row,.pg-impression .store .row{ background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:16px!important;color:#fff!important} .pg-reparation .store b,.pg-impression .store b{color:rgba(255,255,255,.5)!important} } /* ============ v45: print hero render (shared .rep-shot / .rep-badges) ======== The repair hero's render + glass badge card are reused verbatim on the print page, so their selectors are no longer scoped to .pg-reparation. The print render is WIDE (a row of machines, 1247x431) rather than a single portrait device, so it gets its own sizing. */ @media (max-width:840px){ .imp-shot{width:min(94vw,420px)!important;margin-top:26px!important} .imp-shot img{max-height:200px!important;object-fit:contain!important} .pg-impression .rep-glow{ background:radial-gradient(circle at 50% 58%,rgba(74,125,255,.26),rgba(74,125,255,.09) 46%,transparent 74%)!important} .pg-impression .rep-badge svg{color:#4A7DFF} .pg-impression .rep-badges{max-width:400px} .pg-impression .hero .cta{margin-top:22px!important} } /* ============ v46: drop the hero collage on /impression ============ The "PRINT SERVICES" collage was flat clip-art on white and read as stock filler against the new dark hero, which now carries the real equipment render. Hidden on mobile only - the markup and the desktop layout are untouched, so this is reversible by deleting this rule. */ @media (max-width:840px){ .pg-impression .hero .card{display:none!important} .pg-impression .hero .hgrid{gap:0!important} .pg-impression .hero .cta{margin-bottom:8px!important} } /* ============ v47: /paiement-de-facture premium pass ============ Same language as repair / print / technology. The page has TWO .g3 groups - the biller cards (in .sec.white) and the 3 steps (in .sec.paper) - so they are targeted by their section, never by .g3 alone. */ @media (max-width:840px){ /* one dark canvas */ .pg-facture{background:#050505!important} .pg-facture .sec.white,.pg-facture .sec.paper,.pg-facture .hero{background:#050505!important} .pg-facture .sec h2,.pg-facture .sec h3,.pg-facture .sec h4{color:#fff!important} .pg-facture .sec p,.pg-facture .sec li{color:#A8A8A8!important} /* hero: drop the old illustration card, one dominant CTA */ .pg-facture .hero .card{display:none!important} .pg-facture .hero .hgrid{gap:0!important} .fac-shot{width:min(80vw,320px)!important;margin-top:24px!important} .fac-shot img{max-height:250px!important;object-fit:contain!important} .pg-facture .rep-glow{ background:radial-gradient(circle at 50% 52%,rgba(247,161,43,.26),rgba(247,161,43,.09) 46%,transparent 74%)!important} .pg-facture .rep-badge svg{color:#F7A12B} .pg-facture .hero .cta{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:22px!important} .pg-facture .hero .cta .btn-o{width:100%!important;justify-content:center!important} .pg-facture .hero .cta .btn-g{ background:transparent!important;border:0!important;color:#A8A8A8!important; text-decoration:underline;text-underline-offset:4px;font-size:13.5px!important; padding:4px 0!important;width:auto!important} /* ---- BILLER cards (.sec.white .g3) -> dark glass, logo plate kept white so the CIE / SODECI / Canal+ marks stay legible ---- */ .pg-facture .sec.white .g3>*{ background:#111111!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:26px!important;overflow:hidden!important; box-shadow:0 20px 38px -24px rgba(0,0,0,.95)!important} .pg-facture .sec.white .g3>* img{background:#fff!important} .pg-facture .sec.white .g3>* h3,.pg-facture .sec.white .g3>* h4{color:#fff!important} .pg-facture .sec.white .g3>* p{color:#A8A8A8!important} /* ---- 3 STEPS (.sec.paper .g3) -> the homepage .why photo-card recipe: photo on ::before, scrim on ::after, copy bottom-aligned ---- */ .pg-facture .sec.paper .g3>*{ position:relative!important;display:flex!important;flex-direction:column;justify-content:flex-end; aspect-ratio:3/4;border-radius:26px!important;overflow:hidden!important;padding:20px!important; background:#101216!important;border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 26px 44px -26px rgba(0,0,0,.9)!important} .pg-facture .sec.paper .g3>*::before{ content:"";position:absolute;inset:0;z-index:0; background-size:cover;background-position:center;background-repeat:no-repeat} .pg-facture .sec.paper .g3>*::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,7,9,.30) 0%,rgba(6,7,9,.12) 22%,rgba(6,7,9,.55) 48%,rgba(6,7,9,.91) 74%,rgba(6,7,9,.98) 100%)} .pg-facture .sec.paper .g3>*>*{position:relative;z-index:2;flex:0 0 auto!important} /* the big orange 01/02/03 becomes the gold kicker, as on the homepage */ .pg-facture .sec.paper .g3>* .n,.pg-facture .sec.paper .g3>* b:first-child, .pg-facture .sec.paper .g3>* span:first-child{ color:#E8B84B!important;font-size:11px!important;font-weight:600!important; letter-spacing:1.9px!important;text-transform:uppercase;margin:0 0 7px!important; line-height:1.2!important} .pg-facture .sec.paper .g3>* h3,.pg-facture .sec.paper .g3>* h4{ color:#fff!important;font-size:22px!important;line-height:1.1!important;margin:0 0 8px!important} .pg-facture .sec.paper .g3>* p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important;margin:0!important} /* same photography as the homepage "Pourquoi Mascot" cards, per the request */ .pg-facture .sec.paper .g3>*:nth-child(3n+1)::before{background-image:url('/wp-content/uploads/mascot-hero/contact.jpg')} .pg-facture .sec.paper .g3>*:nth-child(3n+2)::before{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop.jpg')} .pg-facture .sec.paper .g3>*:nth-child(3n+3)::before{background-image:url('/wp-content/uploads/mascot-hero/kids-community.jpg')} /* closing contact card - reuse the repair/print treatment */ .pg-facture .store{ background:linear-gradient(180deg,#131417,#0d0e11)!important; border:1px solid rgba(255,255,255,.09)!important;border-radius:30px!important; padding:28px 22px 30px!important;box-shadow:0 30px 54px -30px rgba(0,0,0,.95)!important} .pg-facture .store h3{color:#fff!important;font-size:26px!important;line-height:1.1!important} .pg-facture .store p{color:rgba(255,255,255,.72)!important;font-size:14px!important} .pg-facture .store .cta{display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:18px!important} .pg-facture .store .cta .btn{width:100%!important;justify-content:center!important} .pg-facture .store .cta .btn-g{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important} } /* ============ v48: /transfert-dargent premium pass ============ The last of the three "services en boutique" pages to be converted, so it speaks exactly the language of facture / impression / reparation: one dark canvas, a cut-out hero render over a glass badge row, one dominant CTA, the homepage photo-card recipe on the three steps, and the shared closing card. THE HERO RENDER IS A TRUE CUT-OUT HERE - a first for this site. Every earlier hero was a flatten-to-dark (flood fill to rgb(5,5,7)) because the sources were photographed on white, which leaves a faint rectangle edge wherever the hero gradient sits behind it. This source arrived as a genuine transparent PNG, so there is nothing to remove and no edge to hide. .feat is RESTYLED into the glass badge card rather than having new markup injected: its .fi children already carry icon + label + description, which is exactly .rep-badge's structure. Only `order` lifts it above the CTA. */ @media (max-width:840px){ /* one dark canvas */ .pg-transfert{background:#050505!important} .pg-transfert .sec.white,.pg-transfert .sec.paper,.pg-transfert .hero{background:#050505!important} .pg-transfert .sec h2,.pg-transfert .sec h3,.pg-transfert .sec h4{color:#fff!important} .pg-transfert .sec p,.pg-transfert .sec li,.pg-transfert .shead p{color:#A8A8A8!important} /* ---- HERO ---- The copy column becomes a flex column purely so `order` can lift the badge row and the CTA below the render without touching the DOM order. */ .pg-transfert .hero .hgrid{gap:0!important} .pg-transfert .hero .hgrid>div:first-child{display:flex!important;flex-direction:column!important} .pg-transfert .hero .feat{order:1} .pg-transfert .hero .cta{order:2} .tr-shot{width:min(84vw,340px)!important;margin-top:22px!important} .tr-shot img{max-height:215px!important;object-fit:contain!important} /* the page accent is the same green as /reparation, so .rep-glow's default green radial and .rep-badge's #13BE6D icons are already correct here */ /* .feat -> the glass badge card. Its base .ic is a 40px tinted chip built for the desktop stacked rows; in a 3-up badge row that chip crowds the label, so it is stripped back to a bare icon. */ .pg-transfert .hero .feat{ display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important; margin:24px auto 0!important;max-width:390px!important;width:100%!important; background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:24px!important;padding:16px 6px!important; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 22px 44px -28px rgba(0,0,0,.95)!important} .pg-transfert .hero .feat .fi{ display:flex!important;flex-direction:column!important;align-items:center!important; gap:5px!important;text-align:center!important;padding:0 5px!important} .pg-transfert .hero .feat .fi .ic{ width:auto!important;height:auto!important;flex:none!important; background:none!important;border:0!important;border-radius:0!important; color:#13BE6D!important;display:block!important} .pg-transfert .hero .feat .fi .ic svg{width:21px!important;height:21px!important;display:block} .pg-transfert .hero .feat .fi b{ display:block;color:#fff!important;font-size:12px!important;font-weight:600!important; line-height:1.15!important} .pg-transfert .hero .feat .fi span{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; color:#A8A8A8!important;font-size:10px!important;line-height:1.25!important;margin-top:2px} /* one dominant CTA, second demoted to a text link */ .pg-transfert .hero .cta{ display:flex!important;flex-direction:column!important;align-items:stretch!important; gap:10px!important;margin-top:22px!important} .pg-transfert .hero .cta .btn-o{width:100%!important;justify-content:center!important} .pg-transfert .hero .cta .btn-g{ background:transparent!important;border:0!important;color:#A8A8A8!important; text-decoration:underline;text-underline-offset:4px;font-size:13.5px!important; padding:4px 0!important;width:auto!important;align-self:center!important} /* ---- the "Transfert en boutique" operator card STAYS (user's request) but goes dark glass so it belongs on the new canvas. The operator logo plates stay WHITE - the same call made for the facture biller cards, because Wave / Orange / WU / MoneyGram are coloured marks that lose legibility on dark. ---- */ .pg-transfert .tr-card{ background:linear-gradient(180deg,#131417,#0d0e11)!important;color:#fff!important; border:1px solid rgba(255,255,255,.09)!important;border-radius:28px!important; box-shadow:0 30px 54px -30px rgba(0,0,0,.95)!important;margin-top:26px!important} .pg-transfert .tr-card .ct b{color:#fff!important} .pg-transfert .tr-card .oprow{border-top-color:rgba(255,255,255,.07)!important} .pg-transfert .tr-card .oprow .on{color:#fff!important} .pg-transfert .tr-card .oprow .os{color:#8b8f8a!important} .pg-transfert .tr-card .oprow .lg{ background:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important} .pg-transfert .tr-card .oprow .tag{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important; color:rgba(255,255,255,.82)!important} .pg-transfert .tr-card .badge{ background:rgba(19,190,109,.14)!important;border:1px solid rgba(19,190,109,.3)!important; color:#13BE6D!important} .pg-transfert .tr-card .btn-o{margin-top:16px!important} /* ---- 3 STEPS -> the homepage "Pourquoi Mascot" photo-card recipe, with the same photography the user asked for. NOTE the extra nesting: here the copy lives in .scard > .step, not directly on the card, so .step is the element that has to be lifted above the scrim. ---- */ .pg-transfert .sec.white .g3>.scard{ position:relative!important;display:flex!important;flex-direction:column!important; justify-content:flex-end!important;aspect-ratio:3/4!important; border-radius:26px!important;overflow:hidden!important;padding:20px!important; background:#101216!important;border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 26px 44px -26px rgba(0,0,0,.9)!important} .pg-transfert .sec.white .g3>.scard::before{ content:"";position:absolute;inset:0;z-index:0; background-size:cover;background-position:center;background-repeat:no-repeat} .pg-transfert .sec.white .g3>.scard::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,7,9,.30) 0%,rgba(6,7,9,.12) 22%,rgba(6,7,9,.55) 48%,rgba(6,7,9,.91) 74%,rgba(6,7,9,.98) 100%)} .pg-transfert .sec.white .g3>.scard .step{position:relative;z-index:2;display:block} /* the big orange 01/02/03 becomes the gold kicker, as on the homepage */ .pg-transfert .sec.white .g3>.scard .step .n{ color:#E8B84B!important;font-size:11px!important;font-weight:600!important; letter-spacing:1.9px!important;text-transform:uppercase;line-height:1.2!important; margin:0 0 7px!important;font-family:inherit!important} .pg-transfert .sec.white .g3>.scard .step h4{ color:#fff!important;font-size:22px!important;line-height:1.1!important;margin:0 0 8px!important} .pg-transfert .sec.white .g3>.scard .step p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important;margin:0!important} /* :nth-child(3n+k), not :nth-child(k) - mkCarousel clones whole sets of three, so the index has to repeat or every clone would take card 1's photograph. */ .pg-transfert .sec.white .g3>.scard:nth-child(3n+1)::before{background-image:url('/wp-content/uploads/mascot-hero/contact.jpg')} .pg-transfert .sec.white .g3>.scard:nth-child(3n+2)::before{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop.jpg')} .pg-transfert .sec.white .g3>.scard:nth-child(3n+3)::before{background-image:url('/wp-content/uploads/mascot-hero/kids-community.jpg')} /* the steps become the centred loop carousel used everywhere else */ .pg-transfert .sec.white .g3{ padding-left:calc((100vw - clamp(280px,78vw,470px))/2)!important; padding-right:calc((100vw - clamp(280px,78vw,470px))/2)!important} .pg-transfert .sec.white .g3>.scard{ scroll-snap-align:center!important; flex:0 0 clamp(280px,78vw,470px)!important; width:clamp(280px,78vw,470px)!important; max-width:clamp(280px,78vw,470px)!important} /* ---- PARTNERS -> premium 2x2 glass grid ---- The marks themselves are brand-coloured tiles (Wave blue, Orange orange) or dark-on-transparent (Western Union), so each sits on its own white plate for legibility, and the GLASS is the card around it: a translucent pane with a specular sheen across the top-left corner and an inset top highlight. ---- */ .pg-transfert .plogos{ display:grid!important;grid-template-columns:1fr 1fr!important; gap:12px!important;margin-top:4px!important} .pg-transfert .plogo{ position:relative!important;overflow:hidden!important; width:auto!important;height:auto!important;aspect-ratio:1/1!important; background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.028) 52%,rgba(255,255,255,.05))!important; border:1px solid rgba(255,255,255,.11)!important;border-radius:26px!important; padding:22px!important;display:grid!important;place-items:center!important; backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25); box-shadow:0 26px 46px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.16)!important} /* the specular sweep that sells the glass */ .pg-transfert .plogo::after{ content:"";position:absolute;left:-40%;top:-70%;width:120%;height:120%; background:linear-gradient(128deg,rgba(255,255,255,.19),rgba(255,255,255,.06) 34%,transparent 62%); transform:rotate(-8deg);pointer-events:none;z-index:2} .pg-transfert .plogo img{ position:relative;z-index:1; width:100%!important;max-width:118px!important;height:auto!important; max-height:none!important;aspect-ratio:1/1;object-fit:contain!important; background:#fff!important;border-radius:20px!important;padding:13px!important; box-shadow:0 12px 26px -14px rgba(0,0,0,.9)!important} /* ---- closing contact card: the shared repair / print / facture treatment. .store is already dark on this page, but it is the OLD 26px radius, radial-amber, two-column card - restyle it to the same object the other pages now close with. ---- */ .pg-transfert .store{ background:linear-gradient(180deg,#131417,#0d0e11)!important; border:1px solid rgba(255,255,255,.09)!important;border-radius:30px!important; padding:28px 22px 30px!important; box-shadow:0 30px 54px -30px rgba(0,0,0,.95)!important} .pg-transfert .store::before{display:none!important} .pg-transfert .store h3{color:#fff!important;font-size:26px!important;line-height:1.1!important;letter-spacing:-.02em} .pg-transfert .store p{color:rgba(255,255,255,.72)!important;font-size:14px!important;line-height:1.55!important} .pg-transfert .store .cta{ display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:18px!important} .pg-transfert .store .cta .btn{width:100%!important;justify-content:center!important} .pg-transfert .store .cta .btn-g{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important} /* the address / phone / hours rows read as glass rows, as on the other pages */ .pg-transfert .store .info{gap:10px!important;margin-top:20px!important} .pg-transfert .store .ir{ background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:16px!important;padding:12px 14px!important} .pg-transfert .store .ir .ic{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important} .pg-transfert .store .ir b{color:rgba(255,255,255,.5)!important} .pg-transfert .store .ir span{color:#fff!important} } /* the render is a mobile-only addition; keep the desktop hgrid untouched */ @media (min-width:841px){ .tr-shot{display:none!important} } /* ============ v48b: /mascot-galerie gets the homepage galerie section ============ The category template already renders the identical .art/.frame/.mat markup as the homepage .ggrid, so mk-mobile.js builds the SAME featured carousel above it and the framed 3-col grid of every print sits underneath. The page also carries the Wave-2 "À la une" product carousel (.mfeat), which would be a SECOND featured shelf showing the same prints as plain product cards. On this page only, that one is hidden - the framed carousel is the better object for artwork. Everything is keyed off .pg-gal, a body class the template now adds for term 46, because .pg-cat is shared by all 16 category pages. */ @media (max-width:840px){ .pg-gal .mfeat-sec{display:none!important} .pg-gal .ggrid{ display:grid!important;grid-template-columns:repeat(3,1fr)!important; gap:18px 9px!important;overflow:visible!important} .pg-gal .ggrid .aname{color:#fff!important} .pg-gal .ggrid .aartist{color:rgba(255,255,255,.5)!important} .pg-gal .ggrid .aprice{color:#E8B84B!important} .pg-gal .ggrid .abm{color:rgba(255,255,255,.35)!important} .pg-gal .ggrid .art .frame{ box-shadow:0 14px 24px -12px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.3)!important} /* closing contact card - the same object the service pages close with */ .pg-cat .store{ background:linear-gradient(180deg,#131417,#0d0e11)!important; border:1px solid rgba(255,255,255,.09)!important;border-radius:30px!important; padding:28px 22px 30px!important; box-shadow:0 30px 54px -30px rgba(0,0,0,.95)!important} .pg-cat .store h3{color:#fff!important;font-size:26px!important;line-height:1.1!important;letter-spacing:-.02em} .pg-cat .store p{color:rgba(255,255,255,.72)!important;font-size:14px!important;line-height:1.55!important} .pg-cat .store .cta{ display:flex!important;flex-direction:column!important;gap:10px!important;margin-top:18px!important} .pg-cat .store .cta .btn{width:100%!important;justify-content:center!important} .pg-cat .store .cta .btn-g{ background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important} .pg-cat .store .info{display:flex;flex-direction:column;gap:10px!important;margin-top:20px!important} .pg-cat .store .ir{ display:flex;gap:12px;align-items:center; background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important; border-radius:16px!important;padding:12px 14px!important} .pg-cat .store .ir .ic{ flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#E8B84B; background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important} .pg-cat .store .ir b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.5)!important} .pg-cat .store .ir span{font-size:15.5px;color:#fff!important} } /* ============ v48c: buttons for the category-page contact card ============ mascot-category.php has no .btn / .btn-o / .btn-g / .arw of its own - those live in the static pages' inline