/* ================ MASCOT MOBILE PREMIUM PASS (v2) ================= */
.sb-dots-m{display:none}
@media (max-width:640px){
/* ---- 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:640px){
/* ---- 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:640px){
/* ---- 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(1){--mkAccBg:rgba(247,161,43,.24);--mkAccBd:rgba(247,161,43,.45)}
.mk-sv .grid3>.scard:nth-child(2){--mkAccBg:rgba(74,125,255,.24);--mkAccBd:rgba(74,125,255,.45)}
.mk-sv .grid3>.scard:nth-child(3){--mkAccBg:rgba(19,190,109,.24);--mkAccBd:rgba(19,190,109,.45)}
#services .grid3>.scard:nth-child(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(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(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(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(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(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(2){--mkAccBg:rgba(155,109,255,.24);--mkAccBd:rgba(155,109,255,.45)}
.mk-sv:not(#services) .grid3>.scard:nth-child(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(1) .simg{background:url('/wp-content/uploads/mascot-hero/money-jump.jpg') center/cover no-repeat}
#services .grid3>.scard:nth-child(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(1) .simg{background:url('/wp-content/uploads/mascot-hero/svc-id-photos.jpg') center 42%/cover no-repeat}
#services .grid3>.scard:nth-child(1) .simg img,
#services .grid3>.scard:nth-child(2) .simg img,
.mk-sv:not(#services) .grid3>.scard:nth-child(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:640px){
/* ---- 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(1)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-car-1.jpg')}
.dark-sec .rgrid>.rcard:nth-child(2)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-ecran-casse.jpg')}
.dark-sec .rgrid>.rcard:nth-child(3)::before{background-image:url('/wp-content/uploads/mascot-hero/repair-sub-4.jpg')}
.why-grid>.why:nth-child(1)::before{background-image:url('/wp-content/uploads/mascot-hero/contact.jpg')}
.why-grid>.why:nth-child(2)::before{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop.jpg')}
.why-grid>.why:nth-child(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:640px){
/* ---------------- 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)}
}