/* ========================================================================= Lupéo — en-tête (composant propre, refonte du 20/09/2026) ========================================================================= Reproduction des styles du prototype « LupeoHeader » : chaque valeur (dimensions, espacements, couleurs, corps de texte) est celle de son balisage. Rendu : Lupeo_Entete (includes/class-lupeo-entete.php). Points de rupture du prototype : 1240 px (navigation → burger), 860 px (barre d'annonce masquée). Interlignes (correctif du 20/09/2026) : le prototype ne fixe AUCUN `line-height`, il garde celui de la police (`normal`). Le thème impose 1,65 sur `body` : chaque ligne d'un lien, d'un titre ou d'un compteur était plus haute que celle du prototype (barre +2 px, tête du méga-menu +4 à +6 px, encart sombre +16 px, lignes du tiroir +8 px, carte « Trouver mes pièces » +12 px). Chaque composant reprend donc `line-height: normal` ; les éléments qui en fixent un dans le prototype (1,2 / 1,3 / 1,6) le gardent. ========================================================================= */ .lp-eh [hidden],.lp-td [hidden],.lp-rc [hidden],.lp-td[hidden],.lp-rc[hidden]{display:none!important} .lp-eh *,.lp-eh *::before,.lp-eh *::after, .lp-td *,.lp-td *::before,.lp-td *::after, .lp-rc *,.lp-rc *::before,.lp-rc *::after{box-sizing:border-box} /* Sans poids (:where) : la couleur héritée ne doit jamais battre celle d'un composant. */ .lp-eh :where(a),.lp-td :where(a),.lp-rc :where(a){color:inherit;text-decoration:none} .lp-eh :focus-visible,.lp-td :focus-visible,.lp-rc :focus-visible{outline:2px solid #007C75;outline-offset:3px;border-radius:4px} .lp-eh svg,.lp-td svg,.lp-rc svg{flex:none} html.lp-verrou{overflow:hidden} /* Barre d'annonce : masquée sous 860 px, son lien d'aide sous 1240 px (prototype). */ @media (max-width:1240px){body.lupeo-entete-propre .lupeo-annonce__aide{display:none}} @media (max-width:860px){body.lupeo-entete-propre .lupeo-annonce{display:none}} /* ---------- Barre ---------------------------------------------------------- */ body.lupeo-entete-propre #header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #E4E8E6;margin:0;padding:0} body.admin-bar.lupeo-entete-propre #header{top:32px} @media (max-width:782px){body.admin-bar.lupeo-entete-propre #header{top:46px}} .lp-eh{position:relative;color:#0A0F0D;font-family:var(--lp-sans,"Schibsted Grotesk",Helvetica,Arial,sans-serif);line-height:normal;text-wrap:pretty;-webkit-font-smoothing:antialiased} .lp-eh__in{ display:flex;align-items:center;gap:clamp(18px,3vw,44px); max-width:var(--lp-cadre,1840px);height:74px;margin:0 auto; padding:0 clamp(20px,3vw,44px); } .lp-eh__logo{display:flex;align-items:center;flex:none;color:#007C75} .lp-eh__logo img{display:block;height:30px;width:auto;max-width:none} .lp-eh__nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);flex:none} .lp-eh__cta{ display:inline-flex;align-items:center;gap:8px; padding:8px 12px;border-radius:7px;background:#E6F5EF; font-size:14.5px;font-weight:600;line-height:normal;color:#0A0F0D;white-space:nowrap; } .lp-eh__cta .lupeo-i,.lp-eh__cta svg{width:17px;height:17px} .lp-eh__liste{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);margin:0;padding:0;list-style:none} .lp-eh__liste li{margin:0;padding:0} .lp-eh__lien{ display:block;padding:8px 2px; border-bottom:2px solid transparent; font-size:14.5px;font-weight:500;line-height:normal;color:#0A0F0D;white-space:nowrap;cursor:pointer; } .lp-eh__lien:hover,.lp-eh__lien[aria-expanded="true"]{color:#007C75} .lp-eh__lien[aria-current="true"]{color:#007C75;border-bottom-color:#00D36B;font-weight:600} /* Recherche : un champ qui ouvre la surcouche (prototype). */ .lp-eh__recherche{ display:flex;align-items:center;gap:10px; flex:1;min-width:120px;max-width:440px;margin-left:auto; padding:11px 14px; border:1px solid #D5DBD8;border-radius:8px; color:#6B7572;cursor:text; } .lp-eh__recherche:hover{border-color:#0A0F0D} .lp-eh__recherche span{overflow:hidden;font-size:14px;line-height:normal;text-overflow:ellipsis;white-space:nowrap} .lp-eh__outils{display:flex;align-items:center;gap:6px;flex:none} .lp-eh__burger{ display:none;place-items:center; width:44px;height:44px;margin:0;padding:0; border:0;border-radius:8px;background:none;color:#0A0F0D;cursor:pointer; } .lp-eh__burger:hover{background:#F2F4F3} body.lupeo-entete-propre #header .lp-eh__outil, body.lupeo-entete-propre #header .ct-header-cart .ct-cart-item{ position:relative;display:grid;place-items:center; width:44px;height:44px;border-radius:8px;color:#0A0F0D; } body.lupeo-entete-propre #header .lp-eh__outil:hover, body.lupeo-entete-propre #header .ct-header-cart .ct-cart-item:hover{background:#F2F4F3} .lp-eh .ct-header-cart{position:relative;display:block;margin:0;padding:0} .lp-eh .ct-icon-container{position:static;display:grid;place-items:center} .lp-eh .ct-dynamic-count-cart{ position:absolute;top:5px;right:4px; display:grid;place-items:center; min-width:17px;height:17px;padding:0 4px;border-radius:99px; background:#00B85D;color:#052C1D; font-size:10.5px;font-weight:700;line-height:1; } .lp-eh .ct-dynamic-count-cart[data-count="0"]{display:none} .lp-eh__outil svg,.lp-eh .ct-icon-container svg{width:21px;height:21px;fill:none;stroke:currentColor} /* Juste au-dessus du seuil du burger (1241–1262 px) la barre est plus étroite que ses éléments : le prototype laisse alors l'icône du panier à 1,7 px (1241 px) puis 18 px (1262 px) du bord de l'écran, au lieu des ~38 px de gouttière (mesuré, mesures-entete-seuil.json). Ici le champ de recherche cède la place (il garde son icône) et la gouttière reste de ~38 px. Au-delà de 1262 px le prototype est reproduit tel quel (marge de 18 à 39 px). */ @media (min-width:1241px) and (max-width:1262px){ .lp-eh__recherche{min-width:80px} } /* Le thème colore tout lien survolé ou focalisé en #00A896 (contraste 2,98 sur blanc : insuffisant, mesuré à la souris par outils-lots/t_survol.py). Ici chaque lien garde sa couleur — celle du prototype, qui ne change que la teinte de fond ou la bordure au survol. */ .lp-eh__recherche:hover,.lp-eh__recherche:focus, .lp-td__recherche:hover,.lp-td__recherche:focus{color:#6B7572} .lp-td__item:hover,.lp-td__item:focus, .lp-td__bas a:hover,.lp-td__bas a:focus, .lp-rc__ligne:hover,.lp-rc__ligne:focus, body.lupeo-entete-propre #header .lp-eh__outil:hover, body.lupeo-entete-propre #header .lp-eh__outil:focus, body.lupeo-entete-propre #header .ct-header-cart .ct-cart-item:hover, body.lupeo-entete-propre #header .ct-header-cart .ct-cart-item:focus{color:#0A0F0D} .lp-td__tout:hover,.lp-td__tout:focus, .lp-rc__tous:hover,.lp-rc__tous:focus{color:#00524D} .lp-td__cta:hover,.lp-td__cta:focus{color:#fff} .lp-eh__logo:hover,.lp-eh__logo:focus, .lp-td__logo:hover,.lp-td__logo:focus{color:#007C75} @media (max-width:1240px){ .lp-eh__nav{display:none} .lp-eh__burger{display:grid} } @media (max-width:480px){ .lp-eh__recherche{min-width:96px} .lp-eh__outils{gap:2px} } /* 🐞 Correctif du 21/09/2026 — sous 380 px la barre dépassait sa fenêtre : logo 72 + champ de recherche ≥ 96 + trois boutons de 44 + deux écarts de 18 + gouttières de 20 = 380 px. Mesuré : à 375 px la gouttière droite tombait à 15 px, à 360 px le panier touchait le bord, à 340 px il était coupé en deux, à 320 px il sortait de l'écran (et rien ne le signalait : la page ne défilait pas). Le champ de recherche cède : plus de largeur minimale, écarts et gouttières resserrés. À 380 px et au-dessus, aucune de ces règles ne s'applique. */ @media (max-width:379px){ .lp-eh__in{gap:8px;padding:0 16px} .lp-eh__recherche{min-width:0;padding:11px 12px} .lp-eh__outils{gap:0} } /* Sous 340 px il ne resterait que « … » à lire : le champ ne garde que sa loupe. Le texte reste lu par les lecteurs d'écran (masquage visuel, pas display:none). */ @media (max-width:339px){ .lp-eh__recherche{position:relative;justify-content:center;padding:11px 0} .lp-eh__recherche span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} } /* ---------- Méga-menu : bande pleine largeur sous la barre ----------------- */ .lp-mega{ position:absolute;left:0;right:0;top:100%;z-index:1; background:#fff;border-bottom:1px solid #E4E8E6; box-shadow:0 24px 48px -24px rgba(10,15,13,.18); /* Jamais plus haut que l'écran sous l'en-tête (collant au défilement) : au-delà, le panneau défile en lui-même, sans entraîner la page. Sur un portable de 720 px, le bas du panneau « Marques » restait sinon inaccessible. */ max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain; } .lp-mega__in{max-width:var(--lp-cadre,1840px);margin:0 auto;padding:36px clamp(20px,3vw,44px) 40px} .lp-mega__grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start} .lp-mega__tete{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px} .lp-mega__titre{font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B7572} .lp-mega__tout{padding-bottom:2px;border-bottom:2px solid #00D36B;font-size:13.5px;font-weight:600;color:#0A0F0D} .lp-mega__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:4px;margin:0;padding:0;list-style:none} .lp-mega__items li{margin:0;padding:0} .lp-mega__item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:9px;color:#0A0F0D} .lp-mega__item:hover,.lp-mega__item:focus-visible{background:#F1FAF5;color:#007C75} .lp-mega__tuile{display:grid;place-items:center;flex:none;width:36px;height:36px;overflow:hidden;border-radius:8px;background:#F6F8F7} .lp-mega__tuile svg{width:22px;height:22px} .lp-mega__logo{display:block;width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply} .lp-mega__texte{min-width:0} .lp-mega__nom{display:block;font-size:14px;font-weight:500;line-height:1.3} .lp-mega__compte{display:block;margin-top:2px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10.5px;color:#6B7572} /* Vitrines des panneaux (Lupeo_Vitrine_Menu, réglées dans WooCommerce › Menu du site) : trois cartes horizontales, photo sur fond clair, nom sur deux lignes, prix (prix barré en rouge promotion). */ .lp-mega__vitrine{margin-top:30px;padding-top:26px;border-top:1px solid #E4E8E6} .lp-mega__vitrine-tete{margin-bottom:16px} .lp-mega__produits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none} .lp-mega__produits li{margin:0;padding:0;min-width:0} .lp-mega__produit{ display:flex;align-items:center;gap:14px;height:100%; padding:10px 14px 10px 10px;border:1px solid #E4E8E6;border-radius:12px;background:#fff;color:#0A0F0D; transition:border-color .2s,box-shadow .2s,background-color .2s; } .lp-mega__produit:hover,.lp-mega__produit:focus-visible{border-color:#9FD9C4;background:#F7FCF9;box-shadow:0 8px 22px -14px rgba(1,60,56,.35);color:#0A0F0D} .lp-mega__produit-photo{flex:none;display:block;width:84px;height:84px;overflow:hidden;border-radius:9px;background:#F6F8F7} .lp-mega__produit-photo img{display:block;width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply;transition:transform .3s ease} .lp-mega__produit:hover .lp-mega__produit-photo img{transform:scale(1.06)} .lp-mega__produit-texte{display:flex;flex-direction:column;gap:7px;min-width:0} .lp-mega__produit-nom{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; font-size:13.5px;font-weight:500;line-height:1.35; } .lp-mega__produit:hover .lp-mega__produit-nom{color:#007C75} .lp-mega__produit-prix{font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#0A0F0D} .lp-mega__produit-prix del{margin-right:6px;font-size:12.5px;font-weight:500;color:var(--lp-promo,#C8102E);text-decoration-thickness:2px} .lp-mega__produit-prix ins{text-decoration:none} .lp-mega__produit-mention{align-self:flex-start;padding:3px 8px;border-radius:999px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10.5px;font-weight:500;line-height:1.2;letter-spacing:.02em} .lp-mega__produit-mention--modeles{background:#E6F5EF;color:#00605A} .lp-mega__produit-mention--remise{background:var(--lp-promo,#C8102E);color:#fff;font-weight:600} .lp-mega__produit-prix .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} @media (max-width:1439px){ .lp-mega__produit-photo{width:68px;height:68px} .lp-mega__produit{gap:11px;padding-right:10px} } @media (prefers-reduced-motion:reduce){ .lp-mega__produit-photo img{transition:none} .lp-mega__produit:hover .lp-mega__produit-photo img{transform:none} } .lp-mega__encart{padding:28px 26px;border-radius:14px;background:#013C38;color:#fff} /* Le pictogramme du prototype est une boîte en ligne posée sur la ligne de base d'un corps de 16 px : sa ligne fait 34 px (30 + 4 sous la base). Reproduit par 4 px de marge basse. */ .lp-mega__encart-ico{display:block;padding-bottom:4px;color:#00D36B;line-height:0} .lp-mega__encart-ico svg{width:30px;height:30px} .lp-mega__encart-titre{margin:16px 0 10px;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:pretty} .lp-mega__encart-texte{margin:0 0 22px;font-size:14px;line-height:1.6;color:#A9D6CF} .lp-mega__encart-cta{ display:inline-flex;align-items:center;gap:10px; padding:14px 20px;border-radius:8px;background:#00D36B; font-size:14.5px;font-weight:700;color:#06231A; } .lp-mega__encart-cta:hover{background:#00B85D;color:#06231A} .lp-mega__encart-marques{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)} .lp-mega__encart-marques p{margin:0 0 12px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7FC9BF} .lp-mega__encart-marques ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none} .lp-mega__encart-marques li{margin:0;padding:0} .lp-mega__encart-marques a{display:block;padding:6px 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:13px;color:#fff} .lp-mega__encart-marques a:hover{border-color:#fff} @media (max-width:1240px){.lp-mega{display:none!important}} /* ---------- Tiroir (téléphone et tablette) --------------------------------- z-index 100000 / 100001 : le prototype pose 95 et 96, sur une page sans autre élément flottant. Ici, le bandeau d'identification de la préproduction (99999) et la barre d'administration (99999) recouvriraient le haut du tiroir — sa croix et son bouton « Menu » — et le rendraient inutilisable. */ .lp-td{position:fixed;inset:0;z-index:100000;font-family:var(--lp-sans,"Schibsted Grotesk",Helvetica,Arial,sans-serif);line-height:normal;text-wrap:pretty;color:#0A0F0D} .lp-td__voile{position:absolute;inset:0;background:rgba(10,15,13,.4)} .lp-td__panneau{ position:absolute;top:0;left:0;bottom:0; display:flex;flex-direction:column; width:min(400px,88vw);background:#fff;box-shadow:0 0 60px rgba(10,15,13,.3); } .lp-td__tete{flex:none;display:flex;align-items:center;gap:8px;min-height:64px;padding:14px 16px;border-bottom:1px solid #EEF1F0} .lp-td__logo{display:flex;align-items:center;padding-left:2px;color:#007C75} .lp-td__logo img{display:block;height:26px;width:auto} .lp-td__retour{ display:flex;align-items:center;gap:9px;margin:0;padding:10px 0; border:0;background:none;cursor:pointer; font-family:inherit;font-size:15px;font-weight:600;color:#0A0F0D; } .lp-td__retour svg{transform:rotate(180deg)} .lp-td__fermer{ display:grid;place-items:center;margin:0 0 0 auto;padding:0; width:44px;height:44px;border:0;background:none;color:#0A0F0D;cursor:pointer; } .lp-td__corps{flex:1;overflow:auto;padding:16px} .lp-td__recherche{ display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:13px 14px; border:1px solid #D5DBD8;border-radius:9px;color:#6B7572;cursor:text; } .lp-td__recherche span{font-size:14.5px} .lp-td__cta{ display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:16px; border-radius:11px;background:#013C38;color:#fff; } .lp-td__cta > svg:first-child{color:#00D36B} .lp-td__cta > svg:last-child{margin-left:auto} .lp-td__cta-texte{min-width:0} .lp-td__cta-titre{display:block;font-size:16px;font-weight:700} .lp-td__cta-sous{display:block;margin-top:2px;font-size:12.5px;color:#A9D6CF} .lp-td__racine{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .lp-td__racine li{margin:0;padding:0} .lp-td__ligne{ display:flex;align-items:center;gap:14px;width:100%;min-height:58px;margin:0;padding:16px 2px; border:0;border-bottom:1px solid #EEF1F0;background:none;cursor:pointer;text-align:left; font-family:inherit;color:#0A0F0D; } .lp-td__tuile{display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border-radius:9px;background:#F6F8F7} .lp-td__tuile--petite{width:36px;height:36px} .lp-td__tuile svg{width:22px;height:22px} .lp-td__tuile--petite svg{width:21px;height:21px} .lp-td__tuile .lp-mega__logo{display:block;width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply} .lp-td__ligne-texte{min-width:0} .lp-td__ligne-nom{display:block;font-size:16px;font-weight:600} .lp-td__ligne-sous{display:block;margin-top:2px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10.5px;color:#6B7572} .lp-td__chevron{margin-left:auto;color:#6B7572} .lp-td__bas{display:flex;flex-direction:column;gap:2px;margin-top:22px;padding-top:16px;border-top:1px solid #EEF1F0} .lp-td__bas a{display:flex;align-items:center;gap:12px;padding:13px 2px;font-size:15px;color:#0A0F0D} .lp-td__bas svg{color:#59635F} .lp-td__niveau{margin:0 0 14px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6B7572} .lp-td__tout{ display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:14px 15px; border-radius:10px;background:#F1FAF5;color:#00524D; } .lp-td__tout span{font-size:15px;font-weight:600} .lp-td__items{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .lp-td__items li{margin:0;padding:0} .lp-td__item{display:flex;align-items:center;gap:14px;min-height:58px;padding:15px 2px;border-bottom:1px solid #EEF1F0;color:#0A0F0D} .lp-td__item-nom{font-size:15.5px;font-weight:500;line-height:1.3} .lp-td__item-compte{margin-left:auto;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:11px;color:#6B7572} /* ---------- Recherche (surcouche) ------------------------------------------- */ .lp-rc{position:fixed;inset:0;z-index:100001;display:flex;justify-content:center;padding:80px 20px;font-family:var(--lp-sans,"Schibsted Grotesk",Helvetica,Arial,sans-serif);line-height:normal;text-wrap:pretty;color:#0A0F0D} .lp-rc__voile{position:absolute;inset:0;background:rgba(10,15,13,.35)} .lp-rc__boite{ position:relative;width:100%;max-width:720px;height:max-content;max-height:calc(100vh - 100px); overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 40px 80px -30px rgba(10,15,13,.4); } .lp-rc__champ{display:flex;align-items:center;gap:12px;margin:0;padding:18px 20px;border-bottom:1px solid #EEF1F0} .lp-rc__champ input{ flex:1;min-width:0;height:auto;margin:0;padding:0; border:0;border-radius:0;outline:0;box-shadow:none;background:none; font:400 17px/1.3 var(--lp-sans,"Schibsted Grotesk",Helvetica,Arial,sans-serif);color:#0A0F0D; } /* Le champ vit dans une ligne sans cadre : le contour de focus des champs (filet + halo, lupeo-ds.css) n'y a pas lieu. */ body .lp-rc__champ input[type="search"]:focus-visible{border:0;box-shadow:none;outline:0} .lp-rc__champ input::-webkit-search-cancel-button{display:none} .lp-rc__esc{ margin:0;padding:6px 10px;border:1px solid #E4E8E6;border-radius:6px;background:#fff;cursor:pointer; font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:11.5px;color:#59635F; } .lp-rc__resultats{max-height:56vh;overflow:auto;padding-bottom:8px} .lp-rc__titre{margin:0;padding:16px 20px 6px;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B7572} .lp-rc__ligne{display:flex;align-items:center;gap:13px;padding:11px 20px;color:#0A0F0D} .lp-rc__ligne:hover,.lp-rc__ligne:focus-visible{background:#F5FBF8} .lp-rc__nom{font-size:14.5px;font-weight:500} .lp-rc__compte{margin-left:auto;font-family:var(--lp-mono,"IBM Plex Mono",monospace);font-size:11px;color:#6B7572} .lp-rc__vide{margin:0;padding:16px 20px 6px;font-size:14px;color:#59635F} .lp-rc__tous{ display:flex;align-items:center;justify-content:space-between; width:calc(100% - 24px);margin:14px 12px 0;padding:13px 16px; border:0;border-radius:9px;background:#F1FAF5;cursor:pointer;text-align:left; font-family:inherit;color:#00524D; } .lp-rc__tous span{font-size:13.5px;font-weight:600} /* Blocksy peint tout