/* ============================================================ DealFabric DS — Composant · Header et méga-menu deux volets ------------------------------------------------------------ Porté depuis Refonte/Pages/Gabarits/mega-menu-ouvert.html, le gabarit qui fait foi pour les 22 pages de la refonte. Le markup est produit par le thème enfant : dealfabric/includes/helper-main-menu.php GARDE-FOU : les sélecteurs qui démontent le header d Enfold sont tous conditionnés a la classe « df-header », posee sur par php/dealfabric-ds.php uniquement si helper-main-menu.php existe. Cette feuille est donc sans effet tant que notre header n est pas en place — on ne peut pas se retrouver avec un site sans logo. ============================================================ */ /* ============================================================ 0 · Mise hors jeu du header Enfold ------------------------------------------------------------ Notre balise garde id="header" pour que aviaCalcContentWidth() (avia.js:923) trouve sa cible, mais plus rien du thème ne doit la styler. ============================================================ */ /* C est #header qui colle, pas .df-nav : un sticky imbriqué dans un parent statique décolle dès que ce parent sort du viewport. #header étant positionné, il sert aussi de référent au .df-mega absolu. */ #top #header.df{ position:sticky; top:0; z-index:var(--df-z-nav); height:auto; min-height:0; background:none; border:0; box-shadow:none; color:inherit; } /* Enfold réserve la place du header collant en CSS dynamique (functions-enfold.php:1710) : .html_header_top.html_header_sticky #top #wrap_all #main{padding-top:88px} Notre header est en flux, sticky natif : aucune réserve à faire. Spécificité portée à 3 id + 4 classes pour passer devant, sans !important. Reste valable même si le header collant est réactivé par mégarde dans les options du thème. */ .html_header_top.html_header_sticky #top.df-header #wrap_all #main.all_colors, .html_header_top.html_header_topbar_active.html_header_sticky #top.df-header #wrap_all #main.all_colors{ padding-top:0; } /* Reliquats possibles du thème */ #top.df-header #header_meta, #top.df-header #header_main_alternate, #top.df-header .av-logo-container, #top.df-header #advanced_menu_toggle, #top.df-header #advanced_menu_hide{ display:none; } /* ============================================================ 1 · Barre de navigation ============================================================ */ /* position:relative + z-index OBLIGATOIRES. #header est sticky avec un z-index : il ouvre son propre contexte d empilement. Le .df-scrim qu il contient (z-index 15) passerait au-dessus d une .df-nav sans z-index, recouvrirait les boutons et provoquerait une boucle survol/sortie — le menu clignoterait. La nav doit donc être empilée au-dessus du voile, et sous le tiroir mobile. Ordre dans #header : scrim 15 < nav 30 < drawer 51. Effet de bord voulu : .df-mega (absolute) se réfère désormais à .df-nav plutôt qu à #header — même géométrie, top:100% tombe toujours juste sous la barre. */ #top .df .df-nav{ position:relative; z-index:30; padding:16px var(--df-gutter); background:var(--df-paper); backdrop-filter:blur(12px); } #top .df .df-nav__in{ max-width:var(--df-wrap); margin:0 auto; display:flex; align-items:center; gap:20px; } /* --df-logo-h : hauteur d affichage du logo. Seule valeur à toucher pour l ajuster — le fichier fait 340x156, la largeur suit le ratio. La barre grandit avec lui : sa hauteur est le logo plus le padding vertical de .df-nav. */ #top .df .df-nav{ --df-logo-h:80px; } #top .df .df-nav__logo{ display:flex; align-items:center; flex-shrink:0; font-size:17px; font-weight:600; letter-spacing:-.03em; color:var(--df-ink); } #top .df .df-nav__logo img{ height:var(--df-logo-h); width:auto; max-height:none; object-fit:contain; } @media (max-width:1050px){ #top .df .df-nav{ --df-logo-h:48px; } } /* Groupe central : pilule grise, items au centre */ #top .df .df-nav__group{ display:flex; gap:2px; background:var(--df-grey-bg); border-radius:9px; padding:4px; margin:0 auto; } #top .df .df-nav__group a, #top .df .df-nav__group button{ padding:8px 15px; border-radius:6px; font-family:inherit; font-size:13.5px; line-height:1.4; color:var(--df-ink-2); transition:background var(--df-t-fast), color var(--df-t-fast); } #top .df .df-nav__group a:hover, #top .df .df-nav__group button:hover, #top .df .df-nav__group button[aria-expanded="true"]{ background:var(--df-alt); color:var(--df-ink); } /* Page courante */ #top .df .df-nav__group .df-is-current{ background:var(--df-alt); color:var(--df-ink); } /* Sélecteur de langue — pilule segmentée. Porté du gabarit validé Refonte/Pages/Gabarits/footers-5-versions.html, transposé du fond sombre au fond clair. Même géométrie : rayon 7px, segments 7x13, la langue active sur fond plein. */ #top .df .df-nav__lang{ display:inline-flex; flex-shrink:0; overflow:hidden; border:1px solid var(--df-line); border-radius:7px; } #top .df .df-nav__lang a{ padding:7px 13px; font-size:12.5px; line-height:1.2; color:var(--df-grey); transition:background var(--df-t-fast), color var(--df-t-fast); } #top .df .df-nav__lang a:hover{ background:var(--df-grey-bg); color:var(--df-ink); } #top .df .df-nav__lang a.df-is-current{ background:var(--df-grey-bg); color:var(--df-ink); } /* Dans le tiroir mobile, la pilule occupe toute la largeur : sans elle, on ne pourrait pas changer de langue sur téléphone. */ #top .df-drawer .df-nav__lang{ display:flex; width:100%; margin-top:22px; } #top .df-drawer .df-nav__lang a{ flex:1; padding:11px 13px; text-align:center; } /* ============================================================ 2 · Méga-menu deux volets ============================================================ */ #top .df .df-mega{ position:absolute; left:0; right:0; top:100%; z-index:var(--df-z-mega); background:var(--df-paper); border-top:1px solid var(--df-line); border-bottom:1px solid var(--df-line); box-shadow:var(--df-shadow-mega); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .25s var(--df-ease), visibility .2s; } #top .df .df-mega.df-is-open{ opacity:1; visibility:visible; transform:none; } #top .df .df-mega__in{ max-width:var(--df-wrap); margin:0 auto; padding:0 var(--df-gutter); display:grid; grid-template-columns:250px 1fr; } /* Volet gauche : index des rubriques */ #top .df .df-mega__index{ border-right:1px solid var(--df-line); padding:26px 22px 30px 0; } #top .df .df-mega__index button{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius:var(--df-r-sm); font-family:inherit; font-size:14px; text-align:left; color:var(--df-ink-2); transition:background .16s, color .16s; } #top .df .df-mega__index button em{ font-style:normal; font-size:11px; color:var(--df-grey); } #top .df .df-mega__index button:hover{ background:var(--df-alt); } #top .df .df-mega__index button.df-is-on{ background:var(--df-ink); color:var(--df-n-text); } #top .df .df-mega__index button.df-is-on em{ color:var(--df-n-text); opacity:.62; } /* Volet droit : les pages de la rubrique */ #top .df .df-mega__pane{ display:none; grid-template-columns:1fr 1fr 250px; gap:30px; min-height:300px; padding:26px 0 34px 34px; } #top .df .df-mega__pane.df-is-on{ display:grid; } #top .df .df-mega__pane h4{ grid-column:1/-1; margin:0 0 14px; font-size:var(--df-eyebrow); font-weight:400; letter-spacing:var(--df-ls-eyebrow); text-transform:uppercase; color:var(--df-grey); } #top .df .df-mega__pane a{ display:block; margin-left:-10px; padding:8px 10px; border-radius:6px; font-size:13.5px; line-height:1.35; color:var(--df-ink); transition:background .16s, color .16s; } #top .df .df-mega__pane a:hover{ background:var(--df-alt); color:var(--df-link); } /* Encart de droite */ #top .df .df-mega__side{ display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:var(--df-alt); border:1px solid var(--df-line); border-radius:var(--df-r-md); } /* Le visuel de l encart. Sorti seulement quand la cle « image » est renseignee dans df_header_section_sides() — voir df-header-data.php. Le calibre est pose des maintenant pour que l image tombe juste le jour ou elle arrive. */ #top .df .df-mega__side .df-mega__visuel{ display:block; width:100%; height:88px; margin-bottom:12px; border-radius:10px; object-fit:cover; } #top .df .df-mega__side p{ margin:0 0 12px; font-size:12.5px; line-height:1.5; } /* Voile derrière le méga-menu */ #top .df-scrim{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:var(--df-z-scrim); background:rgba(14,22,33,.16); opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; } #top .df-scrim.df-is-on{ opacity:1; visibility:visible; } /* ============================================================ 3 · Bouton burger et tiroir mobile ------------------------------------------------------------ Absent des maquettes validées : elles se contentent de masquer la navigation sous 1050 px. Comportement ajouté ici, à valider. ============================================================ */ #top .df .df-nav__burger{ display:none; width:40px; height:40px; flex-shrink:0; margin-left:auto; border:1px solid var(--df-line); border-radius:var(--df-r-sm); place-items:center; transition:border-color var(--df-t-fast); } #top .df .df-nav__burger:hover{ border-color:var(--df-ink); } #top .df .df-nav__burger span, #top .df .df-nav__burger span::before, #top .df .df-nav__burger span::after{ display:block; width:16px; height:1.5px; background:var(--df-ink); transition:transform .25s var(--df-ease), opacity .18s; } #top .df .df-nav__burger span::before, #top .df .df-nav__burger span::after{ content:""; position:relative; } #top .df .df-nav__burger span::before{ top:-5px; } #top .df .df-nav__burger span::after{ top:3.5px; } #top .df .df-nav__burger[aria-expanded="true"] span{ background:transparent; } #top .df .df-nav__burger[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); } #top .df .df-nav__burger[aria-expanded="true"] span::after{ transform:translateY(-3.5px) rotate(-45deg); } #top .df-drawer{ display:none; position:fixed; top:0; right:0; bottom:0; left:auto; width:400px; max-width:88vw; z-index:100000; background:var(--df-paper); border-left:1px solid var(--df-line); padding:22px var(--df-gutter) 40px; overflow-y:auto; overscroll-behavior:contain; transform:translate3d(100%,0,0); transition:transform .3s var(--df-ease); -webkit-backface-visibility:hidden; } #top .df-drawer.df-is-open{ transform:translate3d(0,0,0); } /* Ouverture par ancre — diagnostic et repli sans JavaScript. Visiter une page avec #df-drawer dans l URL ouvre le tiroir en CSS pur. Si le tiroir apparait ainsi mais pas au clic sur le burger, le probleme est dans le script ou dans la reception du tap ; s il n apparait pas non plus, il est dans le positionnement. */ #top .df-drawer:target{ display:block; transform:translate3d(0,0,0); } /* Barre haute du tiroir : logo à gauche, fermeture à droite. Le tiroir couvre le header sur mobile — sans elle, on perdait le repère de marque et le seul moyen de fermer était Échap. */ #top .df-drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; } #top .df-drawer__logo{ display:flex; align-items:center; flex-shrink:0; font-size:17px; font-weight:600; letter-spacing:-.03em; color:var(--df-ink); } #top .df-drawer__logo img{ height:36px; width:auto; max-height:none; object-fit:contain; } #top .df-drawer__close{ position:relative; width:40px; height:40px; flex-shrink:0; border:1px solid var(--df-line); border-radius:var(--df-r-sm); transition:border-color var(--df-t-fast); } #top .df-drawer__close:hover{ border-color:var(--df-ink); } #top .df-drawer__close span::before, #top .df-drawer__close span::after{ content:""; position:absolute; top:50%; left:50%; width:15px; height:1.5px; margin:-.75px 0 0 -7.5px; background:var(--df-ink); } #top .df-drawer__close span::before{ transform:rotate(45deg); } #top .df-drawer__close span::after{ transform:rotate(-45deg); } #top .df-drawer__group{ border-top:1px solid var(--df-line); } #top .df-drawer__group > button{ display:flex; width:100%; align-items:center; justify-content:space-between; padding:16px 0; font-family:inherit; font-size:15px; color:var(--df-ink); text-align:left; } #top .df-drawer__group > button::after{ content:""; width:7px; height:7px; border-right:1.5px solid var(--df-grey); border-bottom:1.5px solid var(--df-grey); transform:rotate(45deg) translateY(-2px); transition:transform .22s var(--df-ease); } #top .df-drawer__group > button[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); } #top .df-drawer__sub{ display:none; padding:0 0 14px; } #top .df-drawer__sub.df-is-open{ display:block; } #top .df-drawer__sub a{ display:block; padding:9px 0 9px 14px; border-left:1px solid var(--df-line); font-size:14px; line-height:1.4; color:var(--df-ink-2); } #top .df-drawer__sub a:hover{ color:var(--df-link); } /* Entrée sans sous-niveau */ #top .df-drawer__link{ display:block; padding:16px 0; font-size:15px; color:var(--df-ink); } #top .df-drawer .df-btn{ width:100%; justify-content:center; margin-top:26px; } /* Verrou du défilement quand le tiroir est ouvert */ body.df-drawer-open{ overflow:hidden; } /* ============================================================ 4 · Ruptures ============================================================ */ @media (max-width:1050px){ #top .df .df-nav{ padding:12px 22px; } /* On masque la pilule de la BARRE, pas celle du tiroir. */ #top .df .df-nav__group, #top .df .df-nav__in > .df-btn, #top .df .df-nav__in > .df-nav__lang{ display:none; } #top .df .df-nav__burger{ display:grid; } #top .df-drawer{ display:block; } #top .df .df-mega{ display:none; } } @media (min-width:1051px){ #top .df-drawer{ display:none; } }