/* =========================================================================== mk-svc.css - v103/v104 - /transfert-dargent and /paiement-de-facture restructured into the PRODUCT-CATEGORY hero language, plus the new "en boutique" card sections. Linked AFTER mk-mobile.css on both pages, so equal-specificity rules win on order and the !important arms race stays where it already is. WHY A NEW FILE RATHER THAN MORE mk-mobile.css: mk-mobile.css is 290KB and already carries ~15 versions of overrides for these two pages. This is a structural change to two pages, so it lives in one readable place. =========================================================================== */ /* =========================================================================== 1. THE CENTRED HERO - the v95 recipe extended to two more pages v95 established this for /reparation and /service-dimpression: the .hgrid children were ALREADY in the order the category heroes use, so collapsing the desktop grid to one centred column produces the category structure with no markup edit. Same move here. /transfert-dargent DID need one markup edit, but not for the hero: its "Transfert en boutique" operator card used to be the hero's second grid column, and the user asked for it as its own section below. It has been moved in transfert.html and is styled in part 2 of this file. WARNING - THE v85 CARD RULES WERE SCOPED `.pg-transfert .hero .card`. Moving the card out of
silently un-matched all 17 of them and reverted it to the base white `.card{background:#fff}` on a #050505 page. They have been re-scoped to `.pg-transfert .tr-card` in mk-mobile.css, which keeps BOTH the mobile and desktop treatments intact. If that card is ever moved again, those 17 rules move with it. =========================================================================== */ @media (min-width:841px){ /* ---------- one centred column ---------- */ .pg-transfert .hero .hgrid,.pg-facture .hero .hgrid{ grid-template-columns:1fr!important;justify-items:center!important; max-width:900px!important;margin-left:auto!important;margin-right:auto!important; gap:0!important;text-align:center!important;padding-bottom:0!important} .pg-transfert .hero .hgrid>*,.pg-facture .hero .hgrid>*{ grid-column:1!important;grid-row:auto!important;align-self:auto!important;width:100%} .pg-transfert .hero .hgrid>*:first-child, .pg-facture .hero .hgrid>*:first-child{max-width:760px} .pg-transfert .hero .flag,.pg-facture .hero .flag{margin-left:auto;margin-right:auto} .pg-transfert .hero .sub,.pg-facture .hero .sub{margin-left:auto;margin-right:auto;max-width:640px} /* the first column is a flex stack so the badge bar can be pulled ABOVE the CTAs, matching the category heroes (render > badges > buttons). The DOM order is render, cta, feat - reordering visually here rather than moving markup keeps the mobile reading flow v85 tuned exactly as it is. */ .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} /* ---------- the render: large, centred, below the headline ---------- */ /* WARNING - position:static IS LOAD-BEARING. v85 placed .tr-shot with `position:absolute` because it lives INSIDE the col1 copy div and had to be lifted out of the flow to sit in the old two-column hero. With the hero now a single centred column that rule strands the render at right:0, overlapping the sub-headline - measured at x:803 w:280 while the column is centred at 313. Returning it to the flow is what actually puts the image "in the centre below the headline". The v85 rule is same-specificity (0,3,0) and this file loads later, but !important is kept because the v85 declaration carries it. */ .pg-transfert .hero .tr-shot,.pg-facture .hero .fac-shot{ position:static!important; display:grid!important;place-items:center!important; max-width:560px!important;margin:34px auto 0!important} .pg-transfert .hero .tr-shot img,.pg-facture .hero .fac-shot img{ max-height:360px!important;width:auto!important;object-fit:contain!important} /* ---------- the 3 feature rows become the category glass badge bar -------- On transfert these are .feat > .fi (icon + bold + description), which is the same content shape as .rep-badge. Laid out as a 3-column glass bar and centred, they read as the category heroes' badge strip. */ .pg-transfert .hero .feat{ display:grid!important;grid-template-columns:repeat(3,1fr)!important; gap:0!important;max-width:640px!important;margin:30px auto 0!important; padding:18px 8px!important; background:rgba(255,255,255,.055)!important; border:1px solid rgba(255,255,255,.12)!important;border-radius:22px!important; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .pg-transfert .hero .feat .fi{ display:flex!important;flex-direction:column!important;align-items:center!important; text-align:center!important;gap:6px!important;padding:0 12px!important; border-right:1px solid rgba(255,255,255,.10)} .pg-transfert .hero .feat .fi:last-child{border-right:0} /* the icon plate is redundant once the badge itself is a glass tile */ .pg-transfert .hero .feat .fi .ic{ background:none!important;border:0!important;width:auto!important;height:auto!important; color:var(--amber)!important} /* WARNING - .fi > b and .fi > span are BOTH inline on desktop, so the three badges render as "En toute securiteOperations verifiees..." with no break. The mobile sheet fixes this with display:block inside its own block; the desktop side never had that rule. This is the same latent bug v85 found and fixed on this page's feature list - it comes back the moment the markup is re-laid-out, so it is fixed here too rather than left to be rediscovered. */ .pg-transfert .hero .feat .fi>div{display:flex;flex-direction:column;gap:3px} .pg-transfert .hero .feat .fi b{display:block!important;font-size:12.5px!important; color:#fff!important;letter-spacing:-.01em} .pg-transfert .hero .feat .fi span{display:block!important;font-size:11px!important; color:rgba(255,255,255,.6)!important;line-height:1.35} /* ---------- the glass badge bar on /paiement-de-facture ---------- facture.html ALREADY SHIPS .rep-badges markup (3 badges: Securise / Mobile money / Sur place) - it was just never visible above 841px, hidden by `body:not(.pg-reparation) .rep-shot, body:not(.pg-reparation) .rep-badges{display:none}`, a guard written back when /reparation was the only page with these. .fac-shot escaped it above only because that rule carries !important at higher specificity; the badges had no such override, so they silently stayed hidden and the hero shipped without its badge row. Opting in locally rather than editing the shared guard to `:not(.pg-reparation):not(.pg-facture)`. Both patterns exist in this codebase; the local override is what /transfert and /impression already do, and it cannot regress a page I am not looking at. */ .pg-facture .hero .rep-badges{ display:grid!important;grid-template-columns:repeat(3,1fr)!important; max-width:560px!important;margin:30px auto 0!important;padding:18px 8px!important} /* ---------- CTAs centred under the badges ---------- */ .pg-transfert .hero .cta,.pg-facture .hero .cta{ display:flex!important;justify-content:center!important;gap:14px!important; margin:30px auto 0!important;max-width:640px!important} /* v85 stretched these full-width for the narrow hero column; that column is now 900px wide and a full-width button pair looks unanchored. */ .pg-transfert .hero .cta .btn-o,.pg-transfert .hero .cta .btn-g{ width:auto!important} /* ---------- the facture hero's banner photo card is redundant now ---------- .pg-facture .hero .card is a bare of factures-banner.jpg that existed only to fill the old right-hand grid column. With the hero centred and hero-facture.jpg already carried by .fac-shot, keeping it would show two photographs stacked. Same call v95 made for the print hero's collage. CORRECTION, verified live at 390px: mk-mobile.css ALREADY hides this card under max-width:840px with its own !important rule, so it was never visible on phones. This rule therefore closes the one width where it still showed, rather than being a desktop-only change. Recorded because the first draft of this comment claimed "mobile keeps it", which would have sent the next reader hunting a mobile regression that does not exist. */ .pg-facture .hero .card{display:none!important} } /* =========================================================================== 2. THE "EN BOUTIQUE" SECTION - /transfert-dargent Modelled on the /reparation booking block: a single contained card, centred, sitting in its own band rather than floating in a hero column. v97 settled that card at 520px because 660 read as a wide letterbox; this one carries four operator rows plus a full-width CTA, so it takes 560 - wide enough that the row content (logo plate, two lines of text, a tag pill) does not wrap. =========================================================================== */ .pg-transfert .tr-bout{background:#050505} .pg-transfert .tr-card{max-width:560px;margin:0 auto} @media (min-width:841px){ .pg-transfert .tr-bout{padding-top:clamp(44px,5vw,72px)!important} } /* =========================================================================== 3. /paiement-de-facture - THE PREMIUM DARK PASS This page never got the v85-v88 treatment its two siblings did, so it was still the only light service page. Values are copied from the .pg-transfert block in mk-mobile.css so the two pages are identical, not merely similar. =========================================================================== */ .pg-facture{background:#050505} .pg-facture .sec.white,.pg-facture .sec.paper,.pg-facture .hero{background:#050505} .pg-facture .sec h2,.pg-facture .sec h3,.pg-facture .sec h4{color:#fff} .pg-facture .sec p,.pg-facture .sec li,.pg-facture .shead p{color:#A8A8A8} /* the biller cards -> dark glass. The logo plates STAY WHITE: CIE, SODECI, Canal+ and the carrier marks are coloured logos that lose legibility on a dark tile, and for a third-party brand mark that is a usage problem as much as a design one. Same call as the partner tiles in v85b and v94. */ .pg-facture .g3>.icard{ background:#111111;border:1px solid rgba(255,255,255,.08); border-radius:26px;overflow:hidden; box-shadow:0 20px 38px -24px rgba(0,0,0,.95)} .pg-facture .g3>.icard h4{color:#fff} .pg-facture .g3>.icard p{color:#A8A8A8} .pg-facture .ic-top.logo{background:#fff} .pg-facture .ic-top.logo.dk{background:#0b0d11} /* =========================================================================== 4. /paiement-de-facture "Comment ca marche" -> THE TRANSFERT PHOTO CARDS User: "Make it same, including the images." So this is the v85b recipe with the identical three photographs, not a lookalike. SELECTOR IS `.sec.paper .g3`, NOT `.g3`. This page has TWO .g3 grids: the six biller cards in .sec.white#factures (which carry their own logos) and these three step cards in .sec.paper. Verified by walking the section boundaries. :nth-child(3n+k) because .pg-facture .g3 is an mkCarousel rail on mobile and its children are cloned in whole sets - plain nth-child would give every clone card 1's photograph (the v22 trap). The DESKTOP rule carries :not([data-mk-clone]) and the MOBILE one must not - `display:flex` here out-specifies the v74 clone guard and would refill the desktop grid with clones on the resize path. Proven on .pg-transfert in v85. =========================================================================== */ .pg-facture .sec.paper .g3>.icard::before{ content:"";position:absolute;inset:0;z-index:0; background-size:cover;background-position:center;background-repeat:no-repeat} .pg-facture .sec.paper .g3>.icard::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>.icard .step{position:relative;z-index:2;display:block} .pg-facture .sec.paper .g3>.icard .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-facture .sec.paper .g3>.icard .step h4{ color:#fff!important;font-size:22px!important;line-height:1.1!important;margin:0 0 8px!important} .pg-facture .sec.paper .g3>.icard .step p{ color:rgba(255,255,255,.74)!important;font-size:13.5px!important;line-height:1.5!important;margin:0!important} /* the same three photographs as /transfert-dargent, in the same order */ .pg-facture .sec.paper .g3>.icard:nth-child(3n+1)::before{background-image:url('/wp-content/uploads/mascot-hero/contact.jpg')} .pg-facture .sec.paper .g3>.icard:nth-child(3n+2)::before{background-image:url('/wp-content/uploads/mascot-hero/learn-laptop.jpg')} .pg-facture .sec.paper .g3>.icard:nth-child(3n+3)::before{background-image:url('/wp-content/uploads/mascot-hero/kids-community.jpg')} @media (max-width:840px){ .pg-facture .sec.paper .g3>.icard{ 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-facture .sec.paper .g3>.icard>*{flex:0 0 auto!important} } @media (min-width:841px){ .pg-facture .sec.paper .g3>.icard:not([data-mk-clone]){ 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:24px!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} /* neutralise inherited flex-grow before bottom-aligning (the v15 lesson) */ .pg-facture .sec.paper .g3>.icard>*{flex:0 0 auto!important} }