/* =============================================================== ?? ULTRA HOLOGRAPHIC DELUXE SportPourTous (version nettoy e) Futuristic HUD + Glitch + Parallax + Scanlines =============================================================== */ /* =============================================================== FIX : Emp cher les ic nes des sous-forums d'appara tre dans les headers =============================================================== */ .forabg .forum-image, .forabg .forum-image *, .forumbg .forum-image, .forumbg .forum-image * { display: none !important; content: none !important; } /* Blocs de forum */ .forabg, .forumbg { position: relative !important; overflow: hidden !important; /* Hologram glass background */ background: rgba(0, 0, 0, 0.68) !important; backdrop-filter: blur(8px) saturate(160%) !important; border: 2px solid var(--neon-cyan) !important; border-radius: 20px !important; padding: 0 !important; margin-bottom: 32px !important; /* Glow + chromatic halo */ box-shadow: 0 0 18px rgba(0,212,255,0.55), inset 0 0 38px rgba(0,212,255,0.14), 0 0 10px rgba(0, 122, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.15), 0 0 15px rgba(0, 255, 160, 0.12) !important; transition: transform 0.35s ease, box-shadow 0.35s ease !important; transform-style: preserve-3d; } /* Parallax hover */ .forabg:hover, .forumbg:hover { transform: translateY(-4px) scale(1.015) rotateX(1deg) rotateY(-1deg); box-shadow: 0 0 28px rgba(0,212,255,0.75), inset 0 0 50px rgba(0,212,255,0.20), 0 0 22px rgba(0, 122, 255, 0.5), 0 0 32px rgba(255, 0, 255, 0.25), 0 0 28px rgba(0, 255, 160, 0.18) !important; } /* =============================================================== ?? FUTURISTIC SCANLINES =============================================================== */ .forabg::after, .forumbg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0, 212, 255, 0.10) 0px, rgba(0, 212, 255, 0.04) 2px, transparent 4px ); pointer-events: none; opacity: 0.18; animation: scanlinesUltra 14s linear infinite; } @keyframes scanlinesUltra { 0% { background-position-y: 0; } 100% { background-position-y: 340px; } } /* =============================================================== ?? GLITCH EFFECT SUBTIL SUR LES TITRES =============================================================== */ @keyframes holoGlitch { 0% { transform: translateX(0); opacity: 1; } 8% { transform: translateX(-1px); opacity: .85; } 9% { transform: translateX(1px); opacity: .95; } 10% { transform: translateX(0); opacity: 1; } 30% { transform: translateX(0); opacity: 1; } 31% { transform: translateX(2px); opacity: .88; } 32% { transform: translateX(-2px); opacity: .92; } 33% { transform: translateX(0); opacity: 1; } } /* =============================================================== ?? HEADER HOLOGRAPHIQUE DES RUBRIQUES =============================================================== */ .forabg .header, .forumbg .header { background: linear-gradient(135deg,#001a2e 0%,#000814 100%) !important; padding: 20px 26px !important; border-bottom: 2px solid var(--neon-cyan) !important; display: flex; align-items: center; gap: 16px; position: relative; z-index: 3; } /* Titre holographique (texte) */ .forabg .header a, .forumbg .header a { color: var(--neon-cyan) !important; font-size: 19px !important; font-weight: bold; letter-spacing: 2px !important; text-transform: uppercase; text-shadow: 0 0 8px rgba(0,212,255,0.8), 0 0 14px rgba(0,212,255,0.6), 0 0 22px rgba(0,212,255,0.45); animation: holoGlitch 6s infinite; } /* CONTENU DES RUBRIQUES */ .forabg .inner, .forumbg .inner { background: rgba(0,0,0,0.50) !important; padding: 0 !important; } /* =============================================================== ?? FIX MCHAT : titre vertical, texte, etc. =============================================================== */ /* Emp cher toute criture verticale du MCHAT */ #mchat-container, #mchat, #mchat-panel, #mchat-data, #mchat-main, #mchat-input, #mchat-message, #mchat-messages, #mchat-messages * { writing-mode: horizontal-tb !important; text-orientation: mixed !important; transform: none !important; white-space: normal !important; } /* Supprimer pseudo- l ments parasites sur le mchat */ #mchat::before, #mchat::after, #mchat-panel::before, #mchat-panel::after, #mchat-container::before, #mchat-container::after { content: none !important; display: none !important; } /* Cacher le titre interne "MCHAT" */ #mchat h3, #mchat-panel h3, #mchat-container h3, .mchat-title, .mchat-header, .mchat-header h3 { display: none !important; } /* Supprimer ventuelle colonne vide */ #mchat-panel .panel > .inner > div:first-child, #mchat-main > div:first-child { margin: 0 !important; padding: 0 !important; width: auto !important; } /* S curit globale */ #mchat, #mchat *, #mchat-panel, #mchat-panel * { writing-mode: horizontal-tb !important; text-orientation: mixed !important; transform: none !important; white-space: normal !important; } /* =========================================================== ? BANNI RE TYPE "ZONE DE CHAMBRAGE" POUR LES RUBRIQUES (Communaut , Membres, Football, Staff, etc.) =========================================================== */ .forabg .header, .forumbg .header { background: linear-gradient( 135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.10) 40%, rgba(0, 212, 255, 0.06) 100% ) !important; border: 2px solid #00D4FF !important; border-radius: 12px !important; padding: 15px 25px !important; margin: 10px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.4), inset 0 0 12px rgba(0,212,255,0.15) !important; position: relative !important; overflow: hidden !important; } /* Bande lumineuse interne anim e */ .forabg .header::after, .forumbg .header::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(0, 212, 255, 0.20) 50%, transparent 100% ); opacity: 0.12; animation: chambrageGlow 4s linear infinite; } @keyframes chambrageGlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Titre dans cette banni re */ .forabg .header a, .forumbg .header a { font-size: 19px !important; font-weight: bold !important; color: #00D4FF !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-shadow: 0 0 10px rgba(0, 212, 255, 0.8) !important; } /* IMPORTANT : plus AUCUNE ic ne texte par d faut ici */ .forabg .header::before, .forumbg .header::before { content: "" !important; margin: 0 !important; } /* =========================================================== ? BANNI RE "ZONE DE CHAMBRAGE" POUR LES 4 TITRES (FORUM / SUJETS / MESSAGES / DERNIER MESSAGE) =========================================================== */ /* Conteneur de la ligne d'en-t tes */ ul.topiclist li.header { margin: 10px !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Bandeau chambrage autour des 4 colonnes */ ul.topiclist li.header dl { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; padding: 10px 20px !important; background: linear-gradient( 135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.10) 40%, rgba(0, 212, 255, 0.06) 100% ) !important; border: 2px solid #00D4FF !important; border-radius: 12px !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.4), inset 0 0 12px rgba(0,212,255,0.15) !important; position: relative !important; overflow: hidden !important; } /* Bande lumineuse anim e dans le bandeau */ ul.topiclist li.header dl::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(0, 212, 255, 0.20) 50%, transparent 100% ); opacity: 0.12; animation: headerChambrageGlow 4s linear infinite; } @keyframes headerChambrageGlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Les 4 titres eux-m mes */ ul.topiclist li.header dt, ul.topiclist li.header dd { background: transparent !important; border: none !important; padding: 0 !important; flex: 1 1 0 !important; text-align: center !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #00D4FF !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.6) !important; white-space: nowrap !important; } /* Ajustements largeur colonnes */ ul.topiclist li.header dt { flex: 2 1 0 !important; /* Nom du forum : plus large */ } ul.topiclist li.header dd.posts { flex: 0 0 90px !important; /* Sujets */ } ul.topiclist li.header dd.topics { flex: 0 0 100px !important; /* selon ton template */ } ul.topiclist li.header dd.lastpost { flex: 1.3 1 0 !important; /* Dernier message */ } /* =============================================================== ?? BASE PR TE POUR LES SVG N ON ( activer plus tard) =============================================================== */ /* Quand on ajoutera des classes .cat-membres, .cat-communaute, etc. on pourra utiliser ces ic nes SVG SANS risquer de revoir des ??? */ .forabg[class*="cat-"] .header::before { content: "" !important; display: inline-block !important; width: 22px; height: 22px; margin-right: 8px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* Exemple activer plus tard : } } */ /* =========================================================== ? NAVBAR DE PIED DE PAGE (sous forme de bandeau n on) =========================================================== */ /* Conteneur de la barre grise */ #page-footer .navbar, .page-footer .navbar { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 15px auto 5px auto !important; } /* Bloc interne (le grand rectangle gris) */ #page-footer .navbar .inner, .page-footer .navbar .inner { background: linear-gradient( 135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 212, 255, 0.06) 40%, rgba(0, 212, 255, 0.03) 100% ) !important; border: 2px solid #00D4FF !important; border-radius: 12px !important; padding: 10px 20px !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.4), inset 0 0 12px rgba(0,212,255,0.15) !important; } /* Liens (Accueil, Index du forum, etc.) */ #page-footer .navbar .linklist a, .page-footer .navbar .linklist a { color: #00D4FF !important; font-weight: 600 !important; text-decoration: none !important; text-shadow: 0 0 6px rgba(0, 212, 255, 0.7) !important; } #page-footer .navbar .linklist a:hover, .page-footer .navbar .linklist a:hover { text-shadow: 0 0 10px rgba(0, 212, 255, 0.9) !important; } /* Ic nes de la barre (poubelle, groupe, bouclier, mail ) */ #page-footer .navbar .linklist li, .page-footer .navbar .linklist li { color: #00D4FF !important; } /* IC NES SVG N ON POUR LES RUBRIQUES */ .forabg[data-cat] .header::before { content: "" !important; display: inline-block !important; width: 22px; height: 22px; margin-right: 8px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== ?? IC NES SVG N ON POUR LES RUBRIQUES (Membres / Communaut / Football / R serv au staff) Bas sur la classe ajout e par {forumrow.FORUM_NAME} =============================================================== */ /* Style de base pour l'ic ne */ content: "" !important; display: inline-block !important; width: 22px; height: 22px; margin-right: 8px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== TEST & FIX SVG N ON RUBRIQUES (chemin absolu) =============================================================== */ /* Style de base : on s'assure de VOIR quelque chose */ content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 8px !important; background-color: rgba(255, 0, 0, 0.3); /* carr rouge transparent au cas o le SVG ne charge pas */ background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== ?? IC NES SVG N ON PAR POSITION DES RUBRIQUES (1 = Communaut , 2 = Membres, 3 = Football, 4 = Staff) =============================================================== */ /* Style de base de l'ic ne, on force !important pour craser tout */ .forabg .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 8px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== ?? IC NES SVG N ON BAS ES SUR LE NOM DE LA RUBRIQUE =============================================================== */ /* Style de base */ .forabg .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 10px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== FIX FOOTBALL + STAFF : variants de classes / majuscules =============================================================== */ /* Style de base pour l'ic ne (si pas d j d fini plus haut) */ .forabg .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 10px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* =============================================================== ?? IC NES SVG N ON BAS ES SUR UNE PARTIE DU NOM DE LA RUBRIQUE (fonctionne m me avec MAJUSCULES) =============================================================== */ /* Style de base pour toutes les ic nes de rubriques */ .forabg .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 10px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* Communaut (classe contient COMMUN) */ background-image: url("/styles/progamer/theme/icons/icon-communaute.svg") !important; } /* =============================================================== ?? ICONES SVG N ON POUR LES RUBRIQUES 1 = MEMBRES 2 = COMMUNAUT 3 = FOOTBALL 4 = R SERV LA TEAM =============================================================== */ /* Base : on pr pare l'emplacement de l'ic ne dans tous les headers */ .forabg .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 10px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* 1 re rubrique (tout en haut) : MEMBRES */ .forabg:nth-of-type(1) .header::before { background-image: url("/styles/progamer/theme/icons/icon-membres.svg") !important; } /* 2e rubrique : COMMUNAUT */ .forabg:nth-of-type(2) .header::before { background-image: url("/styles/progamer/theme/icons/icon-communaute.svg") !important; } /* 3e rubrique : FOOTBALL */ .forabg:nth-of-type(3) .header::before { background-image: url("/styles/progamer/theme/icons/icon-football.svg") !important; } /* 4e rubrique : R SERV LA TEAM */ .forabg:nth-of-type(4) .header::before { background-image: url("/styles/progamer/theme/icons/icon-staff.svg") !important; } /* =============================================================== SVG N ON DES RUBRIQUES bas sur data-cat =============================================================== */ /* style de base de l'ic ne, seulement pour les rubriques qui ont data-cat */ .forabg[data-cat] .header::before { content: "" !important; display: inline-block !important; width: 24px !important; height: 24px !important; margin-right: 10px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; filter: drop-shadow(0 0 4px rgba(0,212,255,0.9)) drop-shadow(0 0 8px rgba(0,212,255,0.7)); } /* MEMBRES : le texte data-cat contient MEMBRES */ .forabg[data-cat*="MEMBRES"] .header::before { background-image: url("./icons/icon-membres.svg") !important; } /* COMMUNAUT : le texte data-cat contient OMMUN (commUNaut ) */ .forabg[data-cat*="OMMUN"] .header::before { background-image: url("./icons/icon-communaute.svg") !important; } /* FOOTBALL : data-cat contient FOOTBALL */ .forabg[data-cat*="FOOTBALL"] .header::before { background-image: url("./icons/icon-football.svg") !important; } /* R SERV LA TEAM : data-cat contient TEAM */ .forabg[data-cat*="TEAM"] .header::before { background-image: url("./icons/icon-staff.svg") !important; } /* === KILL ICONES BLANCHES DEVANT LES FORUMS / SOUS-FORUMS === */ /* Ic nes g n r es par le style (avant le titre) */ .forabg dl.row-item::before, .forabg dl.row-item dt::before, .forabg dl.row-item .list-inner::before { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* Au cas o l'ic ne est un ou ins r dans list-inner */ .forabg dl.row-item .list-inner > span, .forabg dl.row-item .list-inner > i, .forabg dl.row-item .list-inner > img { display: none !important; } /* Neutraliser aussi un ventuel background sur le dl lui-m me */ .forabg dl.row-item { background-image: none !important; } /* =============================================================== ?? EMBLEME HOLOGRAPHIQUE FIXED ANIMATION GARANTIE =============================================================== */ /* On reset toutes les ic nes pr c dentes */ .forabg li.row .row-item dt .list-inner::before, .forabg li.row .row-item dt .list-inner::after { content: none !important; display: none !important; } /* On d cale le texte et laisse plus de place */ .forabg li.row .row-item dt .list-inner { position: relative; padding-left: 70px !important; } /* === ANIMATION DE ROTATION FIX === */ @keyframes emblemSpinFixed { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Anneau holographique */ .forabg li.row .row-item dt .list-inner::before { content: "" !important; position: absolute; left: 15px; /* ? PLUS A GAUCHE */ top: 50%; width: 38px; height: 38px; transform: translateY(-50%); border-radius: 50%; border: 3px solid rgba(0, 212, 255, 0.9); box-shadow: 0 0 10px rgba(0,212,255,1), 0 0 25px rgba(0,212,255,0.7); animation: emblemSpinFixed 4s linear infinite !important; background: transparent; pointer-events: none; } /* Noyau lumineux */ @keyframes corePulseFixed { 0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.9; } 50% { transform: translateY(-50%) scale(1.25); opacity: 1; } } .forabg li.row .row-item dt .list-inner::after { content: "" !important; position: absolute; left: 34px; /* au centre du cercle */ top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient( circle, rgba(0,255,255,1) 0%, rgba(0,255,255,0.2) 60%, transparent 100% ); box-shadow: 0 0 10px rgba(0,255,255,1), 0 0 25px rgba(0,255,255,0.8); animation: corePulseFixed 2.4s ease-in-out infinite !important; } /* === VERSION MAGENTA POUR FORUM NON LU === */ .forabg li.row.unread .row-item dt .list-inner::before { border-color: rgba(255, 80, 180, 0.95); box-shadow: 0 0 12px rgba(255,80,180,1), 0 0 28px rgba(255,80,180,0.9); } .forabg li.row.unread .row-item dt .list-inner::after { background: radial-gradient( circle, rgba(255,120,210,1) 0%, rgba(255,120,210,0.25) 60%, transparent 100% ); box-shadow: 0 0 12px rgba(255,120,210,1), 0 0 28px rgba(255,120,210,0.9); } /* =============================================================== ? BULLES NEON SIMPLES DEVANT CHAQUE FORUM (pas d'animation compliqu e, ultra stable) =============================================================== */ /* On nettoie d'abord tous les anciens ::before/::after des lignes */ .forabg li.row .row-item dt .list-inner::before, .forabg li.row .row-item dt .list-inner::after { content: none !important; display: none !important; } /* On d cale le texte pour laisser la place */ .forabg li.row .row-item dt .list-inner { position: relative; padding-left: 50px !important; } /* Bulle n on de base (forums lus) */ .forabg li.row .row-item dt .list-inner::before { content: "" !important; display: block !important; position: absolute; left: 12px; /* bien gauche */ top: 50%; width: 26px; height: 26px; transform: translateY(-50%); border-radius: 50%; border: 2px solid rgba(0, 212, 255, 0.95); box-shadow: 0 0 6px rgba(0,212,255,1), 0 0 14px rgba(0,212,255,0.7); background: radial-gradient( circle, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0.12) 50%, transparent 70% ); pointer-events: none; } /* Au survol, un peu plus de glow */ .forabg li.row:hover .row-item dt .list-inner::before { box-shadow: 0 0 8px rgba(0,212,255,1), 0 0 20px rgba(0,212,255,0.9); } /* Forums non lus : bulle magenta pour attirer l' il */ .forabg li.row.unread .row-item dt .list-inner::before { border-color: rgba(255, 80, 180, 0.95); box-shadow: 0 0 8px rgba(255,80,180,1), 0 0 20px rgba(255,80,180,0.9); background: radial-gradient( circle, rgba(255, 120, 210, 0.6) 0%, rgba(255, 120, 210, 0.18) 50%, transparent 70% ); } /* =============================================================== ?? HEADER ULTRA HOLOGRAPHIQUE (barre du haut) =============================================================== */ /* Fond global du header */ #page-header { background: radial-gradient(circle at 0% 0%, #021723 0%, #020308 45%, #000000 100%) !important; border-bottom: 2px solid #00D4FF !important; box-shadow: 0 0 18px rgba(0, 212, 255, 0.45), 0 0 40px rgba(0, 0, 0, 1) inset !important; position: relative; z-index: 50; } /* Petite lueur qui glisse dans le header */ #page-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(0, 212, 255, 0.18) 50%, transparent 100% ); opacity: 0.16; animation: headerGlowSweep 8s linear infinite; pointer-events: none; } @keyframes headerGlowSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Barre de liens (Acc s rapide, FAQ, mChat, PCA, etc.) */ #page-header .navbar { background: transparent !important; border: none !important; box-shadow: none !important; padding: 8px 20px 6px 20px !important; } #page-header .navbar .inner { background: linear-gradient( 135deg, rgba(0, 212, 255, 0.18) 0%, rgba(0, 212, 255, 0.06) 45%, rgba(0, 212, 255, 0.16) 100% ) !important; border-radius: 999px !important; border: 1px solid rgba(0, 212, 255, 0.8) !important; box-shadow: 0 0 12px rgba(0, 212, 255, 0.6), 0 0 20px rgba(0, 212, 255, 0.35) !important; padding: 6px 18px !important; } /* Liens dans la barre (texte + ic nes) */ #page-header .navbar .linklist li a, #page-header .navbar .linklist li a span { color: #00D4FF !important; font-weight: 600 !important; text-transform: uppercase; font-size: 11px !important; letter-spacing: 1px !important; text-shadow: 0 0 6px rgba(0, 212, 255, 0.9), 0 0 12px rgba(0, 212, 255, 0.7) !important; } /* Hover : l ger bouton n on */ #page-header .navbar .linklist li a:hover { text-shadow: 0 0 8px rgba(0, 255, 255, 1), 0 0 18px rgba(0, 255, 255, 0.9) !important; transform: translateY(-1px); } /* On s'assure que les ic nes de la barre suivent la couleur */ #page-header .navbar .linklist li i, #page-header .navbar .linklist li .icon { color: #00D4FF !important; } /* Titre du forum "Sport et Passion" */ #page-header .site-description h1, #page-header .site-description h1 a { color: #00D4FF !important; font-size: 26px !important; letter-spacing: 2px !important; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 212, 255, 0.9), 0 0 24px rgba(0, 212, 255, 0.7) !important; } /* =============================================================== ?? Bloc de recherche assorti au th me =============================================================== */ .search-box, .search-header { border-radius: 18px !important; border: 2px solid #00D4FF !important; background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.22) 0%, rgba(0, 212, 255, 0.05) 55%, transparent 85% ) !important; box-shadow: 0 0 15px rgba(0, 212, 255, 0.6), 0 0 35px rgba(0, 0, 0, 1) inset !important; } /* Champ de texte */ .search-box input.inputbox { background: transparent !important; border: none !important; color: #E5F9FF !important; font-size: 13px !important; } /* Boutons de recherche */ .search-box .button-search, .search-box .button-search-end { background: #00AEEF !important; border: none !important; border-radius: 10px !important; box-shadow: 0 0 8px rgba(0, 212, 255, 0.9), 0 0 16px rgba(0, 212, 255, 0.7) !important; } .search-box .button-search:hover, .search-box .button-search-end:hover { box-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 0.9) !important; } /* Boutons ACCUEIL & INDEX DU FORUM plus visibles */ .breadcrumbs .crumb a { padding: 6px 14px !important; background: rgba(0, 200, 255, 0.12); border-radius: 12px; border: 1px solid rgba(0, 200, 255, 0.6); color: #00d4ff !important; text-shadow: 0 0 6px #00d4ff; transition: 0.2s; } .breadcrumbs .crumb a:hover { background: rgba(0, 200, 255, 0.25); box-shadow: 0 0 12px #00d4ff; } /* Barre de recherche plus fine et l gante */ .search-box, .search-header { border-radius: 12px !important; border: 1px solid rgba(0, 200, 255, 0.45) !important; padding: 6px 12px !important; max-width: 260px !important; background: rgba(0, 0, 0, 0.35) !important; box-shadow: 0 0 12px rgba(0, 200, 255, 0.35) !important; } /* Champ de recherche plus petit */ .search-box input.inputbox { font-size: 13px !important; padding: 4px 6px !important; } /* Boutons ic nes */ .search-box .button-search, .search-box .button-search-end { padding: 6px 8px !important; border-radius: 8px !important; font-size: 12px !important; } /* S paration nette entre les boutons de la barre de recherche */ .search-box .button-search, .search-box .button-search-end { margin-right: 6px !important; /* espacement entre les deux */ } /* On retire la fusion visuelle du style progamer */ .search-box .button-search-end { margin-left: 6px !important; } /* Optionnel : rendre les boutons l g rement arrondis pour l esth tique */ .search-box .button-search, .search-box .button-search-end { border-radius: 10px !important; } .search-box .button-search-end::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: rgba(0, 200, 255, 0.4); box-shadow: 0 0 6px rgba(0, 200, 255, 0.7); border-radius: 2px; } /* =========================================================== FIX LOGO HEADER remplacer visuellement "Sport et Passion" par "SPORTPOURTOUS" + emojis anim s =========================================================== */ /* On annule mon pr c dent essai qui mettait font-size:0 etc. */ #page-header .site-description h1, #page-header .site-description h1 a { color: inherit !important; font-size: inherit !important; text-shadow: none !important; } /* On va cacher le texte original en le poussant tr s loin, mais garder la place du h1. */ #page-header .site-description h1 { position: relative; overflow: visible; } #page-header .site-description h1 a { display: inline-block; position: relative; text-indent: -9999px; /* cache le texte "Sport et Passion" */ white-space: nowrap; } /* Nouveau texte du logo */ #page-header .site-description h1::before { content: "SPORTPOURTOUS"; position: absolute; left: 0; top: 0; text-indent: 0; font-size: 26px; font-weight: 900; letter-spacing: 3px; color: #00b4ff; text-shadow: 0 0 8px rgba(0, 180, 255, 0.9), 0 0 20px rgba(0, 180, 255, 0.8); } /* Bande d'emojis sportifs anim s derri re le texte */ #page-header .site-description h1::after { content: "? ?? ?? ??"; position: absolute; left: 0; top: 0; font-size: 24px; opacity: 0.2; filter: blur(0.3px); pointer-events: none; animation: headerEmojiLoop 4s linear infinite; } @keyframes headerEmojiLoop { 0% { transform: translateX(-25%); } 100% { transform: translateX(25%); } } /* =========================================================== RESET LOGO HEADER revenir "Sport et Passion" simple /* =========================================================== LOGO VERSION 1 - Bleu �lectrique avec rotation 360� � int�grer dans le header � la place de "Sport et Passion" =========================================================== */ /* Animation de rotation pour les emojis */ @keyframes rotate360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Reset complet du header actuel */ #page-header .site-description h1::before, #page-header .site-description h1::after, #page-header .site-description h1 a::before, #page-header .site-description h1 a::after { content: none !important; } /* Container parent - contr�ler la taille globale */ #page-header .site-description { display: flex !important; justify-content: center !important; align-items: center !important; } /* Container principal du logo - TAILLE FIXE */ #page-header .site-description h1 { position: relative !important; display: inline-block !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; background: linear-gradient(135deg, #1a2332 0%, #0d1117 100%) !important; border-radius: 8px !important; border: 2px solid #0080ff !important; box-shadow: 0 0 25px rgba(0, 128, 255, 0.4) !important; overflow: hidden !important; text-indent: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 70px !important; } /* Cacher le lien "Sport et Passion" d'origine */ #page-header .site-description h1 a { position: absolute !important; width: 100% !important; height: 100% !important; display: block !important; text-indent: -9999px !important; z-index: 10 !important; } /* Fond avec emojis sportifs qui tournent */ #page-header .site-description h1::before { content: "? ?? ?? ??" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: space-around !important; font-size: 32px !important; opacity: 0.2 !important; pointer-events: none !important; z-index: 1 !important; text-indent: 0 !important; letter-spacing: 10px !important; } /* Animation des emojis individuels - via pseudo animation CSS */ #page-header .site-description h1::before { animation: rotateEmojis 4s linear infinite !important; } @keyframes rotateEmojis { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Texte "SPORTPOURTOUS" par-dessus */ #page-header .site-description h1::after { content: "SPORTPOURTOUS" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; font-size: 22px !important; font-weight: 900 !important; color: #0080ff !important; text-shadow: 0 0 15px rgba(0, 128, 255, 0.8) !important; letter-spacing: 2px !important; font-family: 'Impact', 'Arial Black', sans-serif !important; text-indent: 0 !important; white-space: nowrap !important; } RESET LOGO HEADER revenir "Sport et Passion" simple =========================================================== */ /* On supprime TOUS les pseudo- l ments que j'ai ajout s */ #page-header .site-description h1::before, #page-header .site-description h1::after, #page-header .site-description h1 a::before, #page-header .site-description h1 a::after { content: none !important; } /* On annule le text-indent et les bidouilles pr c dentes */ #page-header .site-description h1, #page-header .site-description h1 a { position: static !important; display: inline-block !important; text-indent: 0 !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; color: #00D4FF !important; text-shadow: 0 0 8px rgba(0, 212, 255, 0.9), 0 0 20px rgba(0, 212, 255, 0.7) !important; } /* =========================================================== Corrections cercles : plus gauche + plus d'espace texte =========================================================== */ /* On loigne clairement le texte du cercle */ .forabg li.row .row-item dt .list-inner { position: relative; padding-left: 80px !important; /* plus grand = plus d'espace entre cercle et texte */ min-height: 32px; /* pour aider au centrage vertical */ } /* On d cale le cercle vers la gauche et on le centre mieux */ .forabg li.row .row-item dt .list-inner::before { left: 20px !important; /* plus gauche */ top: 50% !important; width: 26px !important; height: 26px !important; transform: translateY(-50%) !important; /* bien centr sur la hauteur du texte */ } /* ========== LOGO SVG ANIM� SPORTPOURTOUS (AJOUT�) ========== */ /* Fond anim� derri�re le logo */ #site-description { position: relative !important; background: linear-gradient(90deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 212, 255, 0.15) 50%, rgba(0, 212, 255, 0.05) 100%) !important; box-shadow: inset 0 0 50px rgba(0, 212, 255, 0.2), 0 0 20px rgba(0, 212, 255, 0.3) !important; border-radius: 15px !important; padding: 30px 50px !important; background-size: 200% 100% !important; animation: headerGlow 4s ease-in-out infinite !important; } @keyframes headerGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Lien du logo */ #logo { display: inline-block !important; text-decoration: none !important; position: relative !important; } /* SVG du logo - AGRANDI ICI */ /* SVG du logo - FORCE LA TAILLE */ .spt-mega-logo { display: block !important; width: 300px !important; /* ? FORCE la largeur directe */ min-width:300px !important; max-width:300px !important; height: auto !important; margin: 0 auto !important; filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.6)) !important; transition: all 0.4s ease !important; } /* Effet hover sur le logo */ #logo:hover .spt-mega-logo { filter: drop-shadow(0 0 30px rgba(0, 255, 255, 1)) !important; transform: scale(1.03) !important; } /* Animation de l'athl�te qui court */ .runner-icon { animation: runnerMove 1s ease-in-out infinite !important; } @keyframes runnerMove { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(-2px) translateX(1px); } 75% { transform: translateY(2px) translateX(-1px); } } /* CACHER LE VIEUX TITRE "SPORT ET PASSION" */ .header-title { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Responsive */ @media (max-width: 768px) { .spt-mega-logo { max-width: 700px !important; /* ? CORRIG� */ } } @media (max-width: 480px) { .spt-mega-logo { max-width: 450px !important; /* ? CORRIG� */ } } /* Remonter la recherche � c�t� du logo */ .headerbar .inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; } #site-description { flex: 1 !important; } #search-box { flex-shrink: 0 !important; margin-top: 0 !important; } /* FORCER la recherche � c�t� du logo sur la m�me ligne */ .headerbar .inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 20px !important; } #site-description { flex: 0 1 auto !important; margin: 0 !important; } .search-box, .search-header, #search-box { flex: 0 0 auto !important; margin: 0 !important; align-self: center !important; } /* Centrer le logo au milieu du rectangle */ #site-description { text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; } #logo { margin: 0 auto !important; } /* Cacher le skiplink qui pousse le logo */ .skiplink { display: none !important; } /* Structure du header */ .headerbar .inner { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 30px !important; } /* Zone du logo - prend l'espace et centre */ /* Recherche � droite */ #search-box { flex: 0 0 auto !important; margin: 0 !important; } /* Le logo lui-m�me centr� */ #logo { display: block !important; margin: 0 !important; } /* Le site-description garde sa place */ #site-description, .site-description { position: relative !important; display: block !important; text-align: center !important; margin: 0 !important; } /* Le logo se centre DEDANS */ #logo { display: block !important; margin: 0 auto !important; width: fit-content !important; } /* Le SVG lui-m�me */ .spt-mega-logo { display: block !important; margin: 0 auto !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; } /* === FIX FINAL : CENTRAGE ABSOLU DU LOGO === */ .headerbar .inner { display: flex !important; align-items: center !important; justify-content: center !important; /* CENTRAGE GLOBAL */ } /* Le container du logo ne doit plus bouger */ #site-description { flex: 0 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin: 0 auto !important; } /* Le lien contenant ton SVG */ #logo { display: block !important; margin: 0 auto !important; /* CENTRE LE LOGO */ } /* Le SVG lui-m�me */ .spt-mega-logo { display: block !important; margin: 0 auto !important; width: 300px !important; height: auto !important; } /* === FIX ULTIME : LOGO CENTR� DANS LA BARRE === */ /* Le conteneur du header peut servir de rep�re */ .headerbar .inner { position: relative !important; } /* #site-description reste le cadre bleu */ #site-description { position: relative !important; margin: 0 auto !important; } /* On centre le logo au milieu du cadre bleu, quoi qu'il arrive autour */ #logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; display: block !important; } /* Taille du SVG */ .spt-mega-logo { display: block !important; width: 300px !important; height: auto !important; margin: 0 auto !important; } /* =========================== MODE MOBILE - HEADER =========================== */ /* Tablettes et petits �crans */ @media (max-width: 900px) { /* Le header se met en colonne */ .headerbar .inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 15px 10px !important; gap: 10px !important; } /* Le cadre bleu du logo prend toute la largeur mais reste centr� */ #site-description { width: 100% !important; margin: 0 auto 5px auto !important; padding: 12px 10px !important; box-sizing: border-box !important; } /* Sur mobile on ENL�VE le position:absolute du fix desktop */ #logo { position: static !important; transform: none !important; margin: 0 auto !important; display: block !important; } .spt-mega-logo { display: block !important; margin: 0 auto !important; max-width: 260px !important; width: 100% !important; height: auto !important; } /* La recherche passe en dessous, centr�e */ #search-box { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; align-self: center !important; } .search-box, .search-header { width: 100% !important; box-sizing: border-box !important; } } /* T�l�phones tr�s petits */ @media (max-width: 600px) { .spt-mega-logo { max-width: 220px !important; } #site-description { padding: 10px 8px !important; } } /* =========================== NAVBAR SOUS LE LOGO - VERSION L�G�RE =========================== */ /* On supprime le gros cadre bleu autour d�Accueil / Index du forum */ #page-body .navbar { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 10px 0 15px 0 !important; } #page-body .navbar .inner { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* On garde juste les boutons n�on (que tu as d�j� custom via .breadcrumbs .crumb a) */ #page-body .navbar .linklist { text-align: center !important; } #page-body .navbar .linklist .crumb { display: inline-block !important; margin: 0 6px !important; } #page-body .navbar .linklist { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 6px 14px !important; border-radius: 999px !important; background: rgba(0, 212, 255, 0.10) !important; border: 1px solid rgba(0, 212, 255, 0.5) !important; } /* ======================================= SUPPRESSION DU GROS RECTANGLE DU HEADER ======================================= */ /* Enlever le gros cadre neon qui entoure la barre du haut */ .headerbar { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Enlever aussi le cadre interne */ .headerbar .inner { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 10px 0 !important; } /* Supprimer la grande bande noire derri�re logo + recherche */ #page-header { background: transparent !important; border: none !important; box-shadow: none !important; } /* ======================================== R�DUCTION DU RECTANGLE AUTOUR DU LOGO ======================================== */ #site-description { padding: 10px 30px !important; /* r�duit de 30px ? 10px = rectangle plus fin */ border-radius: 12px !important; /* l�g�rement plus petit */ margin: 0 auto !important; max-height: 120px !important; /* limite visuelle */ display: flex !important; justify-content: center !important; align-items: center !important; } /* ========================== R�DUCTION DE LA LARGEUR ========================== */ #site-description { width: 650px !important; /* largeur du cadre */ max-width: 90% !important; /* responsive si petit �cran */ margin: 0 auto !important; /* centr� */ } #site-description { width: 520px !important; max-width: 90% !important; margin: 0 auto !important; } /* ============================ SUPPRIMER LA BARRE � GAUCHE ============================ */ .headerbar::before, .headerbar .inner::before, #site-description::before { content: none !important; display: none !important; } /* ============================= R�DUCTION DU CADRE DE RECHERCHE ============================= */ #search-box { width: 300px !important; /* largeur d�sir�e */ max-width: 90% !important; /* responsive */ margin: 0 auto !important; padding: 10px 15px !important; } #search-box .search-box, #search-box .search-header { width: 100% !important; } #keywords { width: 100% !important; /* le champ de texte prend la largeur */ } /* =============================== SUPPRESSION DE LA BARRE DU SVG =============================== */ /* cible les lignes dans ton logo */ .spt-mega-logo line { display: none !important; } .spt-mega-logo line, .spt-mega-logo g line { stroke: transparent !important; display: none !important; visibility: hidden !important; } /* ========================================== KILL TOTAL : BARRE VERTICALE DANS LE HEADER ========================================== */ .headerbar::before, .headerbar::after, .headerbar *::before, .headerbar *::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* ========================================== BARRE DE RECHERCHE VERSION MINIMALISTE ========================================== */ #search-box { background: rgba(0, 0, 0, 0.25) !important; /* fond l�ger */ border: 1px solid rgba(0, 200, 255, 0.35) !important; box-shadow: 0 0 12px rgba(0, 200, 255, 0.18) !important; border-radius: 10px !important; padding: 6px 10px !important; width: 240px !important; /* largeur compacte */ max-width: 90% !important; } #search-box .inputbox { background: transparent !important; border: none !important; font-size: 12px !important; color: #bdf2ff !important; width: 140px !important; padding: 4px 6px !important; } /* Boutons plus petits et plus doux */ #search-box .button-search, #search-box .button-search-end { padding: 5px 7px !important; border-radius: 8px !important; background: rgba(0, 200, 255, 0.2) !important; border: 1px solid rgba(0, 200, 255, 0.4) !important; box-shadow: 0 0 6px rgba(0, 200, 255, 0.4) !important; transition: 0.2s ease; } /* Au survol ? subtil, sans d�bordement */ #search-box .button-search:hover, #search-box .button-search-end:hover { background: rgba(0, 200, 255, 0.3) !important; box-shadow: 0 0 10px rgba(0, 255, 255, 0.7) !important; } /* Bouton loupe minimaliste */ #search-box .button-search-end { display: none !important; /* on supprime la roue dent�e */ } #search-box .button-search { width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; } #search-box .button-search i { font-size: 14px !important; color: #00D4FF !important; } /* =========================================== STYLE 3 - LOUPE RONDE MINIMALISTE N�ON =========================================== */ /* Supprimer le bouton r�glages */ #search-box .button-search-end { display: none !important; } /* Bouton loupe rond */ #search-box .button-search { width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(0, 200, 255, 0.15) !important; border: 1px solid rgba(0, 200, 255, 0.5) !important; display: flex !important; justify-content: center !important; align-items: center !important; box-shadow: 0 0 10px rgba(0, 200, 255, 0.35), inset 0 0 8px rgba(0, 200, 255, 0.2) !important; transition: 0.2s ease !important; } /* Ic�ne loupe visible */ #search-box .button-search i { display: inline-block !important; color: #00D4FF !important; font-size: 15px !important; text-shadow: 0 0 6px rgba(0, 212, 255, 0.9) !important; } /* Hover : Glow plus fort */ #search-box .button-search:hover { background: rgba(0, 200, 255, 0.25) !important; box-shadow: 0 0 16px rgba(0, 255, 255, 0.9), inset 0 0 10px rgba(0, 255, 255, 0.4) !important; } /* Alignement coh�rent du champ de recherche */ #search-box .inputbox { width: 150px !important; background: transparent !important; border: none !important; padding: 4px 8px !important; color: #d9f9ff !important; font-size: 13px !important; } /* =========================================== LOUPE FLOTTANTE HUD FUTURISTE =========================================== */ /* On enl�ve le gros bloc autour */ #search-box { position: absolute !important; right: 40px !important; /* position � droite du header */ top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; z-index: 100 !important; } /* On vire tout style de "gros cadre" h�rit� */ #search-box.search-box, #search-box.search-header { background: transparent !important; border: none !important; box-shadow: none !important; } /* Contenu interne en ligne */ #search-box fieldset { border: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; } /* Bouton r�glages : on le supprime, on garde juste la loupe */ #search-box .button-search-end { display: none !important; } /* === LOUPE FLOTTANTE CERCLE N�ON === */ #search-box .button-search { width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(0, 220, 255, 0.35) 0%, rgba(0, 220, 255, 0.10) 55%, transparent 100%) !important; border: 1px solid rgba(0, 220, 255, 0.8) !important; box-shadow: 0 0 12px rgba(0, 220, 255, 0.9), 0 0 24px rgba(0, 220, 255, 0.4) !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } /* Ic�ne loupe */ #search-box .button-search i { display: inline-block !important; font-size: 16px !important; color: #00F6FF !important; text-shadow: 0 0 8px rgba(0, 255, 255, 1) !important; } /* Effet hover : la loupe �flotte� un peu plus */ #search-box .button-search:hover { transform: translateY(-1px) scale(1.04) !important; box-shadow: 0 0 18px rgba(0, 255, 255, 1), 0 0 32px rgba(0, 255, 255, 0.9) !important; } /* Petit pulse continu fa�on HUD */ @keyframes hudPulse { 0%, 100% { box-shadow: 0 0 10px rgba(0, 220, 255, 0.8), 0 0 22px rgba(0, 220, 255, 0.35); } 50% { box-shadow: 0 0 16px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.7); } } #search-box .button-search { animation: hudPulse 2.2s ease-in-out infinite; } /* === CHAMP DE TEXTE QUI SE D�PLOIE AU SURVOL/FOCUS === */ #keywords { background: rgba(0, 0, 0, 0.75) !important; border-radius: 999px !important; border: 1px solid rgba(0, 200, 255, 0.6) !important; color: #D9F9FF !important; font-size: 13px !import /* ========================================== NAVBAR BAS : TEXTE � GAUCHE, LOUPE HUD � DROITE ========================================== */ #page-body .navbar .inner { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* La liste Accueil / Index � gauche */ #page-body .navbar .linklist.navlinks { margin: 0 !important; } /* Bloc global de recherche dans la navbar */ #page-body #search-box { position: relative !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } /* On nettoie l'int�rieur */ #page-body #search-box .search-box, #page-body #search-box .search-header, #page-body #search-box fieldset { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Bouton r�glage supprim� */ #page-body #search-box .button-search-end { display: none !important; } /* Loupe ronde n�on HUD */ #page-body #search-box .button-search { width: 34px !important; height: 34px !important; border-radius: 50% !important; padding: 0 !important; margin-left: 16px !important; background: radial-gradient(circle, rgba(0, 220, 255, 0.35) 0%, rgba(0, 220, 255, 0.12) 55%, transparent 100%) !important; border: 1px solid rgba(0, 220, 255, 0.7) !important; box-shadow: 0 0 10px rgba(0, 220, 255, 0.8), 0 0 20px rgba(0, 220, 255, 0.5) !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; animation: hudPulse 2.2s ease-in-out infinite; } /* Ic�ne loupe */ #page-body #search-box .button-search i { font-size: 16px !important; color: #00F6FF !important; text-shadow: 0 0 8px rgba(0, 255, 255, 1) !important; } /* Champ qui se d�ploie � c�t� de la loupe */ #page-body #keywords { background: rgba(0, 0, 0, 0.72) !important; border-radius: 999px !important; border: 1px solid rgba(0, 200, 255, 0.6) !important; padding: 4px 10px !important; margin-left: 10px !important; width: 0 !important; opacity: 0 !important; pointer-events: none !important; color: #d2f7ff !important; font-size: 13px !important; transition: width 0.30s ease, opacity 0.25s ease !important; } /* D�ploiement au survol/focus */ #page-body #search-box:hover #keywords, #page-body #search-box:focus-within #keywords { width: 170px !important; opacity: 1 !important; pointer-events: auto !important; } /* ========================================================== NAVBAR SOUS LE LOGO : TEXTE � GAUCHE, LOUPE HUD � DROITE (barre qui contient ACCUEIL / INDEX DU FORUM) ========================================================== */ /* On transforme UNIQUEMENT la navbar sous le logo en flex */ #page-header .headerbar + .navbar .inner { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* La partie ACCUEIL / INDEX du forum reste � gauche */ #page-header .headerbar + .navbar .linklist.navlinks { margin: 0 !important; } /* On r�initialise compl�tement l'ancien HUD du header */ #page-header .headerbar + .navbar #search-box { position: static !important; top: auto !important; right: auto !important; transform: none !important; margin: 0 0 0 20px !important; /* espace apr�s "Index du forum" */ padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; } /* On nettoie l'int�rieur du bloc de recherche */ #page-header .headerbar + .navbar #search-box .search-box, #page-header .headerbar + .navbar #search-box .search-header, #page-header .headerbar + .navbar #search-box fieldset { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* On supprime le bouton "roue dent�e" */ #page-header .headerbar + .navbar #search-box .button-search-end { display: none !important; } /* ============================================================ ?? FIX GLOBAL HEADER / NAVBAR � SPT 2025 ============================================================ */ /* 1?? � Supprimer TOUTE la recherche du header (� c�t� du logo) */ #page-header #search-box, #page-header .search-box, #page-header .search-header { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* 2?? � Supprimer le grand rectangle sous ACCUEIL / INDEX DU FORUM (on cible la DEUXI�ME navbar dans #page-header) */ #page-header .navbar:last-of-type, #page-header .navbar:last-of-type .inner { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 10px !important; margin-bottom: 10px !important; border-radius: 0 !important; } /* Garder uniquement les boutons Accueil / Index, sans cadre autour */ #page-header .navbar:last-of-type .linklist.navlinks { text-align: center !important; margin: 0 auto !important; padding: 0 !important; } #page-header .navbar:last-of-type .linklist.navlinks .crumb { display: inline-block !important; margin: 0 6px !important; } /* 3?? � Garder uniquement les boutons Accueil / Index, sans cadre autour */ #page-header + .navbar .linklist.navlinks { text-align: center !important; margin: 0 auto !important; padding: 0 !important; } #page-header + .navbar .linklist.navlinks .crumb { display: inline-block !important; margin: 0 6px !important; } /* 4?? � Supprimer tous les pseudo-�l�ments parasites du header */ .headerbar::before, .headerbar::after, .headerbar *::before, .headerbar *::after { display: none !important; content: none !important; background: none !important; border: none !important; box-shadow: none !important; } /* 5?? � Assurer que RIEN ne remonte depuis d�anciens styles HUD */ #search-box, #search-box * { position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } /* ============================================================ FIX SPECIFIQUE THEME PROGAMER - NOVEMBRE 2025 ============================================================ */ /* Cacher UNIQUEMENT le bouton RECHERCHER dans la navbar (pas la loupe du header) */ .nav-breadcrumbs .crumb:has(a[href*="search.php"]), #nav-breadcrumbs .crumb:has(a[href*="search.php"]), .linklist.navlinks .crumb:has(a[href*="search.php"]), a[data-navbar-reference="search"], .rightside.responsive-search { display: none !important; visibility: hidden !important; } /* SUPPRIMER LE GROS CADRE BLEU NEON - VERSION AGRESSIVE */ .headerbar + .navbar, .headerbar + .navbar .inner, .headerbar + .navbar *, #page-header > .navbar:last-of-type, #page-header > .navbar:last-of-type .inner, #page-header > .navbar:last-of-type *, .navbar[role="navigation"], .navbar[role="navigation"] .inner, .navbar[role="navigation"] * { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 5px 0 !important; border-radius: 0 !important; } /* Forcer la transparence sur les pseudo-elements */ .headerbar + .navbar::before, .headerbar + .navbar::after, .headerbar + .navbar *::before, .headerbar + .navbar *::after, .navbar[role="navigation"]::before, .navbar[role="navigation"]::after { display: none !important; content: none !important; background: none !important; border: none !important; box-shadow: none !important; } /* Garder juste les boutons ACCUEIL/INDEX centres et propres */ #nav-breadcrumbs, .nav-breadcrumbs.linklist.navlinks { text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto !important; } /* Les boutons eux-memes restent styles */ #nav-breadcrumbs .crumb a, .nav-breadcrumbs .crumb a { /* Garde le style des boutons */ } /* Ne PAS toucher a la loupe de recherche dans le header */ .headerbar .search-box, .headerbar #search-box, .site-description .search-box { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Place "Tout cocher / Tout décocher" sous le sélecteur */ .fields2.display-actions + div, .fields2.display-actions + div + div { text-align: left !important; margin-top: 6px; white-space: normal !important; } /* Positionner Tout cocher / Tout décocher sous Exporter en CSV */ .fields2.display-actions + div, .fields2.display-actions + div + div { margin-left: 0 !important; text-align: left !important; margin-top: 5px !important; white-space: normal !important; } /* PM – mettre "Tout cocher / Tout décocher" sous le bouton ALLER */ #cp-main form#viewfolder fieldset.display-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; } /* label + select + bouton ALLER en premier */ #cp-main form#viewfolder fieldset.display-actions label, #cp-main form#viewfolder fieldset.display-actions select, #cp-main form#viewfolder fieldset.display-actions input[name="submit_mark"] { order: 1 !important; } /* "Tout cocher / Tout décocher" toujours APRES, sur une nouvelle ligne */ #cp-main form#viewfolder fieldset.display-actions .mark, #cp-main form#viewfolder fieldset.display-actions a[onclick*="marklist('viewfolder'"] { order: 2 !important; flex: 0 0 100% !important; margin-top: 4px !important; text-align: left !important; } /* Cacher le menu "Marquer / Ne pas marquer comme important" + son bouton Aller */ select[name="mark_option"], input[name="submit_mark"] { display: none !important; } /* Et si un label spécifique existe pour ce menu, on le masque aussi */ label[for*="mark"], label[for*="Mark"], label[for*="MARQUER"] { display: none !important; }