/* === e4-header.css === */
/* =============================================================================
E4 · header V5 (hybride néon + nav claire) + footer — jalon 2
Override CSS pur : le markup (ets_megamenu, iqit-search, shopping_cart)
reste intact → mega-menu, liens et modules préservés.
Référence : maquette-header-v5.html + maquette-home-v2.html
============================================================================= */
/* ---------- 1) TOPBAR (#header > .nav) : gradient encre → magenta ---------- */
#header > .nav{
background:linear-gradient(90deg,#12002a,#2B004F 55%,#3d0d2e)!important;
border-bottom:1px solid rgba(123,191,63,.25);
padding:0!important;height:30px;font-size:12px;
}
#header > .nav, #header > .nav a{color:#c7bcd9!important}
#header > .nav a:hover{color:#9bdc5c!important}
#header > .nav b, #header > .nav strong, #header > .nav .phone{color:#9bdc5c!important}
/* ---------- 2) BARRE PRINCIPALE (.gw-h2) : encre profonde + filet ---------- */
#header > div:has(> .container-header.gw-h2){background:#1a0033}
.container-header.gw-h2{
background:#1a0033!important;
position:relative;
}
#header > div:has(> .container-header.gw-h2)::after{
content:"";display:block;height:1px;
background:linear-gradient(90deg,transparent,rgba(123,191,63,.8),rgba(126,30,87,.8),transparent);
}
/* logo : halo vert discret */
.gw-h2 img[src*="logo"]{filter:drop-shadow(0 0 14px rgba(123,191,63,.25));transition:filter var(--gw-dur-2) var(--gw-ease-out)}
.gw-h2 a:hover img[src*="logo"]{filter:drop-shadow(0 0 20px rgba(123,191,63,.45))}
/* ---------- 3) RECHERCHE (iqit-search) : pill blanche halo néon ---------- */
#search_block_top form, #search_block_top .search-input-wrapper, #search_block_top{position:relative}
/* audit cross-fichier 13/07 : sur l'input réel (#search_query_top), background/color/box-shadow
ci-dessous sont TOUJOURS battus par custom-growled-2026-260427.css (.gw-h2 #searchbox
input#search_query_top, spécificité supérieure) → supprimés (morts, prouvé via getComputedStyle
en live, focus et hors-focus). border-radius reste car il gagne réellement (mais sans effet
visible tant que border et box-shadow de cet input restent à 0/none). Le vrai halo focus visible
est piloté par la règle #search_block_top form#searchbox:focus-within plus bas (section 7). */
#search_block_top input[type="text"], #search_block_top input[type="search"], #search_block_top #search_query_top{
border:0!important;
border-radius:12px!important;
transition:box-shadow var(--gw-dur-2) var(--gw-ease-out);
}
#search_block_top .button-search{
background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;
border:0!important;border-radius:9px!important;
font-family:'Russo One',sans-serif!important;text-transform:uppercase;letter-spacing:.5px;
transform:skew(-5deg);transition:.2s;
}
#search_block_top .button-search:hover{filter:brightness(1.07);box-shadow:0 4px 12px rgba(123,191,63,.4)}
/* ---------- 4) PANIER : OR exclusif (acte d'achat) ---------- */
.shopping_cart > a:first-child{
background:linear-gradient(100deg,#ffc53d,#f2a114)!important;
color:#2B004F!important;border:0!important;border-radius:11px!important;
box-shadow:0 0 20px rgba(242,161,20,.45)!important;transition:var(--gw-dur-2) var(--gw-ease-out)!important;
}
.shopping_cart > a:first-child:hover{
background:linear-gradient(100deg,#ffcd52,#f5a623)!important;
transform:translateY(-1px);box-shadow:0 4px 24px rgba(242,161,20,.6)!important;
}
.shopping_cart > a:first-child *, .shopping_cart > a:first-child b{color:#2B004F!important}
.shopping_cart .ajax_cart_quantity{background:#2B004F!important;color:#ffc53d!important}
/* autres actions (compte / souhaits) : claires sur encre */
.gw-h2 a:not(.shopping_cart a){color:#e6dff2}
.gw-h2 .header_user_info a, .gw-h2 [class*="user"] a, .gw-h2 [class*="wishlist"] a{color:#e6dff2!important}
.gw-h2 .header_user_info a:hover, .gw-h2 [class*="wishlist"] a:hover{color:#9bdc5c!important}
/* ---------- 5) MENU (ets_megamenu) : nav claire signature ---------- */
.ets_mm_megamenu{
background:rgba(255,255,255,.94)!important;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
position:relative;box-shadow:0 10px 24px rgba(43,0,79,.06);
transition:transform var(--gw-dur-3) var(--gw-ease-out);
}
.ets_mm_megamenu::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
background:linear-gradient(100deg,#7BBF3F 0%,#5e9a2a 42%,#7E1E57 100%);
}
.ets_mm_megamenu .mm_menus_ul{background:transparent!important}
.mm_menus_li{border:0!important}
.mm_menus_li > a.ets_mm_url, .mm_menus_li > a.ets_mm_url .mm_menu_content_title{
color:#2B004F!important;font-family:'Poppins',sans-serif!important;font-weight:600!important;
background:transparent!important;
}
.mm_menus_li > a.ets_mm_url{border-bottom:3px solid transparent!important;transition:color var(--gw-dur-2) var(--gw-ease-out),border-color var(--gw-dur-2) var(--gw-ease-out)!important}
.mm_menus_li:hover > a.ets_mm_url, .mm_menus_li > a.ets_mm_url:hover,
.mm_menus_li:hover > a.ets_mm_url .mm_menu_content_title{
color:#5e9a2a!important;border-bottom-color:#7BBF3F!important;background:transparent!important;
}
/* items colorés conservés (repères marchands actuels) */
.mm_menus_li.menu-packs > a, .mm_menus_li:nth-last-child(2) > a .mm_menu_content_title{color:#7E1E57!important}
.mm_menus_li:last-child > a .mm_menu_content_title{color:#3e6b1a!important}
/* badge « EN CE MOMENT » : magenta E4 au lieu du jaune */
.mm_menus_li [class*="badge"], .mm_menus_li [class*="label"]{
background:#7E1E57!important;color:#fff!important;border-radius:99px!important;
}
/* header Signature 02/08 : auto-hide du menu retiré (le menu reste dans le flux ;
gw-hdr-hide pilote désormais la barre marchande .gw-sbar, §14) */
@media (prefers-reduced-motion:reduce){.ets_mm_megamenu{transition:none}}
/* ---------- 6) FOOTER : liseré signature (le footer lui-même = e4-footer.css, maquette sombre) ---------- */
.footer-container{border-top:3px solid transparent;border-image:linear-gradient(100deg,#7BBF3F,#5e9a2a,#7E1E57) 1}
.footer-container a:hover{color:#8ed04e}
/* ---------- 7) Retouches v3 (styles inline module + jumeaux custom) ---------- */
/* bouton recherche réel = #searchbox button[type=submit] (jumeau .button-search) */
#searchbox button[type="submit"], #search_block_top .button-search,
.gw-h2 #searchbox button[type="submit"]{
background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;
border:0!important;border-radius:9px!important;box-shadow:none!important;
transform:skew(-5deg);
}
#searchbox button[type="submit"] span, #search_block_top .button-search span,
#searchbox button[type="submit"] *{
font-family:'Russo One',sans-serif!important;color:#13002a!important;
text-transform:uppercase;letter-spacing:.5px;
}
#searchbox button[type="submit"]:hover{filter:brightness(1.07);box-shadow:0 4px 12px rgba(123,191,63,.4)!important}
/* cadre du champ : tuer le liseré rose, halo vert sur le conteneur */
#search_block_top form, #searchbox, .search_query_container{
border-color:transparent!important;box-shadow:none!important;
}
#search_block_top .search_query_container, #searchbox{
background:#fff!important;border-radius:12px!important;
box-shadow:0 0 0 1.5px rgba(123,191,63,.4),0 0 14px rgba(123,191,63,.14)!important;
}
#search_block_top:focus-within .search_query_container, #searchbox:focus-within{
box-shadow:0 0 0 2px rgba(123,191,63,.75),0 0 30px rgba(123,191,63,.35)!important;
}
/* items menu : fonds inline neutralisés, couleurs texte E4 conservées (couleurs déjà posées section 5, L91-92 : .mm_menus_li est toujours contenu dans .ets_mm_megamenu) */
.ets_mm_megamenu .mm_menus_li{background:transparent!important}
/* badge « EN CE MOMENT » : magenta E4 (était jaune) */
.mm_bubble_text{
background:#7E1E57!important;color:#fff!important;border-radius:99px!important;
font-family:'Poppins',sans-serif!important;font-weight:700!important;
}
/* le conteneur interne n'a plus besoin de son propre halo */
#search_block_top .search_query_container{box-shadow:none!important}
/* spécificité max : le halo rose venait d'un sélecteur type .gw-h2 #searchbox!important */
#search_block_top form#searchbox, .gw-h2 form#searchbox, #header form#searchbox{
box-shadow:0 0 0 1.5px rgba(123,191,63,.4),0 0 14px rgba(123,191,63,.14)!important;
border:0!important;border-radius:12px!important;background:#fff!important;
}
#search_block_top form#searchbox:focus-within, #header form#searchbox:focus-within{
box-shadow:0 0 0 2px rgba(123,191,63,.75),0 0 30px rgba(123,191,63,.35)!important;
}
/* ============================================================================
8) REFONTE ACTIONS + POPUP PANIER (jalon 2b)
============================================================================ */
/* ---- actions : cadres supprimés, colonne icône+label, hover vert ---- */
.gw-h2 .gw-h2-wishlist, .gw-h2 a.login{
background:transparent!important;border:0!important;box-shadow:none!important;
color:#e6dff2!important;border-radius:10px!important;
transition:var(--gw-dur-2) var(--gw-ease-out)!important;
}
.gw-h2 .gw-h2-wishlist:hover, .gw-h2 a.login:hover{
color:#9bdc5c!important;background:rgba(123,191,63,.08)!important;transform:none!important;
}
/* ---- icônes legacy → SVG E4 (mask, colorées par currentColor) ---- */
.gw-h2 .gw-h2-wishlist i.icon-heart-o, .gw-h2 a.login i.icon-signin,
.shopping_cart > a:first-child i.icon-truck{
font-size:0!important;line-height:0!important;
width:22px;height:22px;display:inline-block;
background-color:currentColor;
-webkit-mask:var(--e4-ic) center/contain no-repeat;mask:var(--e4-ic) center/contain no-repeat;
}
.gw-h2 .gw-h2-wishlist i.icon-heart-o{
--e4-ic:url("data:image/svg+xml;utf8,"); /* P2 : icône i-souhaits du set ADN */
}
.gw-h2 a.login i.icon-signin{
--e4-ic:url("data:image/svg+xml;utf8,"); /* P2 : icône i-compte du set ADN */
}
.shopping_cart > a:first-child i.icon-truck{
--e4-ic:url("data:image/svg+xml;utf8,"); /* P2 : icône i-livraison du set ADN */
width:20px;height:20px;
}
/* chevron du bouton panier : discret */
.shopping_cart > a:first-child i.icon-chevron-right{opacity:.55}
/* ---- popup panier (.cart_block) : carte E4 ---- */
.shopping_cart .cart_block{
border:1px solid rgba(43,0,79,.10)!important;border-radius:16px!important;overflow:hidden;
box-shadow:0 2px 6px rgba(43,0,79,.05),0 18px 40px rgba(43,0,79,.16)!important;
margin-top:10px!important;
}
.cart_block .block_content{border:0!important}
/* état vide */
.cart_block .no-products, .cart_block p[class*="no"]{
color:#6d6480!important;font-family:'Poppins',sans-serif!important;padding:18px 16px!important;
}
/* lignes produits */
.cart_block .products .cart-info, .cart_block dt{border-bottom:1px solid rgba(43,0,79,.08)!important;background:#fff!important}
.cart_block .cart-images img{border-radius:9px;border:1px solid rgba(43,0,79,.10)}
.cart_block .cart_block_product_name, .cart_block .product-name a{
color:#2B004F!important;font-family:'Poppins',sans-serif!important;font-weight:600!important;
}
.cart_block .quantity-formated, .cart_block .quantity{color:#6d6480!important}
.cart_block .price{color:#2B004F!important;font-family:'Russo One',sans-serif!important;font-weight:400!important}
.cart_block .ajax_cart_block_remove_link{color:#b04a4a!important}
/* total */
.cart_block .cart-prices, .cart_block .cart-prices-line{background:#fff!important;border:0!important}
.cart_block .cart-prices .price, .cart_block #cart_block_total{
color:#2B004F!important;font-family:'Russo One',sans-serif!important;font-size:18px!important;
}
/* CTA commander : OR (acte d'achat, jamais rose) */
.cart_block a[href*="commande"], .cart_block .checkout a, .cart_block .btn-checkout,
.cart_block a[title*="Commander"], #button_order_cart{
background:linear-gradient(100deg,#ffc53d,#f2a114)!important;color:#2B004F!important;
border:0!important;border-radius:11px!important;
font-family:'Poppins',sans-serif!important;font-weight:700!important;
box-shadow:0 6px 14px rgba(242,161,20,.3)!important;transition:var(--gw-dur-2) var(--gw-ease-out)!important;
}
.cart_block a[href*="commande"]:hover, #button_order_cart:hover{
background:linear-gradient(100deg,#ffcd52,#f5a623)!important;transform:translateY(-1px);
box-shadow:0 8px 20px rgba(242,161,20,.45)!important;
}
.cart_block a[href*="commande"] *, #button_order_cart *{color:#2B004F!important}
/* ---- anti-bugs hover : aucun fond parasite, pas de layout shift ---- */
.ets_mm_megamenu .mm_menus_li:hover, .ets_mm_megamenu .mm_menus_li.hover{background:transparent!important}
.gw-h2 a, .gw-h2 button{outline-offset:2px}
.gw-h2 a:focus-visible, #searchbox button:focus-visible{outline:3px solid rgba(123,191,63,.5)!important}
/* bandeau franco tagué par le JS (aucune classe module dispo) */
.cart_block .e4-franco{
background:#f5f2f9!important;border:1px solid rgba(43,0,79,.10)!important;border-radius:10px!important;
color:#4f4760!important;font-family:'Poppins',sans-serif!important;margin:10px 14px!important;padding:10px 12px!important;
}
.cart_block .e4-franco b{color:#5e9a2a!important}
.cart_block .e4-franco .icon-truck{color:#5e9a2a!important}
/* total : classes réelles relevées */
.cart_block .cart_block_total, .cart_block .ajax_block_cart_total{
color:#2B004F!important;font-family:'Russo One',sans-serif!important;font-size:18px!important;
}
/* bouton commander réel du popup = a.btn.button-medium href*=commande (déjà couvert) — renfort : */
.cart_block a.btn.button-medium{
background:linear-gradient(100deg,#ffc53d,#f2a114)!important;color:#2B004F!important;border:0!important;
}
.cart_block a.btn.button-medium span, .cart_block a.btn.button-medium i{color:#2B004F!important}
/* bandeau franco : classe réelle iqitfreedeliverycount */
.cart_block .iqitfreedeliverycount{
background:#f5f2f9!important;border:1px solid rgba(43,0,79,.10)!important;border-radius:10px!important;
color:#4f4760!important;font-family:'Poppins',sans-serif!important;
}
.cart_block .iqitfreedeliverycount b, .cart_block .iqitfreedeliverycount .price{color:#5e9a2a!important;font-family:'Poppins',sans-serif!important;font-size:inherit!important}
/* ============================================================================
9) PASSE EXPERT UX (audit CLI 02/07)
============================================================================ */
/* ---- alignement actions : Souhaits/Connexion normalisés, plus de débordement ---- */
html body .container-header.gw-h2 .gw-h2-wishlist,
.gw-h2 .header_user_info > a, .gw-h2 a.login{
height:64px!important;width:auto!important;min-width:64px!important;
display:inline-flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;gap:3px!important;
padding:6px 12px!important;line-height:1!important;
}
html body .container-header.gw-h2 .gw-h2-wishlist{top:50%!important;transform:translateY(-50%)!important}
html body .container-header.gw-h2 .gw-h2-wishlist:hover{transform:translateY(-50%)!important}
.gw-h2 .gw-h2-wishlist span, .gw-h2 a.login span{font-size:10.5px!important;font-weight:600!important;letter-spacing:.4px}
/* ---- mega-menu : feedback hover sur les liens (était gris inerte) ---- */
.mm_columns_ul a, .mm_sub_ul a, .ets_mm_block_content a{
transition:color var(--gw-dur-1) var(--gw-ease-out), transform var(--gw-dur-1) var(--gw-ease-out)!important;
}
.mm_columns_ul a:hover, .mm_sub_ul a:hover, .ets_mm_block_content a:hover{
color:#5e9a2a!important;transform:translateX(2px);
}
.mm_columns_ul .mm_blocks_li h4 a:hover{transform:none}
/* titres de colonnes : hairline verte cohérente + eyebrow E4 (fusion section 9 + section 10) */
.mm_columns_ul h4, .ets_mm_block_content h4, .mm_blocks_li .h4{
color:#2B004F!important;font-family:'Poppins',sans-serif!important;font-weight:700!important;
border-bottom:2px solid rgba(123,191,63,.35)!important;padding-bottom:6px!important;
font-size:12px!important;letter-spacing:1px!important;text-transform:uppercase!important;
margin-bottom:10px!important;
}
/* focus clavier dans le mega */
.mm_columns_ul a:focus-visible{outline:2px solid rgba(123,191,63,.6);outline-offset:2px;border-radius:4px}
/* ---- header mobile : bouton MENU harmonisé (était bloc blanc) ---- */
@media(max-width:991px){
.mobile-menu-toggle, .ets_mm_megamenu .opener, [class*="menu-toggle"], .navbar-toggle{
background:transparent!important;border:1.5px solid rgba(255,255,255,.25)!important;
color:#fff!important;border-radius:10px!important;
}
.mobile-menu-toggle:hover{border-color:rgba(123,191,63,.6)!important;color:#9bdc5c!important}
/* icônes topbar mobile claires */
#header .mobile-header i, #header [class*="mobile"] i{color:#e6dff2!important}
}
/* ============================================================================
10) LIGNE RÉASSURANCE (au-dessus de la recherche) + MEGA-MENU PREMIUM
============================================================================ */
/* ---- réassurance : fine, lisible sur encre ---- */
.e4-reassure{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:9px 0 6px;flex-wrap:wrap;
font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:500;color:#cdc3dd;
}
.e4-r-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.e4-r-item svg{width:12px;height:12px;color:#9bdc5c;flex:none}
.e4-r-item b{color:#fff;font-weight:700}
.e4-r-sep{width:4px;height:4px;border-radius:50%;background:rgba(123,191,63,.5)}
@media(max-width:991px){.e4-reassure{display:none}}
/* ---- mega-menu premium ---- */
.ets_mm_megamenu .mm_columns_ul{
border-radius:0 0 18px 18px!important;
box-shadow:0 2px 6px rgba(43,0,79,.05),0 26px 60px rgba(26,0,51,.22)!important;
border:1px solid rgba(43,0,79,.08)!important;border-top:0!important;
padding:26px 30px 24px!important;
animation:e4MegaIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes e4MegaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* colonnes : respiration */
.mm_columns_ul .mm_blocks_li{padding:0 14px!important}
/* liens : puce chevron au hover, interligne confort */
.mm_columns_ul a, .mm_sub_ul a{
position:relative;display:inline-block;padding:4px 0 4px 14px!important;
line-height:1.45!important;color:#4f4760!important;
}
.mm_columns_ul a::before, .mm_sub_ul a::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-45deg);
width:6px;height:6px;border-right:2px solid rgba(123,191,63,.0);border-bottom:2px solid rgba(123,191,63,.0);
transition:border-color var(--gw-dur-1) var(--gw-ease-out);
}
.mm_columns_ul a:hover::before, .mm_sub_ul a:hover::before{
border-right-color:#5e9a2a;border-bottom-color:#5e9a2a;
}
/* grille marques : mini-cartes hover (logos manufacturer = /img/m/{id}.jpg, cf. ets_megamenu.php) */
.mm_columns_ul img[src*="/m/"]{border-radius:10px}
.mm_columns_ul a:has(img){padding:6px!important;border:1px solid transparent;border-radius:10px}
.mm_columns_ul a:has(img)::before{display:none}
.mm_columns_ul a:has(img):hover{border-color:rgba(123,191,63,.4);box-shadow:0 4px 12px rgba(123,191,63,.12);transform:none}
/* item de menu ACTIF pendant l'ouverture : fond doux */
.mm_menus_li:hover > a.ets_mm_url{background:rgba(123,191,63,.06)!important;border-radius:9px 9px 0 0}
/* bouton « voir tout le rayon » s'il existe */
.mm_columns_ul a[href*="voir"], .mm_columns_ul .viewall, .mm_columns_ul a.see_all{
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;
border-radius:9px!important;padding:9px 16px!important;font-weight:700!important;
}
.mm_columns_ul a.see_all::before{display:none}
/* grille marques du mega (ul.mm_mnu_display_img, 24 items) : mini-cartes propres */
.mm_columns_ul ul.mm_mnu_display_img{
display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:8px!important;
max-width:100%!important;width:100%!important;overflow:hidden;
}
.mm_columns_ul li:has(> div ul.mm_mnu_display_img), .mm_columns_ul .ets_mm_block_content{max-width:100%;min-width:0}
.mm_columns_ul ul.mm_mnu_display_img > li{
width:auto!important;float:none!important;margin:0!important;display:block!important;
}
.mm_columns_ul ul.mm_mnu_display_img > li > a{
display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
gap:5px!important;padding:8px 6px!important;min-height:58px;
border:1px solid transparent!important;border-radius:10px!important;
font-size:10.5px!important;line-height:1.2!important;text-align:center!important;color:#6d6480!important;
overflow:hidden;
}
.mm_columns_ul ul.mm_mnu_display_img > li > a::before{display:none!important}
.mm_columns_ul ul.mm_mnu_display_img > li > a:hover{
border-color:rgba(123,191,63,.4)!important;box-shadow:0 4px 12px rgba(123,191,63,.12)!important;
color:#2B004F!important;transform:none!important;
}
.mm_columns_ul .ets_item_img{display:block;height:24px}
.mm_columns_ul .ets_item_img img{max-height:24px!important;max-width:100%!important;width:auto!important;object-fit:contain;margin:0 auto}
/* ============================================================================
11) CARTES PRODUITS DANS LE MEGA (menu_product_list) — fix Hydroponie
Mes règles génériques de liens (padding/chevron/inline-block) cassaient
ces cartes : exemption totale + habillage E4 propre.
============================================================================ */
.mm_columns_ul .menu_product_list a,
.mm_columns_ul .menu_product_list a:hover{
padding:0!important;display:block!important;transform:none!important;
border:0!important;box-shadow:none!important;
}
.mm_columns_ul .menu_product_list a::before{display:none!important}
/* grille : cartes régulières, rien de coupé */
.mm_columns_ul ul.menu_product_list{
display:grid!important;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;
gap:12px!important;margin:0!important;width:100%!important;max-width:100%!important;overflow:hidden;
}
.mm_columns_ul .menu_block_product{
width:auto!important;float:none!important;padding:0!important;margin:0!important;
}
/* carte */
.mm_columns_ul .product-container{
position:relative;display:flex!important;flex-direction:column!important;height:100%;
background:#fff!important;border:1px solid rgba(43,0,79,.10)!important;border-radius:12px!important;
padding:10px!important;overflow:hidden;transition:box-shadow var(--gw-dur-2) var(--gw-ease-out),border-color var(--gw-dur-2) var(--gw-ease-out);
}
.mm_columns_ul .product-container:hover{
border-color:rgba(123,191,63,.45)!important;box-shadow:0 8px 20px rgba(43,0,79,.10)!important;
}
/* image */
.mm_columns_ul .product-container .left-block, .mm_columns_ul .product-image-container{
position:static!important;width:100%!important;margin:0!important;padding:0!important;background:#fff!important;
}
.mm_columns_ul .product-image-container img{
width:100%!important;height:110px!important;object-fit:contain!important;display:block;
}
/* infos : sous l'image, plus jamais derrière */
.mm_columns_ul .product-container .right-block{
position:static!important;width:100%!important;padding:8px 2px 2px!important;margin:0!important;
background:transparent!important;text-align:center;display:block!important;
}
.mm_columns_ul .product-container span.h5{display:block!important;height:auto!important;overflow:hidden}
.mm_columns_ul .product-container .product-name,
.mm_columns_ul .product-container .product-name a{
position:static!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
height:auto!important;overflow:hidden;max-height:34px;white-space:normal!important;
font-family:'Poppins',sans-serif!important;font-size:11.5px!important;font-weight:600!important;
line-height:1.4!important;color:#2B004F!important;
}
.mm_columns_ul .product-container .price.product-price{
display:block!important;margin-top:5px!important;
font-family:'Russo One',sans-serif!important;font-size:14px!important;color:#2B004F!important;
}
/* étoiles/notes et badges flottants : remis dans le flux, discrets */
.mm_columns_ul .product-container .star_content, .mm_columns_ul .product-container [class*="star"]{
position:static!important;display:inline-flex!important;justify-content:center;margin-top:3px;
}
.mm_columns_ul .product-container .new-box, .mm_columns_ul .product-container .sale-box,
.mm_columns_ul .product-container .price-percent-reduction{
position:absolute!important;top:8px!important;left:8px!important;right:auto!important;z-index:2;
background:#7E1E57!important;color:#fff!important;border-radius:99px!important;
font-size:10px!important;padding:2px 8px!important;line-height:1.4!important;
}
/* tout contenu résiduel hors flux dans la carte : neutralisé */
.mm_columns_ul .product-container .functional-buttons, .mm_columns_ul .product-container .button-container{display:none!important}
/* « En stock » : puce inline discrète sous le prix (ma règle [class*=label] l'avait mise en absolu) */
.mm_columns_ul .product-container .availability .label-success{
position:static!important;display:inline-block!important;
background:rgba(123,191,63,.14)!important;color:#4a7d22!important;border-radius:99px!important;
font-size:10px!important;font-weight:600!important;padding:2px 9px!important;line-height:1.5!important;
margin-top:4px;
}
/* compteur d'avis : inline à côté des étoiles + pastille avis : le fond magenta circulaire du custom sautait mes styles */
.mm_columns_ul .product-container .star_label{
position:static!important;display:inline-block!important;margin-left:5px;
font-size:10.5px!important;color:#6d6480!important;
background:transparent!important;border-radius:0!important;width:auto!important;height:auto!important;
padding:0!important;line-height:1.4!important;
}
/* right-block / left-block : déjà à margin:0 via les blocs groupés ci-dessus (L416, L423) */
/* quick-view (« Aperçu rapide ») : jamais dans le mega */
.mm_columns_ul .product-container .quick-view,
.mm_columns_ul .product-container .quick-view-wrapper-mobile{display:none!important}
/* « En stock » : toutes variantes de span availability */
.mm_columns_ul .product-container .availability span{
position:static!important;display:inline-block!important;
background:rgba(123,191,63,.14)!important;color:#4a7d22!important;border-radius:99px!important;
font-size:10px!important;font-weight:600!important;padding:2px 9px!important;line-height:1.5!important;
margin-top:4px;box-shadow:none!important;border:0!important;text-shadow:none!important;
}
/* ---- topbar : centrage vertical exact — flex (l'ancien flux floats donnait 11px/6px) ---- */
#header > .nav .row, #header > .nav .container{height:100%;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
#header > .nav nav{
display:flex!important;align-items:center!important;height:30px;
flex-wrap:nowrap;margin-top:0!important;margin-bottom:0!important;
}
#header > .nav nav > *{float:none!important;margin-top:0!important;margin-bottom:0!important}
/* ordre visuel identique à l'existant : gauche | souhaits, connexion, drapeaux à droite */
#header > .nav nav > ul{order:1;display:flex!important;align-items:center;gap:2px;height:30px;margin:0!important;padding:0!important}
#header > .nav nav > ul li{display:inline-flex!important;align-items:center;height:30px;float:none!important}
#header > .nav nav > .wishlist_top_link{order:2;margin-left:auto!important;display:inline-flex!important;align-items:center;height:30px}
#header > .nav nav > .header_user_info_nav{order:3;display:inline-flex!important;align-items:center;height:30px}
#header > .nav nav > div:not([class]){order:4;display:inline-flex!important;align-items:center;height:30px}
#header > .nav nav a{display:inline-flex!important;align-items:center;height:30px;padding-top:0!important;padding-bottom:0!important}
#header > .nav img{vertical-align:middle!important;display:block!important;margin:0!important;height:13px;width:auto}
#header > .nav nav > div:not([class]) a{padding:0 3px!important}
/* ═══ P2.1 (14/07) — module iqitfreedeliverycount : l'instance « détachée »
(hook header, non stylée, texte anglais) s'affichait en bande pleine
largeur DERRIÈRE le logo. Doublon : le franco est déjà au ticker + en
réassurance. On la masque ; la version francisée de la popup panier
(.cart_block, gérée par e4-header.js) reste active. ═══ */
#header .iqitfreedeliverycount-detach{display:none!important}
#header .cart_block .iqitfreedeliverycount-detach{display:block!important}
/* ═══ P2.2 (14/07) — wishlist superposée à la recherche (signalé utilisateur).
Le custom la pose en absolute right:340px : à 1280-1536px son bord gauche
atterrit SUR le champ de recherche (7 à 52px de chevauchement mesurés).
Le seul couloir stable à toutes les largeurs est entre Connexion (offset
droit 248px) et le panier (175px) → 64px de large, right:181px.
Nouvel ordre : recherche · Connexion · Souhaits · Panier. ═══ */
/* ═══ Correctif 23/08 — « Connexion » et « Souhaits » se chevauchaient.
Mesuré au Range.getClientRects() (glyphes réels) puis sur la boîte PEINTE du
bouton panier, pas sur son libellé — c'est là qu'était l'erreur du calage
précédent, qui visait « Mon panier » (à 1230px) et non le fond jaune du bouton
(à 1174px). Le couloir réel entre le bord droit de « Connexion » et ce fond
jaune fait 54px, constant de 1200 à 1920px. Le libellé « Souhaits » en fait 70 :
il n'y a jamais tenu, et débordait de 16px sur le bouton panier.
Élargir la zone est impossible : entre le bouton RECHERCHE et le panier il y a
146px pour 140px de libellés (« Connexion » 70 + « Souhaits » 70) — 6px de jeu
total, soit 3px entre deux mots. Les deux libellés ne peuvent pas coexister.
« Connexion » est gardé (accès au compte), « Souhaits » passe en icône seule :
le cœur est explicite, et c'était déjà le régime en dessous de 1100px.
z-index:51 — bug PRÉEXISTANT trouvé en testant au elementFromPoint. Dans le
contexte d'empilement de #desktop-header, #shopping_cart_container est en
z-index:50 contre 3 pour Souhaits. L'ancre du panier commence à x=1174 alors
que son libellé démarre à 1230 : ses 56px de rembourrage vide mangeaient la
droite du bouton Souhaits, qui perdait 14px de zone cliquable. ═══ */
html body .container-header.gw-h2 .gw-h2-wishlist{
width:36px!important;min-width:36px!important;padding:6px 5px!important;
right:203px!important;z-index:51!important;
}
html body .container-header.gw-h2 .gw-h2-wishlist > span{display:none!important}
/* Sous le breakpoint lg de Bootstrap, le thème de base repositionne
.header_user_info de right:254px à right:230px (et 64px -> 50px de large).
« Connexion » saute donc 34px vers la droite et le couloir tombe de 54px à
19px : plus assez pour le cœur (22px), qui touchait alors les deux voisins.
On neutralise ce saut en gardant le même offset qu'au-dessus de 1200px ;
puis on décale de 6px de plus pour équilibrer le couloir (le conteneur ne fait
que 50px de large ici contre 64 au-dessus, donc « Connexion » déborde davantage
vers la droite). Il reste 60px de jeu à gauche jusqu'au bouton RECHERCHE. */
@media(max-width:1199px){
html body .container-header.gw-h2 .header_user_info{right:260px!important}
}
/* ============================================================================
12) MEGA-MENU — PISTE A « ATELIER PLEINE LARGEUR » (validée 15/07)
Réparation + finition. Le fond des panneaux à onglets était à height:0 :
megamenu.css force height:0 (min-width:768) en comptant sur displayHeightTab()
du module pour poser la hauteur — or cette fonction fait height('px'),
un setter invalide qui n'écrit JAMAIS rien. La hauteur est posée par
e4-header.js v8 (redéfinition de displayHeightTab). Ici : géométrie + habillage.
Tout est scoped ≥992px : le menu mobile (accordéon) reste intact.
============================================================================ */
@media (min-width:992px){
/* -- colonnes réparties sur toute la largeur (fini « Chambre aux 2/3 vide ») -- */
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul:not(.mm_columns_ul_tab),
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul:not(.mm_columns_ul_tab){
display:flex!important;flex-wrap:wrap;gap:10px 0;
}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li{
float:none!important;flex:1 1 0;width:auto!important;min-width:170px;max-width:none!important;
}
/* la colonne qui porte la grille de marques respire davantage */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(ul.mm_mnu_display_img){
flex:1.7 1 0;min-width:300px;
}
/* -- R2 : petits panneaux ancrés sous leur entrée parente -- */
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left{position:relative}
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left > .mm_columns_ul{
left:0!important;right:auto!important;transform:none!important;width:max-content!important;
min-width:360px;max-width:560px;border-radius:0 0 16px 16px!important;
}
/* les entrées de fin de barre s'ancrent à droite (sinon débord viewport) */
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left:nth-last-child(-n+2) > .mm_columns_ul{
left:auto!important;right:0!important;transform:none!important;
}
/* -- badge « EN CE MOMENT » : pastille AU-DESSUS du libellé, plus de chevauchement -- */
.mm_menus_li > a.ets_mm_url{position:relative;overflow:visible!important}
.mm_menus_li .mm_bubble_text{
position:absolute!important;top:1px;left:50%;right:auto!important;transform:translateX(-50%);
width:max-content!important;max-width:none!important;
background:#7E1E57!important;color:#fff!important;
font-size:8px!important;font-weight:700!important;letter-spacing:.05em;
padding:1px 8px!important;border-radius:999px!important;line-height:1.5!important;
white-space:nowrap;pointer-events:none;z-index:3;
}
/* -- marques : le logo suffit (les noms sous logo se tronquaient des 2 côtés) -- */
.mm_columns_ul .item_has_img .ets_item_name{display:none!important}
.mm_columns_ul ul.mm_mnu_display_img > li > a{min-height:46px!important;border-color:var(--gw-n200)!important;background:#fff}
/* -- panneaux à onglets réparés (mode horizontal du module, mm_tab_content_hoz) :
rangée de pilules en haut, contenu pleine largeur dessous -- */
.ets_mm_megamenu .mm_columns_ul.mm_columns_ul_tab{background:#fff!important;overflow:hidden;padding:0!important}
.mm_columns_ul_tab::before{
content:'';position:absolute;left:0;top:0;right:0;height:58px;
background:var(--gw-n50, #f8f5fd);border-bottom:1px solid var(--gw-n200, #ece5f2);
}
.mm_columns_ul_tab .mm_tabs_li{
float:left!important;clear:none!important;display:block;width:auto!important;
position:static!important;
}
.mm_columns_ul_tab .mm_tab_li_content{
float:none!important;width:auto!important;min-width:0!important;
margin:11px 0 0 14px!important;border:0!important;background:transparent!important;
border-radius:999px!important;padding:8px 16px!important;position:relative;z-index:2;
font-family:'Poppins',sans-serif!important;font-size:13px!important;font-weight:600!important;
cursor:pointer;line-height:1.3!important;
}
.mm_columns_ul_tab .mm_tab_li_content a{padding:0!important;color:#2B004F!important;display:inline!important;transform:none!important}
.mm_columns_ul_tab .mm_tab_li_content a::before{display:none!important}
.mm_columns_ul_tab .mm_tab_li_content .mm_tab_name{white-space:nowrap}
.mm_columns_ul_tab .mm_tabs_li.open .mm_tab_li_content{
background:linear-gradient(150deg,#3a0a63,#1a0033)!important;
}
.mm_columns_ul_tab .mm_tabs_li.open .mm_tab_li_content a{color:#fff!important}
/* mode ver_alway_hide : le module vide le libellé de l'onglet OUVERT (et affiche
ceux des onglets fermés pour basculer) : ne pas peindre une pastille encre vide */
.mm_columns_ul_tab .mm_tabs_li.ver_alway_hide.open .mm_tab_li_content{display:none!important}
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{
position:absolute;left:0!important;right:0!important;top:58px!important;
width:auto!important;margin:0!important;border:0!important;background:#fff!important;
padding:20px 26px 18px!important;
display:flex;flex-wrap:wrap;gap:10px 0;
max-height:1000px;overflow-y:auto;overscroll-behavior:contain;
}
.mm_columns_ul_tab .mm_tabs_li:not(.open) .mm_columns_contents_ul{visibility:hidden}
.mm_columns_ul_tab .mm_tabs_li.open .mm_columns_contents_ul{visibility:visible;z-index:1}
.mm_columns_contents_ul > .mm_columns_li{
float:none!important;flex:1 1 0;width:auto!important;min-width:170px;
}
.mm_columns_contents_ul > .mm_columns_li:has(ul.mm_mnu_display_img){flex:1.7 1 0;min-width:300px}
/* -- bouton « Tout {rayon} » (injecté par e4-header.js, cloné du lien parent) -- */
.mm_columns_ul a.gw-mm-all{
display:inline-flex!important;align-items:center;gap:8px;
padding:9px 16px!important;margin-top:14px;
background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#fff!important;
font-weight:700!important;font-size:12.5px!important;border-radius:999px!important;
line-height:1.35!important;
}
.mm_columns_ul a.gw-mm-all::before{display:none!important}
.mm_columns_ul a.gw-mm-all:hover{transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(123,191,63,.35)!important;color:#fff!important}
.mm_columns_ul a.gw-mm-all svg{width:14px;height:14px;flex:0 0 auto}
.mm_columns_ul a.gw-mm-all{align-self:flex-start}
.mm_columns_ul .gw-mm-row{flex:0 0 100%;width:100%}
}
/* ============================================================================
13) HEADER « SIGNATURE » (maquette finale 02/08) — lot 1 : desktop repos
Liseré clé + ticker service + doublons topbar supprimés + chips recherche.
============================================================================ */
/* ---- liseré clé 3px en tête de site ---- */
#header::before{content:"";display:block;height:3px;background:var(--gw-grad-key)}
/* ---- D1 : Connexion / Souhaits en double dans la topbar → supprimés ---- */
#header > .nav nav > .header_user_info_nav,
#header > .nav nav > .wishlist_top_link{display:none!important}
/* tél (repris par le ticker), séparateur et livraison (déjà en réassurance) */
#header > .nav nav > ul#header_links li:first-child,
#header > .nav nav > ul#header_links li.separator,
#header > .nav nav > ul#header_links li:last-child{display:none!important}
/* ---- téléphone permanent de la barre haute (audit CRO-005) ----
La production affiche « Besoin de conseils ? 01 88 33 45 52 » à top=6 px sur
toutes les pages. En préprod le numéro n'était que le premier des cinq
messages du ticker : visible un cinquième du temps, largeur 0 le reste du
temps. Sur un panier moyen élevé et un produit technique, le téléphone
visible est un argument de vente. */
.gw-topline-tel{order:-1;flex:none;display:inline-flex;align-items:center;gap:5px;
font-size:12px;color:#d7cfe6;white-space:nowrap;margin-right:20px}
.gw-topline-tel b{color:#9bdc5c;font-weight:700}
.gw-topline-tel:hover,.gw-topline-tel:focus{color:#fff}
@media(max-width:991px){.gw-topline-tel{display:none}}
/* ---- ticker service : 3 messages en rotation ---- */
.gw-ticker{order:0;flex:1 1 auto;min-width:0;position:relative;height:30px;overflow:hidden}
/* UX-MOB-005 (audit du 04/09) : le gabarit rend quatre messages, le CSS n'en
décalait que trois — le premier et le quatrième partaient donc ensemble, et
entre 768 et 999 px trois messages se superposaient un tiers du temps
(8 échantillons sur 24 relevés en 12 s). Le cycle passe à 12 s, un message
toutes les 3 s, et les paliers de l'animation suivent : visible du 3e au 22e
pour cent, soit environ 2,3 s pleines par message.
La garde nth-child(n+5) évite que l'ajout d'un cinquième message ne recrée
silencieusement la superposition. */
.gw-tick{position:absolute;inset:0;display:flex;align-items:center;gap:5px;opacity:0;
font-size:12px;color:#c7bcd9;white-space:nowrap;animation:gwTick 12s infinite}
.gw-tick:nth-child(2){animation-delay:3s}
.gw-tick:nth-child(3){animation-delay:6s}
.gw-tick:nth-child(4){animation-delay:9s}
.gw-tick:nth-child(n+5){display:none}
.gw-tick b{color:#9bdc5c;font-weight:600}
.gw-tick a{display:inline-flex;align-items:center;gap:5px;color:#c7bcd9!important}
.gw-tick a:hover{color:#fff!important}
@keyframes gwTick{0%{opacity:0;transform:translateY(7px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-7px)}}
.gw-ticker:hover .gw-tick, .gw-ticker:focus-within .gw-tick{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
.gw-tick{animation:none}
.gw-tick:first-child{opacity:1}
}
/* BLOG / Contact poussés à droite, drapeaux en bout de ligne (ordre existant conservé) */
#header > .nav nav > ul#header_links{order:2;margin-left:auto!important;flex:none}
/* ---- chips « Populaire » dans la recherche (injectées par e4-header.js) ---- */
/* AUDIT 08/2026 — les puces sortent de la pilule de recherche. Posées dedans,
elles interceptaient le clic sur 63 % de la largeur du champ (129 px
utilisables sur 352) et le placeholder disparaissait sous 1400 px. */
.gw-schips{position:absolute;top:calc(100% + 8px);left:0;right:auto!important;transform:none;
display:inline-flex;align-items:center;gap:6px;z-index:1200;
background:#fff;border-radius:10px;padding:9px 12px;
box-shadow:0 14px 34px rgba(26,0,51,.22);border:1px solid #ece5f4;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .16s ease,visibility .16s ease}
body.gw-schips-on .gw-schips{opacity:1;visibility:visible;pointer-events:auto}
body.gw-schips-on .gw-schips.gw-hide{opacity:0;visibility:hidden;pointer-events:none}
.gw-schips .gw-schips-lbl{display:inline-flex;align-items:center;color:#5e9a2a}
.gw-schips .gw-schips-lbl svg{width:14px;height:14px}
.gw-schips button{font-family:'Poppins',sans-serif;font-size:11px;color:#6d6480;background:#f3eef9;
border:0;border-radius:99px;padding:4px 10px;cursor:pointer;white-space:nowrap;
transition:background var(--gw-dur-1) var(--gw-ease-out),color var(--gw-dur-1) var(--gw-ease-out)}
.gw-schips button:hover{background:rgba(123,191,63,.18);color:#3e6b1a}
.gw-schips button:focus-visible{outline:2px solid rgba(123,191,63,.6);outline-offset:1px}
.gw-schips.gw-hide{display:none}
@media(max-width:1300px){.gw-schips{display:none}}
/* ============================================================================
14) HEADER « SIGNATURE » — lot 2 : barre marchande sticky (desktop ≥992)
Remplace le menu collant nu : logo + rayons + recherche + compte/souhaits
+ panier avec montant. Overlay fixed → zéro layout-shift. L'auto-hide
existant (body.gw-hdr-hide) la cache en descente, la montre à la remontée.
============================================================================ */
.gw-sbar{
position:fixed;top:0;left:0;right:0;z-index:1050;
display:flex;align-items:center;gap:14px;
height:56px;padding:0 22px 0 18px;
background:#1a0033;
box-shadow:0 14px 34px rgba(26,0,51,.4);
border-top:3px solid transparent;
border-image:var(--gw-grad-key) 1;
transform:translateY(-110%);opacity:0;visibility:hidden;
transition:transform var(--gw-dur-2) var(--gw-ease-out),opacity var(--gw-dur-2) var(--gw-ease-out),visibility 0s var(--gw-dur-2);
}
body.gw-sbar-on:not(.gw-hdr-hide) .gw-sbar{transform:none;opacity:1;visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.gw-sbar{transition:none}}
@media (max-width:991px){.gw-sbar{display:none}}
.gw-sbar-logo{flex:none;display:flex;align-items:center}
.gw-sbar-logo img{height:24px;width:auto;display:block}
/* icônes du set ADN (mask, currentColor) */
.gw-si{display:inline-block;width:20px;height:20px;background-color:currentColor;
-webkit-mask:var(--e4-ic) center/contain no-repeat;mask:var(--e4-ic) center/contain no-repeat}
.gw-si-burger{--e4-ic:url("data:image/svg+xml;utf8,");width:15px;height:15px}
.gw-si-chev{--e4-ic:url("data:image/svg+xml;utf8,");width:11px;height:11px}
.gw-si-loupe{--e4-ic:url("data:image/svg+xml;utf8,");width:16px;height:16px}
.gw-si-user{--e4-ic:url("data:image/svg+xml;utf8,")}
.gw-si-heart{--e4-ic:url("data:image/svg+xml;utf8,")}
.gw-si-truck{--e4-ic:url("data:image/svg+xml;utf8,");width:18px;height:18px}
/* bouton rayons */
.gw-sbar-rayons{
flex:none;display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.07);border:1.5px solid rgba(123,191,63,.55);color:#fff;
border-radius:10px;padding:8px 14px;cursor:pointer;font-family:'Poppins',sans-serif;
transition:background var(--gw-dur-1) var(--gw-ease-out);
}
.gw-sbar-rayons:hover{background:rgba(123,191,63,.16)}
.gw-sbar-rayons .gw-si-burger{color:#9bd968}
.gw-sbar-rayons b{font-size:12.5px;font-weight:600}
.gw-sbar-rayons .gw-si-chev{color:#c9b8de;transition:transform var(--gw-dur-1) var(--gw-ease-out)}
.gw-sbar-rayons[aria-expanded="true"] .gw-si-chev{transform:rotate(180deg)}
/* panneau rayons (liens clonés du menu) */
.gw-sbar-panel{
position:absolute;top:100%;left:18px;margin-top:8px;z-index:1051;
background:#fff;border:1px solid rgba(43,0,79,.1);border-radius:14px;
box-shadow:0 2px 6px rgba(43,0,79,.05),0 26px 60px rgba(26,0,51,.25);
padding:10px;display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:2px 8px;
}
.gw-sbar-panel[hidden]{display:none}
.gw-sbar-panel a{
display:block;padding:8px 12px;border-radius:9px;
font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;color:#2B004F;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gw-sbar-panel a:hover{background:rgba(123,191,63,.1);color:#3e6b1a}
/* recherche compacte */
.gw-sbar-search{
flex:1;display:flex;align-items:stretch;min-width:0;height:38px;
background:#fff;border-radius:11px;overflow:hidden;
box-shadow:0 0 0 1.5px rgba(123,191,63,.4),0 0 14px rgba(123,191,63,.14);
}
.gw-sbar-search:focus-within{box-shadow:0 0 0 2px rgba(123,191,63,.75),0 0 30px rgba(123,191,63,.35)}
.gw-sbar-search input[type="text"]{
flex:1;min-width:0;border:0;outline:0;padding:0 14px;
font-family:'Poppins',sans-serif;font-size:13px;color:#241b33;background:transparent;
}
.gw-sbar-search button[type="submit"]{
flex:none;margin:4px;padding:0 13px;border:0;cursor:pointer;
background:var(--gw-grad-green);color:#13002a;border-radius:8px;transform:skew(-5deg);
}
.gw-sbar-search button[type="submit"]:hover{filter:brightness(1.07)}
/* compte / souhaits */
.gw-sbar-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:10px;color:#e6dff2!important;
transition:color var(--gw-dur-1) var(--gw-ease-out),background var(--gw-dur-1) var(--gw-ease-out)}
.gw-sbar-ico:hover{color:#9bdc5c!important;background:rgba(123,191,63,.08)}
/* panier or + montant Russo −5° */
.gw-sbar-cart{
flex:none;position:relative;display:inline-flex;align-items:center;gap:8px;
background:var(--gw-grad-gold);color:#2B004F!important;
border-radius:10px;padding:9px 15px;box-shadow:0 0 18px rgba(242,161,20,.4);
transition:transform var(--gw-dur-1) var(--gw-ease-out),box-shadow var(--gw-dur-1) var(--gw-ease-out);
}
.gw-sbar-cart:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(242,161,20,.55)}
.gw-sbar-cart .gw-si-truck{color:#2B004F}
.gw-sbar-cart b{
font-family:'Russo One',sans-serif;font-weight:400;font-size:13px;font-style:italic;
transform:skewX(-5deg);display:inline-block;color:#2B004F;
}
.gw-sbar-qty{
position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
background:#2B004F;color:#ffc53d;font-size:10px;font-weight:700;border-radius:99px;
display:flex;align-items:center;justify-content:center;
}
.gw-sbar a:focus-visible, .gw-sbar button:focus-visible{outline:3px solid rgba(123,191,63,.5);outline-offset:2px}
/* ============================================================================
15) HEADER « SIGNATURE » — lot 3 : tablette & mobile (≤991)
Un seul burger, recherche visible au repos (repliée au scroll), badge panier.
============================================================================ */
@media(max-width:991px){
/* D4 : l'instance menu desktop (enfant de #page) devenait une 2e barre burger blanche */
#page > .ets_mm_megamenu{display:none!important}
/* barre mobile : filet dégradé sous la barre */
.mobile-condensed-header{position:relative}
.mobile-condensed-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(123,191,63,.7),rgba(126,30,87,.7),transparent);z-index:3}
/* D7 : bouton MENU (instance mobile peinte en blanc) → burger encre propre, icône seule */
.mh-menu .ets_mm_megamenu{background:transparent!important;box-shadow:none!important;
-webkit-backdrop-filter:none;backdrop-filter:none}
.mh-menu .ets_mm_megamenu::after{display:none}
.mh-menu .ybc-menu-toggle{
font-size:0!important;line-height:0!important;letter-spacing:0;
background:transparent!important;border:1.5px solid rgba(255,255,255,.28)!important;
border-radius:9px!important;width:38px!important;height:38px!important;min-width:0!important;
display:inline-flex!important;align-items:center;justify-content:center;
padding:0!important;margin:0!important;box-shadow:none!important;
}
.mh-menu .ybc-menu-toggle .ybc-menu-button-toggle_icon{display:inline-flex!important;flex-direction:column;gap:4px;margin:0!important}
.mh-menu .ybc-menu-toggle .icon-bar{display:block!important;width:16px;height:2px;border-radius:2px;background:#fff!important;margin:0!important;padding:0!important}
/* recherche visible : pilule E4 (form du hook iqitMobileSearch) */
.mobile-search-expanded .mh-dropdowns{display:block!important;background:#1a0033;padding:0 10px 10px}
.mobile-search-expanded .mh-search-drop{display:block!important;position:static!important;background:transparent!important;padding:0!important;box-shadow:none!important}
.mh-search-drop .search_query_container{position:relative;background:#fff!important;border-radius:10px!important;
box-shadow:0 0 0 1.5px rgba(123,191,63,.4)!important;overflow:hidden;display:flex;align-items:center}
.mh-search-drop form{margin:0!important}
.mh-search-drop input[type="text"]{
flex:1;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;
height:40px!important;padding:0 12px!important;font-family:'Poppins',sans-serif;font-size:13px;color:#241b33;width:100%!important;
}
.mh-search-drop .button-search, .mh-search-drop button[type="submit"]{
position:absolute;right:4px;top:4px;bottom:4px;width:44px;
background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;
border:0!important;border-radius:8px!important;margin:0!important;padding:0!important;
}
/* champ libéré du bouton : réserve à droite */
.mh-search-drop input[type="text"]{padding-right:56px!important}
/* le bouton loupe de la barre est inutile au repos (champ visible) */
.mobile-search-expanded .mh-button.mh-search{display:none!important}
/* au scroll (barre collée .sticked) : recherche repliée, loupe de la barre réactivée
(le tap sur la loupe ouvre l'overlay recherche gl-mobv2 du module) */
.mobile-search-expanded #mh-sticky.sticked .mh-dropdowns{display:none!important}
.mobile-search-expanded #mh-sticky.sticked .mh-button.mh-search{display:inline-block!important}
/* badge quantité panier (injecté par e4-header.js) */
.gw-mqty{position:absolute;top:-4px;right:-7px;min-width:15px;height:15px;padding:0 4px;
background:linear-gradient(100deg,#ffc53d,#f2a114);color:#2B004F;font-size:9px;font-weight:700;
border-radius:99px;display:flex;align-items:center;justify-content:center}
#mh-cart{position:relative}
/* icônes barre mobile : claires et un peu plus présentes */
.mobile-main-bar .mh-icon{color:#e6dff2!important;font-size:19px!important}
}
/* ============================================================================
16) HEADER « SIGNATURE » — lot 4 : système mobile gl-mobv2 (tiroir + recherche)
D6 : l'ancienne DA « candy » (rose #C21A7E, JAUNE, emojis) passe à la palette
E4 par remap des tokens du fichier mobile-v2.css (chargé avant, même spécificité
→ nos valeurs gagnent). Le tiroir reste clair, comme la nav desktop.
============================================================================ */
.gl-mobv2{
--gl-magenta:#7E1E57; --gl-magenta-600:#6a1949; --gl-magenta-700:#57143f;
--gl-magenta-50:#f7edf3; --gl-magenta-100:#eedbe7;
--gl-plum-900:#160029; --gl-plum-800:#2B004F; --gl-plum-700:#3a0a63;
--gl-green:#7BBF3F; --gl-green-700:#3e6b1a; --gl-green-50:#eef7e4;
/* l'or est réservé à l'acte d'achat : le jaune du tiroir devient vert E4… */
--gl-yellow:#7BBF3F; --gl-yellow-700:#3e6b1a; --gl-yellow-50:#eef7e4;
}
/* …sauf la pastille « Promotions » : magenta E4 (temps fort marchand, pas un CTA d'achat) */
.gl-mobv2__chip[data-tone="yellow"]{background:var(--gl-magenta)!important;color:#fff!important}
/* emojis (✨🔥…) hors set ADN : masqués, les libellés suffisent */
.gl-mobv2__chip-icon{display:none!important}
/* entrées de rayons + pied : les carrés emoji sont remplacés par des icônes ADN
(e4-header.js pose .gw-adn-ico) — cachés tant que non remplacés */
.gl-mobv2__picon:not(.gw-adn-ico), .gl-mobv2__util-icon:not(.gw-adn-ico){display:none!important}
.gl-mobv2__picon.gw-adn-ico{
display:inline-flex!important;align-items:center;justify-content:center;
width:32px!important;height:32px!important;border-radius:9px!important;
background:rgba(123,191,63,.12)!important;color:#3e6b1a!important;font-size:0!important;
}
.gl-mobv2__picon.gw-adn-ico svg{width:17px;height:17px}
.gl-mobv2__util-icon.gw-adn-ico{
display:inline-flex!important;align-items:center;justify-content:center;
width:22px!important;height:22px!important;color:#3e6b1a!important;font-size:0!important;background:none!important;
}
.gl-mobv2__util-icon.gw-adn-ico svg{width:16px;height:16px}
/* CTA téléphone du pied de tiroir : vert E4 (canon maquette) */
.gl-mobv2 a[href^="tel"]{background:linear-gradient(100deg,#8ed04e,#5e9a2a)!important;color:#13002a!important;border-color:transparent!important}
/* titre de panneau : le custom force les h2 en magenta → illisible sur la tête magenta (défaut préexistant) */
h2.gl-mobv2__ptitle, .gl-mobv2 .gl-mobv2__ptitle{color:#fff!important}
/* focus clavier : vert E4 */
.gl-mobv2 :focus-visible{outline-color:rgba(123,191,63,.75)!important}
/* ============================================================================
17) MENU HORIZONTAL 992-1199 (passe UX/UI correction 9)
Le module passe en burger quand la somme des largeurs d'items déborde
(classe changestatus recalculée par megamenu.js) — pas un breakpoint fixe.
En compressant la typo des entrées sur cette plage, les 10 items tiennent
→ le menu reste horizontal, le burger disparaît de lui-même.
============================================================================ */
@media(min-width:992px) and (max-width:1199px){
.mm_menus_li > a.ets_mm_url{padding:14px 6px!important}
.mm_menus_li > a.ets_mm_url .mm_menu_content_title{
font-size:9.5px!important;letter-spacing:0!important;
}
.mm_menus_li .mm_bubble_text{font-size:7px!important;padding:1px 6px!important}
/* fallback : si malgré tout ça déborde (libellés BO rallongés), la barre-toggle reste correcte */
#page > .ets_mm_megamenu .ybc-menu-toggle{
background:#1a0033!important;color:#fff!important;border:0!important;border-radius:0!important;
font-family:'Poppins',sans-serif!important;font-weight:600;letter-spacing:1px;
}
#page > .ets_mm_megamenu .ybc-menu-toggle .icon-bar{background:#9bd968!important}
}
/* ═══ Menu desktop « bloc continu » (21/08) ════════════════════════════════
Le ruban du mégamenu passe du blanc à l'encre : le header devient un seul
massif sombre, du bandeau service jusqu'au liseré vert, et la page démarre
franchement.
COULEURS SEULEMENT. La typographie et la géométrie ne bougent pas : les dix
libellés réclament déjà 1426 px typographiques pour 1296 px disponibles
(mesuré au canvas sur la police réelle), donc ils sont DÉJÀ comprimés par le
flex aujourd'hui. Tout ce qui les élargirait — casse normale, interlettrage
positif, gouttières plus larges — les ferait se toucher. Cette densité est le
défaut que la direction « Tous nos rayons » traite ; elle ne se règle pas ici
sans raccourcir les libellés, ce qui relève de l'éditorial.
Scopé >= 992 px : sous ce seuil `#page > .ets_mm_megamenu` est masqué
(voir plus haut dans ce fichier) au profit du menu burger, qu'il ne faut pas
repeindre.
────────────────────────────────────────────────────────────────────────── */
@media (min-width:992px){
/* la barre */
.ets_mm_megamenu{background:#230642 !important}
.ets_mm_megamenu .mm_menus_ul,
.ets_mm_megamenu .mm_menus_li,
.ets_mm_megamenu .mm_menus_li:hover,
.ets_mm_megamenu .mm_menus_li.hover{background:transparent !important}
/* les libellés : on inverse la valeur, on ne touche ni à la taille,
ni à la casse, ni à l'interlettrage */
.mm_menus_li > a.ets_mm_url,
.mm_menus_li > a.ets_mm_url .mm_menu_content_title{color:#efe8f7 !important}
/* survol : vert clair. Le #5e9a2a d'origine est illisible sur encre. */
.mm_menus_li:hover > a.ets_mm_url,
.mm_menus_li > a.ets_mm_url:hover,
.mm_menus_li:hover > a.ets_mm_url .mm_menu_content_title{
color:#9bd968 !important;border-bottom-color:#8ed04e !important;
}
.mm_menu_content_title::after{background-color:#8ed04e !important}
/* Les deux repères marchands : mêmes rôles, versions posées sur encre
(#7E1E57 et #3e6b1a sont illisibles sur #230642).
On cible les classes RÉELLES portées par le back-office
(gwps_ets_mm_menu.custom_class = `packs-growled-menu` id 30 et
`men_plantes-vertes` id 35), et non `:nth-last-child(2)` / `:last-child` :
réordonner une rubrique dans le BO déplacerait sinon la couleur sur la
mauvaise entrée, sans que rien n'échoue. Le bloc historique plus haut dans
ce fichier a ce défaut ; on ne le reproduit pas ici. */
.mm_menus_li.packs-growled-menu > a.ets_mm_url .mm_menu_content_title{color:#e9a9cf !important}
.mm_menus_li.men_plantes-vertes > a.ets_mm_url .mm_menu_content_title{color:#9bd968 !important}
/* survol : il faut battre `.mm_menus_li:hover > a.ets_mm_url .mm_menu_content_title`
(0,4,1), sinon la règle est morte par spécificité. */
.mm_menus_li.packs-growled-menu:hover > a.ets_mm_url .mm_menu_content_title{color:#f4cfe4 !important}
.mm_menus_li.men_plantes-vertes:hover > a.ets_mm_url .mm_menu_content_title{color:#c9e8c9 !important}
/* badge « EN CE MOMENT » : le magenta se noie sur l'encre, il passe en or —
la couleur transactionnelle du brandbook, déjà celle du panier.
La classe réelle est .mm_bubble_text (ETS), pas un [class*=badge]. */
.mm_menus_li .mm_bubble_text,
.mm_menus_li [class*="badge"], .mm_menus_li [class*="label"]{
background:linear-gradient(100deg,#ffc53d,#f2a114) !important;
color:#13002a !important;font-weight:600 !important;
}
/* le panneau déroulant reste clair : il ouvre sur du contenu, pas sur la barre */
.ets_mm_megamenu .mm_columns_ul{border-top:0 !important}
}
/* ═══ Menu secondaire — ligne des destinations (22/08) ═════════════════════
Sous le menu catalogue, pour ce qui n'est pas un rayon : Promotions, Packs,
Academy, Nouveautés, Marques, Blog. Le menu principal n'est pas touché — la
ligne n'AJOUTE que des liens, elle n'en retire aucun.
Le liseré vert signature vit sur `.ets_mm_megamenu::after` : il se retrouve
donc ENTRE les deux barres. On le neutralise là et on le repose sous cette
ligne-ci, pour que le massif sombre reste d'un seul tenant.
────────────────────────────────────────────────────────────────────────── */
.gw-sec{display:none}
@media (min-width:992px){
.ets_mm_megamenu::after{display:none !important}
.gw-sec{
display:block;position:relative;background:#160029;
border-top:1px solid rgba(201,184,222,.13);
}
.gw-sec::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;pointer-events:none;
background:linear-gradient(100deg,#7BBF3F 0%,#5e9a2a 42%,#7E1E57 100%);
}
.gw-sec-in{
max-width:var(--gw-wrap,min(90%,1600px));margin:0 auto;
display:flex;align-items:center;gap:22px;height:38px;
font-size:12.5px;line-height:1;
/* les liens du mégamenu portent 9px de padding (e4-tokens.css) : sans ça,
« Promotions » pend 9px à gauche de « LAMPES HORTICOLES LEDS ». */
padding-left:13px;padding-right:13px;
}
.gw-sec-l{
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
color:var(--gw-on-ink-70,#c9b8de);text-decoration:none;
transition:color .15s ease;
}
.gw-sec-l:hover,.gw-sec-l:focus-visible{color:var(--gw-green-300,#9bd968)}
/* anneau de focus : le seul retour était un glissement de teinte, à ~1,2:1 sur
le lien or — invisible au clavier. Tous les autres composants du header en
posent un, cette barre était la seule à ne pas le faire. */
.gw-sec-l:focus-visible{
/* !important obligatoire : le thème porte un `a:focus{outline:0!important}`
global. Sans lui, seul l'outline-offset passe et l'anneau reste invisible
— vérifié au navigateur. C'est la raison pour laquelle chaque composant
du header repose son anneau à la main. */
outline:2px solid rgba(155,217,104,.9) !important;
outline-offset:3px !important;border-radius:5px;
}
.gw-sec-l svg{width:14px;height:14px;opacity:.75;flex:none}
.gw-sec-l--hot{color:var(--gw-gold-300,#ffcd52);font-weight:600}
.gw-sec-l--hot:hover,.gw-sec-l--hot:focus-visible{color:#ffdf8a}
.gw-sec-l--hot svg{opacity:1}
.gw-sec-tag{
font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
padding:3px 7px;border-radius:5px;
background:rgba(123,191,63,.16);color:var(--gw-green-300,#9bd968);
border:1px solid rgba(123,191,63,.32);
}
/* la ligne se resserre avant de déborder, elle ne passe jamais à deux étages */
@media (max-width:1199px){
.gw-sec-in{gap:16px;font-size:12px}
.gw-sec-tag{display:none}
}
}
/* ═══ Fix : menu déplié derrière le logo entre 768 et 991 px (22/08) ═══════
Deux règles de même spécificité (2 classes) se contredisent, et l'ordre de
chargement tranche dans le mauvais sens :
mobile-v2.css @max-width:1024 .ets_mm_megamenu .mm_menus_ul{display:none}
custom-growled-2026 @min-width:768 .ets_mm_megamenu .mm_menus_ul{display:flex}
custom-growled charge en dernier, donc entre 768 et 1024 le `flex` l'emporte.
Sous 992 px l'instance DESKTOP est masquée (`#page > .ets_mm_megamenu`), mais
l'instance MOBILE — celle qui vit dans `.mobile-main-wrapper` derrière le
burger — se déplie alors en pleine largeur et passe sous le logo.
Correctif : on ne cible que l'instance mobile (3 classes, donc on gagne sans
`!important`) et on préserve l'état ouvert `.active`, sinon le burger ne
pourrait plus rien ouvrir.
Bande visée uniquement : 768-991. En dessous, le repli fonctionnait déjà ;
au-dessus, c'est le menu desktop qui prend la main.
────────────────────────────────────────────────────────────────────────── */
@media (min-width:768px) and (max-width:991px){
/* `!important` obligatoire : les DEUX règles en conflit en portent un
(`display:none!important` dans mobile-v2, `display:flex!important` dans
custom-growled). La spécificité ne départage donc rien tant qu'on reste
en déclaration normale — vérifié au navigateur, ma règle à 3 classes
perdait face à celle à 2 classes. */
.mobile-main-wrapper .ets_mm_megamenu .mm_menus_ul{display:none !important}
.mobile-main-wrapper .ets_mm_megamenu .mm_menus_ul.active{display:block !important}
}
/* =============================================================================
HEADER MOBILE SUR UNE SEULE LIGNE — 22/08/2026
Le réglage `mobile_header_search` du back-office ajoute la classe
`mobile-search-expanded` (header.tpl:498), qui déploie en permanence le
champ de recherche sous la barre : deux lignes, 90px de header au repos.
Le thème sait DÉJÀ replier ce champ — il le fait au défilement, dans l'état
`.sticked`, et remet alors la loupe dans la barre. On applique cet état
au repos aussi, en mobile uniquement. Rien n'est retiré : la recherche est
à un tap, sur la loupe, exactement comme après défilement aujourd'hui.
========================================================================== */
/* 940 et non 767 : c'est la plage complete ou la barre mobile est affichee.
S'arreter a 767 laissait les tablettes avec un header de 116px au repos qui
tombait a 54 des qu'il se collait — 62px de contenu qui sautent vers le
haut, puis rejaillissent au retour en haut de page. Mesure a 820 : le
`.columns-container` passait de 150 a 88 puis revenait, deux decalages a
0,065 chacun, soit 94% du CLS de la plage. Header de hauteur constante,
plus de saut. */
@media (max-width:940px){
.mobile-search-expanded .mh-dropdowns{display:none !important}
/* le conteneur ne faisait que 7px de large : la loupe débordait de sa boîte
et n'offrait aucune surface tactile utilisable. */
/* le thème pose `.mh-search{opacity:0;visibility:hidden}` : un élément en
visibility:hidden n'est pas testable au pointeur, donc `display` seul ne
le rendait pas cliquable — le point de la loupe renvoyait la barre. */
.mobile-search-expanded .mh-button.mh-search{
display:inline-flex !important;visibility:visible !important;opacity:1 !important;
align-items:center;justify-content:center;
width:44px;min-width:44px;height:44px;position:relative;
}
.mobile-search-expanded .mh-button.mh-search #mh-search{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;cursor:pointer;
}
.mobile-search-expanded .mh-button.mh-search.active{background:rgba(255,255,255,.12);border-radius:10px}
/* Au tap, global.js:416 pose la classe `active` sur `.mh-dropdowns`
(et non un style inline) : c'est elle qu'il faut écouter pour rouvrir. */
.mobile-search-expanded .mh-dropdowns.active{display:block !important}
/* Dernier saut : le logo passe de 62 a 50px quand la barre se colle
(`#mh-sticky.sticked` reduit son gabarit), soit 12px de contenu qui
remontent puis redescendent. La compaction au defilement se defend sur un
header de 116px ; sur un header d'une ligne elle ne gagne rien et coute
deux decalages par visite. On fige la hauteur du logo dans les deux
etats, a la valeur compacte. */
#mh-sticky .mobile-h-logo img,
#mh-sticky.sticked .mobile-h-logo img{max-height:44px}
#mh-sticky .mobile-h-logo,
#mh-sticky.sticked .mobile-h-logo{padding-top:2px;padding-bottom:2px}
/* Restait 5px d'ecart : l'etat colle porte des marges internes que l'etat
au repos n'a pas. On verrouille la hauteur de la barre au lieu de courir
apres chaque padding — c'est la hauteur qui doit etre constante, pas la
liste des reglages qui la produisent. */
#mh-sticky .mobile-main-bar,
#mh-sticky.sticked .mobile-main-bar{min-height:54px}
}
/* Same E4 ink at rest and while fixed: override the legacy magenta
gradient in global.css. Scoped to the mobile component at every width. */
#header .mobile-condensed-header #mh-sticky{
background:var(--gw-ink-900,#1a0033)!important;
}
/* An explicit search opening must win over the legacy sticky collapse rule. */
#header .mobile-condensed-header #mh-sticky .mh-dropdowns.active{display:block!important}
/* ═══════════════════════════════════════════════════════════════════════
Mégamenu desktop — mix des pistes D et B (28/08/2026).
D : les blocs marques cessent d'être une grille de logos tronqués, ils
deviennent des pastilles texte. Le panneau « Lampes » passait 67 % de
la hauteur d'écran (671 px) pour 90 liens et 24 logos, dont 8 coupés.
B : les blocs produits — qui existaient déjà en base sur Hydroponie,
Accessoires et Packs — deviennent de vraies cartes marchandes.
TOUT est scopé sous .ets_mm_megamenu : .product-container, .product-name,
.content_price et .availability sont les classes du CATALOGUE. Sans ce
préfixe, ces règles repeindraient toutes les listes produit du site.
Aucun lien n'est modifié, et rien ici ne s'applique sous 992px (mobile).
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* ── D · marques en pastilles ─────────────────────────────────────── */
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img{
display:flex!important;flex-wrap:wrap;gap:6px;margin:0!important;padding:0!important;list-style:none}
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li{
width:auto!important;float:none!important;margin:0!important;padding:0!important;
display:block!important;text-align:left!important;border:0!important;background:none!important}
.ets_mm_megamenu .mm_block_type_mnft .ets_item_img{display:none!important}
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li > a{
display:inline-block!important;padding:5px 11px!important;border-radius:999px!important;
min-height:0!important;height:auto!important;
border:1px solid rgba(43,0,79,.14)!important;background:#fff!important;color:#2B004F!important;
font-family:'Inter',system-ui,sans-serif!important;font-size:12px!important;font-weight:500!important;
line-height:1.3!important;text-transform:none!important;letter-spacing:0!important;
white-space:nowrap;transition:.15s;text-decoration:none!important}
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li > a:hover{
border-color:#7BBF3F;background:#f3f9ec;transform:none!important}
.ets_mm_megamenu .mm_block_type_mnft .ets_item_name{
display:inline!important;font-size:inherit!important;color:inherit!important;
white-space:nowrap;overflow:visible!important;text-overflow:clip!important;width:auto!important;
margin:0!important;padding:0!important;line-height:1.3!important}
/* ── B · blocs produits en cartes marchandes ──────────────────────── */
.ets_mm_megamenu .mm_block_type_product > .h4:empty{display:none!important}
.ets_mm_megamenu .mm_block_type_product .menu_product_list{margin:0!important;padding:0!important;
list-style:none;display:flex!important;gap:14px;align-items:stretch}
.ets_mm_megamenu .mm_block_type_product .menu_block_product{
flex:1 1 0!important;min-width:0;width:auto!important;float:none!important;padding:0!important;margin:0!important}
.ets_mm_megamenu .mm_block_type_product .product-container{
background:#fff;border:1px solid rgba(43,0,79,.10);border-radius:13px;overflow:hidden;
box-shadow:0 1px 2px rgba(43,0,79,.05);transition:.2s cubic-bezier(.22,1,.36,1);
display:flex;flex-direction:column;height:100%;position:relative}
.ets_mm_megamenu .mm_block_type_product .product-container:hover{
border-color:rgba(123,191,63,.5);box-shadow:0 2px 6px rgba(43,0,79,.05),0 10px 22px rgba(123,191,63,.14)}
/* image : fond neutre, les photos du catalogue ont des fonds hétérogènes */
.ets_mm_megamenu .mm_block_type_product .product-image-container{
background:#F5F2F9;border-radius:0;overflow:hidden;padding:8px}
.ets_mm_megamenu .mm_block_type_product .product-image-container img{
width:100%!important;height:96px!important;object-fit:contain!important;mix-blend-mode:multiply}
/* on ne vend pas depuis le menu : ni panier, ni aperçu rapide */
.ets_mm_megamenu .mm_block_type_product .button-container,
.ets_mm_megamenu .mm_block_type_product .quick-view,
.ets_mm_megamenu .mm_block_type_product .quick-view-wrapper-mobile,
.ets_mm_megamenu .mm_block_type_product .functional-buttons{display:none!important}
/* les étoiles vides « 0 Avis » sont un signal négatif dans un menu :
une carte de menu n'a pas à porter la note, la fiche produit le fait. */
.ets_mm_megamenu .mm_block_type_product .hook-reviews,
.ets_mm_megamenu .mm_block_type_product .comments_note,
.ets_mm_megamenu .mm_block_type_product .star_content{display:none!important}
.ets_mm_megamenu .mm_block_type_product .right-block{padding:11px 13px 13px!important;flex:1;
display:flex;flex-direction:column;text-align:left!important}
.ets_mm_megamenu .mm_block_type_product .right-block *{text-align:left!important}
.ets_mm_megamenu .mm_block_type_product .product-name,
.ets_mm_megamenu .mm_block_type_product .h5 .product-name{
font-family:'Poppins',sans-serif!important;font-weight:700!important;font-size:12.5px!important;
line-height:1.32!important;color:#2B004F!important;margin:0 0 7px!important;text-transform:none!important;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em}
.ets_mm_megamenu .mm_block_type_product .product_combination{display:none!important}
.ets_mm_megamenu .mm_block_type_product .content_price{
margin:auto 0 0!important;display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.ets_mm_megamenu .mm_block_type_product .price.product-price{
font-family:'Poppins',sans-serif!important;font-weight:800!important;font-size:15px!important;
color:#5E9A2A!important;font-variant-numeric:tabular-nums}
.ets_mm_megamenu .mm_block_type_product .old-price.product-price{
font-family:'Inter',system-ui,sans-serif!important;font-size:11.5px!important;font-weight:400!important;
color:#A99FBB!important;text-decoration:line-through}
/* ── disponibilité : RETIRÉE des cartes du menu ──────────────────────
product-list.tpl du module (ligne 138) retombe sur le libellé « In Stock »
quand le stock est à zéro, que le produit reste commandable et que
available_later est vide. Or 2 702 produits du catalogue n'ont aucun
libellé de réappro, et aucun libellé global n'est configuré : la carte
affirmait donc « En stock » sur des produits à zéro — vérifié sur la
SpectraBULB X30, le Try-Pack Indoor et le kit CYCLONE.
Une carte de menu n'a pas à porter la disponibilité : la fiche produit le
fait, elle, correctement. On la masque plutôt que d'écrire un mensonge.
Le vrai correctif est ailleurs : renseigner available_later, ou le libellé
global PS_LABEL_OOS_PRODUCTS_BOA. */
.ets_mm_megamenu .mm_block_type_product .availability{display:none!important}
/* pastille de remise */
.ets_mm_megamenu .mm_block_type_product .product-flags .discount,
.ets_mm_megamenu .mm_block_type_product .price-percent-reduction{
position:absolute;top:8px;left:8px;z-index:2;background:#7E1E57!important;color:#fff!important;
font-family:'Poppins',sans-serif!important;font-weight:800!important;font-size:10.5px!important;
padding:3px 8px!important;border-radius:6px!important;line-height:1.2!important}
/* ── D · rythme des listes ─────────────────────────────────────────
La hauteur d'un panneau est fixee par sa liste la plus longue, pas par
les marques : « Par type de lampe » compte 19 entrees a lui seul. J'ai
essaye de la faire couler sur deux colonnes (column-count:2) : la largeur
des blocs du module ne le permet pas — la seconde sous-colonne debordait
sur la colonne voisine, et en autorisant le retour a la ligne les libelles
se coupaient en deux et se frolaient. Dans un menu, la lisibilite prime :
regle retiree. On se contente de resserrer le rythme, le reste est un
arbitrage editorial (19 types de lampe, c'est beaucoup). */
.ets_mm_megamenu .ets_mm_categories > li{margin-bottom:2px}
.ets_mm_megamenu .ets_mm_categories > li > a{padding-top:3px!important;padding-bottom:3px!important;
line-height:1.35!important}
/* ── B+ · sélection éditoriale : un bloc = un produit + son intitulé ──
Chaque carte porte un usage (« Éclairage 60 × 60 », « Booster les
racines ») : il faut donc un bloc par produit, et les blocs d'une même
colonne doivent se mettre en ligne. Les blocs qui ne sont pas des cartes
(liens de catégories, marques, liste « par besoin ») gardent la pleine
largeur et forment leur propre rangée. */
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product){
display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li{
flex:1 1 0;min-width:0;padding:0!important;margin:0!important}
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_mnft),
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_category),
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_html){flex:0 0 100%}
/* l'intitulé d'usage, au-dessus de la carte */
.ets_mm_megamenu .mm_block_type_product > .h4{
display:block!important;margin:0 0 7px!important;padding:0!important;border:0!important;
font-family:'Poppins',sans-serif!important;font-weight:800!important;font-size:11px!important;
letter-spacing:.09em!important;text-transform:uppercase!important;color:#7E1E57!important;
line-height:1.3!important}
.ets_mm_megamenu .mm_block_type_product > .h4:empty{display:none!important}
/* ── « Choisir par besoin » : l'intention d'abord, le produit ensuite ──
Pas de prix ici, volontairement : Flawless Finish et Iguana Juice sont à
0 € en base (leur prix vit sur les déclinaisons), une carte afficherait
« 0,00 € ». Une liste de liens ne ment pas. */
.ets_mm_megamenu .mm_block_type_html .h4{margin-bottom:10px!important}
.ets_mm_megamenu .gw-mm-besoin{display:grid;gap:8px;margin:0;padding:0;list-style:none;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.ets_mm_megamenu .gw-mm-besoin > li{margin:0;padding:0}
.ets_mm_megamenu .gw-mm-besoin a{display:block!important;padding:9px 12px!important;border-radius:11px;
background:#fff;border:1px solid rgba(43,0,79,.10);text-decoration:none!important;transition:.15s}
.ets_mm_megamenu .gw-mm-besoin a:hover{border-color:#7BBF3F;background:#f3f9ec;transform:none!important}
.ets_mm_megamenu .gw-mm-besoin b{display:block;font-family:'Poppins',sans-serif;font-weight:700;
font-size:12.5px;color:#2B004F;line-height:1.3}
.ets_mm_megamenu .gw-mm-besoin span{display:block;margin-top:2px;font-size:11.5px;
color:#5E9A2A;font-weight:600}
/* ── rythme général du panneau ─────────────────────────────────────── */
.ets_mm_megamenu .mm_columns_ul .mm_blocks_li{padding:0 12px!important}
.ets_mm_megamenu .mm_block_type_product{padding-bottom:4px}
}
/* ═══════════════════════════════════════════════════════════════════════
12) CORRECTIFS DE LISIBILITÉ — contrôle visuel du 29/08
Trois défauts mesurés au Playwright sur les 10 rubriques du mégamenu.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* 1 · DÉBORDEMENT DE COLONNE
Les liens de catégorie héritaient white-space:nowrap d'un ancêtre du
module. Dans une colonne de 246 px, 17 libellés passaient par-dessus la
colonne voisine — « Extracteur d'air avec gestion température » venait
recouvrir « 125mm ». On rend la coupure de ligne au texte. */
.ets_mm_megamenu .mm_columns_ul .ets_mm_block_content,
.ets_mm_megamenu .mm_columns_ul .ets_mm_categories,
.ets_mm_megamenu .mm_columns_ul .ets_mm_categories > li,
.ets_mm_megamenu .mm_columns_ul .ets_mm_categories > li > a{
white-space:normal !important}
.ets_mm_megamenu .mm_columns_ul .ets_mm_categories > li > a{
max-width:100%;overflow-wrap:break-word}
/* 2 · LARGEUR DES CARTES
.menu_block_product était en flex:1 1 0 : la carte prenait ce qui
restait, d'où 106 px en Matériels semis contre 345 px en Accessoires.
Largeur plancher + passage à la ligne : mieux vaut deux cartes lisibles
qu'une rangée de trois vignettes illisibles. */
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product){gap:10px !important}
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_product){
flex:1 1 152px !important;min-width:152px !important}
.ets_mm_megamenu .mm_block_type_product .menu_product_list{
flex-wrap:wrap !important}
.ets_mm_megamenu .mm_block_type_product .menu_block_product{
flex:1 1 152px !important;min-width:0 !important;max-width:280px}
/* Matériels semis n'avait qu'une colonne : le module dimensionnait le
panneau sur elle, 418 px pour trois cartes, soit 106 px chacune. Un
panneau qui porte des cartes a besoin d'une largeur plancher. */
.ets_mm_megamenu .mm_columns_ul:has(.mm_block_type_product){min-width:660px}
/* 3 · PHOTOS
mix-blend-mode:multiply sur un fond gris assombrissait les photos à
fond coloré au lieu de les fondre : les visuels catalogue à fond
magenta viraient au violet sale. Fond blanc franc, aucune fusion. */
.ets_mm_megamenu .mm_block_type_product .product-image-container{
background:#fff !important}
.ets_mm_megamenu .mm_block_type_product .product-image-container img{
mix-blend-mode:normal !important}
}
/* 4 · BOUTON « TOUT {RAYON} » HORS DU PANNEAU
Le panneau n'est pas un conteneur flex — le module dispose les colonnes en
float. `flex:0 0 100%` sur la rangée injectée ne s'appliquait donc pas : la
ligne du bloc était raccourcie par les colonnes flottantes et le bouton
partait à leur droite, 73 à 191 px HORS du panneau selon la rubrique, sur
les 10 rubriques. On le remet sur sa propre ligne. */
@media (min-width:992px){
.ets_mm_megamenu .mm_columns_ul .gw-mm-row{
clear:both !important;display:block !important;width:100% !important;float:none !important}
.ets_mm_megamenu .mm_columns_ul a.gw-mm-all{margin-top:16px !important}
}
/* 5 · LA COLONNE QUI PORTE LA VITRINE RESPIRE PLUS
Les 3 cartes vivent dans la colonne des marques. À flex:1.7 elle faisait
440 px : trois cartes y tenaient sur 140 px chacune. À 2.2 elle en fait
510 et les cartes 162 — le nom du produit passe de deux lignes de quinze
signes à deux lignes de trente-six. */
@media (min-width:992px){
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(ul.mm_mnu_display_img),
.mm_columns_contents_ul > .mm_columns_li:has(ul.mm_mnu_display_img){
flex:2.2 1 0 !important;min-width:340px !important}
.ets_mm_megamenu .mm_block_type_product .menu_block_product{max-width:240px !important}
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_product){
max-width:240px}
}
/* 6 · LES PETITS PANNEAUX ANCRÉS À GAUCHE PASSENT EN FICHES HORIZONTALES
mm_sub_align_left borne le panneau à 360-560 px et l'ancre sous son entrée :
l'élargir le faisait sortir du viewport à droite (mesuré : 1 794 px pour un
écran de 1 600). Matériels semis y empilait donc ses trois cartes sur
1 116 px de haut. On garde la largeur et on couche les cartes : vignette à
gauche, nom et prix à droite. Trois fiches lisibles sur 300 px de haut. */
@media (min-width:992px){
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_product){
flex:0 0 100% !important;max-width:none !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product > .h4{
margin:0 0 4px !important;font-size:10px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-container{
flex-direction:row !important;align-items:center}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .left-block{
flex:0 0 84px}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-image-container{
padding:6px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-image-container img{
height:66px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .right-block{
padding:9px 13px !important;justify-content:center}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-name{
min-height:0 !important;margin-bottom:3px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .content_price{
margin:0 !important}
}
@media (min-width:992px){
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul:has(.mm_block_type_product){
min-width:410px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .menu_block_product{
max-width:none !important}
}
/* 7 · LES COLONNES PLEINE LARGEUR DU MODULE REDEVIENNENT DES RANGÉES
Le panneau est passé en flex : toutes les colonnes y sont devenues des
sœurs de même poids, y compris celles que le module déclare en
column_size_12. En Gestion climatique la vitrine, déclarée pleine largeur,
se retrouvait en quatrième colonne de 190 px et son intitulé recouvrait
celui de la colonne voisine. On rend sa rangée à une colonne 12/12. */
@media (min-width:992px){
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li.column_size_12,
.mm_columns_contents_ul > .mm_columns_li.column_size_12{
flex:0 0 100% !important;max-width:100% !important;min-width:0 !important}
}
/* 8 · LE BOUTON « TOUT {RAYON} » DANS LES PANNEAUX À ONGLETS
Hydroponie, Accessoires et Packs sont des panneaux à onglets : leur hauteur
est posée par displayHeightTab() (redéfini dans e4-header.js) AVANT que le
bouton ne soit injecté, et overflow:hidden le rognait de 11 px. On lui rend
ces 11 px sur sa marge haute plutôt que de recalculer la hauteur. */
@media (min-width:992px){
.ets_mm_megamenu .mm_columns_ul_tab a.gw-mm-all{margin-top:4px !important}
}
/* ═══════════════════════════════════════════════════════════════════════
13) DIRECTION C — LE MENU MARCHAND (29/08)
La taxonomie se resserre à gauche, la droite devient un étal.
Rien n'est écrit en base : aucun lien n'est ajouté, retiré ni modifié.
Tout est scopé ≥992px — le menu mobile en accordéon reste intact.
Cinq cas de figure relevés au navigateur sur les 10 rubriques :
A. N colonnes de catégories + 1 colonne marchande (Lampes, Chambre,
Gestion, Engrais, Terreaux)
B. une seule colonne mêlant catégories et produits (Matériels semis)
C. une seule colonne de catégories, sans vitrine (Plantes vertes)
D. panneau à onglets : 1 colonne de catégories + N colonnes d'un
produit chacune (Hydroponie, Accessoires, Packs)
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* ── A · panneau simple : deux zones ─────────────────────────────── */
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul:not(.mm_columns_ul_tab),
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul:not(.mm_columns_ul_tab){
display:grid !important;grid-template-columns:38% 1fr;gap:0 26px;align-items:start}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li{
float:none !important;width:auto !important;max-width:none !important;
min-width:0 !important;flex:none !important}
/* colonnes de catégories : empilées dans la zone de gauche */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):not(:has(.mm_block_type_product)):not(:has(.mm_block_type_mnft)):not(:has(.mm_block_type_html)){
grid-column:1}
/* la colonne marchande occupe toute la hauteur de la zone de droite */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.mm_block_type_product):not(:has(.ets_mm_block.mm_block_type_category)),
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.mm_block_type_mnft):not(:has(.ets_mm_block.mm_block_type_category)),
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.mm_block_type_html):not(:has(.ets_mm_block.mm_block_type_category)){
grid-column:2;grid-row:1 / span 20}
/* ── B · colonne unique mêlant catégories et produits ──────────────
Ce panneau est ancré sous son entrée et borné à 560 px par le module :
l'élargir le fait sortir du viewport (mesuré 1 794 px pour un écran de
1 600). Deux zones côte à côte y donnent 180 px par carte. On empile
donc : les catégories d'abord, l'étal dessous. */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product){
grid-column:1 / -1}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) > .mm_blocks_ul{
display:grid !important;grid-template-columns:repeat(3,1fr);gap:13px;align-items:start}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) > .mm_blocks_ul > .mm_blocks_li:has(.mm_block_type_category){
grid-column:1 / -1;margin:0 0 4px}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) > .mm_blocks_ul > .mm_blocks_li:has(.mm_block_type_product){
grid-column:auto;margin:0}
/* ── C · rubrique sans vitrine : une seule zone, pleine largeur ──── */
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul:not(.mm_columns_ul_tab):not(:has(.mm_block_type_product)):not(:has(.mm_block_type_mnft)),
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul:not(.mm_columns_ul_tab):not(:has(.mm_block_type_product)):not(:has(.mm_block_type_mnft)){
grid-template-columns:1fr}
/* ── D · panneaux à onglets : catégories à gauche, produits en 3 ─── */
/* gouttière de rangée à zéro : la colonne de catégories couvre 99 rangées
pour réserver sa colonne, et 98 gouttières vides ajoutaient 1 568 px de
hauteur au panneau. L'espacement vertical passe par les marges. */
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{
display:grid !important;grid-template-columns:34% repeat(3,1fr);
row-gap:0 !important;column-gap:20px !important;align-items:start}
.mm_columns_contents_ul > .mm_columns_li:not(:has(.ets_mm_block.mm_block_type_category)){
margin-bottom:16px}
.mm_columns_contents_ul > .mm_columns_li{
float:none !important;width:auto !important;min-width:0 !important;flex:none !important}
.mm_columns_contents_ul > .mm_columns_li:has(.ets_mm_block.mm_block_type_category){
grid-column:1;grid-row:1 / span 4}
/* un onglet qui ne porte que des produits reprend les quatre colonnes */
.mm_columns_contents_ul:not(:has(.ets_mm_block.mm_block_type_category)){
grid-template-columns:repeat(4,1fr)}
}
/* ── 13b · la zone de gauche : des groupes, pas une liste plate ────── */
@media (min-width:992px){
/* le titre de groupe reprend le dessus sur ses liens (il était plus petit) */
.mm_columns_ul .mm_block_type_category > .h4,
.mm_columns_ul .mm_block_type_category > h4{
font-family:'Poppins',sans-serif !important;font-size:13px !important;font-weight:800 !important;
letter-spacing:.02em !important;text-transform:none !important;color:#2B004F !important;
margin:0 0 9px !important;padding:0 0 7px !important;
border-bottom:2px solid rgba(143,212,79,.5) !important}
.mm_columns_ul .mm_blocks_li + .mm_blocks_li{margin-top:16px}
/* les liens en grille à remplissage par rangées : une échelle ordonnée
(0 à 100W → 1000W et +) se lit de gauche à droite au lieu de descendre
puis de repartir en haut, comme le faisait columns:2 */
.mm_columns_ul .mm_block_type_category > .ets_mm_block_content > ul.ets_mm_categories{
display:grid !important;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.mm_columns_ul .mm_block_type_category > .ets_mm_block_content > ul.ets_mm_categories > li{
min-width:0}
.mm_columns_ul .mm_block_type_category > .ets_mm_block_content > ul.ets_mm_categories ul{
display:block !important}
.mm_columns_ul .ets_mm_categories > li > a{
font-size:12.5px !important;line-height:1.34 !important;padding:2.5px 0 !important}
/* une colonne unique très courte n'a pas besoin de deux colonnes */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.mm_block_type_product) .mm_block_type_category > .ets_mm_block_content > ul.ets_mm_categories{
grid-template-columns:1fr}
}
/* ── 13c · la vitrine : l'intention devient l'en-tête de la carte ──── */
@media (min-width:992px){
/* le bloc produit EST la carte ; son titre en est le bandeau */
.ets_mm_megamenu .mm_block_type_product{
border:1px solid rgba(43,0,79,.11) !important;border-radius:14px;overflow:hidden;
background:#fff;padding:0 !important;transition:.15s}
.ets_mm_megamenu .mm_block_type_product:hover{
border-color:#48761C !important;box-shadow:0 12px 28px rgba(72,118,28,.14)}
.ets_mm_megamenu .mm_block_type_product > .h4,
.ets_mm_megamenu .mm_block_type_product > h4{
display:block !important;background:#7E1E57 !important;color:#fff !important;
font-family:'Poppins',sans-serif !important;font-size:12px !important;font-weight:800 !important;
letter-spacing:.04em !important;text-transform:none !important;line-height:1.25 !important;
margin:0 !important;padding:7px 13px !important;border:0 !important;border-radius:0 !important}
.ets_mm_megamenu .mm_block_type_product > .h4:empty,
.ets_mm_megamenu .mm_block_type_product > h4:empty{display:none !important}
.ets_mm_megamenu .mm_block_type_product .product-container{
border:0 !important;border-radius:0 !important;box-shadow:none !important}
.ets_mm_megamenu .mm_block_type_product .product-container:hover{box-shadow:none !important}
/* trois cartes de front dans les panneaux simples ; dans les panneaux à
onglets chaque colonne ne porte qu'un produit, la grille est au-dessus */
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product){
display:grid !important;grid-template-columns:repeat(3,1fr);gap:13px;align-items:stretch}
.mm_columns_ul_tab .mm_blocks_ul:has(.mm_block_type_product){
display:block !important}
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li{
padding:0 !important;margin:0 !important;min-width:0}
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_mnft),
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_html){
grid-column:1 / -1}
.ets_mm_megamenu .mm_block_type_product .menu_block_product{max-width:none !important}
.ets_mm_megamenu .mm_block_type_product .product-image-container img{height:104px !important}
}
/* ── 13d · finitions ──────────────────────────────────────────────── */
@media (min-width:992px){
/* le bouton « Tout {rayon} » injecté par e4-header.js devient une rangée
pleine largeur du panneau (il était devenu un élément de grille flottant) */
.ets_mm_megamenu .mm_columns_ul .gw-mm-row{
grid-column:1 / -1 !important;clear:none !important;display:block !important;
width:auto !important;float:none !important}
.ets_mm_megamenu .mm_columns_ul_tab .mm_columns_contents_ul .gw-mm-row{
grid-column:1 / -1 !important}
/* titres de groupe alignés sur leurs liens */
.mm_columns_ul .mm_blocks_li{padding:0 !important}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li{padding:0 !important}
.mm_columns_contents_ul > .mm_columns_li{padding:0 !important}
/* la zone de gauche garde une gouttière avec l'étal */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):not(:has(.mm_block_type_product)):not(:has(.mm_block_type_mnft)):not(:has(.mm_block_type_html)){
border-right:0;padding-right:0 !important}
}
@media (min-width:992px){
/* le bandeau d'intention héritait white-space:nowrap et débordait de la
carte (« Démarrer en Advanced Nutrients ») */
.ets_mm_megamenu .mm_block_type_product > .h4,
.ets_mm_megamenu .mm_block_type_product > h4{white-space:normal !important;overflow-wrap:break-word}
}
@media (min-width:992px){
/* ce panneau empilé a besoin d'un peu plus de large pour trois cartes */
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left > .mm_columns_ul:has(.mm_block_type_product){
min-width:560px !important;max-width:620px !important}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) .mm_block_type_category > .ets_mm_block_content > ul.ets_mm_categories{
grid-template-columns:1fr 1fr}
}
@media (min-width:992px){
/* Matériels semis est la 3e entrée en partant de la fin : ancré à gauche,
un panneau de 620 px sortait de l'écran à 1280 et 1440 (mesuré).
On l'ancre à droite comme les deux dernières entrées. */
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left:nth-last-child(-n+3) > .mm_columns_ul{
left:auto !important;right:0 !important;transform:none !important}
}
@media (min-width:992px){
/* le panneau ancré à gauche passait ses cartes en fiches horizontales
(section 6) parce qu'il était borné à 410 px. Il fait maintenant 620 px
et reprend les cartes verticales comme les autres rubriques. */
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-container{
flex-direction:column !important;align-items:stretch}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .left-block{flex:none}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-image-container{padding:8px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-image-container img{height:104px !important}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .right-block{
padding:11px 13px 13px !important;justify-content:flex-start}
.ets_mm_megamenu .mm_sub_align_left > .mm_columns_ul .mm_block_type_product .product-name{min-height:2.64em !important}
}
/* ── 13e · largeur des panneaux ───────────────────────────────────── */
@media (min-width:992px){
/* sub_menu_max_width est réglé en base rubrique par rubrique : 50 % pour
Gestion climatique, 80 % pour Lampes, 100 % pour les autres. Un panneau
qui porte un étal de trois cartes a besoin de la pleine largeur — à 50 %
la troisième carte était coupée. Corrigé en CSS, la base n'est pas touchée. */
.ets_mm_megamenu .mm_menus_li:not(.mm_sub_align_left) > .mm_columns_ul:not(.mm_columns_ul_tab):has(.mm_block_type_product){
width:var(--gw-wrap) !important;max-width:var(--gw-wrap) !important}
/* la rubrique sans vitrine, ancrée à gauche, respire un peu plus */
.ets_mm_megamenu .mm_menus_li.mm_sub_align_left > .mm_columns_ul:not(:has(.mm_block_type_product)){
min-width:600px !important;max-width:660px !important}
}
@media (min-width:992px){
/* un bloc « Choisir par besoin » posé dans sa propre colonne (panneaux à
onglets) occupe toute la largeur de la zone marchande */
.mm_columns_contents_ul > .mm_columns_li:has(.mm_block_type_html):not(:has(.mm_block_type_product)):not(:has(.ets_mm_block.mm_block_type_category)){
grid-column:2 / -1}
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) > .mm_blocks_ul > .mm_blocks_li:has(.mm_block_type_html){
grid-column:1 / -1}
}
/* ── 13f · deux défauts introduits par la section 13, corrigés ─────── */
@media (min-width:992px){
/* 1. la bordure verte des titres de groupe restait affichée sur les blocs
dont le titre est vide : quatre traits orphelins relevés (Hydroponie,
Accessoires ×2, Packs).
⚠ `:blank` n'est pas reconnu par Chrome : le mettre dans la même liste
de sélecteurs invalidait la règle ENTIÈRE, `:empty` compris. */
.mm_columns_ul .ets_mm_block > .h4:empty,
.mm_columns_ul .ets_mm_block > h4:empty{
display:none !important;border:0 !important;padding:0 !important;margin:0 !important}
/* 2. RENONCÉ. Une carte sans bandeau d'intention est plus courte de 29 px
que ses voisines (14 produits sur 38 n'ont aucun titre en base :
Accessoires 6/6, Packs 5/8, Hydroponie 3/5). J'ai essayé d'étirer les
cartes à la hauteur de leur rangée : la chaîne flex a fait sortir le
prix de la carte, que overflow:hidden rognait. Le défaut vient de la
base, pas du dessin — il se règle en remplissant les 14 titres. */
}
/* ═══════════════════════════════════════════════════════════════════════
13g) FINITIONS D'AUDIT — défauts objectifs, sans arbitrage éditorial
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* 1 · RYTHME — les panneaux allaient de 358 à 846 px : le contenu sautait
sous le curseur d'une rubrique à l'autre. Plancher commun. */
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul:not(.mm_columns_ul_tab),
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul:not(.mm_columns_ul_tab){min-height:560px}
/* 2 · DENTS DE SCIE — 14 produits sur 38 n'ont pas de titre en base et leur
carte perd les 29 px du bandeau. Un plancher égalise la rangée sans
toucher à la mise en page interne de la carte (une chaîne flex, elle,
faisait sortir le prix de la carte : essai abandonné en 13f). */
.mm_columns_ul .mm_block_type_product{min-height:256px}
/* 3 · NOMS DE PRODUITS — coupés à deux lignes alors que la carte a la place
d'en tenir trois. Le gabarit tronque désormais à 90 signes (72 avant),
le CSS s'occupe du reste. 18 noms coupés relevés à l'audit. */
.ets_mm_megamenu .mm_block_type_product .product-name,
.ets_mm_megamenu .mm_block_type_product .h5 .product-name{
-webkit-line-clamp:3 !important;min-height:0 !important}
/* 4 · CONTRASTE — le vert du thème, #5E9A2A, donne 3,42 sur blanc quand la
norme en demande 4,5 ; le blanc sur le bouton vert tombe au même
chiffre. Corrigé DANS LE MÉGAMENU seulement : le même vert sert
ailleurs sur le site, le changer partout est une décision de marque. */
.ets_mm_megamenu .mm_block_type_product .price.product-price,
.ets_mm_megamenu .gw-mm-besoin span,
.ets_mm_megamenu .mm_columns_ul a:hover,
.ets_mm_megamenu .mm_columns_ul .lien:hover{color:#48761C !important}
.ets_mm_megamenu a.gw-mm-all{
background:linear-gradient(100deg,#4F831F,#3D6417) !important}
/* 5 · le bloc marques posé dans une colonne mêlée occupe sa propre rangée */
.mm_columns_ul:not(.mm_columns_ul_tab) > .mm_columns_li:has(.ets_mm_block.mm_block_type_category):has(.mm_block_type_product) > .mm_blocks_ul > .mm_blocks_li:has(.mm_block_type_mnft){
grid-column:1 / -1}
.mm_columns_contents_ul > .mm_columns_li:has(.mm_block_type_mnft):not(:has(.mm_block_type_product)){
grid-column:2 / -1}
}
@media (min-width:992px){
/* la destination d'un besoin peut être un libellé très long (« Dark
Propagator - Rapport qualité / prix ( Espace bas ) ») : il débordait
de sa carte. Deux lignes au plus. */
.ets_mm_megamenu .gw-mm-besoin span{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ets_mm_megamenu .gw-mm-besoin b{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* ── 13h · plafond de hauteur du conteneur d'onglet ──────────────────
Il était à 520 px, ce qui tronquait la mesure de hauteur du panneau
maintenant que la direction C allonge le contenu. */
@media (min-width:992px){
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{
max-height:1200px;
/* scrollHeight sous-estimait la dernière rangée de la grille de 28 px et
rognait d'autant le bouton « Tout {rayon} » dans Hydroponie. Ce
rembourrage bas entre, lui, dans scrollHeight. */
/* scrollHeight sous-estime la dernière rangée de la grille : ce
rembourrage réserve la place du bouton « Tout {rayon} », qui était
rogné de 28 px dans Hydroponie. */
padding-bottom:62px !important}
}
/* ── 13i · trois sous-catégories vides masquées ───────────────────────
« Lodge - Compartiments » (563) et les deux « Reconditionnée » (436, 437)
sont dépliées automatiquement par le module : elles ne figurent dans aucune
liste de bloc et ne peuvent donc pas être retirées en base. Leur page ne
contient aucun produit — vérifié par tools/qa-megamenu.js. Le correctif
propre est de les désactiver au catalogue, ce qui dépasse le menu. */
@media (min-width:992px){
.ets_mm_megamenu .mm_columns_ul a[href*="/563-"],
.ets_mm_megamenu .mm_columns_ul a[href*="/436-"],
.ets_mm_megamenu .mm_columns_ul a[href*="/437-"]{display:none !important}
/* filet : une pastille de marque sans logo ET sans nom ne doit pas
s'afficher comme un rectangle vide cliquable */
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li > a:empty{display:none !important}
}
/* ═══════════════════════════════════════════════════════════════════════
14) PASSE DE FINITION — revue « agence » du 30/08
Défauts relevés au navigateur, panneau par panneau :
- rangées orphelines : Chambre (4 cartes → 3 + 1 seule), Hydroponie et
Packs (5 → 3 + 2) laissaient un trou en bas à droite ;
- prix désalignés dans une même rangée : un bandeau d'intention sur deux
lignes (« Démarrer en Advanced Nutrients ») décalait toute sa carte ;
- cartes « besoin » de hauteurs inégales dans la même rangée ;
- trois styles de titres de bloc différents dans le même panneau ;
- une cellule fantôme (bloc IMAGE 288, vide en base) créait une rangée
supplémentaire dans Accessoires.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* ── 14a · GRILLE EN DOUZE COLONNES, RANGÉES TOUJOURS PLEINES ────────
Douze colonnes se divisent par 3 (span 4), par 4 (span 3) et par 2
(span 6) : quel que soit le nombre de cartes, chaque rangée est pleine.
3 cartes → une rangée de trois
4 cartes → une rangée de quatre
5 cartes → trois cartes, puis DEUX PLUS LARGES qui remplissent —
un choix de gabarit, pas un accident de remplissage.
Les compteurs utilisent :nth-child(n of S) ; un navigateur qui ne les
connaît pas retombe sur trois par rangée, l'état d'avant. */
/* panneaux simples : la colonne marchande */
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product){
grid-template-columns:repeat(12,1fr) !important}
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_product){
grid-column:span 4}
/* ⚠ :has() ne peut pas contenir :has() : compter les cartes depuis le
conteneur est donc impossible. On ancre le compte sur la PREMIÈRE carte
— première ET quatrième en partant de la fin = il y en a exactement
quatre — et on style ses sœurs par ~. */
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(4 of li:has(.mm_block_type_product)),
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(4 of li:has(.mm_block_type_product)) ~ li:has(.mm_block_type_product){
grid-column:span 3}
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)){
grid-column:span 6}
/* panneaux à onglets : même règle, avec la colonne de catégories devant */
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{
grid-template-columns:29% repeat(12,1fr) !important;column-gap:14px !important}
.mm_columns_contents_ul > .mm_columns_li:has(.mm_block_type_product){
grid-column:span 4}
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(4 of .mm_columns_li:has(.mm_block_type_product)),
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(4 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:has(.mm_block_type_product){
grid-column:span 3}
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)){
grid-column:span 6}
/* la cellule fantôme : un bloc IMAGE sans image ni lien (288) ajoutait
une rangée vide dans Accessoires */
.mm_columns_contents_ul > .mm_columns_li:has(.mm_block_type_image):not(:has(img)):not(:has(a)){
display:none !important}
/* ── 14b · PRIX ALIGNÉS DANS LA RANGÉE ───────────────────────────────
Le bandeau d'intention prend une hauteur fixe de deux lignes, centré
verticalement : un intitulé court ou long, la carte garde la même
géométrie. Le nom réserve trois lignes : le prix tombe toujours au
même endroit. */
.ets_mm_megamenu .mm_block_type_product > .h4,
.ets_mm_megamenu .mm_block_type_product > h4{
display:flex !important;align-items:center;min-height:46px}
.ets_mm_megamenu .mm_block_type_product .right-block .h5{
display:block;min-height:52px}
/* ── 14c · CARTES « BESOIN » À HAUTEUR DE RANGÉE ─────────────────────
Le lien ne remplissait pas sa cellule : quatre cartes de la même
rangée s'arrêtaient à quatre hauteurs différentes. */
.ets_mm_megamenu .gw-mm-besoin > li{display:flex}
.ets_mm_megamenu .gw-mm-besoin a{flex:1;height:auto !important}
/* ── 14d · UN SEUL STYLE DE TITRE DE BLOC ────────────────────────────
Les titres de catégories, de marques et de « Choisir par besoin »
étaient rendus en trois styles (mixte 13 px, CAPITALES d'origine du
thème, capitales 11 px). Tous les titres de bloc du panneau prennent
le même. */
.mm_columns_ul .ets_mm_block > .h4,
.mm_columns_ul .ets_mm_block > h4{
font-family:'Poppins',sans-serif !important;font-size:13px !important;font-weight:800 !important;
letter-spacing:.02em !important;text-transform:none !important;color:#2B004F !important;
margin:0 0 9px !important;padding:0 0 7px !important;
border-bottom:2px solid rgba(143,212,79,.5) !important;background:none !important}
.mm_columns_ul .ets_mm_block > .h4:empty,
.mm_columns_ul .ets_mm_block > h4:empty{display:none !important;border:0 !important}
/* …sauf le bandeau des cartes produit, qui garde son aplat */
.ets_mm_megamenu .mm_block_type_product > .h4,
.ets_mm_megamenu .mm_block_type_product > h4{
background:#7E1E57 !important;color:#fff !important;font-size:12px !important;
border:0 !important;margin:0 !important;padding:7px 13px !important;letter-spacing:.04em !important}
/* ── 14e · RESPIRATION DU BAS DE PANNEAU À ONGLETS ───────────────────
62 px réservaient la place du bouton ; depuis que la hauteur est
mesurée après stabilisation, 36 suffisent — Packs gardait une bande
blanche. */
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{padding-bottom:36px !important}
}
@media (min-width:992px){
/* Le plafond de 280 px datait de la mise en page flex : dans une cellule
de grille il laissait un blanc à droite de chaque carte large. La carte
remplit sa cellule ; celles d'une rangée de deux passent en paysage —
photo à gauche, texte à droite — pour ne pas étirer une petite vignette
sur 430 px. */
.mm_columns_ul .mm_block_type_product .menu_block_product{max-width:none !important}
.mm_columns_ul .mm_block_type_product{max-width:none !important;width:100%}
/* …et le li intermédiaire gardait un max-width:240px posé pour l'ancienne
mise en page flex (section 5) : c'est LUI qui empêchait la carte de
remplir sa cellule — trouvé en remontant la chaîne au navigateur. */
.ets_mm_megamenu .mm_blocks_ul:has(.mm_block_type_product) > li:has(.mm_block_type_product){
max-width:none !important;width:100% !important}
/* on cible par la même logique de compte que 14a — les deux dernières
cartes quand il y en a cinq */
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)) .product-container,
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)) .product-container{
/* !important : la carte verticale de la section 11 pose flex-direction:
column!important, la spécificité seule ne suffit pas */
display:flex !important;flex-direction:row !important;align-items:center !important}
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)) .left-block,
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)) .left-block{
flex:0 0 168px !important}
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)) .right-block,
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)) .right-block{
display:flex !important;flex-direction:column !important;justify-content:center !important}
}
@media (min-width:992px){
/* le plancher de 256 px est pensé pour les cartes verticales ; sur une
carte paysage il laissait ~90 px de blanc sous le texte centré */
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)) .mm_block_type_product,
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)) .mm_block_type_product{
min-height:0 !important}
.mm_columns_contents_ul > .mm_columns_li:nth-child(1 of .mm_columns_li:has(.mm_block_type_product)):nth-last-child(5 of .mm_columns_li:has(.mm_block_type_product)) ~ .mm_columns_li:nth-last-child(-n+2 of .mm_columns_li:has(.mm_block_type_product)) .right-block .h5,
.mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul:has(.mm_block_type_product) > li:nth-child(1 of li:has(.mm_block_type_product)):nth-last-child(5 of li:has(.mm_block_type_product)) ~ li:nth-last-child(-n+2 of li:has(.mm_block_type_product)) .right-block .h5{
min-height:0 !important}
}
/* ═══════════════════════════════════════════════════════════════════════
15) DESIGN B — « LA GALERIE TEINTÉE » (validé sur maquette le 30/08)
Zéro bordure : que des surfaces. Cartes → tuiles lavande, photo sur
blanc arrondi ; bandeau aubergine → puce blanche ; marques → pastilles
fantômes ; besoins → cartes blanches à ombre douce ; liens → rangées
arrondies au survol ; onglets → pilules sur piste.
La grille 12 colonnes de la section 14 (rangées toujours pleines) est
conservée telle quelle — seul l'habillage change.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:992px){
/* ── fond du panneau ─────────────────────────────────────────────── */
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul,
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul,
.ets_mm_megamenu .mm_columns_ul.mm_columns_ul_tab,
.mm_columns_ul_tab .mm_tabs_li .mm_columns_contents_ul{
background:#FBFAFD !important}
/* ── titres de groupe : plus de trait vert ───────────────────────── */
.mm_columns_ul .ets_mm_block > .h4,
.mm_columns_ul .ets_mm_block > h4{
border-bottom:0 !important;padding:0 !important;margin:0 0 10px !important;
font-size:13px !important;color:#2B004F !important}
/* ── liens de navigation : rangées arrondies au survol ───────────── */
.mm_columns_ul .ets_mm_categories > li > a{
padding:6px 10px !important;border-radius:9px;color:#5A4A73 !important;
transform:none !important;transition:background .15s,color .15s}
.mm_columns_ul .ets_mm_categories > li > a:hover{
background:#F1ECF8;color:#2B004F !important;transform:none !important}
.mm_columns_ul .ets_mm_categories a::before{display:none !important}
/* ── la carte devient une tuile lavande ──────────────────────────── */
.ets_mm_megamenu .mm_block_type_product{
display:flex;flex-direction:column;
background:#F4F0FA !important;border:0 !important;border-radius:18px !important;
padding:13px !important;box-shadow:none !important;
transition:background .18s,transform .18s}
.ets_mm_megamenu .mm_block_type_product:hover{
background:#EFE8F8 !important;border:0 !important;
box-shadow:none !important;transform:translateY(-2px)}
.mm_columns_ul .product-container{
background:transparent !important;border:0 !important;border-radius:0 !important;
padding:0 !important;box-shadow:none !important}
.mm_columns_ul .product-container:hover{box-shadow:none !important;border:0 !important}
/* le bandeau aubergine devient une puce blanche */
.ets_mm_megamenu .mm_block_type_product > .h4,
.ets_mm_megamenu .mm_block_type_product > h4{
display:inline-flex !important;align-self:flex-start;align-items:center;
background:#fff !important;color:#8E1259 !important;
font-size:11px !important;font-weight:700 !important;letter-spacing:0 !important;
border-radius:999px !important;padding:4px 11px !important;
min-height:0 !important;margin:0 0 10px !important;border:0 !important;
box-shadow:0 1px 2px rgba(43,0,79,.06)}
/* la photo sur un blanc arrondi */
.ets_mm_megamenu .mm_block_type_product .product-image-container{
background:#fff !important;border-radius:12px !important;padding:10px !important;
overflow:hidden}
.ets_mm_megamenu .mm_block_type_product .product-image-container img{
height:110px !important}
/* nom apaisé, prix encre (le violet de la maquette B) */
.ets_mm_megamenu .mm_block_type_product .product-name,
.ets_mm_megamenu .mm_block_type_product .h5 .product-name{
color:#4A3866 !important;font-weight:600 !important}
.ets_mm_megamenu .mm_block_type_product .price.product-price,
.mm_columns_ul .product-container .price.product-price{
color:#2B004F !important;font-weight:800 !important}
/* la remise : pastille en ligne à côté du prix, plus de bulle flottante */
.ets_mm_megamenu .mm_block_type_product .product-flags .discount,
.ets_mm_megamenu .mm_block_type_product .price-percent-reduction{
position:static !important;display:inline-flex !important;align-items:center;
background:#B0176F !important;color:#fff !important;border-radius:999px !important;
padding:2px 8px !important;font-size:11px !important;font-weight:800 !important;
margin:0 0 0 8px !important;transform:none !important;line-height:1.4 !important}
/* ── marques : pastilles fantômes ────────────────────────────────── */
.mm_columns_ul ul.mm_mnu_display_img > li > a{
background:#F1ECF8 !important;border:0 !important;box-shadow:none !important;
color:#5A4A73 !important;border-radius:999px !important;
padding:7px 14px !important;min-height:0 !important;
font-size:12px !important;font-weight:600 !important}
.mm_columns_ul ul.mm_mnu_display_img > li > a:hover{
background:#E9E1F4 !important;color:#2B004F !important;
box-shadow:none !important;transform:none !important;border:0 !important}
/* ── besoins : cartes blanches à ombre douce ─────────────────────── */
.ets_mm_megamenu .gw-mm-besoin a{
background:#fff !important;border:0 !important;border-radius:14px !important;
box-shadow:0 1px 3px rgba(43,0,79,.06);transition:box-shadow .15s}
.ets_mm_megamenu .gw-mm-besoin a:hover{
background:#fff !important;border:0 !important;
box-shadow:0 6px 18px rgba(43,0,79,.10);transform:none !important}
/* ── onglets : pilules fantômes, plus de bandeau gris ────────────── */
.mm_columns_ul_tab::before{background:transparent !important;border-bottom:0 !important}
.mm_columns_ul_tab .mm_tab_li_content{
background:#EFEAF6 !important;border-radius:999px !important;
margin:12px 0 0 16px !important;padding:8px 17px !important}
.mm_columns_ul_tab .mm_tab_li_content a{color:#6E5C8A !important}
.mm_columns_ul_tab .mm_tab_li_content:hover{background:#E9E1F4 !important}
.mm_columns_ul_tab .mm_tab_li_content:hover a{color:#2B004F !important}
}
@media (min-width:992px){
/* les pastilles gardaient leur liseré : la règle d'origine
(.ets_mm_megamenu .mm_block_type_mnft …) est plus spécifique que la
mienne — on la bat avec son propre sélecteur */
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li > a{
background:#F1ECF8 !important;border:0 !important;box-shadow:none !important;
color:#5A4A73 !important;padding:7px 14px !important;font-size:12px !important}
.ets_mm_megamenu .mm_block_type_mnft .mm_mnu_display_img > li > a:hover{
background:#E9E1F4 !important;color:#2B004F !important;border:0 !important;
box-shadow:none !important;transform:none !important}
/* noms sur deux lignes comme la maquette B validée — la réserve de trois
lignes de la section 14 laissait dépasser un fragment de 3e ligne sous
les noms longs */
.ets_mm_megamenu .mm_block_type_product .product-name,
.ets_mm_megamenu .mm_block_type_product .h5 .product-name{
-webkit-line-clamp:2 !important}
.ets_mm_megamenu .mm_block_type_product .right-block .h5{
min-height:36px !important}
}
/* ═══ 16. Cache mégamenu régénéré (31/08) : deux cas que la grille ne couvrait pas ═══
a) blocs à carte unique côte à côte : certaines cellules s'étiraient (370px) et
d'autres non (289px) selon la colonne voisine — les cartes remplissent
désormais leur cellule, prix calé en bas, pour des rangées visuellement égales */
.ets_mm_megamenu .mm_columns_ul:not(.mm_columns_ul_tab) .mm_blocks_ul{align-items:stretch}
.ets_mm_megamenu li.mm_blocks_li:has(.mm_block_type_product){display:flex}
.ets_mm_megamenu li.mm_blocks_li>.mm_block_type_product{height:100%;width:100%;display:flex;flex-direction:column}
.ets_mm_megamenu .mm_block_type_product .ets_mm_block_content{flex:1;display:flex;flex-direction:column}
.ets_mm_megamenu .mm_block_type_product .right-block{margin-top:auto}
/* b) prix à 4 chiffres (packs 1 087,92 €) : autoriser le retour à la ligne dans la
rangée de prix au lieu de rogner */
.ets_mm_megamenu .mm_block_type_product .right-block .content_price,
.ets_mm_megamenu .mm_block_type_product .right-block [class*=price]{white-space:normal;flex-wrap:wrap}
/* ============================================================================
Audit 2026-09-04 — méga-menu : accès clavier (A11Y-003) et panneau plus haut
que la fenêtre (UX-DSK-002).
A11Y-003 : au focus clavier le JS pose bien .hover sur le li et le panneau
passe à opacity:1, mais il reste visibility:hidden — la règle du module
exige `.mm_menus_li.hover:hover`, donc la souris EN PLUS de la classe. Les
104 liens du rayon éclairage n'étaient atteignables qu'à la souris.
:focus-within rend le panneau visible dès que le focus entre dans l'entrée
de niveau 1 ou dans le panneau lui-même, et le referme au Maj+Tab sortant.
UX-DSK-002 : panneau de 885 px en position:absolute, overflow visible et
aucune hauteur maximale — 22 liens hors écran en 1440x900, 38 en 1280x800.
========================================================================== */
.ets_mm_megamenu .mm_menus_li:focus-within > .mm_columns_ul,
.ets_mm_megamenu .mm_menus_li:focus-within > .mm_sub_ul{
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
margin-top:0!important;
}
/* entrées de niveau 1 : elles n'avaient aucun indicateur de focus (style
identique au repos et au focus) — l'anneau doit tenir sur le violet foncé. */
.ets_mm_megamenu .mm_menus_ul > li > a:focus-visible{
outline:3px solid rgba(155,217,104,.95)!important;
outline-offset:-3px!important;
border-radius:6px;
}
/* le panneau ne dépasse plus le bas de la fenêtre et défile en interne ;
overscroll-behavior évite d'emporter la page en fin de course. */
.ets_mm_megamenu .mm_columns_ul{
max-height:calc(100vh - 190px);
overflow-y:auto;
overscroll-behavior:contain;
}
@media(max-width:940px){
/* menu mobile : le tiroir gère déjà son propre défilement */
.ets_mm_megamenu .mm_columns_ul{max-height:none;overflow-y:visible}
}
/* ============================================================================
Audit 2026-09-04 — UX-MOB-002 : cibles tactiles de l'en-tête mobile.
Le gestionnaire de clic est délégué sur #mh-search,#mh-user,#mh-cart
(js/global.js:411) : c'est le SPAN qui doit être tapable, pas le conteneur
visuel .mh-button de 36x54. Mesuré avant correction : #mh-user 15x29,2 —
#mh-cart 19x31,2 — burger 38x38, contre 39x27, 39x29 et 93,6x48 en
production. Deux taps sur quatre restaient sans effet. La barre fait 54 px
de haut : 44 px tiennent.
========================================================================== */
@media(max-width:991px){
#mh-user,#mh-cart{
display:inline-flex!important;align-items:center;justify-content:center;
width:44px;height:44px;
}
/* le badge quantité est positionné sur #mh-cart : le recentrer sur l'icône
maintenant que la boîte fait 44 px et non 19. */
#mh-cart .gw-mqty{top:2px;right:2px}
.mh-menu .ybc-menu-toggle{width:44px!important;height:44px!important}
}
/* ============================================================================
PERF-004 (audit du 04/09) — le méga-menu pèse 3 149 nœuds sur toutes les
pages, contre 1 861 en production, et le passe de 2 031 à 3 361.
Ce surcoût explique plus de la moitié de l'écart de DOM total.
Le nombre de blocs relève du contenu du menu, donc d'une décision éditoriale.
Ce qu'on peut faire sans y toucher : dire au navigateur de ne pas calculer la
mise en page des dix panneaux tant qu'ils sont fermés. content-visibility
saute le layout et la peinture du sous-arbre ; contain-intrinsic-size lui
donne une taille de substitution pour que rien ne saute à l'ouverture — 710 px
est la hauteur maximale posée plus haut (UX-DSK-002).
Le confinement est levé dès que le panneau s'ouvre, au survol comme au clavier,
sinon son contenu ne serait ni mesurable ni atteignable.
========================================================================== */
@media(min-width:941px){
.ets_mm_megamenu .mm_columns_ul{
content-visibility:auto;
contain-intrinsic-size:1200px 710px;
}
.ets_mm_megamenu .mm_menus_li:hover > .mm_columns_ul,
.ets_mm_megamenu .mm_menus_li.hover > .mm_columns_ul,
.ets_mm_megamenu .mm_menus_li:focus-within > .mm_columns_ul{
content-visibility:visible;
}
}
/* 10/09/2026 — .hover est un mode du module, pas son état ouvert.
Retirer les panneaux fermés du rendu évite les images fantômes au survol. */
@media (min-width:992px){
.ets_mm_megamenu .mm_menus_li > .mm_columns_ul{
animation:none!important;transition:none!important;opacity:1!important;
}
.ets_mm_megamenu .mm_menus_li:not(:hover):not(:focus-within):not(.menu_hover):not(.open_li) > .mm_columns_ul,
.ets_mm_megamenu:has(.mm_menus_li:hover) .mm_menus_li:not(:hover) > .mm_columns_ul{
display:none!important;
}
}
/* === e4-footer.css === */
/* e4-footer.css — réordonné : règles puis @media (max-width décroissant), dédupliqué */
.footer{border-top-width:1px;border-top-style:solid;padding-top:56px}
.foot-grid{max-width:var(--gw-wrap,min(90%,1600px));margin:0 auto;padding:0 0 44px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{height:28px;margin-bottom:16px}
.foot-brand p{font-size:13.5px;line-height:1.6;max-width:30ch}
.foot-col h3,.foot-col h4{font-family:'Poppins',sans-serif;font-size:14px;margin-bottom:14px;font-weight:600}
.foot-col a{display:block;font-size:13.5px;padding:5px 0;transition:.15s}
.foot-col a:hover{padding-left:4px}
.foot-bar{border-top-width:1px;border-top-style:solid}
.foot-bar-in{max-width:var(--gw-wrap,min(90%,1600px));margin:0 auto;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px}
.foot-pay span{border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700;margin-left:6px}
.hbanner .btn:focus-visible,.band--brand .btn:focus-visible,.band--ink .btn:focus-visible,.footer a:focus-visible,.gw-hero .panel:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.band--brand,
.footer{
background:
radial-gradient(85% 120% at 88% -12%, rgba(126,30,87,.36), transparent 58%),
radial-gradient(70% 110% at 2% 112%, rgba(123,191,63,.13), transparent 60%),
linear-gradient(to top, #1a0033 0%, #2b004f 56%, #3a0a63 100%);
color:#efe7f7;
}
.footer{border-top-color:transparent}
.footer .foot-brand p{color:#b9a9d0}
.footer .foot-col h3,.foot-col h4{color:#fff}
.footer .foot-col a{color:#c9b8de}
.footer .foot-col a:hover{color:#fff}
.footer .foot-bar{border-top-color:rgba(255,255,255,.12)}
.footer .foot-bar-in{color:#c9b8de}
.footer .foot-pay span{background:rgba(255,255,255,.10);color:#fff}
.footer{position:relative;z-index:3;overflow:visible}
.footer .foot-grid,.footer .foot-bar{position:relative;z-index:2}
.footer::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * clamp(36px,3.6vw,54px) + 1px);height:clamp(36px,3.6vw,54px);z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201440%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%270.0%2C60%20102.9%2C60%200.0%2C6%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27102.9%2C60%20102.9%2C27%200.0%2C6%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27102.9%2C60%20205.7%2C60%20102.9%2C27%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27205.7%2C60%20205.7%2C13%20102.9%2C27%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27205.7%2C60%20308.6%2C60%20205.7%2C13%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27308.6%2C60%20308.6%2C33%20205.7%2C13%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27308.6%2C60%20411.4%2C60%20308.6%2C33%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27411.4%2C60%20411.4%2C9%20308.6%2C33%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27411.4%2C60%20514.3%2C60%20411.4%2C9%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27514.3%2C60%20514.3%2C24%20411.4%2C9%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27514.3%2C60%20617.1%2C60%20514.3%2C24%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27617.1%2C60%20617.1%2C4%20514.3%2C24%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27617.1%2C60%20720.0%2C60%20617.1%2C4%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27720.0%2C60%20720.0%2C30%20617.1%2C4%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27720.0%2C60%20822.9%2C60%20720.0%2C30%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%27822.9%2C60%20822.9%2C16%20720.0%2C30%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27822.9%2C60%20925.7%2C60%20822.9%2C16%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%27925.7%2C60%20925.7%2C28%20822.9%2C16%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%27925.7%2C60%201028.6%2C60%20925.7%2C28%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%271028.6%2C60%201028.6%2C8%20925.7%2C28%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%271028.6%2C60%201131.4%2C60%201028.6%2C8%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%271131.4%2C60%201131.4%2C22%201028.6%2C8%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%271131.4%2C60%201234.3%2C60%201131.4%2C22%27%20fill%3D%27%234a1574%27/%3E%3Cpolygon%20points%3D%271234.3%2C60%201234.3%2C12%201131.4%2C22%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%271234.3%2C60%201337.1%2C60%201234.3%2C12%27%20fill%3D%27%233a0a63%27/%3E%3Cpolygon%20points%3D%271337.1%2C60%201337.1%2C31%201234.3%2C12%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%271337.1%2C60%201440.0%2C60%201337.1%2C31%27%20fill%3D%27%232b004f%27/%3E%3Cpolygon%20points%3D%271440.0%2C60%201440.0%2C7%201337.1%2C31%27%20fill%3D%27%234a1574%27/%3E%3Cpolyline%20points%3D%270.0%2C6%20102.9%2C27%20205.7%2C13%20308.6%2C33%20411.4%2C9%20514.3%2C24%20617.1%2C4%20720.0%2C30%20822.9%2C16%20925.7%2C28%201028.6%2C8%201131.4%2C22%201234.3%2C12%201337.1%2C31%201440.0%2C7%27%20fill%3D%27none%27%20stroke%3D%27%237BBF3F%27%20stroke-width%3D%276%27%20opacity%3D%27.18%27%20stroke-linejoin%3D%27round%27/%3E%3Cpolyline%20points%3D%270.0%2C6%20102.9%2C27%20205.7%2C13%20308.6%2C33%20411.4%2C9%20514.3%2C24%20617.1%2C4%20720.0%2C30%20822.9%2C16%20925.7%2C28%201028.6%2C8%201131.4%2C22%201234.3%2C12%201337.1%2C31%201440.0%2C7%27%20fill%3D%27none%27%20stroke%3D%27%237BBF3F%27%20stroke-width%3D%272.4%27%20opacity%3D%27.95%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr}}
/* Largeur du pied de page alignee sur l'en-tete : les deux conteneurs du footer
etaient les seuls du theme a garder le 1280px figé d'origine, quand l'en-tete,
l'accueil et les gabarits de page etaient passes au jeton --gw-wrap. En 1920 le
texte du footer demarrait 184px plus a droite que celui de l'en-tete. Meme
rattrapage de gouttiere sous 1100px que #header .container. */
@media(max-width:1100px){.foot-grid,.foot-bar-in{padding-left:14px;padding-right:14px}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
/* Audit 2026-07 : les modules herites ont ete decroches de displayFooter.
Seule la modale d'avis reste accrochee ici ; plus rien a masquer. */
/* ═══ Audit bloc à bloc 02/08 : réseaux sociaux + colonne Mon compte ═══ */
.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:10px;color:#e6dff2;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
transition:color .15s,border-color .15s,background .15s;
}
.foot-social a:hover{color:#9bd968;border-color:rgba(123,191,63,.6);background:rgba(123,191,63,.1)}
.foot-social svg{width:17px;height:17px;fill:none}
/* `fill:none` ci-dessus suppose que les quatre icônes sont dessinées au trait.
Trois ne le sont pas : Facebook, TikTok et YouTube sont des tracés PLEINS.
Sans remplissage ni contour, elles ne peignaient rien — trois cases vides
sur quatre, sur toutes les résolutions. Seul Instagram s'en sortait, ses
formes étant des rect/circle qui héritent d'un `stroke`.
On ne remplit que les `path` : les formes d'Instagram ne sont pas touchées
et ne deviennent pas des pâtés. Relevé et corrigé le 22/08/2026. */
.foot-social svg > path{fill:currentColor}
/* ══ Academy : bande de pied de page (toutes les pages) et lignes d'impasse ══ */
.gw-academy-pied{background:var(--gw-grad-ink,linear-gradient(150deg,#3a0a63,#1a0033));
border-top:3px solid var(--gw-green-500,#7BBF3F)}
.gw-academy-pied-in{max-width:min(90%,1600px);margin:0 auto;padding:16px 24px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gw-academy-pied .gap-t{font-family:var(--gw-font-disp,'Russo One',sans-serif);font-weight:400;
font-size:16px;color:#fff}
.gw-academy-pied .gap-d{font-size:14px;color:var(--gw-on-ink-70,#c9b8de);flex:1;min-width:200px}
#gwps .gw-academy-pied .gap-a,
.gw-academy-pied .gap-a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
color:#1a0033!important;background:var(--gw-green-400,#8ed04e);border-radius:999px;padding:10px 18px;
text-decoration:none;white-space:nowrap;
transition:transform 200ms cubic-bezier(.22,1,.36,1),box-shadow 200ms cubic-bezier(.22,1,.36,1)}
.gw-academy-pied .gap-a:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(94,154,42,.34)}
.gw-academy-pied .gap-a svg{width:14px;height:14px}
@media (max-width:640px){
.gw-academy-pied-in{padding:14px 16px;gap:9px}
.gw-academy-pied .gap-t{font-size:14.5px}
.gw-academy-pied .gap-d{font-size:13px}
.gw-academy-pied .gap-a{width:100%;justify-content:center}
}
/* la ligne posée sur les écrans d'impasse : panier vide, 404, recherche vide */
.gw-academy-ligne{margin:18px auto 0;max-width:60ch;font-size:14.5px;line-height:1.55;
color:var(--gw-n600,#6d6480);text-align:center}
.gw-academy-ligne a{font-weight:700;color:var(--gw-green-800,#3e6b1a);text-decoration:none;
border-bottom:1.5px solid rgba(62,107,26,.35)}
.gw-academy-ligne a:hover{border-bottom-color:var(--gw-green-800,#3e6b1a)}
/* ══ Academy : carte de compte, de confirmation de commande, et pied d'article ══ */
.gw-academy-compte,.gw-academy-commande,.gw-academy-post{display:flex;align-items:center;gap:16px;
text-decoration:none;background:#fff;border:1px solid #e6dff0;
border-left:5px solid var(--gw-green-500,#7BBF3F);border-radius:16px;padding:15px 18px;margin:18px 0;
box-shadow:0 1px 2px rgba(43,0,79,.04),0 4px 12px rgba(43,0,79,.05);
transition:transform 200ms cubic-bezier(.22,1,.36,1),box-shadow 200ms cubic-bezier(.22,1,.36,1)}
.gw-academy-compte:hover,.gw-academy-commande:hover,.gw-academy-post:hover{transform:translateY(-3px);
box-shadow:0 0 0 1px rgba(123,191,63,.24),0 10px 24px rgba(123,191,63,.14)}
.gac-ecu,.gap-ecu{flex:none;width:58px;height:58px;border-radius:14px;display:flex;flex-direction:column;
align-items:center;justify-content:center;line-height:1;color:#fff;
background:linear-gradient(100deg,#8ed04e,#5e9a2a);transform:skewX(-5deg)}
.gac-ecu b,.gap-ecu b{font-family:'Russo One',sans-serif;font-weight:400;font-size:21px;transform:skewX(5deg)}
.gac-ecu i,.gap-ecu i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;margin-top:3px;opacity:.92;transform:skewX(5deg)}
.gac-t,.gap-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gac-t b,.gap-t b{font-family:'Russo One',sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#2B004F}
.gac-t span,.gap-t span{font-size:13.5px;line-height:1.45;color:#5c5470}
.gac-a,.gap-a{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
color:#fff!important;background:#2B004F;border-radius:999px;padding:10px 17px;white-space:nowrap;
text-decoration:none}
.gw-academy-compte:hover .gac-a,.gw-academy-commande:hover .gac-a,.gw-academy-post:hover .gap-a{background:#3e6b1a}
.gac-a svg,.gap-a svg{width:14px;height:14px}
@media (max-width:640px){
.gw-academy-compte,.gw-academy-commande,.gw-academy-post{flex-wrap:wrap;gap:12px;padding:14px}
.gac-a,.gap-a{width:100%;justify-content:center}
}
/* === e4-mobile.css === */
/* =============================================================================
E4 · corrections mobiles (plan du 22/08/2026)
Chargé APRÈS tous les autres CSS du thème : prime sans avoir à multiplier
les !important. Point de rupture unique 767px — au-dessus, rien ne change.
Un seul fichier pour tout le chantier : le diff reste lisible et
`git checkout` d'un seul fichier annule l'ensemble.
========================================================================== */
@media (max-width:767px){
/* ── Gouttière : 44 → 16 px ────────────────────────────────────────────
Deux mécanismes se cumulaient sans que personne ne l'ait décidé :
--gw-wrap retire 5% de chaque côté, .bw ajoute 24px de padding.
Sur 390px il ne restait que 302px de contenu — 22% de l'écran perdu.
On neutralise le premier et on ramène le second à 16px.
------------------------------------------------------------------- */
:root{--gw-wrap:100%;--gw-gutter:16px}
.band .bw,
.gw-cat .bw,
.gw-block .bw,
.gw-exp .bw,
.reassure-in{padding-left:16px !important;padding-right:16px !important}
/* ── Rythme vertical ───────────────────────────────────────────────────
13 sections portaient 40px de padding haut ET bas. Entre deux bandes
sombres, les marges de 32px s'y ajoutaient : 144px de vide d'un bloc à
l'autre, soit 17% d'un écran, trois fois dans la page.
------------------------------------------------------------------- */
.band .bw,
.gw-cat .bw,
.gw-block .bw,
.gw-exp .bw{padding-top:24px !important;padding-bottom:24px !important}
.band--brand{margin-top:0 !important;margin-bottom:0 !important}
/* l'en-tête de section était détaché de ce qu'il annonce.
CORRIGÉ après revue : scopé #index — `.head` sert aussi sur la fiche
produit (`_tabs.tpl`), où le !important battait un style inline. */
#index .head,#index .head--left{margin-bottom:20px !important}
/* ── Dérive de défilement ET CLS : une seule et même cause ─────────────
`e4-home.css:334` estime TOUTES les sections à 900px alors que le réel
va de 325 à 2856px. La page annonçait 14033px puis en faisait 21339, et
le relevé des `sources` de layout-shift montre que 91% du CLS vient des
deux sections dont l'écart est le plus grand.
Valeurs relevées section par section APRÈS les tâches 2 et 3 (la page
avait déjà changé), arrondies à la centaine SUPÉRIEURE : la page
rétrécit au défilement au lieu de s'allonger, ce qui ne déplace pas le
contenu déjà lu.
Mobile uniquement : la règle globale reste à 900px pour le desktop, dont
les hauteurs n'ont pas été mesurées. On ne touche pas à ce qu'on n'a pas
mesuré.
------------------------------------------------------------------- */
/* CORRIGÉ après revue : les `:nth-child()` comptaient le
de `home.tpl:11`, donc TOUS les indices étaient décalés d'un cran. Résultat
mesuré : #gw-brands (325px réels) recevait 2900px, et fabricants — la plus
grosse section, 2856px — restait au gabarit global de 900px. La règle
positionnelle écrasait même les règles par id, plus spécifique l'emportant.
On passe donc par des sélecteurs stables : id quand il existe, sinon
frère adjacent. Aucune dépendance à l'ordre ni au nombre d'enfants, et
les sections sous `{if}` dans home.tpl ne peuvent plus tout décaler.
Les sections en `content-visibility:visible` (e4-home.css:340) sont
exclues : sans confinement de taille, `contain-intrinsic-size` est ignoré
— c'était 3 règles mortes sur 11.
Tous préfixés `#gw-home` : ce fichier est chargé AVANT `e4-home.css`
(header.tpl 312 contre 324), donc à spécificité égale c'est l'autre qui
gagne. Les règles par classe seules (.gw-exp, .gw-blog) étaient muettes
face à `.gw-home .gw-exp` — vérifié au navigateur. */
/* RECALIBRÉ le 22/08 — deux fois : après le passage en rails, puis après la
réduction des en-têtes, puis une TROISIÈME le 23/08 : le pied de page
sous-déclarait sa hauteur de 1 150px, ce qui compensait par accident la
marge de sécurité de ces gabarits. Le pied corrigé, la marge est ramenée
de 6% à 2%. Valeurs ci-dessous = troisième relevé : les sections concernées
ont perdu de 12 à 70% de leur hauteur, et des gabarits restés à l'ancienne
valeur faisaient annoncer 4 645px de trop — la page rétrécissait d'autant
au défilement. Valeurs relevées puis arrondies ~8% AU-DESSUS : mieux vaut
que la page rétrécisse un peu que de voir le contenu déjà lu se déplacer.
Les sections listées en `content-visibility:visible` (e4-home.css:340 :
#categories, #gw-avis, #gw-brands, #gw-etapes, #gw-nl) sont volontairement
absentes : sans confinement de taille, la propriété y est ignorée. */
#gw-home .gw-block section.band {contain-intrinsic-size:auto 840px} /* mesuré 819 */
#gw-home #gw-brands + section.band {contain-intrinsic-size:auto 1800px} /* mesuré 1757 — fabricants */
/* PlayShorts réservait 500px et rend 0 : la ressource du widget répond 403,
et le garde-fou de home-e4.js le masque au bout de 4 s. C'était 500px de
hauteur fantôme annoncée à chaque chargement de l'accueil.
⚠ Si le 403 est un jour réglé, cette valeur est à reprendre. */
#gw-home #gw-playshorts {contain-intrinsic-size:auto 0}
#gw-home #gw-avis + section.band {contain-intrinsic-size:auto 410px} /* mesuré 397 — choisir par type */
#gw-home #gw-academy {contain-intrinsic-size:auto 1320px} /* mesuré 1292 */
#gw-home #guides {contain-intrinsic-size:auto 920px} /* mesuré 896 */
#gw-home .gw-exp {contain-intrinsic-size:auto 1290px} /* mesuré 1262 — leader européen */
#gw-home .gw-exp section.band {contain-intrinsic-size:auto 1240px} /* la section INTERNE est confinée elle aussi */
#gw-home .gw-exp + section.band {contain-intrinsic-size:auto 1370px} /* mesuré 1336 — notre histoire */
#gw-home section.band--alt.gw-blog {contain-intrinsic-size:auto 740px} /* mesuré 721 */
/* ── Les deux sections les plus hautes ─────────────────────────────────
Décomposition mesurée :
Fabricants 2856px = .v4-hero 899 + .v4-body 1645
Academy 2695px = head 276 + syllabus 160 + auteur 59 + rail 822
+ acquis 475 + CTA 145 + rayons 496
Le plan prévoyait de masquer 7 des 10 nœuds du rail. On COMPACTE à la
place : le gain est comparable et aucun lien ne quitte le rendu, ce qui
respecte la règle « on n'ajoute que des liens, on n'en retire jamais ».
------------------------------------------------------------------- */
/* Academy — rail plus dense : 10 nœuds à 82px devenaient 822px */
#index .gwa-nodes{gap:12px}
#index .gwa-node{column-gap:12px}
#index .gwa-chip{width:46px !important;height:46px !important;border-radius:14px}
#index .gwa-chip > svg{width:22px;height:22px}
#index .gwa-num{min-width:19px;height:19px;font-size:10px;top:-6px;right:-6px}
#index .gwa-lock{width:16px;height:16px;bottom:-5px}
#index .gwa-lock svg{width:9px;height:9px}
#index .gwa-lbl{font-size:13.5px}
#index .gwa-track{left:22px;top:10px;bottom:10px}
#index .gwa-node{grid-template-columns:56px minmax(0,1fr)}
/* Academy — acquis et rayons resserrés */
#index .gwa-out{margin-top:26px;padding-top:20px}
#index .gwa-out-i{padding:12px 14px}
#index .gwa-ray{margin-top:24px;padding-top:18px}
#index .gwa-ray-grid{gap:8px}
#index .gwa-ray-i{padding:11px 12px;gap:6px}
#index .gwa-syl-i{padding:11px 8px}
#index .gwa-syl-i b{font-size:21px}
#index .gwa-by{margin-bottom:26px}
/* Fabricants — CORRIGÉ après revue : `max-height:420px;overflow:hidden`
coupait 477px du bloc, dont la mention « Garantie PREMIUM ». Couper du
contenu contredit la règle du chantier. On compacte l'intérieur. */
#index .v4-hero{padding-top:14px;padding-bottom:14px}
#index .v4-nav{gap:4px}
#index .v4-tab{min-height:44px}
/* ── Plancher typographique ────────────────────────────────────────────
103 textes sous 12px, dont DEUX ÉLÉMENTS DE PRIX à 9px (.prc-br le prix
barré, .prc-chip la pastille de remise). Sous 12px un texte n'est plus
lu sur mobile, il est deviné. Aucun contenu ne change, seulement sa
taille. Liste relevée sélecteur par sélecteur dans le DOM rendu —
`blockquote` et `small` sont des ÉLÉMENTS, pas des classes.
------------------------------------------------------------------- */
#index .prc-br,
#index .prc-chip{font-size:13px !important}
#index .fk,
#index .gwa-ray-step,
#index .s-thumb-k{font-size:12px !important}
#index .rail-l,
#index .gwa-min,
#index .v4-count,
#index .arv-ctx,
#index .fa,
#index .gc-tag,
#index .post-cat,
#index #gw-home blockquote,
#index #gw-home small,
#index #gw-home h4{font-size:12.5px !important}
#index .prc-nm,
#index .mp-n,
#index .l,
#index .post-meta,
#index .gf-tag,
#index .gf-kicker,
#index .gw-nl-legal{font-size:12.5px !important}
/* ── Cibles tactiles ───────────────────────────────────────────────────
99 cibles sous 44px. Les pastilles de filtre faisaient 26px de haut :
il fallait viser. Recommandation WCAG et Apple : 44px.
------------------------------------------------------------------- */
#index .fpill,
#index .gw-cat .fpill{min-height:44px;padding-top:10px;padding-bottom:10px}
#index .gw-cat .bmini{height:44px}
#index .button-search{min-height:44px;min-width:44px}
/* Résidus relevés après la première passe : un prix barré à 9,5px dans les
cartes produit, une mention de livraison à 9px dans la barre d'avis, et
six boutons d'ajout au panier à 32×32 — le geste le plus commercial de la
page était la plus petite cible. */
#index .prc-pr s,
#index .prc-pr{font-size:12.5px !important}
#index .avisbar .dlv,
#index .avisbar .dlv b{font-size:12px !important}
#index .prc-cart{min-width:44px !important;min-height:44px !important}
/* Deux résidus traités dans le bloc tablette le 22/08 mais oubliés ici :
le compteur d'avis « 1 743 » à 10px — l'unique texte sous 12px qui
subsistait sur l'accueil mobile — et les libellés de moyens de paiement
du pied de page à 11px. Le pied de page est rendu sur toutes les pages,
d'où l'absence de préfixe #index sur la seconde règle. */
#index .nb b{font-size:12px !important}
.foot-pay span{font-size:12px !important}
/* Le bouton « retour en haut » fait 56x30 : sous le seuil en hauteur, et
il est rendu sur toutes les pages. */
#toTop{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
/* ── Le pied de page sous-déclare sa hauteur de 1 000 px ──────────────
`.footer-container` porte `content-visibility:auto` avec
`contain-intrinsic-size: auto 500px`. Valeur juste en desktop (460 à 510
mesuré), mais le pied fait 1 395 à 1 581 px en téléphone : la page
annonce 1 000 px de moins qu'elle n'en fait, et les récupère quand on
arrive en bas. C'est la totalité de la dérive de la page catégorie
(+872) et une bonne part de celle de la fiche produit (+1 635).
Site entier : le pied est rendu partout. Relevé le 23/08 sur les trois
types de page, valeur = maximum + 4%. */
/* `!important` nécessaire : sans lui la valeur calculée reste à 500px alors
que la règle est pourtant la seule appariée sur l'élément — vérifié au
protocole de débogage. Mesuré avec : dérive +872 -> -278.
`content-visibility:visible` donnerait exactement 0, mais on garde le
rendu paresseux : un pied de page est toujours hors écran au chargement,
l'optimisation y a un sens. */
.footer-container{contain-intrinsic-size:auto 1650px !important}
/* ── Contraste ─────────────────────────────────────────────────────────
Sur onze paires vérifiées, dix sont conformes AA. Seule exception :
#a99fbb sur blanc à 2,51:1 pour un seuil de 4,5. #6d6480 donne 5,55:1
et vit déjà dans les tokens. Sur encre, #a99fbb est à 6,88:1 et reste.
------------------------------------------------------------------- */
#index .band:not(.band--brand) .gwa-min,
#index .band:not(.band--brand) small,
#index .band:not(.band--brand) .arv-ctx,
#index .gw-cat .gc-tag{color:#6d6480}
/* ── Premier écran ─────────────────────────────────────────────────────
Le hero faisait 1127px, soit 1,3 écran : aucune catégorie, aucun prix
avant le premier balayage. On le resserre pour que le rail de
catégories affleure. Aucun contenu retiré.
------------------------------------------------------------------- */
#index .gw-hero{margin-top:10px}
#index .gw-side{gap:8px}
#index .gwfb{min-height:64px;padding:11px 14px}
#index .gwfb .ft{font-size:16px}
#index .reassure-in{padding-top:12px !important;padding-bottom:12px !important}
/* Le visuel du hero occupait ~690px à lui seul. Plafonné, il laisse
remonter les cartes latérales et la réassurance. Le rail de catégories
ne peut PAS passer au-dessus de la ligne de flottaison sans remonter la
section elle-même — décision P2, non prise ici. */
/* CORRIGÉ après revue : `max-height` sans `overflow` laissait 160px de
visuel déborder de sa boîte. Le stage est un visuel de couverture :
le rogner est le comportement voulu, encore faut-il le dire. */
#index .gw-hero-stage{max-height:460px;overflow:hidden}
}
/* =============================================================================
Bandeau de garanties au-dessus du pied de page — 22/08/2026
Huit garanties en deux colonnes : quatre rangées, 654px, soit près de huit
dixièmes d'écran juste avant le footer. En quatre colonnes elles tiennent
sur deux rangées. Aucune n'est retirée ni masquée.
Site entier : ce bloc est rendu sur toutes les pages, pas seulement l'accueil.
========================================================================== */
@media (max-width:767px){
/* e4-tokens.css pose `#parallax_block_center .img-box-3 .row` avec
`repeat(auto-fit,minmax(128px,1fr))` : sur 358px utiles, auto-fit ne loge
que DEUX colonnes de 174px, d'où quatre rangées. On garde auto-fit — il
s'adapte seul aux écrans de 320 à 767px — mais avec un plancher de 80px,
qui en loge quatre. Il faut reprendre le `#parallax_block_center` : sans
lui, la règle du thème est plus spécifique et l'emporte. */
#parallax_block_center .img-box-3 .row{
grid-template-columns:repeat(auto-fit,minmax(80px,1fr)) !important;
gap:10px 6px !important;
}
/* Bootstrap pose un clearfix `.row::before/::after{content:" ";display:table}`.
Dans un conteneur en grille, un pseudo-élément devient une CELLULE : la
première case était mangée par ::before, la dernière par ::after, et huit
garanties s'étalaient sur trois rangées au lieu de deux. */
#parallax_block_center .img-box-3 .row::before,
#parallax_block_center .img-box-3 .row::after{display:none !important}
#parallax_block_center .img-box-3 .row > [class*="col-"]{
width:auto !important;float:none !important;
padding-left:2px !important;padding-right:2px !important;
}
#parallax_block_center .img-box-3 .row > [class*="col-"] img,
#parallax_block_center .img-box-3 .row > [class*="col-"] svg,
#parallax_block_center .img-box-3 .row > [class*="col-"] i{max-width:24px;height:auto}
#parallax_block_center .img-box-3 .row [class*="col-"] p,
#parallax_block_center .img-box-3 .row [class*="col-"] span,
#parallax_block_center .img-box-3 .row [class*="col-"] div{line-height:1.22}
#parallax_block_center .img-box-3-item{padding:10px 6px !important}
}
/* =============================================================================
CIBLES TACTILES — 22/08/2026
Relevé : 46 liens ou boutons sous 44px sur l'accueil mobile, dont 30 dans
le pied de page. Seuil retenu : 44px, recommandation Apple HIG et WCAG
2.5.5. (Le minimum AA de WCAG 2.5.8 est à 24px ; tout ce qui est ici le
dépassait déjà — on vise le confort réel du pouce, pas la conformité
minimale.)
On agrandit par du padding, jamais par une zone fantôme en ::after : dans
une liste serrée, une zone étendue déborde sur le lien voisin et lui vole
ses taps.
Site entier : le pied de page et la barre mobile sont rendus partout.
========================================================================== */
@media (max-width:767px){
/* 25 liens de colonnes du pied de page, 134x32 */
.foot-col a{
display:flex;align-items:center;min-height:44px;
padding-top:6px;padding-bottom:6px;
}
/* 4 icônes sociales, 36x36 */
.foot-social a{
width:44px !important;height:44px !important;min-width:44px;min-height:44px;
display:inline-flex;align-items:center;justify-content:center;
}
/* Trois icônes sur quatre ne peignaient rien ici : corrigé à la source,
dans e4-footer.css, pour toutes les résolutions à la fois. */
/* bandeau King-Avis du pied de page, 361x38 */
.ka-reviews-footer a{display:flex;align-items:center;justify-content:center;min-height:44px}
/* le logo de la barre mobile est un lien, 140x32 */
.mobile-h-logo a{display:flex;align-items:center;min-height:44px}
/* champ de recherche du tiroir hors-écran, 319x40 */
.gl-mobv2__psearch-trigger{min-height:44px}
}
/* Bandeau de consentement (CMP Sirdata) ------------------------------------
Trois boutons sous le seuil, dont « Tout refuser » à 96x25 contre 365x42
pour « Tout accepter ». On ne s'accroche pas au nom de classe : `sd-cmp-7Ga7b`
est un hachage que le module régénère à chaque version. Le préfixe
`sd-cmp-`, lui, est stable.
NB : l'écart de taille entre accepter et refuser dépasse l'ergonomie — la
CNIL demande que refuser soit aussi simple qu'accepter. Corriger la hauteur
ne rétablit pas la parité visuelle ; ce réglage-là se fait côté module. */
@media (max-width:767px){
button[class*="sd-cmp-"]{min-height:44px}
}
/* =============================================================================
PLAGE TABLETTE 768 → 940 px — 22/08/2026
-----------------------------------------------------------------------------
Relevé avant intervention, et comparé aux deux extrémités déjà traitées :
dérive CLS cibles<44 textes<12px
768px +1 727 0,129 101 106
820px +1 773 0,138 101 106
940px +1 064 0,151 101 106
(390px) +9 0,022 0 1
(1440px) 225 0,001 86 —
Seule plage du site au-dessus du seuil « bon » de 0,1 de CLS, et la seule
où la page S'ALLONGE au défilement : le contenu déjà lu se déplace.
La cause est mécanique : tous les correctifs précédents sont scopés à 767.
Bloc séparé plutôt qu'élargissement du bloc 767 : celui-ci contient aussi
des réglages calibrés au téléphone (gouttière, rythme vertical, plafond du
hero) qui n'ont rien à faire à 940. Une douzaine de déclarations sont donc
répétées ici — le prix à payer pour ne pas rejouer la vérification du
téléphone, qui est mesuré bon.
Attention, la plage n'est pas homogène : le thème repasse en une colonne
sous 900px. Fabricants fait 2 826px à 820 et 2 060 à 940 ; les guides
1 371 puis 950. Les gabarits ci-dessous prennent le MAXIMUM relevé sur les
trois largeurs APRÈS les correctifs de cibles ci-dessous — un premier
calibrage sur les hauteurs d'avant était caduc dès la première mesure —,
majoré d'environ 6% — la page rétrécit au défilement
plutôt que de s'allonger.
========================================================================== */
@media (min-width:768px) and (max-width:940px){
/* ── Gabarits de réservation ──────────────────────────────────────────
Les sections en `content-visibility:visible` (e4-home.css:340) sont
absentes : la propriété y est ignorée. */
#gw-home .gw-block section.band {contain-intrinsic-size:auto 900px} /* max relevé 841 */
#gw-home #gw-brands + section.band {contain-intrinsic-size:auto 3000px} /* max relevé 2826 — fabricants */
#gw-home #gw-playshorts {contain-intrinsic-size:auto 500px}
#gw-home #gw-avis + section.band {contain-intrinsic-size:auto 770px} /* max relevé 718 — choisir par type */
#gw-home #gw-academy {contain-intrinsic-size:auto 1650px} /* max relevé 1546 */
#gw-home #guides {contain-intrinsic-size:auto 1490px} /* max relevé 1397 */
#gw-home .gw-exp {contain-intrinsic-size:auto 1520px} /* max relevé 1432 — leader européen */
#gw-home .gw-exp section.band {contain-intrinsic-size:auto 1470px}
#gw-home .gw-exp + section.band {contain-intrinsic-size:auto 1230px} /* max relevé 1150 — notre histoire */
#gw-home section.band--alt.gw-blog {contain-intrinsic-size:auto 1360px} /* max relevé 1271 */
/* ── Cibles tactiles : 101 sous 44px ──────────────────────────────────
Une tablette se manipule au doigt comme un téléphone ; le seuil ne
change pas avec la diagonale. */
#index .fpill,
#index .gw-cat .fpill{min-height:44px;padding-top:10px;padding-bottom:10px} /* 29× à 26px */
#index .gw-cat .bmini{height:44px} /* 14× à 36px */
#index .prc-nm{display:flex;align-items:center;min-height:44px} /* 6× à 29px */
#index .prc-cart{min-width:44px !important;min-height:44px !important}
/* Deux résidus traités dans le bloc tablette le 22/08 mais oubliés ici :
le compteur d'avis « 1 743 » à 10px — l'unique texte sous 12px qui
subsistait sur l'accueil mobile — et les libellés de moyens de paiement
du pied de page à 11px. Le pied de page est rendu sur toutes les pages,
d'où l'absence de préfixe #index sur la seconde règle. */
#index .nb b{font-size:12px !important}
.foot-pay span{font-size:12px !important} /* 6× à 32px */
#index .gwa-btn-ghost,
#index .fold-toggle{min-height:44px}
#index .link-all{display:inline-flex;align-items:center;min-height:44px}
#index .button-search,
.button-search{min-height:44px;min-width:44px}
.foot-col a{display:flex;align-items:center;min-height:44px;padding-top:6px;padding-bottom:6px} /* 31× à 32px */
.foot-social a{width:44px !important;height:44px !important;
display:inline-flex;align-items:center;justify-content:center} /* 4× à 36px */
.ka-reviews-footer a{display:flex;align-items:center;justify-content:center;min-height:44px}
.lang-flags a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.gl-mobv2__psearch-trigger{min-height:44px}
button[class*="sd-cmp-"]{min-height:44px}
/* le bandeau d'annonce défilant : son lien fait 30px de haut. L'amener à 44
épaissit la bande d'autant — c'est le prix d'un lien réellement tapable. */
.gw-ticker .gw-tick a{display:inline-flex;align-items:center;min-height:44px}
/* Les deux liens du bandeau d'annonce (BLOG, Contact) font 30px de haut. */
#header ul.clearfix > li > a{display:inline-flex;align-items:center;min-height:44px}
/* ── Plancher typographique : 106 textes sous 12px ────────────────────
Mêmes sélecteurs qu'au téléphone, dont DEUX ÉLÉMENTS DE PRIX à 9px.
Sous 12px un texte n'est plus lu, il est deviné — la distance de lecture
d'une tablette tenue en main ne diffère pas de celle d'un téléphone. */
#index .prc-br,
#index .prc-chip{font-size:13px !important}
#index .fk,
#index .gwa-ray-step,
#index .s-thumb-k{font-size:12px !important}
#index .rail-l,
#index .gwa-min,
#index .v4-count,
#index .arv-ctx,
#index .fa,
#index .gc-tag,
#index .post-cat,
#index #gw-home blockquote,
#index #gw-home small,
#index #gw-home h4{font-size:12.5px !important}
#index .prc-nm,
#index .mp-n,
#index .l,
#index .post-meta,
#index .gf-tag,
#index .gf-kicker,
#index .gw-nl-legal{font-size:12.5px !important}
#index .prc-pr s,
#index .prc-pr{font-size:12.5px !important}
#index .avisbar .dlv,
#index .avisbar .dlv b{font-size:12px !important}
/* Résidus relevés à la seconde passe : le compteur d'avis « 1 743 » à 10px
et les libellés de moyens de paiement du pied de page à 11px. */
#index .nb b{font-size:12px !important}
.foot-pay span{font-size:12px !important}
/* Contraste : #a99fbb sur blanc est à 2,51:1 pour un seuil de 4,5.
#6d6480 donne 5,55:1 et vit déjà dans les tokens. */
#index .band:not(.band--brand) .gwa-min,
#index .band:not(.band--brand) small,
#index .band:not(.band--brand) .arv-ctx,
#index .gw-cat .gc-tag{color:#6d6480}
/* Même sous-déclaration qu'en téléphone, avec la hauteur de cette plage :
1 312 à 1 319 px mesurés contre 500 annoncés. */
.footer-container{contain-intrinsic-size:auto 1400px !important}
}
/* --- 881 → 940 px : la même plage, mais en deux colonnes ------------------
La bascule est à 880px, pas à 900 : le thème y porte sept règles
`@media(max-width:880px)`. Mesuré de part et d'autre — dérive -273 à 880,
-1694 à 890 avec les gabarits une colonne.
Au-dessus de 880, et plusieurs
sections perdent alors le tiers de leur hauteur : fabricants 2 829 -> 2 061,
les guides 1 397 -> 951, Leader 1 414 -> 969, l'histoire 1 153 -> 806, le
blog 1 258 -> 841. Les gabarits calés sur la version une colonne y
réservaient 2 727px de trop — la page rétrécissait d'autant au défilement.
Seuls les gabarits sont repris ici ; cibles et typographie restent celles
du bloc précédent, elles ne dépendent pas du nombre de colonnes.
---------------------------------------------------------------------- */
@media (min-width:881px) and (max-width:940px){
#gw-home .gw-block section.band {contain-intrinsic-size:auto 900px} /* mesuré 841 */
#gw-home #gw-brands + section.band {contain-intrinsic-size:auto 2190px} /* mesuré 2061 */
#gw-home #gw-avis + section.band {contain-intrinsic-size:auto 770px} /* mesuré 718 */
#gw-home #gw-academy {contain-intrinsic-size:auto 1580px} /* mesuré 1486 */
#gw-home #guides {contain-intrinsic-size:auto 1010px} /* mesuré 951 */
#gw-home .gw-exp {contain-intrinsic-size:auto 1030px} /* mesuré 969 */
#gw-home .gw-exp section.band {contain-intrinsic-size:auto 990px}
#gw-home .gw-exp + section.band {contain-intrinsic-size:auto 860px} /* mesuré 806 */
#gw-home section.band--alt.gw-blog {contain-intrinsic-size:auto 900px} /* mesuré 841 */
}