/* G6M_BUNDLE_34 — 6 feuilles, ordre du document preserve */ /* ==== g6m-mobile-header-v600.css ==== */ /* ========================================================================== g6m-mobile-header-v600.css — Bloc 3, source unique de vérité du header mobile -------------------------------------------------------------------------- POURQUOI UNE COUCHE @layer — À LIRE AVANT DE MODIFIER PAGE_CONTAINER injecte ~515 ressources CSS. Sur le header, ~386 règles se disputent .p-nav, 335 .p-nav-inner, 113 .p-staffBar, presque toutes en « html#XF body … !important ». Ajouter une règle de plus ne réglait rien : le résultat était décidé par l'ordre d'injection, ce qui produisait des contradictions tranchées au pire par le navigateur — par exemple min-width:180px (g6m-forum-logo-home-v370) contre max-width:150px (g6m-mobile-chrome-fix-v439) sur le logo, min-width l'emportant. Pour les déclarations !important, la cascade CSS INVERSE l'ordre des couches et place les styles hors couche en dernier. Une règle !important dans une couche nommée bat donc TOUTES les règles !important hors couche, quelles que soient leur spécificité et leur position. Vérifié en production : un sélecteur à une seule classe ici bat « html#XF body … ». CONSÉQUENCE : toute règle de header doit être ÉCRITE ICI, DANS LA COUCHE. Une règle ajoutée hors de cette couche, où que ce soit, restera sans effet. Ne créez pas de g6m-mobile-header-v601.css : modifiez ce fichier. Propriétés physiques uniquement (width/height/left/…), jamais logiques : l'héritage utilise le physique, on garantit ainsi l'écrasement. Portée : ≤ 1100 px. C'est la bascule réelle du thème (mesuré : à 1024 px .p-header est display:none et le burger est affiché), pas 768 px. Le desktop (≥ 1101 px) n'est pas touché. ========================================================================== */ @layer g6m-header { @media (max-width: 1100px) { :root { --g6m-mh-bar: 56px; /* hauteur barre de navigation */ --g6m-mh-staff: 48px; /* hauteur barre staff */ --g6m-mh-touch: 44px; /* cible tactile (WCAG 2.5.5 AAA) */ --g6m-mh-gap: 8px; --g6m-mh-logo-h: 34px; --g6m-mh-padl: max(10px, env(safe-area-inset-left, 0px)); --g6m-mh-padr: max(10px, env(safe-area-inset-right, 0px)); } /* ---- 0. HTML mort --------------------------------------------------- Bloc « V279 » de PAGE_CONTAINER : display:none à toutes les largeurs depuis g6m-mobile-chrome-fix-v439. Le markup est retiré du template ; cette règle couvre les caches de page éventuels. */ .g6m-mobile-brand { display: none !important; } /* ---- 1. Grille de la barre ----------------------------------------- minmax(0,1fr) sur la colonne du logo : la barre ne PEUT PAS déborder, c'est le logo qui cède en premier. Remplace le flex qui réclamait 537 px de contenu quelle que soit la largeur de l'écran. */ .p-nav-inner { display: grid !important; grid-template-columns: var(--g6m-mh-touch) minmax(0, 1fr) auto !important; grid-template-rows: var(--g6m-mh-bar) !important; align-items: center !important; column-gap: var(--g6m-mh-gap) !important; height: var(--g6m-mh-bar) !important; min-height: var(--g6m-mh-bar) !important; max-height: var(--g6m-mh-bar) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 var(--g6m-mh-padr) 0 var(--g6m-mh-padl) !important; margin: 0 !important; flex-wrap: nowrap !important; } /* .p-nav était figé à 50 px alors que .p-nav-inner en fait 56 : l'enfant débordait de son parent de 6 px. */ .p-nav, .p-navSticky { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: var(--g6m-mh-bar) !important; max-height: none !important; } /* placement explicite : indépendant de l'ordre du DOM et des `order` hérités */ .p-nav-inner > .p-nav-menuTrigger { grid-column: 1 !important; justify-self: start !important; } .p-nav-inner > .p-header-logo { grid-column: 2 !important; justify-self: start !important; } .p-nav-inner > .p-nav-opposite { grid-column: 3 !important; justify-self: end !important; } .p-nav-inner > .p-nav-menuTrigger, .p-nav-inner > .p-header-logo, .p-nav-inner > .p-nav-opposite { grid-row: 1 !important; order: 0 !important; margin: 0 !important; align-self: center !important; /* corrige les 3 lignes de base y=140/144/145 */ } .p-nav-inner > .p-nav-scroller, .p-nav-inner > .uix_activeNavTitle { display: none !important; } /* ---- 2. Burger : 44×44 exact, collé au bord. Apparence inchangée. --- */ .p-nav-inner > .p-nav-menuTrigger { width: var(--g6m-mh-touch) !important; min-width: var(--g6m-mh-touch) !important; max-width: var(--g6m-mh-touch) !important; height: var(--g6m-mh-touch) !important; min-height: var(--g6m-mh-touch) !important; max-height: var(--g6m-mh-touch) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; flex: 0 0 auto !important; position: relative !important; box-sizing: border-box !important; } /* ---- 3. Logo -------------------------------------------------------- Ni width ni height fixes : la boîte épouse l'image. Supprime les 52,5 px de vide dus à min-width:180px sur une image peinte 127,5 px. aspect-ratio:auto neutralise le ratio 280/62 issu des attributs HTML, qui ne correspond pas au fichier réel (300×80). */ .p-nav-inner > .p-header-logo, .p-nav-inner > .p-header-logo .uix_logo { display: flex !important; align-items: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: var(--g6m-mh-bar) !important; padding: 0 !important; overflow: hidden !important; } .p-nav-inner > .p-header-logo img { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: var(--g6m-mh-logo-h) !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: left center !important; margin: 0 !important; flex: 0 1 auto !important; } .p-nav-inner > .p-header-logo .uix_logoSmall { display: none !important; } /* ---- 4. Grappe d'actions -------------------------------------------- */ .p-nav-inner > .p-nav-opposite { display: flex !important; align-items: center !important; gap: 2px !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; flex: 0 0 auto !important; } /* NE JAMAIS forcer `display` sur .p-navgroup / .p-navgroup-link en général : le thème masque plusieurs liens (recherche, quoi de neuf) avec display:none !important, et un !important en couche les ressusciterait. On ne force le display que sur les trois liens réellement voulus. */ /* Uniquement .p-account. NE PAS viser `.p-navgroup` tout court : le thème bride .p-discovery à ~15 px (max-width + overflow:hidden) pour neutraliser la recherche et « Quoi de neuf ». Lever ce plafond le fait passer à 130 px et écrase le logo à 38 px — mesuré. */ .p-nav-inner .p-navgroup.p-account { align-items: center !important; gap: 2px !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } /* On ne cible QUE les trois actions voulues. Ne jamais élargir ce sélecteur à `.p-navgroup-link` : le thème réduit à zéro / masque « Quoi de neuf », la recherche et uix_searchBar, et toute reprise en main les rouvrirait (mesuré : +88 px sur la grappe, logo écrasé à 65 px). */ /* uix_searchBar : masqué sous 1100 px. Justification mesurée — les deux déclencheurs de recherche du header (.p-navgroup-link--search et .uix_searchIconTrigger) sont display:none sur mobile, et les 4 liens a[href*="/search"] du document sont tous invisibles : la recherche n'est PAS atteignable depuis le header mobile, avant comme après. Le conteneur réservait pourtant 72 px de largeur, et son panneau .uix_searchBarInner (244 px, position:absolute) dépassait de 234 px à droite — non rogné, car overflow:hidden sur .p-discovery ne clippe pas un descendant absolu dont l'ancêtre est position:static. Le desktop (≥1101 px) n'est pas concerné. */ .p-nav-inner .uix_searchBar { display: none !important; } .p-nav-inner .p-navgroup-link--conversations, .p-nav-inner .p-navgroup-link--alerts, .p-nav-inner .p-navgroup-link--user, .p-nav-inner .p-navgroup-link--whatsnew { display: inline-flex !important; width: var(--g6m-mh-touch) !important; min-width: var(--g6m-mh-touch) !important; max-width: var(--g6m-mh-touch) !important; height: var(--g6m-mh-touch) !important; min-height: var(--g6m-mh-touch) !important; max-height: var(--g6m-mh-touch) !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; position: relative !important; flex: 0 0 auto !important; box-sizing: border-box !important; } /* utilisateur : avatar seul sous 480 px, avatar + pseudo au-delà. Le pseudo arc-en-ciel reste accessible dans le menu off-canvas. */ .p-nav-inner .p-navgroup-link--user > .avatar { display: inline-block !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; border-radius: 50% !important; overflow: hidden !important; flex: 0 0 auto !important; font-size: 0 !important; } .p-nav-inner .p-navgroup-link--user > .avatar img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; object-fit: cover !important; display: block !important; } .p-nav-inner .p-navgroup-link--user > .p-navgroup-linkText { display: none !important; } /* ---- 5. Badges ------------------------------------------------------- Cause du décentrage : `left` ET `right` posés ensemble sans min-width, donnant une boîte de 4,09 px pour un glyphe de 11 px, placée hors de son hôte (left:-5px). On force left:auto et une pastille dimensionnée. */ .p-nav-inner .badgeContainer[data-badge]::after, .p-staffBar .badgeContainer[data-badge]::after { left: auto !important; right: 1px !important; top: 1px !important; bottom: auto !important; min-width: 18px !important; width: auto !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; padding: 0 5px !important; border-radius: 9px !important; display: grid !important; place-items: center !important; font-size: 11px !important; line-height: 1 !important; box-sizing: border-box !important; transform: none !important; pointer-events: none !important; } /* ---- 6. Barre staff -------------------------------------------------- 88,8 px → 48 px. Police 9,92 px → 12 px. Apparence des pilules (dégradés, bordures, ombres) strictement inchangée. */ /* Pas de `display` forcé : si le thème masque la barre pour les non-staff, elle doit le rester. 4 + 40 + 4 = 48 px exactement, sans centrage à gérer. */ .p-staffBar { height: auto !important; min-height: var(--g6m-mh-staff) !important; max-height: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 4px var(--g6m-mh-padr) 4px var(--g6m-mh-padl) !important; margin: 0 !important; } .p-staffBar > .pageContent, .p-staffBar .p-staffBar-inner { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; align-items: center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } .p-staffBar .hScroller-scroll { display: flex !important; align-items: center !important; gap: var(--g6m-mh-gap) !important; width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; scroll-padding-inline: 4px; } .p-staffBar .hScroller-scroll::-webkit-scrollbar { display: none !important; } /* pas de `display` ici non plus : le thème masque certains liens (Rapports, ADMIN simple) et un !important en couche les rouvrirait. Les pilules visibles sont déjà en flex, align-items suffit. */ .p-staffBar .p-staffBar-link { height: 40px !important; min-height: 40px !important; max-height: 40px !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; position: relative !important; box-sizing: border-box !important; } /* les flèches du hScroller n'ont pas de sens sur tactile */ .p-staffBar .hScroller-action { display: none !important; } /* ---- 7. Safe-area iPhone -------------------------------------------- Aucune règle env(safe-area-inset-*) n'existait sur le header. */ .offCanvasMenu-content { padding-top: env(safe-area-inset-top, 0px) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; padding-left: env(safe-area-inset-left, 0px) !important; } /* ---- 8. Accessibilité ------------------------------------------------ */ .p-nav-inner a:focus-visible, .p-nav-inner button:focus-visible, .p-staffBar .p-staffBar-link:focus-visible { outline: 2px solid #00d7ff !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .p-nav-inner *, .p-staffBar * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } } /* ---- 9. Très petits écrans : conversations dans le menu burger -------- Budget à 320 px : 10 + 44 + 8 + logo + 8 + (44+2+44) + 10 = 170 + logo. Avec trois actions le logo tombait à 104 px ; il en garde 150. */ /* Sous 412 px, « Quoi de neuf » repasse dans le menu burger : à quatre actions le logo tombait à 87,6 × 23,4 px (mesuré à 360 px). À trois, il garde sa taille pleine de 127,5 × 34. */ @media (max-width: 411.98px) { .p-nav-inner .p-navgroup.p-discovery { display: none !important; } } /* Sous 360 px, les conversations aussi : il ne reste que Alertes + Compte. */ @media (max-width: 359.98px) { :root { --g6m-mh-logo-h: 30px; } .p-nav-inner .p-navgroup-link--conversations { display: none !important; } } /* ---- 10. À partir de 480 px : le pseudo revient dans la barre -------- */ @media (min-width: 480px) and (max-width: 1100px) { :root { --g6m-mh-logo-h: 36px; } .p-nav-inner .p-navgroup-link--user { width: auto !important; min-width: var(--g6m-mh-touch) !important; max-width: 168px !important; gap: 8px !important; padding: 0 10px 0 8px !important; } .p-nav-inner .p-navgroup-link--user > .p-navgroup-linkText { display: block !important; max-width: 110px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 15px !important; line-height: 1.2 !important; } } /* =========================================================================== CORRECTIFS BUREAU — hors media query, mais dans la MEME couche g6m-header, qui reste l'arbitre unique du header. 1. Eclair parasite « Quoi de neuf » ------------------------------------ XenForo masque ce lien : `.p-navgroup-link--whatsnew { display: none }` dans css.php. Mais g6m-forum-ui-critical.css le ressuscite avec une regle en aveugle : .p-nav-opposite .p-navgroup-link, .p-nav .p-navgroup-link { display: inline-flex !important } Le lien reapparait alors dans `.p-navgroup.p-discovery`, groupe que le theme reduit a ~10px avec `overflow: hidden` : on ne voyait qu'une tranche de 10px de son icone `bolt.svg`, a droite des alertes. Mesure : lien de 34px a x=1593, groupe de 10px a x=1606. On re-masque le SEUL lien concerne. Ne jamais masquer `.p-navgroup-link` en general : cela tuerait aussi le compte, les messages et les alertes. Le groupe, devenu sans enfant visible, se replie de lui-meme a 0px. =========================================================================== */ .p-nav .p-navgroup-link--whatsnew, .p-nav-opposite .p-navgroup-link--whatsnew { display: none !important; } /* 2. La pastille vide laissee derriere ------------------------------------ `.p-navgroup` est stylee par le theme comme une pastille : bordure rose, fond en degrade, ombre interne. Le groupe `.p-discovery` qui ne contenait que « Quoi de neuf » se retrouve donc, une fois le lien masque, affiche comme une pastille VIDE de 10px collee a droite du bloc compte. On le replie — uniquement au-dessus de 1100px, ou l'on a verifie qu'il n'a aucun enfant visible (la vraie barre de recherche vit dans l'AUTRE groupe `.p-discovery`, celui de 261px). Sous 1100px on ne touche a rien : ce groupe peut y accueillir le declencheur de recherche. `:has()` ne matche que ce groupe-la — l'autre ne contient pas ce lien. */ @media (min-width: 1101px) { .p-nav .p-navgroup.p-discovery:has(> .p-navgroup-link--whatsnew) { display: none !important; } } /* 3. Le compteur de notifications affiche en TROIS exemplaires ----------------------------------------------------------- UI.X pose un badge « total non lus » sur plusieurs porteurs a la fois : - le declencheur de menu (burger), .uix_sidebarCanvasTrigger - le lien compte, .p-navgroup-link--user - la cloche, .p-navgroup-link--alerts Les trois recevaient donc « 8 » simultanement. Le badge est un pseudo-element sur `.badgeContainer[data-badge]`, et les classes `js-badge--*` / `js-uix_badge--totalUnread` sont ajoutees par JavaScript a l'execution — inutile de les chercher dans le template. On vise donc les porteurs par leurs classes stables. On garde le badge sur la CLOCHE (alertes) et sur l'ENVELOPPE (messages), qui comptent chacun leur propre file. On retire les deux doublons. Ne pas neutraliser `.badgeContainer` en general : cela effacerait aussi les compteurs du chat, de la barre staff et du menu deroulant. */ /* On raisonne par EXCLUSION plutot qu'en nommant les porteurs a retirer : la classe du declencheur de menu depend du reglage `uix_sidebarTriggerPosition` et n'est donc pas fiable. On neutralise tout badge de la barre de navigation SAUF les trois qui comptent chacun leur propre file — alertes, messages, chat — et sauf les lignes de menu deroulant, qui ont leurs propres compteurs. */ .p-nav-inner .badgeContainer:not(.p-navgroup-link--alerts):not(.p-navgroup-link--conversations):not(.p-navgroup-link--chat):not(.menu-linkRow):not(.p-staffBar-link)::before, .p-nav-inner .badgeContainer:not(.p-navgroup-link--alerts):not(.p-navgroup-link--conversations):not(.p-navgroup-link--chat):not(.menu-linkRow):not(.p-staffBar-link)::after { content: none !important; display: none !important; } /* 4. Habillage neon des compteurs ------------------------------ Les badges etaient au rouge XenForo par defaut (#e74c3c) avec la police systeme : etranger a la charte rose/cyan du theme. On ne touche QUE la peinture. La geometrie reste celle du theme — position absolue, `min-width: 16.8px`, `padding: 1px 5px`, rayon 999px — car elle est deja elastique : mesure a 16,8 px pour « 1 », 21,5 px pour « 12 », 28,6 px pour « 99+ ». Pas de `border` ajoutee non plus : elle agrandirait la boite de 2 px. L'anneau clair passe par un `inset` de box-shadow, qui ne prend aucune place, et l'anneau sombre d'origine est conserve pour detacher le badge de l'icone. Deux teintes, pour distinguer les files d'un coup d'oeil : alertes en rose -> violet, messages en cyan -> violet. */ .p-nav-inner .badgeContainer[data-badge]::after { font-family: Rajdhani, Inter, system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .02em !important; color: #fff !important; background-color: #ff0b8b !important; background-image: linear-gradient(135deg, #ff4fa8 0%, #ff0b8b 48%, #a35cff 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30), 0 0 0 2px rgba(8, 6, 14, .85), 0 0 10px rgba(255, 11, 139, .70), 0 2px 6px rgba(0, 0, 0, .45) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .40) !important; } .p-nav-inner .p-navgroup-link--conversations.badgeContainer[data-badge]::after { background-color: #00c2ff !important; background-image: linear-gradient(135deg, #5ad9ff 0%, #00c2ff 48%, #8d38ff 100%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30), 0 0 0 2px rgba(8, 6, 14, .85), 0 0 10px rgba(0, 194, 255, .65), 0 2px 6px rgba(0, 0, 0, .45) !important; } } /* fin @layer g6m-header */ /* ==== g6m-login-cmp-fix-v601.css ==== */ /* ========================================================================== g6m-login-cmp-fix-v601.css — Bannière cookies + largeur de la page de connexion -------------------------------------------------------------------------- POURQUOI UNE COUCHE @layer — À LIRE AVANT DE MODIFIER PAGE_CONTAINER injecte 220 feuilles de style et ~100 blocs