`. Il rend :
Catégorie
Gourmandises
Voir la sélection →
L'image est un `background-image` EN LIGNE, pas un élément. Styler `img`/`h3`
laissait donc les trois `` nus, en texte sombre PAR-DESSUS la photo —
illisible (constaté au rendu réel, accueil chez-km).
D'où : hauteur fixe, texte en bas, et un VOILE sur les tuiles à image. */
.mnx-dept-tile,
.mnx-dept-tiles > a,
.mnx-dept-grid > a {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 5px;
min-width: 0;
/* Hauteur commune : sans elle, une tuile sans image s'écrase et la rangée
part en escalier (constaté — 4 tuiles de 3 hauteurs différentes). */
min-height: 190px;
padding: 22px 20px;
background: var(--color-surface);
background-size: cover;
background-position: center;
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
color: var(--color-text);
text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mnx-dept-tile:hover,
.mnx-dept-tiles > a:hover,
.mnx-dept-grid > a:hover {
border-color: var(--color-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
color: var(--color-text);
}
/* Variantes de fond du socle : ramenées à la palette clinique (le beige et le
pêche de `modern-luxe` n'ont rien à faire ici). */
.mnx-hero__promo--blue { background-color: var(--color-surface-blue, #E8F2FA); }
.mnx-hero__promo--peach { background-color: var(--color-surface); }
/* ── Tuile AVEC image : voile + texte blanc ─────────────────────────────── */
.mnx-hero__promo--bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(10, 44, 77, .82) 0%,
rgba(10, 44, 77, .38) 55%,
rgba(10, 44, 77, .10) 100%);
z-index: 0;
}
.mnx-hero__promo--bg > * { position: relative; z-index: 1; }
.mnx-hero__promo--bg .mnx-hero__promo-label { color: var(--color-accent); }
.mnx-hero__promo--bg .mnx-hero__promo-title,
.mnx-hero__promo--bg .mnx-hero__promo-cta { color: #fff; }
/* ── Textes ─────────────────────────────────────────────────────────────── */
.mnx-hero__promo-label {
font-size: .625rem;
font-weight: 700;
letter-spacing: var(--letter-spacing-label, .10em);
text-transform: uppercase;
color: var(--color-primary);
}
.mnx-hero__promo-title {
font-family: var(--font-family-heading);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--color-primary-dark);
}
.mnx-hero__promo-cta {
display: flex;
align-items: center;
gap: 4px;
font-size: .75rem;
font-weight: 600;
color: var(--color-text-muted);
}
@media (max-width: 1024px) {
.mnx-dept-tiles,
.mnx-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.mnx-dept-tiles,
.mnx-dept-grid { grid-template-columns: 1fr; gap: 16px; padding-inline: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
BANDEAU PROFESSIONNELS DE SANTÉ — text_media
═══════════════════════════════════════════════════════════════════════════
Dans la maquette c'est une BANDE identifiable (fond teinté, filet, coins
arrondis), pas du texte posé sur le fond de page. `text_media` pose en ligne
ses `padding` et sa `color`, mais NI fond NI bordure : on peut donc l'habiller
sans surcharger quoi que ce soit.
Le sélecteur vise la dernière section de la page (l'emplacement `below` du
layout `clinique`) : sur la fiche produit, `text_media` n'est pas en dernier
et garde son rendu neutre.
═══════════════════════════════════════════════════════════════════════════ */
/* `margin-block` RÉDUITE : le socle pose déjà `padding-block:40px` EN LIGNE sur
cette section. Une marge d'une demi-section par-dessus creusait 80px de vide
entre les tuiles et le bandeau (mesuré au rendu réel). Les deux s'additionnent
— on ne garde donc ici que le petit écart qui manque. */
.sws-v4-text-media:last-of-type {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
max-width: var(--container-max-width, 1240px);
margin-inline: auto;
margin-block: 8px calc(var(--section-spacing, 80px) / 2);
}
/* Le CTA du bandeau : plein, comme dans la maquette. */
.sws-v4-text-media:last-of-type .sws-v4-text-media__cta,
.sws-v4-text-media:last-of-type a[class*="cta"] {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
@media (max-width: 640px) {
.sws-v4-text-media:last-of-type {
margin-inline: 16px;
border-radius: var(--radius);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GRILLES DE PRODUITS — product_pick
═══════════════════════════════════════════════════════════════════════════
4 colonnes en desktop comme la maquette. Le socle ne pose son repli
`auto-fit` que si le thème n'habille pas : ici, c'est cette grille qui fait
foi, y compris pour ses variantes de présentation.
═══════════════════════════════════════════════════════════════════════════ */
.mnx-product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
/* 🔴 DANS LA COLONNE DE RÉSULTATS, 4 COLONNES NE TIENNENT PAS.
La grille n'y dispose que de ~942px (1240 − sidebar 220 − gouttière 30) :
`repeat(4,…)` y donnait des cartes de 220px, trop étroites pour le titre et
le prix. `auto-fit` en rend 3 confortables, et remonte à 4 dès que l'écran
le permet — sans point de rupture à maintenir. */
/* 🔴 LE DÉFAUT DE CASCADE QUI RENDAIT LES SÉLECTEURS DE VUE INOPÉRANTS.
`.mnx-results .mnx-product-grid` porte DEUX classes (spécificité 0,2,0) ;
`.mnx-product-grid--3col` n'en porte qu'une (0,1,0). La règle du conteneur
l'emportait donc TOUJOURS, quelle que soit la vue choisie.
Mesuré le 2026-09-27 sur une catégorie de 7 produits : la classe changeait
bien au clic (`--3col` → `--list` → `--2col`), et les colonnes restaient
`232px × 4` dans les trois cas. Le marchand cliquait, la classe bougeait,
le rendu non — un contrôle qui ne montre rien est pire que pas de contrôle.
`:where()` ramène la spécificité du conteneur à ZÉRO : il pose un défaut,
et toute vue explicite le remplace. Même correctif que le garde-fou d'image
du moteur. La grille sans vue choisie rend EXACTEMENT comme avant. */
:where(.mnx-results) .mnx-product-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.mnx-product-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mnx-product-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mnx-product-grid--list { grid-template-columns: 1fr; gap: 14px; }
.mnx-product-grid--list .sws-product-card { flex-direction: row; }
.mnx-product-grid--list .sws-product-card__image-wrap {
flex: 0 0 168px;
aspect-ratio: 1 / 1;
}
.mnx-product-grid--list .sws-product-card__body { justify-content: center; }
/* 🔴 LES POINTS DE RUPTURE NE TOUCHENT PAS UNE VUE CHOISIE.
Ils réécrivaient `.mnx-product-grid` — une classe, comme `--2col` et
`--list`, et déclarée APRÈS eux : sous 1024 px la vue choisie perdait
toujours. Mesuré le 2026-09-29 (prod, mobile) : les trois boutons
rendaient la même grille. Les règles de repli visent donc la grille SANS
vue (grilles de produits de l'accueil) et la vue dense `--3col` ; `--2col`
et `--list` ont leurs propres déclinaisons.
Sur petit écran, chaque bouton doit montrer AUTRE CHOSE : « Grille 3 » =
la plus dense, « Grille 2 » = une carte plus grande, « Liste » = une
rangée par produit, image à côté du texte. */
@media (max-width: 1024px) {
.mnx-product-grid:not(.mnx-product-grid--2col):not(.mnx-product-grid--list) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.mnx-product-grid:not(.mnx-product-grid--2col):not(.mnx-product-grid--list) {
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.mnx-product-grid--2col { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
/* La liste RESTE une rangée : repliée en colonne, elle rendait exactement
« Grille 2 ». Le visuel se réduit pour laisser la place au texte. */
.mnx-product-grid--list .sws-product-card__image-wrap { flex: 0 0 104px; }
.mnx-product-grid--list .sws-product-card__body { padding: 10px 12px; }
}
@media (max-width: 340px) {
/* Deux colonnes tiennent jusqu'aux téléphones de 360 px ; en dessous, une
seule — jamais de carte écrasée. */
.mnx-product-grid:not(.mnx-product-grid--2col):not(.mnx-product-grid--list) {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PAGE CATÉGORIE — filtres à gauche, résultats à droite
═══════════════════════════════════════════════════════════════════════════
Le markup (facettes, tri, pagination) appartient au listing du socle : on
n'habille que la charpente et les surfaces, jamais le comportement.
═══════════════════════════════════════════════════════════════════════════ */
.sws-v4-slot--category_header {
background: var(--color-surface);
padding-block: 28px 30px;
border-bottom: 1px solid var(--color-border);
}
.sws-v4-slot--category_header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: .35em;
}
.sws-v4-slot--category_listing { padding-block: 28px; }
/* 🔴 LA GÉOMÉTRIE SIDEBAR + GRILLE EXISTE DÉJÀ DANS LE SOCLE.
Il rend `