/* === e4-categorie.css === */
/* e4-categorie.css — extrait verbatim de maquette-categorie-box (règles, puis @media max-width décroissant) */
.wrap{max-width:var(--gw-wrap,min(90%,1600px));margin:0 auto;padding:0}
/* Gouttiere rattrapee sous 1100px, exactement comme #header .container
(e4-tokens.css). Au-dessus, padding 0 : le bord du texte tombe alors
sur celui de l'en-tete. */
@media(max-width:1100px){.wrap{padding-left:14px;padding-right:14px}}
.eyebrow{
display:inline-flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;
font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#7E1E57;
margin-bottom:16px;transform:skewX(-5deg);
}
.eyebrow > *{display:inline-block;transform:skewX(calc(-1 * -5deg))}
.eyebrow::before{
content:"";display:inline-block;width:30px;height:8px;border-radius:2px;vertical-align:middle;
background:linear-gradient(100deg,#7BBF3F 0%,#5e9a2a 42%,#7E1E57 100%);transform:skewX(-5deg);
box-shadow:0 0 5px rgba(123,191,63,.25);
}
.stars{display:inline-block;position:relative;font-size:16px;line-height:1;letter-spacing:2px;font-family:Arial,sans-serif}
.stars::before{content:"\2605\2605\2605\2605\2605";color:#e3dcec}
.stars::after{content:"\2605\2605\2605\2605\2605";color:#f5b301;position:absolute;left:0;top:0;width:100%;overflow:hidden;white-space:nowrap}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:13px 24px;
border-radius:13px;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;
transition:.22s cubic-bezier(.22,1,.36,1);
}
.btn svg{width:18px;height:18px}
.btn-primary{
background:linear-gradient(100deg,#8ed04e,#5e9a2a);color:#13002a;border:1px solid transparent;
box-shadow:0 8px 14px rgba(123,191,63,.18),0 0 0 1px rgba(123,191,63,.12);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 22px rgba(123,191,63,.26),0 0 0 1px rgba(123,191,63,.26)}
.btn-ghost{
background:rgba(255,255,255,.78);border:1.5px solid rgba(43,0,79,.10);color:#2B004F;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:rgba(123,191,63,.45);color:#3f6f1c;transform:translateY(-3px);box-shadow:0 0 0 1px rgba(123,191,63,.18),0 6px 16px rgba(123,191,63,.10);background:rgba(255,255,255,.9)}
.crumbs{padding:18px 0 4px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;font-family:'Poppins',sans-serif;font-size:13px;font-weight:500}
.crumbs li{display:inline-flex;align-items:center;gap:6px;color:#6d6480}
.crumbs a{color:#6d6480;transition:.16s cubic-bezier(.22,1,.36,1)}
.crumbs a:hover{color:#3f6f1c}
.crumbs li[aria-current]{color:#2B004F;font-weight:600}
.crumbs .sepc{color:#a99fbb;font-weight:700;transform:skewX(-5deg);display:inline-block}
.btn-cart{flex:1;min-width:200px;height:52px;font-size:15.5px;background:linear-gradient(100deg,#ffc53d,#f2a114);color:#2B004F;box-shadow:0 8px 14px rgba(242,161,20,.22),0 0 0 1px rgba(242,161,20,.20)}
.btn-fav{
width:52px;height:52px;flex-shrink:0;padding:0;border-radius:13px;
background:rgba(255,255,255,.78);border:1.5px solid rgba(43,0,79,.10);color:#7E1E57;
cursor:pointer;transition:.3s cubic-bezier(.22,1,.36,1);display:inline-flex;align-items:center;justify-content:center;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-fav svg{width:22px;height:22px;transition:.3s cubic-bezier(.22,1,.36,1)}
.btn-fav:hover{border-color:rgba(126,30,87,.4);box-shadow:0 0 0 3px rgba(126,30,87,.1)}
.btn-fav[aria-pressed="true"]{background:linear-gradient(100deg,#7E1E57,#a8316f);color:#fff;border-color:transparent}
.btn-fav[aria-pressed="true"] svg{fill:#fff}
.rev .stars{margin-bottom:12px}
.pcard-badge > span{display:inline-block;transform:skewX(calc(-1 * -5deg))}
.sep--brand .wrap{position:relative;z-index:2}
.sep--brand .eyebrow{color:#e9a9cf}
.oa-guar{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px}
.oa-guar-item{display:flex;align-items:flex-start;gap:9px}
.oa-guar-ic{
flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
background:rgba(123,191,63,.10);border:1px solid rgba(123,191,63,.24);color:#3f6f1c;
}
.oa-guar-ic svg{width:16px;height:16px}
.oa-guar-t{font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;color:#2B004F;line-height:1.25}
.oa-guar-d{font-size:11px;color:#6d6480;margin-top:1px;line-height:1.3}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-cart:focus-visible,
.btn-ghost:focus-visible,
.btn-fav:focus-visible,
.crumbs a:focus-visible,
.pcard-name a:focus-visible,
.v3-trustbar a:focus-visible{
outline:3px solid rgba(123,191,63,.55);outline-offset:2px;border-radius:8px;
}
.crumbs a,.pcard-name a,.v3-trustbar a{cursor:pointer}
.v3-trustbar{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
margin:2px 0 14px;
}
.v3-trustbar .v3-tb-item{
display:inline-flex;align-items:center;gap:8px;
font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;color:#2B004F;
background:#f5f2f9;border:1px solid rgba(43,0,79,.10);
border-radius:999px;padding:7px 14px;line-height:1.25;
}
.v3-trustbar .v3-tb-item svg{width:15px;height:15px;flex:none;color:#3f6f1c}
.v3-trustbar .v3-tb-item b{color:#3f6f1c}
.v3-trustbar .v3-tb-item a{color:#3f6f1c;text-decoration:underline;text-underline-offset:2px}
.v3-trustbar .v3-tb-item .v3-tb-stars{color:#f5b301}
.v3-midcta .btn-primary{white-space:nowrap}
.crumbs a,.rating-row .rc a{position:relative;display:inline-block;padding:4px 0}
.crumbs a::before,.rating-row .rc a::before{content:"";position:absolute;inset:-8px 0}
.v4-trust{background:linear-gradient(150deg,#3a0a63,#1a0033);border:0;margin-top:clamp(28px,4vw,44px);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.v4-trust-in{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 22px;padding:16px 0}
/* Quatre tuiles au lieu de cinq quand « Garantie PREMIUM » ne s'applique pas :
toujours sur les pages catégorie (listing multimarque), et sur les fiches
dont le fabricant n'est pas BloomLED. Sans cette règle la cinquième piste du
`repeat(5,1fr)` resterait vide et les quatre tuiles seraient tassées à
gauche. Placée AVANT la requête `max-width:900px` plus bas, qui doit
continuer à imposer ses deux colonnes sur petit écran. */
.v4-trust-in--4{grid-template-columns:repeat(4,1fr)}
.v4-trust .oa-guar-item{align-items:center}
a[data-v3-scrolltop].btn-primary{
background:linear-gradient(100deg,#ffc53d,#f2a114);
color:#2B004F;
box-shadow:0 8px 14px rgba(242,161,20,.22),0 0 0 1px rgba(242,161,20,.20);
}
.btn-cart:hover,
a[data-v3-scrolltop].btn-primary:hover{
transform:translateY(-3px);
background:linear-gradient(100deg,#ffcd52,#f5a623);
box-shadow:0 14px 22px rgba(242,161,20,.30),0 0 0 1px rgba(242,161,20,.30);
}
.btn-cart:focus-visible,
a[data-v3-scrolltop].btn-primary:focus-visible{outline:3px solid rgba(242,161,20,.45);outline-offset:2px}
.glc-head{padding-top:26px;padding-bottom:6px}
.glc-head-grid{display:block}
.glc-head-txt h1{font-family:'Russo One',sans-serif;font-size:clamp(30px,3.6vw,44px);color:#2B004F;text-transform:uppercase;font-style:italic;letter-spacing:-.5px;margin:6px 0 6px}
.glc-head-txt h1 .accent{background:linear-gradient(100deg,#7BBF3F 0%,#5e9a2a 42%,#7E1E57 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glc-count{font-family:'Poppins',sans-serif;font-size:14px;color:#6d6480;margin:0 0 12px}
.glc-count b{color:#2B004F}
.glc-seo-clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14.5px;line-height:1.7;color:#4f4760}
.glc-seo.is-open .glc-seo-clip{display:block;-webkit-line-clamp:unset;overflow:visible}
.glc-seo.is-open .v4-rm-more{display:none}
.glc-seo.is-open .v4-rm-less{display:inline}
.glc-seo.is-open .v4-readmore svg{transform:rotate(180deg)}
.glc-seo-clip h2,.glc-seo-clip h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:#2B004F;margin:14px 0 6px}
.glc-seo-clip p,.glc-seo-clip li{font-size:14.5px;line-height:1.7;color:#4f4760;margin:0 0 8px;max-width:90ch}
.glc-seo-clip ul{padding-left:18px;margin:0 0 8px}
.glc-head-visual img{width:100%;height:auto;border-radius:22px;border:1px solid rgba(43,0,79,.10);box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05)}
.glc-toolbar{
position:sticky;top:64px;z-index:39;margin-top:14px;
background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-top:1px solid rgba(43,0,79,.10);border-bottom:1px solid rgba(43,0,79,.10);
transition:top .32s cubic-bezier(.22,1,.36,1);
}
.gw-hdr-hide .glc-toolbar{top:0}
/* La barre suit le gabarit du site au lieu de filer d'un bord a l'autre. Son
.wrap interne doit alors remplir la barre : sinon le 90% s'appliquerait une
seconde fois et rentrerait le contenu de 80px de plus. La gouttiere mobile
reste portee par ce .wrap interne, pas par la barre. */
.glc-toolbar{max-width:var(--gw-wrap,min(90%,1600px));margin-left:auto;margin-right:auto}
.glc-toolbar > .wrap{max-width:none}
/* Sous 1100px, la gouttiere passe de .wrap a la barre elle-meme : un padding
laisserait le fond translucide deborder de 14px de chaque cote du contenu.
On retrecit donc la BOITE de 2x14px — le bord du fond tombe alors
exactement sur le bord du texte, et sur celui de l'en-tete. */
@media(max-width:1100px){
.glc-toolbar{max-width:calc(var(--gw-wrap,min(90%,1600px)) - 28px)}
.glc-toolbar > .wrap{padding-left:0;padding-right:0}
}
.glc-toolbar-in{display:flex;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px}
.glc-filter-btn{
display:none;align-items:center;gap:7px;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:#2B004F;
background:rgba(255,255,255,.78);border:1.5px solid rgba(43,0,79,.10);border-radius:10px;padding:8px 13px;cursor:pointer;
}
.glc-filter-btn svg{width:15px;height:15px}
.glc-showing{font-family:'Poppins',sans-serif;font-size:12.5px;color:#6d6480}
.glc-showing b{color:#2B004F}
.glc-sort,.glc-show{display:flex;align-items:center;gap:7px;font-family:'Poppins',sans-serif;font-size:12.5px;color:#6d6480}
.glc-sort{margin-left:auto}
.glc-sort select,.glc-show select{
font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:#2B004F;
background:rgba(255,255,255,.78);border:1.5px solid rgba(43,0,79,.10);border-radius:9px;padding:7px 10px;cursor:pointer;outline:none;
}
.glc-sort select:focus-visible,.glc-show select:focus-visible{border-color:#7BBF3F;box-shadow:0 0 0 3px rgba(123,191,63,.15)}
.glc-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:26px;padding-top:22px;padding-bottom:44px;position:relative}
/* ═══ Listings sans colonne de filtres — 24/08/2026 ═══
La page « Nouveaux produits » réutilise la structure de la catégorie mais
n'a ni facette ni description à filtrer : sans ce modificateur, la grille
partait dans la deuxième piste et laissait les 248 px de la colonne absente
en blanc à gauche. */
.glc-body--full{grid-template-columns:minmax(0,1fr)}
/* Visuel de marque en tête de page fabricant : il vivait dans le
, sans
alt et sans taille contrainte. Sorti du titre, il lui faut une borne. */
.glc-head-logo{max-height:56px;width:auto;margin:0 0 10px;object-fit:contain}
/* ═══ Grille des listes d'entités — marques, fournisseurs — 24/08/2026 ═══
Ces deux pages servaient encore des
flottants en grille Bootstrap, dont
l'appartenance à une ligne était calculée par {math equation="(total%perLine)"}
et des classes first-in-line / last-in-line. Relevé à l'écran : les cartes ne
s'alignaient pas, la première rangée démarrait à 310 px avec un creux à
gauche, et l'unique fournisseur de la boutique occupait une carte de 1 430 px
de large pour trois lignes de texte.
Une grille CSS remplace tout ça. `auto-fill` plutôt que des paliers : le
contenu d'une carte de marque est un logo et deux courtes lignes, sa largeur
utile ne dépend pas de la fenêtre — 200 px suffisent partout, et le nombre de
colonnes suit tout seul (6 à 1440, 7 à 1920, 1 à 390). */
.entgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.entcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
padding:18px 14px;background:#fff;border:1px solid var(--gw-n150,#f1ecf6);border-radius:var(--gw-r-lg,16px);
transition:.22s cubic-bezier(.22,1,.36,1)}
a.entcard:hover{border-color:rgba(123,191,63,.42);transform:translateY(-2px);
box-shadow:0 1px 2px rgba(43,0,79,.05),0 10px 24px rgba(43,0,79,.08)}
/* Hauteur de logo fixe : sans elle, une marque au logo haut décalait toute sa
rangée, la grille alignant les cartes sur la plus grande. */
.entcard-logo{display:flex;align-items:center;justify-content:center;height:52px;width:100%}
.entcard-logo img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.entcard-n{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:#2B004F;line-height:1.25}
.entcard-c{font-family:'Poppins',sans-serif;font-size:12px;color:#6d6480}
/* Une marque sans produit n'est pas cliquable — c'était déjà le cas dans le
gabarit d'origine. On le rend lisible plutôt que de le laisser deviner. */
.entcard.is-empty{background:var(--gw-n50,#f8f5fd);border-color:transparent}
.entcard.is-empty .entcard-n{color:#6d6480;font-weight:500}
.entcard.is-empty .entcard-logo img{opacity:.55}
@media(max-width:560px){.entgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
.glc-toolbar-in--nofilter{justify-content:flex-start}
/* ═══ Quatre produits par ligne sur les listings SANS colonne de filtres ═══
Demandé le 24/08. La page catégorie garde ses trois colonnes : elle loge en
plus 248 px de facettes, et personne n'a demandé d'y toucher. Toutes les
autres — nouveautés, promotions, meilleures ventes, recherche, fabricant,
fournisseur — passent à quatre : ce sont exactement celles qui portent
`glc-body--full`, donc celles qui ont la largeur pour.
L'échelle est graduée sur la largeur de carte, pas sur des paliers ronds :
à 1150 px de fenêtre, quatre colonnes ne feraient que 235 px de carte, et
l'audit de juillet a déjà montré qu'en dessous de ~250 px le nom du produit,
le prix et le bouton d'ajout ne tiennent plus (c'est ce qui avait fait
passer la grille à une seule colonne sous 560 px).
Sans colonne de filtres, la grille dispose ici de 248 px de plus qu'en
catégorie à largeur de fenêtre égale : le palier à trois colonnes peut donc
descendre jusqu'à 1024 px, là où la catégorie repasse à deux dès 1150.
Sans ça, la page affichait des cartes de 464 px à 1024 — plus larges qu'à
1200 — ce qui reproduisait le défaut d'origine, en pire.
>= 1360 px 4 colonnes (308 px de carte à 1360, 328 à 1440, 381 à 1920)
1151-1359 3 colonnes (hérité)
1024-1150 3 colonnes (280 px de carte à 1024)
561-1023 2 colonnes (hérité)
<= 560 1 colonne (hérité) */
/* CRO-011 (choix client 04/09/2026) : la page catégorie passe elle aussi à 4 colonnes
au-delà de 1360 px. Les autres listings l'étaient déjà ; la catégorie, avec sa colonne
de filtres, restait à 3 — soit 25 % de densité en moins que la production. */
@media(min-width:1360px){
body.category .glc-grid,
body.new-products .glc-grid,body.prices-drop .glc-grid,body.best-sales .glc-grid,
body.search .glc-grid,body.manufacturer .glc-grid,body.supplier .glc-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px) and (max-width:1150px){
body.new-products .glc-grid,body.prices-drop .glc-grid,body.best-sales .glc-grid,
body.search .glc-grid,body.manufacturer .glc-grid,body.supplier .glc-grid{grid-template-columns:repeat(3,1fr)}
}
.glc-side{align-self:start;position:sticky;top:130px}
.glc-side-head{display:none}
.glc-facet{border:1px solid rgba(43,0,79,.10);border-radius:13px;background:rgba(255,255,255,.78);padding:13px 14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05)}
.glc-facet-t{font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:#2B004F;margin-bottom:9px}
.glc-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#4f4760;padding:4px 0;cursor:pointer}
.glc-check b{color:#7e7099;font-weight:600;font-size:11.5px;margin-left:auto}
.glc-check input{position:absolute;opacity:0;pointer-events:none}
.glc-check input:checked + .box{background:#7BBF3F;border-color:#7BBF3F}
.glc-check input:checked + .box::after{content:"";position:absolute;inset:3px 4px 5px;border-left:2px solid #13002a;border-bottom:2px solid #13002a;transform:rotate(-45deg)}
.glc-check input:focus-visible + .box{outline:3px solid rgba(123,191,63,.35);outline-offset:1px}
.glc-price-range{display:flex;align-items:center;gap:9px;font-family:'Poppins',sans-serif;font-size:12px;color:#6d6480}
.glc-range-bar{flex:1;height:5px;border-radius:99px;background:#f1ecf6;position:relative}
.glc-range-fill{position:absolute;left:8%;right:14%;top:0;bottom:0;border-radius:99px;background:linear-gradient(100deg,#8ed04e,#5e9a2a)}
/* blocs blog sidebar — refonte Signature 02/08 : vignette + eyebrow + rang */
.glc-blog-t{position:relative;padding-bottom:8px!important;margin-bottom:6px!important}
.glc-blog-t::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:4px;border-radius:3px;
background:var(--gw-grad-key,linear-gradient(100deg,#7BBF3F,#5e9a2a,#7E1E57));transform:skewX(-15deg)}
.glc-bpost{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;
padding:8px 0;border-top:1px dashed rgba(43,0,79,.10)}
.glc-bpost:first-of-type{border-top:0}
.glc-bpost-img{position:relative;width:54px;height:54px;border-radius:10px;overflow:hidden;
background:var(--gw-n100,#f3eef9);border:1px solid var(--gw-n200,#ece5f2)}
.glc-bpost-img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform var(--gw-dur-2,200ms) var(--gw-ease-out,ease)}
.glc-bpost:hover .glc-bpost-img img{transform:scale(1.06)}
.glc-bpost-rank{position:absolute;top:-1px;left:-1px;width:19px;height:19px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(100deg,#8ed04e,#5e9a2a);color:#13002a;
font-family:'Russo One',sans-serif;font-style:italic;font-size:11px;
border-radius:10px 0 8px 0}
.glc-bpost-body{min-width:0}
.glc-bpost-cat{display:block;font-size:8.5px;font-weight:700;letter-spacing:.7px;
text-transform:uppercase;color:#7E1E57;margin-bottom:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glc-bpost-t{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;
color:#2B004F;line-height:1.32;transition:color var(--gw-dur-1,120ms) ease}
.glc-bpost:hover .glc-bpost-t{color:#3f6f1c}
.glc-bpost-d{display:block;font-size:10px;color:#6f667e;margin-top:2px}
.glc-bpost--all{display:inline-flex;align-items:center;gap:6px;
font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;color:#3f6f1c;
padding:9px 0 2px}
.glc-bpost--all svg{width:13px;height:13px;transition:transform var(--gw-dur-1,120ms) ease}
.glc-bpost--all:hover svg{transform:translateX(3px)}
.glc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* ═══ Finition « Signature » (08/2026, choix client) : liseré clé vert→magenta en tête
(opacité .55 au repos, plein au survol), prix Russo italique −5°, marque+avis sur une
ligne, favori révélé au survol, flèche dépliante dans le CTA. ═══ */
.pcard{
display:flex;flex-direction:column;background:#fff;border:1px solid rgba(43,0,79,.10);
border-radius:var(--gw-r-lg);box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05);overflow:hidden;
transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),border-color .28s;
}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
background:var(--gw-grad-key);opacity:.55;transition:opacity .25s}
.pcard:hover{transform:translateY(-4px);border-color:rgba(123,191,63,.4);
box-shadow:0 1px 2px rgba(43,0,79,.06),0 28px 64px rgba(43,0,79,.16)}
.pcard:hover::before{opacity:1}
.pcard-media{position:relative;display:block;background:#fff;border-bottom:1px solid rgba(43,0,79,.10)}
.pcard-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
.pcard-flag{
position:absolute;top:10px;left:-6px;z-index:2;
font-family:'Russo One',sans-serif;font-size:12px;letter-spacing:.5px;color:#fff;
background:linear-gradient(100deg,#a53270,#7E1E57);padding:5px 12px;border-radius:6px;
transform:skew(-5deg);box-shadow:0 4px 10px rgba(126,30,87,.3);
}
.pcard-quick{
position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(6px);
font-family:'Poppins',sans-serif;font-weight:600;font-size:11.5px;color:#2B004F;
background:rgba(255,255,255,.95);border:1px solid rgba(43,0,79,.10);border-radius:99px;padding:6px 13px;
opacity:0;transition:.2s cubic-bezier(.22,1,.36,1);pointer-events:none;white-space:nowrap;
}
.pcard:hover .pcard-quick{opacity:1;transform:translateX(-50%) translateY(0)}
.pcard-body{display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px;flex:1}
.pcard-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:15px}
.pcard-brand{font-family:'Poppins',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--gw-magenta-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-row1 .pcard-rating{margin:0;flex:none;font-size:10.5px}
/* AUDIT 08/2026 — la boîte faisait 11 px pour un glyphe dessiné en 16 px,
avec overflow:hidden : les étoiles étaient rognées et se lisaient comme
des chevrons jaunes, sur chaque carte de chaque liste du site. */
.pcard-row1 .pcard-rating .star{width:16px!important;height:16px!important;overflow:visible!important}
.pcard-row1 .pcard-rating .star_content{overflow:visible!important;height:auto!important}
.pcard-row1 .pcard-rating .star_label{font-size:10.5px}
.pcard-name{font-family:'Poppins',sans-serif;font-weight:600;color:#2B004F;margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;font-size:13.5px}
.pcard-name a{color:#2B004F;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pcard-name a:hover{color:#3f6f1c}
.pcard-rating{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#6d6480}
.pcard-rating .stars{font-size:12px}
.pcard-rating--none{color:#a99fbb;font-size:11px}
.pcard-stock{display:flex;align-items:center;gap:5px;font-family:'Poppins',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.02em;color:#3f6f1c}
.pcard-stock .dot{width:6px;height:6px;border-radius:50%;background:var(--gw-green-500);box-shadow:0 0 5px rgba(123,191,63,.6)}
/* P4 : l'état « expédition différée » parle ambre, pas vert (sémantique brandbook) */
.pcard-stock--out{color:var(--gw-warn-fg)!important}
.pcard-stock--out .dot{background:var(--gw-gold-500)!important;box-shadow:0 0 5px rgba(242,161,20,.6)!important}
.pcard-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:9px;padding-top:7px}
.pcard-prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%}
.pcard-price{font-family:'Russo One',sans-serif;font-size:20px;color:#2B004F;letter-spacing:-.3px;
font-style:italic;transform:skewX(-5deg);display:inline-block;font-variant-numeric:tabular-nums;line-height:1}
.pcard-price sup{font-size:12px;vertical-align:5px;letter-spacing:0}
.produitenpromo .pcard-price{color:var(--gw-danger-fg)}
.pcard-old{font-size:12px;color:#a99fbb;text-decoration:line-through}
.pcard-alma{margin-left:auto;font-family:'Poppins',sans-serif;font-weight:500;font-size:10.5px;color:var(--gw-n500);white-space:nowrap}
.pcard-actions{display:flex;gap:8px}
.pcard-atc{flex:1;height:40px;padding:0 10px;font-size:13px;gap:7px}
.pcard-atc svg{width:15px;height:15px}
.pcard-fav{width:40px;height:40px;flex:none;border-radius:10px}
.pcard-fav svg{width:16px;height:16px}
.glc-pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:28px}
.glc-page{
min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;color:#2B004F;
background:rgba(255,255,255,.78);border:1.5px solid rgba(43,0,79,.10);border-radius:10px;transition:.15s;
}
a.glc-page:hover{border-color:rgba(123,191,63,.5);box-shadow:0 0 0 1px rgba(123,191,63,.18),0 6px 16px rgba(123,191,63,.10);transform:translateY(-1px)}
.glc-page.is-current{background:linear-gradient(100deg,#8ed04e,#5e9a2a);color:#13002a;border-color:transparent}
.glc-page--dots{border:0;background:none;color:#a99fbb}
.glc-page--next{gap:5px}
.glc-page--next svg{width:14px;height:14px}
.glc-scrim{display:none}
.glc-subs-wrap{margin-top:12px;position:relative}
/* overflow-x:auto force aussi overflow-y à auto (spec CSS) : sans marge verticale,
le hover (translateY + scale ci-dessous) se fait rogner en haut/bas du rail.
Marge ajoutée + compensée sur le wrapper pour ne pas décaler la mise en page. */
.glc-subs{display:flex;gap:9px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:8px 2px 10px;margin:-8px -2px -10px}
.glc-subs::-webkit-scrollbar{display:none}
/* Affordance de scroll : la scrollbar est masquée et il n'y a pas de flèche prev/next,
rien n'indique qu'on peut faire défiler vers les catégories hors champ. */
.glc-subs-wrap::after{
content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
background:linear-gradient(to right,transparent,#fff);
}
.glc-sub{
flex:none;display:flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;
background:#fff;border:1.5px solid rgba(43,0,79,.14);border-radius:99px;
box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05);
transition:.22s cubic-bezier(.22,1,.36,1);
}
.glc-sub:hover{
border-color:#7BBF3F;background:#fff;transform:translateY(-3px) scale(1.015);
box-shadow:0 0 0 2px rgba(123,191,63,.22),0 12px 26px rgba(123,191,63,.18),0 2px 6px rgba(43,0,79,.06);
}
.glc-sub-im{width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;background:#f5f2f9;border:1.5px solid rgba(43,0,79,.12)}
.glc-sub-im img{width:100%;height:100%;object-fit:cover;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.glc-sub:hover .glc-sub-im img{transform:scale(1.1)}
.glc-sub-t{font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;color:#2B004F;white-space:nowrap}
.glc-sub:hover .glc-sub-t{color:#3f6f1c}
.glc-minipager{display:inline-flex;align-items:center;gap:5px;font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;color:#2B004F}
.glc-mp-sep,.glc-mp-tot{color:#8a7ea3;font-weight:600}
.glc-mp-next{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(43,0,79,.10);border-radius:8px;color:#2B004F}
.glc-mp-next:hover{border-color:rgba(123,191,63,.5)}
.glc-mp-next svg{width:13px;height:13px}
.glc-tags{display:flex;flex-wrap:wrap;gap:6px}
.glc-tag{
font-family:'Poppins',sans-serif;font-weight:600;font-size:11.5px;color:#4f4760;
background:#fff;border:1px solid rgba(43,0,79,.10);border-radius:99px;padding:4px 10px;transition:.15s;
}
.glc-tag:hover{color:#3f6f1c;border-color:rgba(123,191,63,.5)}
@keyframes b3tick{to{transform:translateX(-50%)}}
@keyframes b3pulse{
0%{box-shadow:0 0 0 0 rgba(123,191,63,.35),0 0 7px rgba(123,191,63,.5)}
70%{box-shadow:0 0 0 8px rgba(123,191,63,0),0 0 7px rgba(123,191,63,.5)}
100%{box-shadow:0 0 0 0 rgba(123,191,63,0),0 0 7px rgba(123,191,63,.5)}
}
@keyframes m3sheen{0%{transform:translateX(-100%) skewX(-5deg)}55%,100%{transform:translateX(300%) skewX(-5deg)}}
@keyframes m3pulse{
0%{box-shadow:0 0 0 0 rgba(123,191,63,.35),0 0 7px rgba(123,191,63,.5)}
70%{box-shadow:0 0 0 8px rgba(123,191,63,0),0 0 7px rgba(123,191,63,.5)}
100%{box-shadow:0 0 0 0 rgba(123,191,63,0),0 0 7px rgba(123,191,63,.5)}
}
@keyframes m3pulse-m{
0%{box-shadow:0 0 0 0 rgba(126,30,87,.35),0 0 7px rgba(126,30,87,.45)}
70%{box-shadow:0 0 0 7px rgba(126,30,87,0),0 0 7px rgba(126,30,87,.45)}
100%{box-shadow:0 0 0 0 rgba(126,30,87,0),0 0 7px rgba(126,30,87,.45)}
}
@keyframes m3pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes oad4SlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.btn,.pcard,.rev,.thumb,.hud-chip,.stage-img,.btn-fav{transition:none !important}.v3-subnav a::after,.v3-photolink svg,.v3-trustbar .v3-tb-item{transition:none !important}}
@media(min-width:441px){.pg-a .buy-actions .btn-cart{flex:1 1 auto;min-width:0;padding:0 12px}}
@media(max-width:1150px){.glc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.glc-body{grid-template-columns:1fr}.glc-filter-btn{display:inline-flex}.glc-side{
position:fixed;inset:0 auto 0 0;width:min(320px,86vw);z-index:998;
background:#fff;box-shadow:0 0 40px rgba(43,0,79,.25);
transform:translateX(-106%);transition:transform .3s cubic-bezier(.22,1,.36,1);
overflow-y:auto;padding:16px 16px 24px;top:0;
}.glc-side.is-open{transform:translateX(0)}.glc-side-head{display:flex;align-items:center;justify-content:space-between;font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;color:#2B004F;margin-bottom:12px}.glc-side-close{width:34px;height:34px;border:1.5px solid rgba(43,0,79,.10);border-radius:9px;background:#fff;cursor:pointer;color:#2B004F;display:inline-flex;align-items:center;justify-content:center}.glc-side-close svg{width:15px;height:15px}.glc-scrim{display:block;position:fixed;inset:0;z-index:997;background:rgba(26,0,51,.45);opacity:0;pointer-events:none;transition:opacity .25s}.glc-scrim.is-on{opacity:1;pointer-events:auto}}
@media(max-width:940px){.glc-head-grid{grid-template-columns:1fr}.glc-head-visual{display:none}}
@media(max-width:900px){.v4-trust-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.glc-show{display:none}.glc-showing{display:none}.glc-minipager{display:none}}
@media(max-width:560px){.actions .iconbtn span{display:none}.actions .iconbtn{padding:9px}.oa-guar{grid-template-columns:1fr}.v3-trustbar{gap:6px 8px}.v3-trustbar .v3-tb-item{font-size:11.5px;padding:6px 11px}.v3-midcta .btn-primary{width:100%}.glc-grid{gap:10px}.pcard-body{padding:10px 10px 11px}.pcard-price{font-size:17px}.pcard-atc{font-size:12px;gap:5px}}
@media(max-width:480px){.v4-trust-in{gap:10px 12px}.v4-trust .oa-guar-d{display:none}}
@media(max-width:440px){.pg-a .buy-actions .btn-cart{order:2;flex:1 1 auto;min-width:0}.pg-a .buy-actions .btn-fav{order:3}}
/* Famille .v4-readmore/.v4-rm/.v4-lead (bouton lire-la-suite) — extraction complémentaire */
.v4-lead .v4-lead-clip{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
overflow:hidden;
}
.v4-lead.is-open .v4-lead-clip{display:block;-webkit-line-clamp:unset;overflow:visible}
.v4-readmore{
margin-top:4px;display:inline-flex;align-items:center;gap:5px;
background:none;border:0;padding:4px 0;cursor:pointer;
font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;color:#5e9a2a;
}
.v4-readmore svg{width:15px;height:15px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.v4-readmore:hover{text-decoration:underline}
.v4-readmore .v4-rm-less{display:none}
.v4-lead.is-open .v4-readmore .v4-rm-more{display:none}
.v4-lead.is-open .v4-readmore .v4-rm-less{display:inline}
.v4-lead.is-open .v4-readmore svg{transform:rotate(180deg)}
.pgv-b .pgv-info .v4-lead-clip{-webkit-line-clamp:7}
/* ===== Surcharges anti-thème warehouse (listing E4) ===== */
/* le fil d'ariane maquette (nav.crumbs) remplace celui du thème */
.breadcrumb{display:none!important}
/* checkbox facettes : le thème a une classe .box générique envahissante */
.glc-check .box{flex:none;border:1.5px solid rgba(43,0,79,.10);border-radius:5px;background:#fff;transition:.15s;width:16px!important;height:16px!important;min-width:0!important;margin:0!important;padding:0!important;float:none!important;position:static!important;display:inline-block!important}
/* bouton ATC pcard : réaffirmer le vert maquette contre le .btn or du thème */
.pcard-atc.btn, a.pcard-atc{background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;border:1px solid transparent!important;text-transform:none!important}
.pcard-atc.btn:hover, a.pcard-atc:hover{background:linear-gradient(100deg,#9ade5e,#6caa38)!important;color:#13002a!important}
/* wishlist du hook natif : bouton icône cœur façon .btn-fav maquette */
.pcard-fav-wrap .addToWishlist{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid rgba(43,0,79,.12);border-radius:10px;background:#fff no-repeat center/18px url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B004F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");font-size:0!important;color:transparent!important;overflow:hidden}
.pcard-fav-wrap .addToWishlist:hover{border-color:#7E1E57}
.pcard-fav-wrap .addToWishlist i{display:none}
/* Articles similaires (ybc_blog sur displayFooterCategory) + titre FAQ : même famille visuelle carte blanche/ombre */
.glc-related-title{
font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(19px,2.2vw,24px);
color:#2B004F;margin:0 0 18px;letter-spacing:-.2px;
}
.glc-related{
background:#fff;border:1px solid rgba(43,0,79,.08);border-radius:20px;
box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05);
padding:clamp(22px,3vw,34px) clamp(20px,3vw,32px);margin:34px 0;
}
/* input natif des facettes : masqué (le span.box rend l'état), anti-reset thème */
.glc-check input[type=checkbox]{position:absolute!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;margin:0!important}
/* uniform.js du thème wrappe les checkbox (div.checker) : masqué, état géré en JS (.is-on) */
.glc-check .checker{display:none!important}
.glc-check.is-on .box{background:#7BBF3F!important;border-color:#7BBF3F!important}
.glc-check.is-on .box::after{content:"";display:block;width:100%;height:100%;background:no-repeat center/10px url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* La colonne gauche warehouse (off-canvas, 313px réservés) décalait tout le contenu :
la sidebar E4 la remplace → centre pleine largeur */
#left_column{display:none!important}
#center_column{width:100%!important;float:none!important;left:0!important;right:0!important}
/* ═══ Retrait du .container Bootstrap de la page ═══════════════════════════
.columns-container > .container pose padding:0 15px ; .row.content-inner le
compense a -10px et #center_column le remet a +10px : net 15px de chaque
cote. Le 90% de --gw-wrap se calculait donc sur 1410 au lieu de 1440, et tout
le contenu tombait 14px a droite du bord de l'en-tete. On rend la colonne
aussi large que la fenetre : le centrage fait le reste, sans unite vw (qui
compterait la barre de defilement et re-decalerait dans un vrai navigateur).
Effet de bord assume : .glc-toolbar, qui vivait sur la boite de contenu,
passe pleine largeur — comme .v4-trust et .pgc-bar le sont deja. */
.columns-container > .container{padding-left:0;padding-right:0}
.row.content-inner{margin-left:0;margin-right:0}
#center_column{padding-left:0;padding-right:0}
/* Le gabarit vit desormais sur --gw-wrap (regle .wrap en tete de fichier) :
ce bloc posait 1620px FIGE en visant l'alignement sur l'en-tete, qui est
fluide — les deux ne coincidaient a aucune largeur. */
/* ===== Compactage CRO du haut de page : atteindre subs/produits plus vite ===== */
@media(min-width:1100px){
/* crumbs (gauche) + bande de confiance (droite) sur une seule ligne */
.wrap:has(> .crumbs){display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;padding-bottom:0;margin-bottom:0}
.wrap:has(> .crumbs) .crumbs{padding:0;margin:0}
.wrap:has(> .crumbs) .crumbs ol{padding:0;margin:0}
.wrap:has(> .crumbs) .v3-trustbar{margin:0;padding:0;border:0;background:none;flex-wrap:nowrap;white-space:nowrap}
}
@media(min-width:901px){
.wrap.glc-head{padding-top:12px}
.glc-head-grid{gap:0}
.glc-head .eyebrow{margin:0 0 4px}
.glc-head-txt h1{margin:0 0 2px}
.glc-count{margin:0 0 6px}
.glc-seo-clip{-webkit-line-clamp:2}
.glc-seo{margin:0}
.glc-subs-wrap{padding-top:10px;padding-bottom:0;margin-bottom:0}
.glc-toolbar{margin-top:10px}
}
@media(min-width:1100px){
/* réduire l'empilement de paddings sous le header */
#columns{padding-top:8px!important}
.wrap:has(> .crumbs){padding-top:6px}
/* head 2 colonnes : titre à gauche, intro SEO clampée à droite → ~140px gagnés */
.glc-head-txt{display:grid;grid-template-columns:minmax(0,auto) minmax(0,58ch);gap:2px 56px;align-items:start}
.glc-head-txt .eyebrow{grid-column:1}
.glc-head-txt h1{grid-column:1}
.glc-head-txt .glc-count{grid-column:1;margin:0}
.glc-head-txt .glc-seo{grid-column:2;grid-row:1 / span 3;margin-top:4px}
}
@media(min-width:1100px){
/* description dépliée : pleine largeur sous le titre (colonne étroite illisible) */
.glc-head-txt .glc-seo.is-open{grid-column:1 / -1;grid-row:auto}
}
/* ═══════════════ E4 · grille produits catégorie — V2 "Prix en valeur" ═══════════════ */
/* wishlist flottant sur l'image (déplacé depuis le pied de carte) */
.pcard-media-wrap{position:relative}
.pcard-fav-wrap--float{position:absolute;right:10px;top:10px;z-index:3;transition:opacity .18s,transform .18s}
@media(hover:hover){
.pcard-fav-wrap--float{opacity:0;transform:translateY(-4px)}
.pcard:hover .pcard-fav-wrap--float,.pcard:focus-within .pcard-fav-wrap--float{opacity:1;transform:none}
}
.pcard-fav-wrap--float .addToWishlist{width:32px!important;height:32px!important;border-radius:50%!important;background-color:rgba(255,255,255,.88)!important;backdrop-filter:blur(4px);box-shadow:0 3px 10px rgba(43,0,79,.12)}
/* bande prix tintée + paiement fractionné pleine largeur */
/* Signature : plus de bande teintée — pied blanc, simple filet neutre */
.pcard-payband{background:none;border-top:1px solid var(--gw-n150);margin:8px -13px -13px;padding:10px 13px 13px}
/* CTA pleine largeur, or (cohérence site : commander/ajouter = or) */
.pcard-payband .pcard-actions{display:block}
.pcard-payband .pcard-atc.btn,.pcard-payband a.pcard-atc{
width:100%;justify-content:center;
background:linear-gradient(100deg,#ffc53d,#f2a114)!important;color:#2B004F!important;
border:0!important;box-shadow:0 6px 14px rgba(242,161,20,.28)}
.pcard-payband .pcard-atc.btn:hover,.pcard-payband a.pcard-atc:hover{filter:brightness(1.04);background:linear-gradient(100deg,#ffc53d,#f2a114)!important;color:#2B004F!important}
.pcard-atc{border-radius:12px!important}
.pcard-arr{width:0;height:15px;flex:none;opacity:0;transition:width .22s cubic-bezier(.22,1,.36,1),opacity .18s}
.pcard:hover .pcard-arr{width:15px;opacity:1}
/* liseré stock discret en pied de carte (vert=en stock, orange=indisponible) */
.pcard{position:relative}
.pcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2}
.pcard.gw-av-now::after{background:var(--gw-green-500)}
.pcard.gw-av-later::after{background:var(--gw-gold-500)}
.pcard.gw-av-off::after{background:var(--gw-n400)} /* P4 : indisponible à la vente — liseré neutre */
@media(max-width:640px){
.pcard-payband{margin:8px -10px -11px;padding:9px 10px 11px}
}
/* fond violet plein + vagues : texte clair */
.v4-trust{color:#fff}
.v4-trust .oa-guar-ic{background:rgba(255,255,255,.1) !important;border-color:rgba(123,191,63,.4) !important;color:#9bd968 !important}
.v4-trust .oa-guar-t{color:#fff !important}
.v4-trust .oa-guar-d{color:rgba(255,255,255,.62) !important}
/* --- Audit 2026-07 : modules/themeeditor/css/themeeditor_s_1.css (residu du
theme « warehouse ») impose `color:#777` via des selecteurs a forte
specificite du type `.not-index #columns .content-inner #center_column a`
(2 ID, 2 classes). Il ecrasait silencieusement les couleurs E4 et faisait
tomber le contraste sous le seuil WCAG. On reancre explicitement les
composants concernes, avec une specificite strictement superieure
(2 ID, 3 classes) pour gagner quel que soit l'ordre de chargement. --- */
#columns .content-inner #center_column .glc-tags a.glc-tag,
.glc-tags a.glc-tag {
color: #4f4760;
}
#columns .content-inner #center_column .ccard-name a,
.ccard-name a {
color: #2B004F;
}
/* --- Audit 2026-07 : sous 560px la grille restait a 2 colonnes de 166px.
Le nom du produit, le prix et le bouton d'ajout au panier n'y tenaient pas :
144 textes tronques et 36 elements hors ecran en mobile. --- */
@media (max-width: 560px) {
.glc-grid {
grid-template-columns: 1fr;
}
}
/* --- Audit 2026-07 : un