/* ===========================================================================
mk-homedark.css - v111 - the homepage's light run goes BLACK
WHY: the v108 category tiles are vivid flag green, and on #F6F7F5 they read
as stickers on paper. The user picked black after seeing ten previews.
WHICH BLACK: #0A0C10 - the site's OWN --ink, already used by the hero, the
services band, /reparation and the footer. Deliberately NOT the green-tinted
#08130D or #04180D that were also previewed: those would have made this the
fifth distinct near-black on one page. Using --ink means this run becomes
CONTINUOUS with the dark sections around it instead of merely similar, and
the green stays where it belongs - on the tiles.
THIS REVERSES A DOCUMENTED DECISION, ON PURPOSE. v71 and v91 both recorded
the light/dark alternation as intentional and warned that flattening it would
"trade the homepage's photographic warmth for uniformity". That reasoning no
longer holds, and the measurement is why:
- the page was ALREADY ~80% dark. The light run (3,523px of ~14,000) was
the outlier, not half of a balance.
- the warmth argument was backwards. The promo photography (kids with
phones, the orange wall) and the product cutouts gain contrast on black;
the photos carried the warmth, the background never did.
- it also closes a hard light->dark seam into #services.
SCOPE - v111 TOOK THREE OF THE FOUR LIGHT SECTIONS; v121 TOOK THE FOURTH.
`.sbsec` (sub-banner), `#tech` (intro + trust + promos + tiles + stats) and
the "derniers arrivages" band are contiguous and contain the tiles, so they
went dark together in v111. The FOURTH - "Bati sur trois engagements"
(`section.tech:has(.why)`, 833px, much further down) was LEFT LIGHT then:
v71 records it as a deliberate contrast beat, and the user had asked about
the section with the tiles. It was flagged rather than silently darkened,
and on 2026-07-23 the user approved darkening it too - so the homepage now
has NO light band left at all. See section 6.
Targeted with :has() rather than nth-of-type so the selectors survive section
reordering. :has() is already relied on elsewhere in this codebase
(.pg-reparation .sec.paper:has(.bagrid)).
REVERTING: delete the in accueil.html. Nothing else was modified -
no markup changed, so there is no backup to restore.
=========================================================================== */
.sbsec,
#tech,
section.tech:has(.nrow){background:#0A0C10!important}
/* ---- 1. sub-banner tab pills ------------------------------------------------
INVERTED, not merely recoloured. The active pill was #0A0C10 on white; on a
#0A0C10 section that pill would vanish entirely. So active becomes WHITE on
black and the inactive ones become glass - the same figure/ground relationship
as before, read the other way round. */
.sbsec .sb-tab{
background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.16)!important;
color:rgba(255,255,255,.72)!important}
.sbsec .sb-tab:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
.sbsec .sb-tab.on,.sbsec .sb-tab[aria-selected="true"]{
background:#fff!important;border-color:#fff!important;color:#0A0C10!important}
/* ---- 2. intro + trust bar ---------------------------------------------------
.eyebrow2 is left ORANGE - it is --orange, which is the site's accent on every
dark surface already, and it reads well on black. Only the neutrals move. */
#tech .intro h2{color:#fff!important}
#tech .intro p{color:#A8B0AA!important}
#tech .trust{border-bottom-color:rgba(255,255,255,.12)!important}
#tech .trust .ti b{color:#fff!important}
#tech .trust .ti span{color:#A8B0AA!important}
/* the icon plate was a light chip; it has to become glass or it is a white
square floating on black */
#tech .trust .ti .ic{
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.14)!important;
color:#F7A12B!important}
/* ---- 3. the tile grid -------------------------------------------------------
The plates themselves are untouched (mk-tiles.css owns those). Only the
caption row under each tile needs inverting.
`.go` was `background:var(--ink)` - a black circle. On black that is an
invisible button, so it inverts to white-on-black. The ORANGE HOVER IS KEPT:
it is the interaction signal and it works on both. */
#tech .wanted h3{color:#fff!important}
#tech .pcard .plink b{color:#fff!important}
#tech .pcard .plink .go{background:#fff!important;color:#0A0C10!important}
#tech .pcard:hover .plink .go{background:var(--orange)!important;color:#1a1207!important}
/* ---- 4. stats ---------------------------------------------------------------
.stat .num .suf stays --orange (already an accent, already legible). */
#tech .stats{border-top-color:rgba(255,255,255,.12)!important}
#tech .stat .num{color:#fff!important}
#tech .stat .lbl{color:#A8B0AA!important}
/* ---- 5. "Les derniers arrivages" -------------------------------------------
The promo banners above this need NOTHING: .plabel is already #fff and .psub
rgba(255,255,255,.94) because they sit on photographs. Verified before writing
a rule for them - recolouring those would have been a wasted override. */
section.tech:has(.nrow) h3{color:#fff!important}
section.tech:has(.nrow) > .wrap > p,
section.tech:has(.nrow) .nhead p{color:#A8B0AA!important}
/* .seeall was --ink text on an --ink underline: doubly invisible on black */
section.tech:has(.nrow) .seeall{
color:#fff!important;border-bottom-color:rgba(255,255,255,.45)!important}
section.tech:has(.nrow) .seeall:hover{
color:var(--orange)!important;border-bottom-color:var(--orange)!important}
/* the cards were solid #fff - the single biggest light block in the run */
section.tech:has(.nrow) .ncard{
background:#12151B!important;
border-color:rgba(255,255,255,.09)!important;
box-shadow:0 20px 38px -24px rgba(0,0,0,.95)!important}
section.tech:has(.nrow) .nname{color:#fff!important}
section.tech:has(.nrow) .nspec{color:#8b9088!important}
section.tech:has(.nrow) .nprice{color:#fff!important}
/* same inversion as .go, same reason, same orange hover kept */
section.tech:has(.nrow) .nbuy{background:#fff!important;color:#0A0C10!important}
section.tech:has(.nrow) .ncard:hover .nbuy{background:var(--orange)!important;color:#1a1207!important}
/* .nbadge is --orange on #1a1207 - an accent chip, legible on black, left alone */
/* ---- 6. "Bati sur trois engagements" - v121 (2026-07-23) --------------------
The last light band on the homepage, darkened on the user's approval after
being flagged at v111. With this the light run is gone entirely: every
section from the hero to the footer is now #0A0C10 / #08090B / #050505, plus
the cafe band's warm #160D06.
THIS IS A TWO-LINE CHANGE, AND THAT IS THE WHOLE POINT - MEASURED FIRST.
The .why CARDS WERE ALREADY DARK: measured live before writing anything,
they compute to background #101216, h4 #fff, p rgba(255,255,255,.74), .wn
amber, and .wic a tinted glass plate with an amber/green/blue accent ring.
Some earlier pass had already built them for a dark surface; they were just
sitting on a #F6F7F5 background. So the only things that actually rendered
light were the section itself and the
.
A full sweep of every descendant confirmed it - the only other hits were
containers (.wrap, .chead, .why-grid, .why) that inherit the dark `color`
but hold no direct text of their own, and the .wic accent rings, which are
intentional on a dark card. Writing overrides for any of those would have
been dead CSS. (v111 section 5 records the same discipline paying off for
the promo banners.)
:has() to match the rest of this file, so it survives section reordering. */
section.tech:has(.why){background:#0A0C10!important}
section.tech:has(.why) .chead h3{color:#fff!important}