/* === e4-desktop.css === */ /* ============================================================================= E4 · DESKTOP — cibles tactiles et plancher typographique ----------------------------------------------------------------------------- Lié en DERNIER, après la pile de chaque page, et sans {if} : il couvre l'accueil, la catégorie et la fiche. Chaque règle est scopée par page (#index, #category, #product) ou par composant partagé (pied, en-tête). Point de rupture : min-width 941px, exactement là où s'arrêtent les blocs mobile et tablette. Aucun recouvrement. Sur le seuil de 44px en desktop. Il se défend moins au pointeur qu'au doigt : WCAG 2.5.8 (AA) demande 24px, c'est 2.5.5 (AAA) qui demande 44. Mais trois choses penchent pour 44 ici : une part croissante des écrans de cette largeur sont tactiles ; la distance de lecture y est plus grande, donc la taille angulaire plus petite ; et surtout le relevé descend à 13px de haut sur certaines cibles, ce qui n'est confortable pour personne. Relevé du 23/08/2026. ========================================================================== */ @media (min-width:941px){ /* ── Gabarits de réservation ────────────────────────────────────────── Le desktop n'avait JAMAIS été calibré : toutes les sections confinées y tournaient sur le gabarit générique de 900px posé par e4-home.css:334, et le pied de page sur 500. Relevé du 23/08 à 1440, réservé contre réel : #gw-playshorts 900 réservés, 0 rendu -> +900 fantômes .row-assurance 400 réservés, 0 rendu -> +400 fantômes #gw-academy 900 réservés, 1 426 rendu -> -526 SOUS-réservé #guides 900 réservés, 1 121 rendu -> -221 SOUS-réservé .footer-container 500 réservés, 595-610 -> -110 SOUS-réservé Les deux premiers gonflent la hauteur annoncée sans rien afficher, les trois autres la rallongent en cours de lecture. Valeurs ci-dessous = mesuré + 1,5%. Un premier passage à +4% donnait -412 de dérive sur l'accueil : neuf sections à 4% font 400px de réservation perdue. Les pages desktop étant plus courtes, l'erreur relative s'y voit davantage. Sections en `content-visibility:visible` (e4-home.css:340) absentes : #categories, #gw-avis, #gw-brands, #gw-etapes, #gw-nl. La propriété y est ignorée. ------------------------------------------------------------------- */ .footer-container{contain-intrinsic-size:auto 630px !important} /* réel 595 à 610 */ #gw-home .gw-block section.band {contain-intrinsic-size:auto 920px} /* mesuré 907 */ #gw-home #gw-brands + section.band {contain-intrinsic-size:auto 1720px} /* mesuré 1697 — fabricants */ #gw-home #gw-playshorts {contain-intrinsic-size:auto 0} /* rendu 0 : widget en 403 */ #gw-home #gw-avis + section.band {contain-intrinsic-size:auto 600px} /* mesuré 588 — choisir par type */ #gw-home #gw-academy {contain-intrinsic-size:auto 1450px} /* mesuré 1426 */ #gw-home #guides {contain-intrinsic-size:auto 1140px} /* mesuré 1121 */ #gw-home .gw-exp {contain-intrinsic-size:auto 960px} /* mesuré 945 — leader européen */ #gw-home .gw-exp section.band {contain-intrinsic-size:auto 915px} #gw-home .gw-exp + section.band {contain-intrinsic-size:auto 775px} /* mesuré 761 — notre histoire */ #gw-home section.band--alt.gw-blog {contain-intrinsic-size:auto 930px} /* mesuré 916 */ #product .row-assurance{contain-intrinsic-size:auto 0} /* rendu 0 */ #product .infos-produits-gwl{contain-intrinsic-size:auto 300px} /* mesuré 279 */ /* ── Composants partagés ────────────────────────────────────────────── Rendus sur toutes les pages, donc sans préfixe de page. ------------------------------------------------------------------- */ .foot-col a{display:flex;align-items:center;min-height:44px} /* 30× 166×32 */ .foot-social a{width:44px !important;height:44px !important; display:inline-flex;align-items:center;justify-content:center} /* 4× 36×36 */ .ka-reviews-footer a{display:flex;align-items:center;justify-content:center;min-height:44px} .foot-pay span{font-size:12px} #toTop{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center} #header ul.clearfix > li > a, .lang-flags a{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px} /* 4× 30px */ .gw-ticker .gw-tick a{display:inline-flex;align-items:center;min-height:44px} .gw-schips button{min-height:44px} /* 2× 26px */ .gw-sec-in .gw-sec-l{display:inline-flex;align-items:center;min-height:44px} /* 4× 13px ! */ .button-search{min-height:44px} /* 164×42 */ /* Résidus typographiques de l'en-tête, présents sur toutes les pages : libellé « Souhaits » et « Mon panier » à 10px, la barre de réassurance à 10,5px, les suggestions de recherche à 11px. */ /* `!important` : ces deux libellés sont posés à 10px avec une spécificité qu'une règle de classe simple ne bat pas. */ #desktop-header .gw-h2-wishlist span, #shopping_cart_container .shopping_cart .cart_name{font-size:12px !important} .e4-reassure .e4-r-item b, .e4-reassure .e4-r-item{font-size:12px} .gw-schips button{font-size:12px} /* ── Accueil ────────────────────────────────────────────────────────── 106 cibles, 111 textes sous 12px. ------------------------------------------------------------------- */ #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} /* 6× 32×32 */ #index .gwa-btn-ghost, #index .fold-toggle{min-height:44px} #index .link-all{display:inline-flex;align-items:center;min-height:44px} #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 em, #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, #index .prc-pr, #index .prc-pr s{font-size:12.5px !important} #index .nb b{font-size:12px !important} #index .avisbar .dlv, #index .avisbar .dlv b{font-size:12px !important} /* ── Catégorie ──────────────────────────────────────────────────────── 95 cibles, 72 textes sous 12px. ------------------------------------------------------------------- */ #category .pcard-name a{display:flex;align-items:center;min-height:44px} /* 12× 36px */ #category .pcard-actions .btn.btn-primary{min-height:44px} /* 12× 40px */ #category .glc-tags .glc-tag{min-height:44px} /* 10× 26px */ #category .be-categories a{display:flex;align-items:center;min-height:44px} /* 3× 19px */ #category .v3-trustbar .v3-tb-item a{display:inline-flex;align-items:center;min-height:44px} #category .glc-facet li a, #category .crumbs ol li a, #category .glc-brand-banner__full h3 a{display:inline-flex;align-items:center;min-height:44px} #category .v4-readmore, #category .glc-bpost--all, #category .read_more{display:inline-flex;align-items:center;min-height:44px} #category .glc-filter-btn, #category .glc-side-close, #category .glc-minipager a{min-height:44px;min-width:44px} #category .glc-pager .glc-page{min-height:44px;min-width:44px; display:inline-flex;align-items:center;justify-content:center} #category .ybc_blog_content_block .slick-arrow{width:44px;height:44px} #category .pcard-brand, #category .pcard-alma, #category .star_label, #category .glc-bpost-cat, #category .glc-bpost-d, #category .oa-guar-d{font-size:12px !important} #category .pcard-quick, #category .glc-tag, #category .pcard b, #category .v3-trustbar .v3-tb-item b, #category .v3-trustbar .v3-tb-item a, #category .glc-facet .glc-check b{font-size:12.5px !important} /* ── Fiche produit ──────────────────────────────────────────────────── 130 cibles, 50 textes sous 12px. ------------------------------------------------------------------- */ #product .gw-pv2-cta, #product .gw-pv2-cta2, #product .gw-fbt-cta, #product .gc-pp-btn, #product .gw-faq-more, #product .ask_a_question{min-height:44px} #product .gw-sb-btn, #product .pcard-cta, #product .read_more, #product .ybc_title_block{display:inline-flex;align-items:center;min-height:44px} #product .qty-selector-modern .qty-btn{min-width:44px;min-height:44px} #product .gw-pv2-thumb{width:44px;height:44px;min-width:44px;min-height:44px} #product .kv-pager .kv-page{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center} #product .kv-hist .kv-hist-row{min-height:44px} #product .v3-subnav-in a, #product .ybc-blog-categories a, #product .breadcrumb li a, #product .gw-pv2-row-name a, #product .gw-pv2-title a, #product .pcard-name a, #product .gw-fbt-item .gw-fbt-nm{display:inline-flex;align-items:center;min-height:44px} #product [class*="_planButton_"], #product [class*="_knowMore_"]{min-height:44px;min-width:44px} #product .product-rating-hero, #product .product-manufacturer-link a{display:inline-flex;align-items:center;min-height:44px} #product .product-actions-modern .action-btn{min-height:44px;min-width:44px} #product .oa-guar-d{font-size:12px !important} #product .edv3-card-price strong, #product .edv3-card .edv3-card-tag, #product .edv3-card .edv3-card-date, #product .edv3-card-body .edv3-card-date, #product .info-txt-gwl, #product .gw-fbt-nm, #product .gw-fbt-p, #product .gw-fbt-count, #product .mobile-hero-cat, #product .pcard-brand{font-size:12px !important} #product .gw-pv2-eyebrow, #product .gw-pv2-save-tag, #product .gw-pv2-row-name small, #product .gw-pay .pc, #product .gw-pay span, #product .gw-cta-sub, #product .oa-eyebrow span, #product .sn-b, #product .gw-pro-txt span, #product .gw-sb-s, #product .pcard-badge span{font-size:12.5px !important} #product [class*="_planButton_"], #product [class*="_info_"] p{font-size:12px !important} } /* === e4-cmp.css === */ /* CMP Sirdata (pa=45200, c=OEfJt) — chargé en DERNIER pour primer. On plafonne le PAVÉ DE TEXTE, jamais le dialogue ni son wrapper : plafonner le dialogue pousse les boutons hors du viewport (mesuré : « Tout accepter » à y=905 et « Paramétrer vos choix » à y=949 sur un viewport de 844 px). Le widget prévoit nativement le défilement interne. Sélecteurs volontairement ancrés sur #sd-cmp, [role=dialog] et #sd-cmp-title-main : ce sont des identifiants STABLES du bundle Sirdata. Les classes sd-cmp-XXXXX sont des hachages de build et changent à chaque version du CMP — ne jamais les cibler. */ #sd-cmp [role="dialog"][aria-modal="true"] div:has(> #sd-cmp-title-main) + div{ overflow-y:auto; overscroll-behavior:contain; /* ombres de défilement : signalent qu'il reste du texte, disparaissent en fin de course */ background: linear-gradient(var(--background-color,#fff) 40%, rgba(255,255,255,0)) top/100% 20px no-repeat local, linear-gradient(rgba(255,255,255,0), var(--background-color,#fff) 70%) bottom/100% 20px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), rgba(0,0,0,0)) top/100% 8px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), rgba(0,0,0,0)) bottom/100% 8px no-repeat scroll; } /* 480px = point de rupture du widget lui-même (@media max-width:480px dans son CSS) */ @media (max-width:480px){ #sd-cmp [role="dialog"][aria-modal="true"] div:has(> #sd-cmp-title-main) + div{max-height:96px} #sd-cmp [role="dialog"][aria-modal="true"] > div{margin:8px} } /* Téléphone couché : 844x390 échappe à max-width:480px et le bandeau y prend 92,6 % */ @media (max-height:520px){ #sd-cmp [role="dialog"][aria-modal="true"] div:has(> #sd-cmp-title-main) + div{max-height:22vh} #sd-cmp [role="dialog"][aria-modal="true"] > div{margin:8px} } /* === e4-header-v4.css === */ /* ============================================================================= HEADER V4 (09/2026) — desktop uniquement (le header mobile est un bloc à part) - topbar : le ticker rotatif porte désormais les 5 messages de réassurance (tél, 14 h, 89 €, avis, Alma) — enrichi côté tpl, rotation existante gardée - la ligne e4-reassure au-dessus de la recherche a été retirée du tpl - drapeaux → pill « FR ▾ » dépliable au survol - mini-panier au survol : carte polie, compteur livraison gratuite lisible (il était rendu blanc sur blanc — 80 px de vide apparent) ========================================================================== */ @media (min-width:1000px){ /* ── topbar (maquette V4) : Blog/Contact à gauche, réassurance complète affichée au centre (rotation désactivée), pill langue à droite ── */ #header .nav{background:#1c0136!important;border-bottom:1px solid rgba(123,191,63,.22);position:relative;z-index:300} #header > .nav nav > ul#header_links{order:0;margin-left:0!important;margin-right:6px;flex:none} #header .nav .gw-ticker{order:1;display:flex;align-items:center;justify-content:center;gap:10px;overflow:visible} #header .nav .gw-tick{position:static;inset:auto;opacity:1;animation:none!important;transform:none} /* Cette règle masquait le premier message parce que c'était le téléphone, absent de la maquette validée. Depuis CRO-005 le numéro est un élément propre de la barre (.gw-topline-tel) et le premier tick est « Commandé avant 14 h → expédié le jour même » : la règle faisait disparaître un argument commercial sur tout le desktop. Elle reste nécessaire quand la place manque : en header V4 les messages sont posés côte à côte, et à 1280 px les quatre plus le téléphone débordent — le contenu du ticker mesurait 737 px pour 638 disponibles, avec chevauchement visible de « BLOG GrowLED / Contact ». Le masquage devient donc conditionnel à la largeur, au lieu d'être permanent. */ @media (max-width:1499px){#header .nav .gw-tick:first-child{display:none}} #header .nav .gw-tick b{color:#ffc53d!important} /* valeurs en or comme le panier (maquette) — !important : e4-header.css:16 force le vert sur tous les b de la nav */ #header .nav .gw-tick + .gw-tick + .gw-tick::before{content:"·";color:rgba(255,255,255,.35);margin-right:10px} #header .nav #languages_block_top{order:2} #header .nav .header_user_info{order:3} /* UX-DSK-020 : « Paye en 3×, 4× ou 10× » était le cinquième message et disparaissait sous 1280 px — une résolution de portable très courante, sur des paniers à 400-1900 €. Il n'y a plus que quatre messages et le téléphone a sa place propre ; la règle ne masque plus rien, elle est conservée comme garde si un cinquième message revenait. */ @media (max-width:1280px){#header .nav .gw-tick:nth-child(5){display:none}} /* drapeaux → pill FR ▾ */ #languages_block_top{position:relative} #languages_block_top .lang-flags{display:flex;flex-direction:column;gap:0;margin:0;padding:3px 10px;background:rgba(255,255,255,.14);border-radius:999px;transition:.15s} #languages_block_top .lang-flags li{display:none;line-height:1} #languages_block_top .lang-flags li.is-active{display:flex;align-items:center;gap:6px} #languages_block_top .lang-flags li.is-active::after{content:"▾";font-size:9px;color:rgba(255,255,255,.75)} #languages_block_top .lang-flags li img{border-radius:3px;display:block} #languages_block_top:hover .lang-flags{position:absolute;right:0;top:-4px;z-index:60;background:#2B004F;border-radius:12px;padding:8px 10px;box-shadow:0 10px 26px rgba(0,0,0,.4)} #languages_block_top:hover .lang-flags li{display:flex;align-items:center;padding:4px 2px} #languages_block_top:hover .lang-flags li a{display:flex;align-items:center;min-height:0} /* ── barre principale : recherche XXL centrée (maquette : 54 px) ── */ .gw-h2 #search_block_top_content .iqitsearch-inner, .gw-h2 #search_block_top_content #search_query_top{min-height:54px} .gw-h2 #search_block_top_content #search_query_top{font-size:14px} /* ── panier : compteur/total gérés par le thème ; on masque les libellés parasites ── */ .shopping_cart .ajax_cart_product_txt,.shopping_cart .ajax_cart_product_txt_s{display:none} /* ── mini-panier au survol ── */ .shopping_cart .cart_block{border:0;border-radius:16px;box-shadow:0 8px 18px rgba(20,0,40,.22),0 24px 60px rgba(20,0,40,.30);overflow:hidden} .shopping_cart .cart_block .cart-prices{margin:0;padding:8px 16px 12px;background:#faf8fd;border-top:1px solid rgba(43,0,79,.08)} .shopping_cart .cart_block .cart-prices-line{border:0} .shopping_cart .cart_block .cart-prices-line.first-line:has(.cart_block_shipping_cost.unvisible){display:none} /* compteur livraison iqit : son JS « detach » le rend blanc/vide dans la carte (~100 px de blanc entre le total et Commander) — masqué ici, l'info livraison vit déjà dans le ticker topbar et la carte achat */ #header .shopping_cart .cart_block .iqitfreedeliverycount{display:none!important} .shopping_cart .cart_block .cart_block_no_products{padding:22px 16px;text-align:center;color:#8a7aa2} }