/* ===========================================================================
mk-tiles.css - v108 - "Decouvrez nos plus recherches" category tiles
REPLACES THE LAST BACK MARKET ASSETS ON THE SITE. The six prod-*.jpg files
were Back Market modular cards: their artwork, their product renders, baked
onto their lime (226,247,126). Flagged as a violation on 2026-07-17 and
carried since.
WHAT IS AND IS NOT THE PROBLEM - this matters, because the user's green is
deliberate and was nearly thrown out with the infringement:
- NOT a problem: a coloured plate with a product cut out on top. That is a
generic e-commerce pattern, not anyone's property.
- NOT a problem: green. The user picked it for the GREEN IN THE IVORIAN
FLAG, and the site already carries it as --green (#13BE6D) in .flag, the
hero glow and the transfert page.
- THE problem: Back Market's specific LIME (#E2F77E) and their rendered
artwork. Both are gone.
So the plate is now built in CSS from the FLAG GREEN (#009E60 anchor, the
Cote d'Ivoire flag value) blended toward the site's own --green, and the
product on top is Mascot's OWN catalogue cutout from uploads/mascot-hero/cut/.
Nothing here is downloaded from a competitor.
BUILT IN CSS, NOT AS SIX NEW JPEGS, on purpose:
- the Hostinger CDN caps served images at 1600px (v82), so a raster plate
would upscale on a 2x screen; a gradient never does
- the green is now one value in one file, so re-tinting the whole grid is a
one-line edit rather than re-exporting six images
- REVERTING IS TRIVIAL: drop the to this file and restore the six
values from accueil.html.bak-v108-tiles. The user asked for
that escape hatch explicitly.
=========================================================================== */
/* ---- the plate --------------------------------------------------------------
Anchored on #009E60 (the flag green) and lifted toward the site's --green so
it sits in the existing palette rather than beside it. The radial highlight
is what stops a flat fill reading as a coloured box - it gives the plate a
light source, which the product's drop-shadow below then agrees with. */
.wanted .pcard .thumb{
background:
radial-gradient(120% 90% at 22% 12%,rgba(255,255,255,.30),transparent 58%),
linear-gradient(158deg,#19C878 0%,#0EA863 46%,#009153 100%),
#009E60;
border:1px solid rgba(255,255,255,.16)}
/* Tonal variation so six tiles in a grid do not read as wallpaper. All six stay
green - this shifts depth and light direction only, it does not introduce a
second hue. */
.wanted .pcard:nth-child(2) .thumb,
.wanted .pcard:nth-child(4) .thumb{
background:
radial-gradient(120% 90% at 78% 10%,rgba(255,255,255,.34),transparent 58%),
linear-gradient(200deg,#1FD07F 0%,#12B269 50%,#059A58 100%),
#009E60}
.wanted .pcard:nth-child(3) .thumb,
.wanted .pcard:nth-child(5) .thumb{
background:
radial-gradient(110% 95% at 50% 8%,rgba(255,255,255,.26),transparent 60%),
linear-gradient(172deg,#14BD70 0%,#0A9C5B 55%,#00854B 100%),
#009E60}
/* ---- the product ------------------------------------------------------------
contain + generous padding: these are catalogue cutouts at wildly different
aspect ratios (779x1000 portrait phones through 1294x606 landscape family
shots), so `cover` would crop the subject out of half of them. The drop-shadow
is what lifts the product off the plate - without it a cutout on a flat colour
reads as a sticker. */
.wanted .pcard .thumb img{
object-fit:contain!important;
padding:13%;
filter:drop-shadow(0 18px 26px rgba(0,40,20,.34));
transition:transform .5s var(--ease),filter .5s var(--ease)}
.wanted .pcard:hover .thumb img{
transform:scale(1.06);
filter:drop-shadow(0 26px 34px rgba(0,40,20,.42))}
/* Per-tile padding. The landscape cutouts (Ordinateurs, Bonnes affaires) would
float tiny inside a 1:1 box at the shared 13%, so they get room back. The
Accessoires SSD is 345x1198 - nearly 3.5:1 portrait - and needs the opposite. */
.wanted .pcard:nth-child(2) .thumb img{padding:9% 7%}
.wanted .pcard:nth-child(5) .thumb img{padding:9% 26%}
.wanted .pcard:nth-child(6) .thumb img{padding:11% 6%}
/* ---- the Promo tag ----------------------------------------------------------
Kept ORANGE against the green rather than re-tinted. Orange is the site's
accent (--orange, the flag's other colour) and a promo badge has to separate
from its background to do its job - a green badge on a green plate would
disappear, which is the one thing a badge must not do. */
.wanted .pcard .thumb .ptag{
background:linear-gradient(180deg,#F7A12B,#F2890E);
color:#1a1207;border:1px solid rgba(255,255,255,.35);
box-shadow:0 8px 18px -6px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
.wanted .pcard .thumb img{transition:none}
.wanted .pcard:hover .thumb img{transform:none}
}
/* ===========================================================================
THE "NOUVEAU" ROW - the second Back Market surface, found while swapping
the six tiles.
`.nthumb{background:var(--lime)}` and --lime is #D8F64A - Back Market's lime
again, on four more of their product renders. The six tiles were the reported
violation; this row was the same violation, unreported. Both are now gone.
`object-fit` HAD TO CHANGE TOO. .ncard .nthumb img is `cover`, which is right
for a full-bleed photo and wrong for a cutout - it crops a transparent PNG to
fill the box, so the product gets clipped at the edges instead of sitting on
the plate. Same fix as the tiles.
=========================================================================== */
.nrow .ncard .nthumb{
background:
radial-gradient(120% 90% at 24% 12%,rgba(255,255,255,.30),transparent 58%),
linear-gradient(158deg,#19C878 0%,#0EA863 46%,#009153 100%),
#009E60;
border:1px solid rgba(255,255,255,.16)}
.nrow .ncard:nth-child(2) .nthumb,
.nrow .ncard:nth-child(4) .nthumb{
background:
radial-gradient(120% 90% at 76% 10%,rgba(255,255,255,.34),transparent 58%),
linear-gradient(200deg,#1FD07F 0%,#12B269 50%,#059A58 100%),
#009E60}
.nrow .ncard .nthumb img{
object-fit:contain!important;
padding:11%;
filter:drop-shadow(0 12px 20px rgba(0,40,20,.32));
transition:transform .5s var(--ease),filter .5s var(--ease)}
.nrow .ncard:hover .nthumb img{filter:drop-shadow(0 18px 26px rgba(0,40,20,.40))}
/* the MacBook Air is landscape in a 1:1 box - give it its width back */
.nrow .ncard:nth-child(2) .nthumb img{padding:7% 5%}
/* the Nouveau badge sits on the card, not the plate, so it is unaffected - but
it must not collide with the plate's top-left highlight */
.nrow .ncard .nbadge{z-index:2}
@media (prefers-reduced-motion:reduce){
.nrow .ncard .nthumb img{transition:none}
.nrow .ncard:hover .nthumb img{transform:none}
}