/** * DJ Header — recherche permanente + panneaux mégamenu * ------------------------------------------------------------ * Style des shortcodes [dj_header_search] et [dj_header_nav] (includes/dj-header.php). * Charte : coins carrés (border-radius 0 partout, pastilles 50% uniquement), * tokens --dj-* définis dans style.css, Playfair Display (titres) / Lora (corps). * Breakpoint unique : 1024px (≤1024 = mobile : feuille plein écran + accordéons). * La visibilité des panneaux/feuille est pilotée par JS (classes .dj-ouvert / * body.dj-nav-ouverte) — aucun :hover porteur d'état, le survol est géré en JS * (hover-intent) pour rester maîtrisable au clavier et au tactile. * * @version 1.0.13 — cache-buster : DJ_HEADER_VERSION (includes/dj-header.php) */ /* ========================================================================== RESETS LOCAUX (neutralise la typo des wrappers Divi .et_pb_text_inner) ========================================================================== */ .dj-search, .dj-search *, .dj-nav, .dj-nav * { box-sizing: border-box; } .dj-nav ul { list-style: none; margin: 0; padding: 0; } .dj-nav li { padding-left: 0; position: static; } /* Le thème décore les puces d'un losange ◇ global (li::before) : hors-jeu dans le header */ .dj-nav li::before, .dj-nav li::after { content: none !important; display: none !important; } .dj-nav a { text-decoration: none; } /* ========================================================================== INTÉGRATION DANS LA RANGÉE DIVI Desktop ≥1025px : [logo] [champ────────] [clé][❤][panier] Mobile ≤1024px (plus bas) : logo + icônes en 1re ligne, champ dessous. Fallback sans :has() : min-width sur .dj-search, layout Divi d'origine. ========================================================================== */ /* -------------------------------------------------------------------------- LES DEUX PREMIÈRES RANGÉES REPRENNENT TOUTE LA LARGEUR -------------------------------------------------------------------------- 🔴 Sur les FICHES PRODUIT, le header était « tassé » : mesuré à viewport 1150, ses rangées tombaient à 920 px (le width:80% par défaut de Divi) alors qu'elles font 1150 sur l'accueil. À 920, chaque colonne de la barre du haut ne fait plus que ~306 px et « L'excellence de la Domination Féminine indépendante depuis 2017 » se casse en TROIS lignes : le header passe de 186 à 210 px. Pourquoi la largeur de Divi ne s'appliquait pas : le réglage « largeur 100 % » posé dans le Theme Builder génère un sélecteur groupé dont les variantes exigent soit « body #page-container .et-db #et-boc … » — or `.et-db` est posé sur le , PAS dans #page-container, donc ça ne matche jamais — soit « body.et_pb_pagebuilder_layout », absent sur une fiche produit. Il ne restait que le sélecteur NU « .et_pb_row_0_tb_header » en (0,1,0), qui perd contre le width:80% par défaut dès que l'écran descend sous ~1400 px. ⛔ NE PAS restreindre à la rangée 0 : essayé en test, refusé — la barre du haut passe alors en pleine largeur pendant que la rangée du logo reste à 80 %, et le « contact » ne s'aligne plus avec le logo. Les DEUX, ou rien. ℹ️ Le fin contour des boutons Compte et Wishlist redevient visible : c'est le rendu NORMAL (les deux modules portent `et_pb_with_border` avec le token --dj-bordure), vérifié sur l'accueil. À 920 px ils étaient comprimés et le trait ne se voyait plus. (0,3,2) : passe devant tout ce que Divi pose, sans un seul !important. -------------------------------------------------------------------------- */ html body .et_pb_row_0_tb_header.et_pb_row, html body .et_pb_row_1_tb_header.et_pb_row { width: 100%; max-width: 100%; } @media (min-width: 1025px) { .molti-header-9-10 .et_pb_row:has(.dj-search) { display: flex; align-items: center; } .molti-header-9-10 .et_pb_row:has(.dj-search) > .et_pb_column:first-child { flex: 0 0 auto; width: auto; } .molti-header-9-10 .et_pb_row:has(.dj-search) > .et_pb_column:last-child { flex: 1 1 auto; width: auto; gap: 14px; align-items: center; } .molti-header-9-10 .et_pb_column .et_pb_module:has(.dj-search) { flex: 1 1 auto; /* le champ passe en tête de colonne : [champ────][clé][❤][panier] */ order: -1; } /* champ centré sur la PAGE, plus sur l'espace restant : la zone icônes (236px) est plus large que la zone logo (170px), le champ était décalé de 33px à gauche du centre. Le module passe en absolu ancré sur la RANGÉE — les colonnes Divi repassent en static, sinon la colonne (position:relative) sert de référence et fausse le centrage. */ .molti-header-9-10 .et_pb_row:has(.dj-search) { position: relative; /* la fine ligne de la maquette au-dessus des liens du menu (cette rangée fait 100% de large, la rangée nav non) */ border-bottom: 1px solid var(--dj-fond-secondaire); } .molti-header-9-10 .et_pb_row:has(.dj-search) > .et_pb_column { position: static !important; } .molti-header-9-10 .et_pb_module:has(.dj-search) { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; /* 640px maquette, réduit sur desktop étroit pour ne jamais toucher ni le logo ni les icônes */ width: min(640px, calc(100vw - 700px)) !important; margin: 0 !important; } .molti-header-9-10 .et_pb_module:has(.dj-search) .dj-search { width: 100%; } } /* Compte : boîte FIGÉE à 40px. L'ancien effet de survol du thème (l'emoji 🗝️ glisse à left:25% pour laisser apparaître le titre) élargissait la boîte et décalait le champ. Et le blurb traînait un margin-left:-50px (collage de l'ancien layout) qui posait la clé sur le logo. */ .molti-header-9-10 .et_pb_row:has(.dj-search) .account-link { margin-left: 0 !important; width: 40px; flex: 0 0 40px; overflow: hidden; } .molti-header-9-10 .et_pb_row:has(.dj-search) .account-link:hover::after { left: 50% !important; /* l'emoji ne glisse plus */ } .dj-search { min-width: 260px; } /* ========================================================================== CHAMP DE RECHERCHE [dj_header_search] ========================================================================== */ .dj-search { position: relative; width: 100%; max-width: 640px; margin: 0 auto; } .dj-search input[type="search"] { width: 100%; padding: 12px 52px 12px 22px; border: 1px solid var(--dj-bordure); border-radius: 0; /* charte DJ : angles droits */ background: var(--dj-fond-clair); font-family: 'Lora', Georgia, serif; font-size: 15px; color: var(--dj-texte-fonce); outline: none; transition: var(--dj-transition); -webkit-appearance: none; appearance: none; } .dj-search input[type="search"]::placeholder { color: var(--dj-texte-clair); font-style: italic; } .dj-search input[type="search"]:focus { border-color: var(--dj-rose-principal); background: #fff; box-shadow: 0 0 0 4px var(--dj-gradient-rose-alpha); } .dj-search button[type="submit"] { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 0; background: var(--dj-rose-principal); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: var(--dj-transition); } .dj-search button[type="submit"]:hover { background: var(--dj-rose-vif); } /* Masque la croix native des champs search (WebKit) pour rester sobre */ .dj-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* ========================================================================== NAV RUBRIQUES [dj_header_nav] — desktop ========================================================================== */ .dj-nav-rubriques { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; } .dj-rubrique > a { display: block; padding: 13px 16px 15px; font-family: 'Lora', Georgia, serif; font-size: 15.5px; letter-spacing: .4px; color: var(--dj-texte-fonce); white-space: nowrap; position: relative; } /* Soulignement animé, comme les liens actifs du site */ .dj-rubrique > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 9px; height: 2px; background: var(--dj-rose-principal); transform: scaleX(0); transition: transform .25s ease; } .dj-rubrique > a:hover::after, .dj-rubrique.dj-ouvert > a::after { transform: scaleX(1); } .dj-chevron { font-size: 9px; color: var(--dj-texte-clair); margin-left: 5px; display: inline-block; transition: transform .25s ease; } .dj-rubrique.dj-ouvert .dj-chevron { transform: rotate(180deg); } /* ========================================================================== PANNEAUX pleine largeur — desktop Le JS pose --dj-panneau-top (bas du header sticky) sur le