/* ============================================================================ Header V3 — charte « éditorial néo-brutaliste » : bandeau papier crème, trait encre en bas, menu Hanken Grotesk, CTA orange en bouton à ombre dure. Chargé sur TOUT le site (le header est global), y compris les pages V1. Préfixe hd3- : hv3- est déjà pris par la home V3 (homepage-v3.css) et fv3- par le footer. Les sélecteurs sont préfixés #header.header-v3 : main.min.css porte une trentaine de règles sur #header (fond rouge, min-height 650px, overlay, colonnes Bootstrap) qu'il faut battre en spécificité, sans quoi l'ancien décor ressort par en dessous. ========================================================================== */ /* Hauteurs de la barre. Sur :root et non sur le header : l'espaceur en a besoin lui aussi, et il n'est pas son descendant. */ :root{--hd3-h:76px;--hd3-h-stuck:56px} /* Sentinelle : 1 px invisible posé avant le header. Tant qu'elle est à l'écran, le header est en haut de page ; dès qu'elle sort, il est collé. C'est ce que l'IntersectionObserver de header-v3.js surveille — aucun écouteur de scroll, donc aucun repaint continu. */ .hd3-sentinel{position:absolute;top:0;left:0;width:1px;height:1px} /* Espaceur : le header étant hors du flux, c'est lui qui réserve la place. Sa hauteur ne bouge JAMAIS, même quand la barre se compacte — sans quoi le document raccourcirait au premier scroll et le contenu sauterait de 20 px. */ .hd3-spacer{height:var(--hd3-h)} /* Le header fixe masque les ancres ; on décale les cibles d'autant. */ html{scroll-padding-top:calc(var(--hd3-h-stuck) + 14px)} /* --- Lien d'évitement : invisible jusqu'au premier Tab --- */ .hd3-skip{ position:fixed;top:-100px;left:14px;z-index:100000; font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:700;font-size:14px;color:#171310;background:#FF5A1F; border:2px solid #171310;box-shadow:4px 4px 0 #171310; padding:12px 18px;text-decoration:none;transition:top .18s; } .hd3-skip:focus{top:14px;color:#171310;text-decoration:none} #header.header-v3{ --paper:#F2E7D0; --paper2:#FBF6EC; --card:#FFFFFF; --ink:#171310; --ink2:#5c5044; --orange:#FF5A1F; position:fixed;top:0;left:0;right:0;z-index:9995; background:var(--paper) !important; background-image:none !important; color:var(--ink); border-bottom:3px solid var(--ink); min-height:0 !important; margin:0 !important; /* main.min.css impose margin-bottom:40px */ padding:0 !important; font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; transition:box-shadow .18s ease; } #header.header-v3 *{box-sizing:border-box} #header.header-v3 a{text-decoration:none;color:inherit} /* Le geste du header : collé, la barre se compacte et pose une ombre dure — le même vocabulaire que les cartes de la charte, pas une ombre floue. */ #header.header-v3.is-stuck{box-shadow:0 5px 0 var(--ink)} #header.header-v3 .hd3-wrap{ max-width:1280px;margin:0 auto;padding:0 26px; height:var(--hd3-h);display:flex;align-items:center;gap:26px; transition:height .18s ease; } #header.header-v3.is-stuck .hd3-wrap{height:var(--hd3-h-stuck)} /* --- Logo --- */ #header.header-v3 .hd3-logo{flex:0 0 auto;display:flex;align-items:center} #header.header-v3 .hd3-logo img{ display:block;width:auto;height:44px;transition:height .18s ease; } #header.header-v3.is-stuck .hd3-logo img{height:34px} /* --- Navigation --- */ #header.header-v3 .hd3-nav{flex:1 1 auto;min-width:0} #header.header-v3 .hd3-menu{ list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:2px; } #header.header-v3 .hd3-menu li{margin:0;padding:0;background:none;border:0} #header.header-v3 .hd3-menu li::before{content:none} #header.header-v3 .hd3-menu > li{position:relative;display:flex} #header.header-v3 .hd3-menu > li > a{ display:flex;align-items:center;gap:6px;height:var(--hd3-h); font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--ink);padding:0 13px;white-space:nowrap; transition:height .18s ease,color .15s; } #header.header-v3.is-stuck .hd3-menu > li > a{height:var(--hd3-h-stuck)} /* Le soulignement orange qui se déploie — le geste des liens du footer V3. */ #header.header-v3 .hd3-menu > li > a::before{ content:"";position:absolute;left:13px;right:13px;bottom:16px;height:2.5px; background:var(--orange);transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); } #header.header-v3.is-stuck .hd3-menu > li > a::before{bottom:11px} #header.header-v3 .hd3-menu > li:hover > a::before, #header.header-v3 .hd3-menu > li:focus-within > a::before, #header.header-v3 .hd3-menu > li.current-menu-item > a::before, #header.header-v3 .hd3-menu > li.current-menu-ancestor > a::before, #header.header-v3 .hd3-menu > li.current-menu-parent > a::before, #header.header-v3 .hd3-menu > li.current_page_item > a::before, #header.header-v3 .hd3-menu > li.current_page_parent > a::before{transform:scaleX(1)} #header.header-v3 .hd3-menu > li:hover > a, #header.header-v3 .hd3-menu > li:focus-within > a{color:var(--orange)} /* Chevron des entrées à sous-menu */ #header.header-v3 .hd3-menu > li.menu-item-has-children > a::after{ content:"";width:7px;height:7px;flex:0 0 auto;margin-top:-3px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);transition:transform .2s; } #header.header-v3 .hd3-menu > li.menu-item-has-children:hover > a::after, #header.header-v3 .hd3-menu > li.menu-item-has-children:focus-within > a::after{ transform:rotate(-135deg);margin-top:2px; } /* --- Sous-menus : ouverts au survol ET au focus clavier, sans JS --- */ #header.header-v3 .hd3-menu .sub-menu{ /* left:-5px aligne le texte du sous-menu (padding 18) sur celui du parent (padding 13), au lieu de le décaler de 5 px vers la droite. */ position:absolute;top:100%;left:-5px;z-index:10;min-width:238px; list-style:none;margin:0;padding:8px 0; background:var(--card);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink); opacity:0;visibility:hidden;transform:translateY(-7px); transition:opacity .16s,transform .16s,visibility .16s; } #header.header-v3 .hd3-menu > li:hover > .sub-menu, #header.header-v3 .hd3-menu > li:focus-within > .sub-menu{ opacity:1;visibility:visible;transform:translateY(0); } #header.header-v3 .hd3-menu .sub-menu a{ display:block;padding:9px 18px;font-size:14.5px;line-height:1.35; color:var(--ink);border-left:3px solid transparent;transition:.15s; } #header.header-v3 .hd3-menu .sub-menu a:hover, #header.header-v3 .hd3-menu .sub-menu a:focus{ background:var(--paper2);border-left-color:var(--orange);color:var(--orange); } #header.header-v3 .hd3-menu .sub-menu .current-menu-item > a{ border-left-color:var(--orange);font-weight:700; } /* --- Actions à droite --- */ #header.header-v3 .hd3-actions{ flex:0 0 auto;display:flex;align-items:center;gap:16px;margin-left:auto; } /* Sélecteur de langues (markup rendu par languages_selector()) */ #header.header-v3 .hd3-lang .language-selector{ list-style:none;display:flex;align-items:center;gap:0;margin:0 !important;padding:0; } #header.header-v3 .hd3-lang li{margin:0;padding:0;background:none;border:0;line-height:1} #header.header-v3 .hd3-lang li::before{content:none} #header.header-v3 .hd3-lang li + li{border-left:2px solid rgba(23,19,16,.28)} #header.header-v3 .hd3-lang a{ display:block;padding:2px 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em; color:var(--ink2);transition:color .15s; } #header.header-v3 .hd3-lang a:hover, #header.header-v3 .hd3-lang a:focus{color:var(--orange)} #header.header-v3 .hd3-lang li.active a{color:var(--ink)} /* Compte */ #header.header-v3 .hd3-account{ display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; color:var(--ink);white-space:nowrap;transition:color .15s; } #header.header-v3 .hd3-account svg{display:block;flex:0 0 auto} #header.header-v3 .hd3-account:hover, #header.header-v3 .hd3-account:focus{color:var(--orange)} /* Panier — la pastille reprend le sticker de la charte : carré orange bordé d'encre, légèrement pivoté. */ #header.header-v3 .hd3-cart{position:relative;display:block;line-height:0;color:var(--ink)} #header.header-v3 .hd3-cart svg{display:block} #header.header-v3 .hd3-cart:hover, #header.header-v3 .hd3-cart:focus{color:var(--orange)} #header.header-v3 .hd3-cart-count{ position:absolute;top:-9px;right:-11px;min-width:20px; font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:11px; line-height:16px;text-align:center;color:#fff;background:var(--orange); border:2px solid var(--ink);padding:0 3px;transform:rotate(-6deg); } /* CTA */ #header.header-v3 .hd3-cta{ display:inline-flex;align-items:center;height:42px;padding:0 20px; font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:15px; letter-spacing:.045em;text-transform:uppercase;color:#fff;background:var(--orange); border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink); transition:transform .12s,box-shadow .12s,height .18s ease; } #header.header-v3.is-stuck .hd3-cta{height:36px} #header.header-v3 .hd3-cta:hover, #header.header-v3 .hd3-cta:focus{ color:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink); } #header.header-v3 .hd3-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} /* --- Burger : masqué au-dessus de 900 px --- */ #header.header-v3 .hd3-burger{ display:none;width:42px;height:42px;padding:0;flex:0 0 auto; background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink); cursor:pointer;position:relative; } #header.header-v3 .hd3-burger span{ position:absolute;left:10px;right:10px;height:2.5px;background:var(--ink); transition:transform .2s,opacity .15s; } #header.header-v3 .hd3-burger span:nth-child(1){top:13px} #header.header-v3 .hd3-burger span:nth-child(2){top:19.5px} #header.header-v3 .hd3-burger span:nth-child(3){top:26px} #header.header-v3.is-nav-open .hd3-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} #header.header-v3.is-nav-open .hd3-burger span:nth-child(2){opacity:0} #header.header-v3.is-nav-open .hd3-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* Le pied de panneau (CTA + compte) n'existe qu'en mobile. */ #header.header-v3 .hd3-nav-foot{display:none} /* Zone intermédiaire : le menu et les actions se disputent la largeur juste au-dessus du seuil du burger. On resserre plutôt que de laisser déborder. */ @media (max-width:1240px){ #header.header-v3 .hd3-wrap{gap:16px} #header.header-v3 .hd3-menu > li > a{padding:0 9px;font-size:13.5px} #header.header-v3 .hd3-menu > li > a::before{left:9px;right:9px} #header.header-v3 .hd3-actions{gap:12px} #header.header-v3 .hd3-cta{padding:0 15px;font-size:14px} } /* --- Focus visible partout --- */ #header.header-v3 a:focus-visible, #header.header-v3 button:focus-visible{outline:3px solid var(--orange);outline-offset:2px} /* ============================ Mobile / tablette ============================ */ @media (max-width:1080px){ /* Pas de compactage en mobile : la barre est déjà à sa hauteur minimale, et une hauteur constante permet au panneau de se caler dessous au pixel près. */ :root{--hd3-h:58px;--hd3-h-stuck:58px} #header.header-v3 .hd3-wrap{gap:14px;padding:0 16px} #header.header-v3 .hd3-burger{display:block;order:5} #header.header-v3 .hd3-actions{gap:14px;order:4} /* Restent dans la barre : langues et panier. Compte et CTA passent dans le panneau. */ #header.header-v3 .hd3-account, #header.header-v3 .hd3-cta{display:none} /* La navigation devient un panneau plein écran. Un seul menu dans le DOM : c'est le même