/* ========================================================================== G6M — FOOTER VICE CITY v700 Refonte premium du footer forum (GTA VI / neon / glassmorphism). TOUT est dans @layer g6m-footer. C'est volontaire et indispensable : les ~280 feuilles du forum declarent le footer en `html#XF body ... !important` hors couche. Pour les declarations !important la cascade CSS INVERSE l'ordre des couches et place le hors-couche en dernier : une regle !important en couche nommee bat donc tout le hors-couche, sans surenchere de specificite. Voir g6m-mobile-header-v600.css et g6m-login-cmp-fix-v601.css (meme motif). Une regle ecrite hors de la couche dans ce fichier serait inerte. ========================================================================== */ @layer g6m-footer { /* -------------------------------------------------------------------------- 1. Jetons -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc { --vc-pink: #ff0b8b; --vc-pink-soft: #ff6eb8; --vc-violet: #8d38ff; --vc-cyan: #00d7ff; --vc-cyan-soft: #5cefff; --vc-ink: #05030c; /* Hauteur de scene. L'asset est une BANDE recadree dans l'artwork d'origine (y 15 % -> 66,9 %), ratio 3.4286 : elle garde le soleil, la skyline, l'enseigne XERO et les personnages de la tete a la taille. 29.17vw reproduit ce ratio exactement — entre 1440 et 1920 px de large la bande se pose au pixel, sans le moindre recadrage supplementaire. Pour raccourcir encore, baisser le plafond : 480px reste coherent. */ --vc-scene-h: clamp(420px, 29.17vw, 560px); /* Coque pleine largeur : les personnages occupent 46 -> 79 % de la LARGEUR DU VIEWPORT (l'image est en `cover`), pas de la coque. Une coque centree a 1680px gaspillait 120px de chaque cote et ecrasait les colonnes contre Lucia. Ici le texte demarre au bord et dispose de toute la zone libre. */ --vc-shell: 1920px; --vc-pad-x: 64px; /* Padding vertical serre : dans une bande de 560px, le bloc de texte doit s'arreter au-dessus de l'enseigne XERO, sinon « Cookies » tombe dessus. */ --vc-pad-y: 38px; --vc-ease: 220ms cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Chassis pleine largeur -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc { position: relative !important; display: block !important; width: 100% !important; background-color: var(--vc-ink) !important; isolation: isolate !important; } /* Filet neon superieur */ .g6m-site-footer.g6m-vc .g6m-site-footer__border { position: relative !important; z-index: 4 !important; height: 2px !important; background: linear-gradient(90deg, rgba(255, 11, 139, 0) 0%, var(--vc-pink) 18%, var(--vc-violet) 50%, var(--vc-cyan) 82%, rgba(0, 215, 255, 0) 100%) !important; box-shadow: 0 0 18px rgba(255, 11, 139, .55), 0 0 34px rgba(0, 215, 255, .28) !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__body { position: relative !important; overflow: hidden !important; min-height: var(--vc-scene-h) !important; height: auto !important; max-height: none !important; display: flex !important; /* Contenu cale en HAUT, pas centre : dans la moitie basse de l'artwork se trouvent la station XERO et ses neons. Centre verticalement, « Cookies » tombait pile sur l'enseigne et devenait illisible. En haut, le texte se detache sur le ciel, qui est un degrade uniforme. */ align-items: flex-start !important; } /* -------------------------------------------------------------------------- 3. Scene : artwork + voile de lisibilite + reflets -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc .g6m-site-footer__scene { position: absolute !important; inset: 0 !important; top: 0 !important; bottom: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__scene-img { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; /* `center top` : l'artwork est plus haut que la bande, le recadrage enleve donc du BAS (asphalte au premier plan) et jamais les tetes. PAS de transform: scale() ici — un zoom, meme de 4%, rogne le haut du cadre et decapite les personnages. */ object-position: center top !important; transform: none !important; filter: saturate(1.06) contrast(1.03) !important; } /* Voile : degrade horizontal de lisibilite (specification client) */ .g6m-site-footer.g6m-vc .g6m-site-footer__scene-veil { position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: /* Voile volontairement leger. La version precedente montait a .94 a gauche : le coucher de soleil, les palmiers et la station devenaient noirs, et l'artwork n'etait plus reconnaissable. La lisibilite est assuree ici par l'ombre portee des textes, pas par l'ecrasement de l'image. */ linear-gradient(90deg, rgba(5, 3, 12, .56) 0%, rgba(8, 5, 18, .42) 26%, rgba(10, 6, 22, .24) 46%, rgba(10, 6, 22, .14) 64%, rgba(5, 3, 12, .36) 100%), linear-gradient(180deg, rgba(5, 3, 12, .26) 0%, rgba(5, 3, 12, .02) 22%, rgba(5, 3, 12, .02) 70%, rgba(5, 3, 12, .50) 100%) !important; } /* Reflets neon : deux halos larges, tres diffus. Donne la profondeur « source lumineuse dans la scene » plutot qu'un filtre pose dessus. */ .g6m-site-footer.g6m-vc .g6m-vc-scene__glow { position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; background: radial-gradient(58% 82% at 8% 106%, rgba(255, 11, 139, .30) 0%, rgba(255, 11, 139, 0) 62%), radial-gradient(46% 70% at 52% -8%, rgba(141, 56, 255, .26) 0%, rgba(141, 56, 255, 0) 66%), radial-gradient(40% 66% at 88% 104%, rgba(0, 215, 255, .22) 0%, rgba(0, 215, 255, 0) 64%) !important; mix-blend-mode: screen !important; } /* Vignette : referme les quatre bords, evite l'effet « image collee » */ .g6m-site-footer.g6m-vc .g6m-vc-scene__vignette { position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; background: radial-gradient(120% 140% at 50% 45%, rgba(0, 0, 0, 0) 46%, rgba(3, 2, 8, .42) 78%, rgba(3, 2, 8, .78) 100%) !important; } /* -------------------------------------------------------------------------- 4. Conteneur interne -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc .g6m-vc-inner { position: relative !important; z-index: 5 !important; box-sizing: border-box !important; width: 100% !important; max-width: var(--vc-shell) !important; margin: 0 auto !important; padding: var(--vc-pad-y) var(--vc-pad-x) !important; } /* 4 pistes : marque | navigation | support | zone artwork (reservee). La 4e piste ne porte pas de texte : elle garde les personnages degages et empeche toute colonne de venir se poser sur eux. */ .g6m-site-footer.g6m-vc .g6m-vc-cols { display: grid !important; /* Coordonnees relevees sur l'artwork : Jason & Lucia occupent 51 -> 79 % de la largeur, la voiture de droite 78 -> 100 %. La 4e piste vaut donc 2.49fr sur 4.98 = 50 % : le texte s'arrete avant eux, toujours. */ grid-template-columns: minmax(240px, .96fr) minmax(205px, .86fr) minmax(205px, .86fr) minmax(0, 2.42fr) !important; /* Gouttiere ramenee de 56 a 44px. A 233px de colonne, 56px d'ecart faisaient lire Navigation et Support comme deux blocs isoles au lieu d'un ensemble. */ column-gap: 44px !important; row-gap: 26px !important; align-items: start !important; } /* Placement explicite sur deux lignes. Sans cela, la carte occupant les pistes 1 a 3 de la ligne 1 laisse la piste 4 libre sur cette meme ligne, et le placement automatique y envoie la colonne marque — le logo se retrouve a droite, sur les personnages. */ .g6m-site-footer.g6m-vc .g6m-vc-brand, .g6m-site-footer.g6m-vc .g6m-vc-col { grid-row: 2 !important; } .g6m-site-footer.g6m-vc .g6m-vc-artzone { grid-column: 4 !important; grid-row: 1 / span 2 !important; } /* -------------------------------------------------------------------------- 4 bis. Regime de remplissage des SVG Le coeur XenForo declare `svg { fill: currentcolor }` dans css.php. Un attribut de presentation (`fill="none"` dans le balisage) a une priorite INFERIEURE a n'importe quelle regle CSS, meme sans !important : sans ce bloc, toutes les icones de trait se remplissent et deviennent des aplats pleins. Defaut invisible en local (le banc ne charge pas css.php), visible en prod. `` clone le symbole : il faut viser aussi les descendants, sinon le contenu clone reprend le fill herite. -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc .g6m-vc-link__icon, .g6m-site-footer.g6m-vc .g6m-vc-link__icon *, .g6m-site-footer.g6m-vc .g6m-vc-link__arrow, .g6m-site-footer.g6m-vc .g6m-vc-link__arrow *, .g6m-site-footer.g6m-vc .g6m-vc-user__btn svg, .g6m-site-footer.g6m-vc .g6m-vc-user__btn svg *, .g6m-site-footer.g6m-vc .g6m-vc-user__bolt svg, .g6m-site-footer.g6m-vc .g6m-vc-user__bolt svg *, .g6m-site-footer.g6m-vc .g6m-vc-user__role svg, .g6m-site-footer.g6m-vc .g6m-vc-user__role svg * { fill: none !important; stroke: currentColor !important; } /* Le sprite ne doit occuper aucune place. Volontairement ni `display: none` ni `visibility: hidden` : selon les moteurs, cacher la source d'un peut faire disparaitre les clones. Taille nulle + overflow suffisent. */ .g6m-site-footer.g6m-vc .g6m-vc-sprite { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* -------------------------------------------------------------------------- 5. Colonne marque -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc .g6m-vc-brand__logo { display: block !important; width: 208px !important; max-width: 208px !important; height: auto !important; margin: 0 0 22px !important; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65)) !important; } .g6m-site-footer.g6m-vc .g6m-vc-brand__text { max-width: 21rem !important; margin: 0 !important; font-family: Inter, system-ui, sans-serif !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.72 !important; color: rgba(244, 246, 255, .94) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 12px rgba(0, 0, 0, .8) !important; } /* -------------------------------------------------------------------------- 6. Colonnes de liens -------------------------------------------------------------------------- */ .g6m-site-footer.g6m-vc .g6m-vc-col { position: relative !important; min-width: 0 !important; } /* Separateur vertical entre Navigation et Support */ .g6m-site-footer.g6m-vc .g6m-vc-col--support::before { content: "" !important; position: absolute !important; left: -20px !important; top: 4px !important; bottom: 4px !important; width: 1px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, .16) 78%, rgba(255, 255, 255, 0) 100%) !important; pointer-events: none !important; } .g6m-site-footer.g6m-vc .g6m-vc-col__title { position: relative !important; margin: 0 0 22px !important; padding: 0 !important; font-family: Rajdhani, Orbitron, system-ui, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .22em !important; text-transform: uppercase !important; line-height: 1 !important; } .g6m-site-footer.g6m-vc .g6m-vc-col__title::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -12px !important; width: 100% !important; max-width: 190px !important; height: 2px !important; border-radius: 2px !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-col__title { color: var(--vc-pink) !important; text-shadow: 0 0 18px rgba(255, 11, 139, .55) !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-col__title::after { background: linear-gradient(90deg, var(--vc-pink) 0%, rgba(255, 11, 139, 0) 100%) !important; box-shadow: 0 0 12px rgba(255, 11, 139, .55) !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-col__title { color: var(--vc-cyan) !important; text-shadow: 0 0 18px rgba(0, 215, 255, .5) !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-col__title::after { background: linear-gradient(90deg, var(--vc-cyan) 0%, rgba(0, 215, 255, 0) 100%) !important; box-shadow: 0 0 12px rgba(0, 215, 255, .5) !important; } .g6m-site-footer.g6m-vc .g6m-vc-list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .g6m-site-footer.g6m-vc .g6m-vc-list > li { margin: 0 !important; padding: 0 !important; } .g6m-site-footer.g6m-vc .g6m-vc-link { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; /* 250px laissait ~190px de vide entre « Accueil » et son chevron. 208px suffisent au libelle le plus long (« Telechargements ») : les chevrons restent alignes en colonne, sans la trainee de vide. */ max-width: 208px !important; min-height: 33px !important; padding: 3px 10px 3px 8px !important; margin-left: -8px !important; border-radius: 10px !important; font-family: Inter, system-ui, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .012em !important; color: #fff !important; text-decoration: none !important; /* Halo sombre dense : c'est LUI qui porte la lisibilite au-dessus de l'artwork, pour que le voile puisse rester leger. */ text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 10px rgba(0, 0, 0, .85), 0 0 22px rgba(0, 0, 0, .6) !important; background: transparent !important; transition: transform var(--vc-ease), color var(--vc-ease), background-color var(--vc-ease) !important; } /* Icone de tete */ .g6m-site-footer.g6m-vc .g6m-vc-link__icon { flex: 0 0 auto !important; width: 19px !important; height: 19px !important; display: block !important; transition: filter var(--vc-ease), transform var(--vc-ease) !important; } .g6m-site-footer.g6m-vc .g6m-vc-link__label { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Chevron pousse a droite */ .g6m-site-footer.g6m-vc .g6m-vc-link__arrow { flex: 0 0 auto !important; width: 14px !important; height: 14px !important; display: block !important; opacity: .85 !important; transition: transform var(--vc-ease), opacity var(--vc-ease) !important; } /* Neutralise le chevron typographique ::after de l'ancienne feuille */ .g6m-site-footer.g6m-vc .g6m-vc-link::after { content: none !important; display: none !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-link__icon, .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-link__arrow { color: var(--vc-pink-soft) !important; filter: drop-shadow(0 0 6px rgba(255, 11, 139, .55)) !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-link__icon, .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-link__arrow { color: var(--vc-cyan-soft) !important; filter: drop-shadow(0 0 6px rgba(0, 215, 255, .5)) !important; } .g6m-site-footer.g6m-vc .g6m-vc-link:hover, .g6m-site-footer.g6m-vc .g6m-vc-link:focus-visible { transform: translateX(4px) !important; color: #fff !important; background: rgba(255, 255, 255, .055) !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-link:hover, .g6m-site-footer.g6m-vc .g6m-vc-col--nav .g6m-vc-link:focus-visible { color: #ffd0e8 !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-link:hover, .g6m-site-footer.g6m-vc .g6m-vc-col--support .g6m-vc-link:focus-visible { color: #d2f6ff !important; } .g6m-site-footer.g6m-vc .g6m-vc-link:hover .g6m-vc-link__arrow, .g6m-site-footer.g6m-vc .g6m-vc-link:focus-visible .g6m-vc-link__arrow { transform: translateX(3px) !important; opacity: 1 !important; } .g6m-site-footer.g6m-vc .g6m-vc-link:hover .g6m-vc-link__icon, .g6m-site-footer.g6m-vc .g6m-vc-link:focus-visible .g6m-vc-link__icon { transform: scale(1.08) !important; } .g6m-site-footer.g6m-vc .g6m-vc-link:focus-visible { outline: 2px solid rgba(0, 215, 255, .85) !important; outline-offset: 2px !important; } /* -------------------------------------------------------------------------- 7. Carte utilisateur flottante (glassmorphism) -------------------------------------------------------------------------- */ /* La carte est un ELEMENT DE LA GRILLE : premiere ligne, pistes 1 a 3, calee a droite du bloc de colonnes. Deux raisons : - en position absolue dans le coin, elle passait sur le torse de Jason & Lucia, qui occupent tout le tiers droit sur toute la hauteur de la bande ; - calee sur le bord de l'ecran plutot que sur les colonnes, elle mordait encore la 4e piste, celle reservee a l'artwork. En s'arretant a la fin de la piste « Support », elle reste toujours dans la zone de texte, a toutes les largeurs, sans calcul de marge fragile. */ .g6m-site-footer.g6m-vc .g6m-vc-user { /* Centree sur les DEUX colonnes de liens plutot que calee a droite du bloc entier : elle les coiffe au lieu de flotter au-dessus de la gouttiere. */ grid-column: 2 / 4 !important; grid-row: 1 !important; justify-self: center !important; position: relative !important; top: auto !important; right: auto !important; z-index: 6 !important; margin: 0 0 6px 0 !important; width: fit-content !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 16px !important; box-sizing: border-box !important; padding: 12px 18px !important; border: 1.5px solid transparent !important; border-radius: 20px !important; background: linear-gradient(150deg, rgba(16, 10, 32, .72), rgba(9, 6, 20, .60)) padding-box, linear-gradient(135deg, var(--vc-pink) 0%, var(--vc-violet) 52%, var(--vc-cyan) 100%) border-box !important; backdrop-filter: blur(12px) saturate(150%) !important; -webkit-backdrop-filter: blur(12px) saturate(150%) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 11, 139, .26), inset 0 1px 0 rgba(255, 255, 255, .10) !important; transition: box-shadow var(--vc-ease), transform var(--vc-ease) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user:hover { transform: translateY(-2px) !important; box-shadow: 0 22px 54px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 11, 139, .45), 0 0 64px rgba(141, 56, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .14) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__actions { display: flex !important; align-items: center !important; gap: 6px !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__btn { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--vc-pink-soft) !important; filter: drop-shadow(0 0 8px rgba(255, 11, 139, .55)) !important; transition: background-color var(--vc-ease), transform var(--vc-ease), filter var(--vc-ease) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__btn svg { width: 21px !important; height: 21px !important; display: block !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__btn:hover { background: rgba(255, 255, 255, .09) !important; transform: translateY(-1px) !important; filter: drop-shadow(0 0 14px rgba(255, 11, 139, .85)) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__badge { position: absolute !important; top: 5px !important; right: 5px !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border-radius: 999px !important; font-family: Rajdhani, system-ui, sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 16px !important; text-align: center !important; color: #fff !important; background: linear-gradient(135deg, var(--vc-pink), var(--vc-violet)) !important; box-shadow: 0 0 10px rgba(255, 11, 139, .8) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__sep { width: 1px !important; height: 34px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__id { display: flex !important; align-items: center !important; gap: 12px !important; text-decoration: none !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__avatar { position: relative !important; flex: 0 0 auto !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; overflow: hidden !important; background: #120a22 !important; box-shadow: 0 0 0 2px rgba(255, 11, 139, .85), 0 0 18px rgba(255, 11, 139, .5) !important; } /* Couvre les deux sorties de : une image, ou un avatar par defaut (pastille coloree + initiale). Sans cela l'initiale reste minuscule et collee en haut a gauche du cercle. */ .g6m-site-footer.g6m-vc .g6m-vc-user__avatar img, .g6m-site-footer.g6m-vc .g6m-vc-user__avatar .avatar, .g6m-site-footer.g6m-vc .g6m-vc-user__avatar > span { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; border-radius: 50% !important; font-family: Rajdhani, system-ui, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; color: #fff !important; text-decoration: none !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__avatar img { display: block !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__meta { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__name { font-family: Rajdhani, Orbitron, system-ui, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: .02em !important; /* Le degrade doit se lire sur un mot court : « Kratelos » ne fait que 8 caracteres. Un arret rose a 42 % laissait 3/4 du pseudo dans la meme teinte et le degrade paraissait ne pas s'appliquer. Le violet arrive maintenant des 45 %, et le cyan ferme la course. */ background: linear-gradient(100deg, #ff5cb0 0%, #ff0b8b 22%, #a35cff 62%, #5ad9ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; /* Certaines feuilles du forum forcent -webkit-text-fill-color sur les pseudos (role-usernames) : sans cette ligne, le remplissage opaque recouvre le degrade. */ -webkit-text-fill-color: transparent !important; white-space: nowrap !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__role { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-family: Inter, system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.2 !important; color: rgba(212, 216, 234, .88) !important; white-space: nowrap !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__role svg { width: 11px !important; height: 11px !important; opacity: .8 !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__bolt { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 12px !important; color: var(--vc-cyan) !important; filter: drop-shadow(0 0 10px rgba(0, 215, 255, .7)) !important; transition: transform var(--vc-ease), filter var(--vc-ease), background-color var(--vc-ease) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__bolt svg { width: 22px !important; height: 22px !important; display: block !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__bolt:hover { background: rgba(255, 255, 255, .09) !important; transform: translateY(-1px) scale(1.04) !important; filter: drop-shadow(0 0 18px rgba(0, 215, 255, 1)) !important; } /* -------------------------------------------------------------------------- 8. Raccord bande -> bandeau de credits Avant : l'artwork etait tranche net, puis un aplat noir demarrait sous un filet blanc a 7 %. Deux plans juxtaposes, aucune continuite. Maintenant, trois couches qui se recouvrent : 1. un fondu de 90-150px en bas de la bande, qui va jusqu'a la couleur EXACTE du bandeau (#05040b) — la couture disparait ; 2. un filet neon centre, qui fait de la jonction une separation voulue ; 3. des halos froids en haut du bandeau, qui prolongent l'ambiance de la scene au lieu de la couper. Les deux pseudo-elements sont portes par `__body` et non par `__bottom` : d'autres feuilles du forum posent deja des pseudo-elements sur `__bottom`. -------------------------------------------------------------------------- */ /* 1. Fondu vers le bandeau */ .g6m-site-footer.g6m-vc .g6m-site-footer__body::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: clamp(90px, 12vw, 150px) !important; z-index: 4 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(5, 4, 11, 0) 0%, rgba(5, 4, 11, .30) 36%, rgba(5, 4, 11, .68) 64%, rgba(5, 4, 11, .92) 85%, #05040b 100%) !important; } /* 2. Filet neon a la jonction */ .g6m-site-footer.g6m-vc .g6m-site-footer__body::before { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(1180px, 86%) !important; height: 1px !important; z-index: 5 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255, 11, 139, 0) 0%, rgba(255, 11, 139, .55) 20%, rgba(141, 56, 255, .65) 50%, rgba(0, 215, 255, .50) 80%, rgba(0, 215, 255, 0) 100%) !important; box-shadow: 0 0 18px rgba(141, 56, 255, .40) !important; } /* 3. Bandeau de credits : plus de trait sec, halos qui prolongent la scene */ .g6m-site-footer.g6m-vc .g6m-site-footer__bottom { position: relative !important; z-index: 4 !important; border-top: 0 !important; background-color: #05040b !important; background-image: /* Masque sombre sur les 90 premiers pixels : le bord HAUT du bandeau vaut ainsi exactement #05040b, la couleur ou s'acheve le fondu de la bande. Sans lui, les halos demarraient a pleine intensite des le premier pixel et creaient une marche de ton juste sous le filet neon. */ linear-gradient(180deg, #05040b 0%, rgba(5, 4, 11, 0) 90px), radial-gradient(120% 210% at 50% -45%, rgba(141, 56, 255, .26) 0%, rgba(141, 56, 255, 0) 55%), radial-gradient(66% 150% at 12% -12%, rgba(255, 11, 139, .17) 0%, rgba(255, 11, 139, 0) 62%), radial-gradient(66% 150% at 88% -12%, rgba(0, 215, 255, .13) 0%, rgba(0, 215, 255, 0) 62%) !important; } /* -------------------------------------------------------------------------- 9. Responsive -------------------------------------------------------------------------- */ /* Ecrans larges : on ouvre la gouttiere, la scene respire */ @media (min-width: 1600px) { .g6m-site-footer.g6m-vc .g6m-vc-cols { gap: 56px !important; } } /* Entre 1500 et 1699 : on resserre les gouttieres, les 45 % de gauche deviennent justes pour trois colonnes. */ @media (max-width: 1699px) { .g6m-site-footer.g6m-vc { --vc-pad-x: 48px; --vc-pad-y: 48px; } .g6m-site-footer.g6m-vc .g6m-vc-cols { gap: 24px !important; } .g6m-site-footer.g6m-vc .g6m-vc-link { font-size: 14px !important; } } /* Tablette : 2 colonnes, la carte utilisateur repasse dans le flux. Seuil a 1500px et non 1280 : sous 1500, les 45 % de gauche ne suffisent plus aux trois colonnes (250 + 175 + 175 px de largeurs minimales), la grille deborderait sur les personnages. Ici la 4e piste (zone artwork) disparait, donc plus rien ne garde Jason & Lucia degages du texte. On ne peut plus compter sur la mise en page pour la lisibilite : c'est l'artwork qui recule (opacite 0.42). La hauteur passe aussi en `auto`, sinon un `clamp(...vw)` etire l'image dans un cadre presque carre et l'agrandit demesurement. */ @media (max-width: 1499px) { .g6m-site-footer.g6m-vc { --vc-scene-h: auto; --vc-pad-x: 36px; --vc-pad-y: 48px; } .g6m-site-footer.g6m-vc .g6m-site-footer__body { min-height: 0 !important; display: block !important; } /* Cadrage sur la skyline et la baie plutot que sur les personnages : dans un cadre presque carre, `cover` ne peut montrer qu'une tranche etroite de la bande, et cette tranche coupe Jason & Lucia en deux. La skyline, elle, supporte n'importe quelle coupe. */ .g6m-site-footer.g6m-vc .g6m-site-footer__scene-img { /* Cadrage sur le soleil couchant, la skyline et la station plutot que sur les personnages : dans un cadre presque carre, `cover` ne montre qu'une tranche etroite, et centrer sur eux les coupe en plein milieu du texte. */ object-position: 18% top !important; opacity: .38 !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__scene-veil { background: linear-gradient(180deg, rgba(5, 3, 12, .80) 0%, rgba(5, 3, 12, .62) 34%, rgba(5, 3, 12, .70) 68%, rgba(5, 3, 12, .92) 100%) !important; } .g6m-site-footer.g6m-vc .g6m-vc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 40px 32px !important; } /* La piste artwork n'existe plus : on retire le placeholder */ .g6m-site-footer.g6m-vc .g6m-vc-artzone { display: none !important; } /* Plus de 4e piste : la carte reprend toute la largeur, et les colonnes retrouvent le placement automatique. */ .g6m-site-footer.g6m-vc .g6m-vc-user { grid-column: 1 / -1 !important; grid-row: 1 !important; margin: 0 0 8px 0 !important; } .g6m-site-footer.g6m-vc .g6m-vc-brand, .g6m-site-footer.g6m-vc .g6m-vc-col { grid-row: auto !important; } } /* Mobile : une colonne, texte centre, personnages en fond discret */ @media (max-width: 767px) { .g6m-site-footer.g6m-vc { --vc-scene-h: auto; --vc-pad-x: 22px; --vc-pad-y: 38px; } .g6m-site-footer.g6m-vc .g6m-site-footer__body { min-height: 0 !important; display: block !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__scene-img { opacity: .22 !important; object-position: 72% 30% !important; transform: none !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__scene-veil { background: linear-gradient(180deg, rgba(5, 3, 12, .82) 0%, rgba(5, 3, 12, .70) 40%, rgba(5, 3, 12, .90) 100%) !important; } .g6m-site-footer.g6m-vc .g6m-vc-scene__glow { opacity: .55 !important; } /* `justify-items: center` fait passer les items de `stretch` a `shrink-to-fit` : leurs `max-width` en rem cessent d'etre bornees par la colonne et debordent la page. On centre donc via `text-align` + marges auto, en gardant les items en pleine largeur. */ .g6m-site-footer.g6m-vc .g6m-vc-cols { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; justify-items: stretch !important; text-align: center !important; } .g6m-site-footer.g6m-vc .g6m-vc-brand { width: 100% !important; min-width: 0 !important; } .g6m-site-footer.g6m-vc .g6m-vc-brand__logo { margin: 0 auto 18px !important; } .g6m-site-footer.g6m-vc .g6m-vc-brand__text { max-width: min(30rem, 100%) !important; margin: 0 auto !important; } .g6m-site-footer.g6m-vc .g6m-vc-col { width: 100% !important; max-width: min(340px, 100%) !important; margin-inline: auto !important; min-width: 0 !important; } .g6m-site-footer.g6m-vc .g6m-vc-col--support::before { display: none !important; } .g6m-site-footer.g6m-vc .g6m-vc-col__title { margin-bottom: 24px !important; } .g6m-site-footer.g6m-vc .g6m-vc-col__title::after { left: 50% !important; transform: translateX(-50%) !important; max-width: 140px !important; background: linear-gradient(90deg, rgba(255, 11, 139, 0) 0%, currentColor 50%, rgba(255, 11, 139, 0) 100%) !important; } .g6m-site-footer.g6m-vc .g6m-vc-link { max-width: none !important; margin-left: 0 !important; padding: 6px 12px !important; min-height: 40px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid rgba(255, 255, 255, .07) !important; } .g6m-site-footer.g6m-vc .g6m-vc-user { grid-column: 1 / -1 !important; justify-self: center !important; margin: 0 auto 4px !important; width: 100% !important; max-width: min(340px, 100%) !important; justify-content: center !important; gap: 10px !important; padding: 10px 12px !important; box-sizing: border-box !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__name { font-size: 17px !important; } } @media (max-width: 400px) { .g6m-site-footer.g6m-vc .g6m-vc-user__actions { gap: 2px !important; } .g6m-site-footer.g6m-vc .g6m-vc-user__btn, .g6m-site-footer.g6m-vc .g6m-vc-user__bolt { width: 34px !important; height: 34px !important; } } /* Accessibilite : respecte la preference systeme */ @media (prefers-reduced-motion: reduce) { .g6m-site-footer.g6m-vc *, .g6m-site-footer.g6m-vc *::before, .g6m-site-footer.g6m-vc *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } } } /* fin @layer g6m-footer */ /* ========================================================================== G6M_FOOTER_POLISH_V701 — ajustements de mise en page. L'artwork, son cadrage et la piste 4 qui le protege restent inchanges. ========================================================================== */ @layer g6m-footer { /* 1. La carte utilisateur etait centree sur les pistes 1-3 : elle flottait. On l'ancre a gauche, dans l'aplomb du logo place juste dessous. */ .g6m-site-footer.g6m-vc .g6m-vc-user { justify-self: start !important; margin-left: 0 !important; margin-right: 0 !important; } /* 2. Colonnes de liens moins a l'etroit. La piste 4 (artwork) est strictement conservee a 2.42fr : les personnages restent degages. */ .g6m-site-footer.g6m-vc .g6m-vc-cols { grid-template-columns: minmax(230px, .90fr) minmax(210px, .92fr) minmax(210px, .92fr) minmax(0, 2.42fr) !important; column-gap: 40px !important; row-gap: 20px !important; } /* 3. Barre basse : un vrai pied qui referme le bloc. */ .g6m-site-footer.g6m-vc .g6m-site-footer__bottom { position: relative !important; margin-top: 26px !important; padding-top: 18px !important; font-size: 12px !important; line-height: 1.7 !important; letter-spacing: .02em !important; } .g6m-site-footer.g6m-vc .g6m-site-footer__bottom::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 1px !important; background: linear-gradient(90deg, rgba(255, 11, 139, .55) 0%, rgba(141, 56, 255, .35) 42%, rgba(255, 255, 255, .06) 72%, rgba(255, 255, 255, 0) 100%) !important; pointer-events: none !important; } /* G6M_COOKIES_PARITE_V601 (16/08/2026) — « Gerer les cookies » est un