/* G6M_FIXES_V1200 (20/09/2026) NB : la feuille est injectee en tete de (avant les paquets) ; ses couches @layer sont donc declarees en PREMIER (les plus fortes pour les !important) mais ses regles precedent celles des paquets dans une meme couche : d ou le prefixe html#XF qui ajoute un id a la specificite. — correctifs d'affichage du forum. Feuille HORS paquet, injectee par la modification de gabarit g6m_fixes_v1200 (PAGE_CONTAINER). Chaque bloc est date et explique. */ /* ------------------------------------------------------------------ 1) Cartes de noeud : angle bas-droit « casse ». .p-body-pageContent .node { width:100% !important } (forum-ui-critical) + marges laterales 0.55rem = la carte deborde de ~8 px a droite du .block-container (overflow:hidden, rayon 16 px) qui la rogne. On rend la largeur automatique : la carte tient dans son conteneur, ses 4 coins arrondis sont visibles. ------------------------------------------------------------------ */ html#XF body .p-body-pageContent .node.node--forum, html#XF body .p-body-pageContent .node.node--depth2 { width: auto !important; max-width: none !important; box-sizing: border-box !important; } /* ------------------------------------------------------------------ 2) Pages « Votre compte » (account_*) : la colonne des libelles (
) heritait du fond alterne XenForo (bloc sombre, bordure droite, texte a droite) et se decalait des valeurs. On la rend transparente, alignee a gauche, avec un simple filet entre les lignes. ------------------------------------------------------------------ */ html body[data-template^="account"] .formRow > dt, html body[data-template^="account"] .formRow > dt.formRow-labelWrapper, html body.template-account .formRow > dt, html[class*="template-account"] .formRow > dt { background: transparent !important; border-right: 0 !important; box-shadow: none !important; text-align: left !important; vertical-align: top !important; } html body[data-template^="account"] .formRow, html body.template-account .formRow, html[class*="template-account"] .formRow { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } html body[data-template^="account"] .formRow:last-child, html body[data-template^="account"] .formSubmitRow { border-bottom: 0 !important; } @media (min-width: 801px) { html body[data-template^="account"] .formRow > dt, html[class*="template-account"] .formRow > dt { width: 30% !important; padding: 16px 12px 16px 18px !important; } html body[data-template^="account"] .formRow > dd, html[class*="template-account"] .formRow > dd { padding: 16px 18px 16px 12px !important; } } html body[data-template^="account"] .formRow-label, html[class*="template-account"] .formRow-label { letter-spacing: 0.01em; } /* ------------------------------------------------------------------ 3) Chat (Siropu) — en-tete sur mobile. v313 passait l'en-tete en colonne : l'icone, le titre et la barre d'options s'empilaient, et la barre (100 % de large, boutons a droite) laissait un grand vide. Ici : icone + titre centres sur une ligne, puis une vraie barre d'outils pleine largeur aux boutons repartis. Les memes regles sont posees hors couche ET dans les couches des feuilles concurrentes (cascade inversee des !important en @layer). ------------------------------------------------------------------ */ @media (max-width: 900px) { html#XF body #siropuChat #siropuChatHeader, html#XF body #siropuChat .block-header { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px 10px !important; padding: 12px 12px 10px !important; text-align: center !important; } html#XF body #siropuChat #siropuChatHeader > .fa--xf, html#XF body #siropuChat #siropuChatHeader > i, html#XF body #siropuChat #siropuChatHeader > svg { flex: 0 0 auto !important; margin: 0 !important; } html#XF body #siropuChat #siropuChatHeader > span { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 1rem !important; letter-spacing: 0.12em !important; } html#XF body #siropuChat #siropuChatHeader > #siropuChatWhosTyping { flex: 1 0 100% !important; order: 3 !important; margin: 0 !important; font-size: 0.75rem !important; letter-spacing: 0.04em !important; text-transform: none !important; opacity: 0.8 !important; } html#XF body #siropuChat #siropuChatOptions { flex: 1 0 100% !important; order: 2 !important; display: flex !important; justify-content: space-evenly !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 5px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(6, 6, 12, 0.6) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } html#XF body #siropuChat #siropuChatOptions > a { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; } html#XF body #siropuChat #siropuChatOptions > a > .fa, html#XF body #siropuChat #siropuChatOptions > a > .fa--xf, html#XF body #siropuChat #siropuChatOptions > a > svg { font-size: 1.05rem !important; } /* les menus deroulants restent hors du flux de la barre */ html#XF body #siropuChat #siropuChatOptions > .menu { flex: 0 0 auto !important; width: auto !important; } } @layer g6m-chat-premium-v307, g6m-mobile-emergency-v313; @layer g6m-chat-premium-v307 { @media (max-width: 900px) { html#XF body #siropuChat #siropuChatHeader, html#XF body #siropuChat .block-header { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px 10px !important; padding: 12px 12px 10px !important; } html#XF body #siropuChat #siropuChatOptions { flex: 1 0 100% !important; order: 2 !important; display: flex !important; justify-content: space-evenly !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 5px !important; gap: 6px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(6, 6, 12, 0.6) !important; } html#XF body #siropuChat #siropuChatOptions > a { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; border-radius: 10px !important; } html#XF body #siropuChat #siropuChatOptions > .menu { flex: 0 0 auto !important; width: auto !important; } } } @layer g6m-mobile-emergency-v313 { @media (max-width: 900px) { html#XF body #siropuChat #siropuChatHeader, html#XF body #siropuChat .block-header { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px 10px !important; padding: 12px 12px 10px !important; } html#XF body #siropuChat #siropuChatOptions { flex: 1 0 100% !important; order: 2 !important; display: flex !important; justify-content: space-evenly !important; width: 100% !important; margin: 0 !important; padding: 5px !important; gap: 6px !important; flex-wrap: nowrap !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(6, 6, 12, 0.6) !important; } html#XF body #siropuChat #siropuChatOptions > a { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; border-radius: 10px !important; } html#XF body #siropuChat #siropuChatOptions > .menu { flex: 0 0 auto !important; width: auto !important; } } } /* ------------------------------------------------------------------ 4) Pastille compte du header (forum) sur mobile — version epuree. Sous 768 px la capsule cumulait trois contours (capsule, chip du pseudo, boutons) et un separateur lumineux : trop charge. Ici une seule capsule au degrade sombre, avatar cercle, pseudo en chip doux, icones « fantomes » sans bordure. Meme couche que v611 : dans une couche identique, l'ordre du document tranche. ------------------------------------------------------------------ */ @layer g6m-nav-user-premium-v611 { @media (max-width: 767px) { html#XF body .p-navgroup.p-account.p-navgroup--member { gap: 2px !important; padding: 3px 4px 3px 3px !important; border-radius: 999px !important; border: 1px solid rgba(var(--g6m-nav-rose), 0.38) !important; background: linear-gradient(135deg, rgba(26, 12, 40, 0.96), rgba(10, 8, 20, 0.96)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--g6m-nav-rose), 0.16) !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link:not(.p-navgroup-link--user) { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; border: 1px solid transparent !important; background: transparent !important; color: rgba(255, 255, 255, 0.8) !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link:not(.p-navgroup-link--user):hover, html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link:not(.p-navgroup-link--user):focus-visible { background: rgba(255, 255, 255, 0.08) !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user { gap: 7px !important; margin: 0 2px 0 0 !important; padding: 2px 11px 2px 2px !important; border-radius: 999px !important; border: 1px solid rgba(var(--g6m-nav-rose), 0.22) !important; background: linear-gradient(90deg, rgba(var(--g6m-nav-rose), 0.16), rgba(var(--g6m-nav-violet), 0.10)) !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user::before { display: none !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .avatar, html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user > .avatar { --g6m-nav-avatar: 30px; border-width: 2px !important; box-shadow: 0 0 0 2px rgba(10, 8, 20, 0.9) !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .p-navgroup-linkText { max-width: 7rem !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .p-navgroup-linkText > .g6m-nav-userName, html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .p-navgroup-linkText > .username, html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .p-navgroup-linkText > span:first-child { font-size: 0.88rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; } } @media (max-width: 420px) { html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link:not(.p-navgroup-link--user) { width: 34px !important; height: 34px !important; min-width: 34px !important; } html#XF body .p-navgroup.p-account.p-navgroup--member > .p-navgroup-link--user .p-navgroup-linkText { max-width: 5.5rem !important; } } } /* ------------------------------------------------------------------ 5) Cartes de noeud entre 901 et 1099 px (barre laterale visible) : v910 (couche g6m-nodes) figeait .node-stats a 17rem, ne laissant que ~36 px au titre, rendu lettre par lettre. Les stats passent sous le titre, alignees sur le texte. Meme couche que v910. ------------------------------------------------------------------ */ @layer g6m-nodes { @media (min-width: 901px) and (max-width: 1099px) { html#XF body .p-body-pageContent .node--forum .node-body { flex-wrap: wrap !important; align-items: center !important; row-gap: 0.35rem !important; } html#XF body .node--forum .node-main { min-width: 0 !important; flex: 1 1 0 !important; } html#XF body .p-body-pageContent .node--forum .node-body > .node-stats, html#XF body .node--forum .node-stats { flex: 1 1 100% !important; width: 100% !important; min-width: 100% !important; max-width: none !important; justify-content: flex-start !important; gap: 1.5rem !important; padding: 0.15rem 0 0 4.4rem !important; margin: 0 !important; } html#XF body .node--forum .node-stats > .pairs { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; } } }