@charset "UTF-8"; /*** BASIC CSS RULES ***/ .alert-info, .alert-warning, .alert-success { background-color: var(--secondary-color-lighter); border-color: var(--important-color); color: var(--important-color); font-weight: bold; } * { margin: 0; padding: 0; } /* (utilisé pour servir des variantes AVIF/WebP) n'est pas un élément remplacé comme : dans un conteneur flex/grid, il n'hérite pas de la protection qui empêche d'être déformé/étiré. On le retire complètement de la mise en page pour que ce soit toujours l' à l'intérieur qui se comporte comme l'élément flex/grid direct, exactement comme avant l'ajout des variantes AVIF/WebP. */ picture { display: contents; } /* overflow-x:hidden sur body seul ne suffit pas partout (notamment mobile) : c'est , pas , qui fait office d'élément scrollable racine dans la plupart des moteurs. Les deux sont nécessaires pour garantir qu'aucun débordement horizontal ne fasse apparaître de barre de scroll. */ html { overflow-x: hidden; } body { background-color: var(--primary-color); color: var(--text-color) !important; font-family: "Exo 2", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; /* Les éléments .anim (slide-in) partent hors-champ via `transform` dès le HTML brut, avant que animations.js n'applique le `data-from-x` réel au DOMContentLoaded : ce court instant peut pousser le contenu au-delà de la largeur de la fenêtre et faire clignoter une barre de scroll horizontale au chargement. */ overflow-x: hidden; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .gabarito-font { font-family: "Exo 2", "Inter", Arial, sans-serif; font-weight: normal; font-style: normal; } .btn-custom, .btn { border-radius: 10px; background-color: var(--interaction-color); color: var(--text-color); border: none; text-transform: uppercase; transition: 0.25s; } .btn.disabled, .btn-custom.disabled { background-color: var(--interaction-color-darker) !important; } .btn-shadow { box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.25); } .btn-custom:disabled { background-color: var(--interaction-color-darker); box-shadow: none; } .btn-custom.active { background-color: var(--interaction-color); } .btn-custom:hover, .btn:hover { background-color: var(--interaction-color-darker); color: var(--text-color); } .btn-custom:active, .btn:active { transform: scale(0.95); background-color: var(--interaction-color) !important; } .btn-custom:focus, .btn:focus { outline: none; } .btn-like { border-radius: none; background-color: #3cb742; color: var(--text-color); border: none; text-transform: uppercase; transition: 0.25s; box-shadow: none; } .btn-like:hover { background-color: #309140; } .btn-like:active { background-color: #3cb742 !important; } .btn-like.active { background: none; color: #3cb742; } .btn-like:disabled { background-color: #3cb742 !important; } .btn-danger { background-color: #b73c3c; } .btn-danger:hover { background-color: #913030; } .btn-danger.active, .btn-danger:active { background-color: #b73c3c !important; } .theme-img-overlay { opacity: 0.1; pointer-events: none; user-select: none; } .non-events { pointer-events: none; user-select: none; } hr { margin: 0.6rem 0; } select { border: solid 1px var(--interaction-color) !important; background-color: var(--primary-color-darker) !important; border-radius: 5px !important; color: var(--interaction-color) !important; transition: 0.3s !important; cursor: pointer; } select:focus { outline: 0 !important; box-shadow: none !important; } select option { background-color: var(--primary-color-darker) !important; color: var(--text-color) !important; cursor: pointer; } select .selected { color: green !important; } input { border: solid 1px var(--interaction-color) !important; background-color: var(--primary-color-darker) !important; border-radius: 5px !important; color: var(--interaction-color) !important; transition: 0.3s !important; } input:focus { box-shadow: 0 0 10px 0.05rem var(--interaction-color) !important; outline: 0; } textarea { border: solid 1px var(--interaction-color) !important; background-color: var(--primary-color-darker) !important; border-radius: 5px !important; color: var(--interaction-color) !important; transition: 0.3s !important; } textarea:focus { box-shadow: 0 0 10px 0.05rem var(--interaction-color) !important; outline: 0; } .interaction-color { color: var(--interaction-color); transition: 0.3s; } .interaction-color:hover { color: var(--interaction-color-darker); } .interaction-color:active { color: var(--interaction-color) !important; } /*** HOME : BANNER SECTION ***/ .theme-button { font-weight: bold; color: white !important; text-transform: uppercase; background: linear-gradient( to left, var(--detail-color), var(--interaction-color-darker) ); transition: all 0.15s ease-in; border: solid 2px var(--interaction-color); box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--interaction-color), transparent 60%); } .theme-button.active { background: linear-gradient( to left, var(--important-color), var(--important-color) ); border: solid 2px var(--important-color); box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--important-color), transparent 60%); } .theme-button-danger { background: linear-gradient(to left, #9c1010, #e62a2a); border-color: #9c1010; box-shadow: 0 0.5rem 1rem color-mix(in srgb, #9c1010, transparent 60%); } .theme-button.active-mobile { background: linear-gradient( to left, var(--detail-color), var(--interaction-color-darker) ) !important; } .theme-button:hover { color: white !important; transform: scale(0.9); cursor: pointer; } .anim-scale-hover { transition: all 0.12s ease-in; } .anim-scale-hover:hover { transform: scale(0.95); cursor: pointer; } .theme-button::after { height: 0px !important; } /*** --- ***/ /*** HOME : VOTE SECTION (partagé avec le plugin votingplugin, reste ici) ***/ .podium { background: var(--secondary-color-lighter); border: solid 1px var(--important-color); } .podium-number { background: var(--important-color); border: solid 1px var(--important-color); } .podium-container { transition: transform 0.1s ease; } .podium-container:hover { transform: translateY(-10px); } .podium-silver { background: linear-gradient(to top, #acacac 0%, #e0e0e0 50%, #f8f8f8 100%); background-blend-mode: screen; box-shadow: 0 0 15px rgba(192, 192, 192, 0.3); width: 180px; height: 180px; } .podium-gold { background: linear-gradient(to top, #b8860b 0%, #ffd700 50%, #fff5b0 100%); background-blend-mode: screen; box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); width: 220px; height: 220px; } .podium-bronze { background: linear-gradient(to top, #8c5321 0%, #cd7f32 50%, #f3b77a 100%); background-blend-mode: screen; box-shadow: 0 0 15px rgba(205, 127, 50, 0.3); width: 180px; height: 180px; } .podium-profil { background: linear-gradient( to top, var(--secondary-color-darker) 0%, var(--secondary-color) 50%, var(--secondary-color-lighter) 100% ); background-blend-mode: screen; box-shadow: 0 0 15px rgba(117, 148, 199, 0.3); width: 220px; height: 220px; } @media (max-width: 767.98px) { .podium-gold, .podium-profil { width: 180px; height: 180px; } .podium-bronze, .podium-silver { width: 120px; height: 120px; } } /*** --- ***/ .ip-server-footer { background: var(--detail-color); min-height: 30px; min-width: 200px; border-radius: 25px; border: solid 3px var(--interaction-color); white-space: nowrap; line-height: 30px; transition: all 0.1s; } .banner-important-msg { background: rgba(255, 0, 0, 0.3); min-height: 30px; z-index: 5; } .ip-server-footer:hover { cursor: pointer; } .ip-container { display: inline-flex; align-items: center; gap: 10px; padding: 10px; background-color: #333; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .copy-btn { background-color: #4caf50; color: white; border: none; padding: 8px 12px; font-size: 0.9em; cursor: pointer; border-radius: 4px; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #45a049; } .copy-message { font-size: 0.9em; color: #4caf50; margin-top: 5px; font-weight: bold; animation: fadeInOut 2s forwards; } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } h1 { font-weight: bold; color: var(--text-color); } h2, h3, h4, h5, h6, p { color: var(--text-color); } .shadow-drop { box-shadow: 3px 6px 6px 0px rgba(0, 0, 0, 0.25); } /*** END BASIC CSS RULES ***/ /*** HOME CSS RULES ***/ .card-wiki:hover { transform: translateY(-10px) rotate(2deg); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .btn-250 { width: 250px; } .shop-section { min-height: 300px; background-color: var(--secondary-color); } .carousel-shop { width: 250px; height: 250px; background-color: var(--primary-color-darker); border-radius: 15px; } .carousel-caption { color: var(--text-color) !important; } .carousel-price { color: color-mix( in srgb, RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) 100%, var(--primary-color) 50% ) !important; } /*** ***/ /*** NOTIFICATIONS CSS RULES ***/ .text-bg-info { background-color: color-mix( in srgb, RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) 100%, var(--primary-color) 50% ) !important; } .text-bg-warning { background-color: color-mix( in srgb, RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) 100%, var(--primary-color) 50% ) !important; } .text-bg-danger { background-color: color-mix( in srgb, RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) 100%, var(--primary-color) 50% ) !important; } .text-bg-success { background-color: color-mix( in srgb, RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) 100%, var(--primary-color) 50% ) !important; } .pagination .page-item .page-link { background: var(--interaction-color) !important; color: var(--text-color); border-color: var(--primary-color) !important; cursor: pointer; } .pagination .page-item.disabled .page-link { background: var(--interaction-color-darker) !important; } .pagination .page-item.active .page-link { border-color: var(--detail-color) !important; } .pagination .page-item .page-link:hover { background-color: var(--interaction-color-darker); color: var(--text-color); box-shadow: 0 0 10px 0.05rem var(--interaction-color) !important; } .pagination .page-item .page-link:active { transform: scale(0.98); background-color: var(--interaction-color) !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .pagination .page-item .page-link:focus { outline: none; box-shadow: 0 0 10px 0.05rem var(--interaction-color) !important; } /*** END NOTIFICATIONS CSS RULES ***/ .textarea-comment:focus { outline: none; box-shadow: none; } .card-footer { border-color: var(--detail-color); } .comment { background: var(--secondary-color-lighter); border: solid 1px var(--detail-color); border-radius: 10px; } .first-comment { color: var(--detail-color); } .skin-head { filter: drop-shadow(-1px 2px 5px rgba(0, 0, 0, 0.5)); } .back-link { font-size: 1.5rem; color: var(--interaction-color) !important; text-decoration: none; } .modal-comment, .modal-shop, .modal-content { background: var(--secondary-color); border-color: var(--primary-color); } .modal-comment .modal-header, .modal-comment .modal-footer, .modal-shop .modal-header, .modal-shop .modal-footer, .modal-content .modal-header, .modal-content .modal-footer { border-color: var(--primary-color); } .credit-container { background-color: var(--secondary-color-lighter); border-radius: 10px; } /* Mobile Styling */ @media (max-width: 768px) { .navbar-list { flex-direction: column; align-items: center; } .navbar-list li { margin: 10px 0; } } .img-first-article { -o-object-fit: contain; object-fit: contain; mask-image: linear-gradient( to bottom, var(--secondary-color) 90%, transparent 98% ); -webkit-mask-image: linear-gradient( to bottom, var(--secondary-color) 90%, transparent 98% ); height: 40%; transition: transform 0.3s ease-in-out; } .img-article { -o-object-fit: contain; object-fit: contain; width: 100%; height: 100%; mask-image: linear-gradient( to right, var(--secondary-color) 90%, transparent 98% ); -webkit-mask-image: linear-gradient( to right, var(--secondary-color) 90%, transparent 98% ); transition: transform 0.3s ease-in-out; } .infos-color { color: var(--detail-color); } .likes-color { color: green; } /* Fond identique à la carte Boutique / à la fin du dégradé Votes : même teinte subtile relative à --primary-color (cf. home.css), pas de couleur figée. */ .footer { background: hsl(from var(--primary-color) h s calc(l - 4)); padding: 48px 24px 0; color: var(--text-color); } .footer-grid { width: 100%; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; } .footer-brand { display: flex; align-items: center; gap: 18px; } .footer-logo { width: 120px; height: auto; } .footer-join { display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer-join-title { margin: 0; font-weight: 800; font-size: 15px; } .footer-ip-btn { background: linear-gradient(135deg, var(--interaction-color), var(--detail-color)); border: 1px solid var(--detail-color); border-radius: 8px; color: var(--primary-color); font-family: inherit; font-weight: 800; font-size: 13px; padding: 8px 14px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .footer-ip-btn:hover { transform: scale(1.04); } .footer-col-title { margin: 0 0 12px; font-weight: 800; font-size: 15px; text-transform: uppercase; } .footer-col-text { margin: 0; font-size: 14px; line-height: 1.6; color: hsl(from var(--text-color) h s l / 0.75); } .footer-about { max-width: 460px; } .footer-help { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 260px; } .footer-help .footer-col-title { margin-bottom: 0; } .footer-discord-btn { align-self: flex-start; padding: 9px 20px; border-radius: 8px; background: linear-gradient(135deg, var(--interaction-color), var(--detail-color)); border: 1px solid var(--detail-color); color: var(--primary-color); font-weight: 800; font-size: 13px; text-decoration: none; transition: transform 0.3s ease; } .footer-discord-btn:hover { transform: translateY(-1px); color: var(--primary-color); } .footer-cgu { text-align: center; padding: 28px 0 12px; } .footer-cgu-link { font-weight: 700; font-size: 13px; color: var(--important-color); text-decoration: none; } .footer-cgu-link:hover { text-decoration: underline; } /* Même repère de luminosité que .shop-teaser-card (l - 6), qui correspond déjà à la teinte la plus sombre du dégradé de référence. */ .footer-copyright-bar { background: hsl(from var(--primary-color) h s calc(l - 6)); margin: 16px -24px 0; padding: 16px 24px; text-align: center; } .footer-copyright-bar p { margin: 0; font-size: 11px; text-transform: uppercase; font-weight: 700; color: hsl(from var(--text-color) h s l / 0.55); line-height: 1.7; } .footer-copyright-bar a { text-decoration: none; } @media (max-width: 991.98px) { .footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px; } .footer-about, .footer-help { max-width: 460px; } .footer-help { align-items: center; } .footer-discord-btn { align-self: center; } } .title-border { -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: black; } .icon-discord { font-size: 5rem; color: #6276be; -webkit-text-stroke-width: 0.3px; -webkit-text-stroke-color: black; } .list-group-item { background-color: var(--secondary-color); } .list-group-item:hover { background-color: var(--secondary-color-darker); } .list-group-item.active { background-color: var(--secondary-color-lighter); border-color: var(--interaction-color-darker); } /*** CARD PART ***/ .card { background: none; /* Page back color */ border: none; } .card-body { position: relative; } .basic-card { background: var(--secondary-color) !important; border-radius: 5px; overflow: hidden; color: var(--text-color); border: none; } /* Used for articles */ .little-card { height: 184px; } .desc-card { max-height: 5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .big-card { max-height: 626px; } .link-card-div { position: absolute; bottom: 15px; } .link-card-div-no-img { right: 15px; } /* - */ /*** END CARD PART ***/ /*** FLAG PART ***/ .flag-wrapper { position: relative; width: 100px; height: 635px; filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3)); } .big-flag-wrapper { position: relative; width: 240px; min-width: 240px; height: 250px; filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.3)); } .flag { position: relative; width: 100%; height: 100%; background-color: var(--detail-color); /* Fallback d'abord (toujours valide), puis surcharge AVIF/WebP : un navigateur qui ne comprend pas image-set() ignore la ligne suivante et garde le PNG. */ -webkit-mask-image: url("../img/flag.png"); -webkit-mask-image: -webkit-image-set(url("../img/flag.avif") type("image/avif"), url("../img/flag.webp") type("image/webp"), url("../img/flag.png") type("image/png")); mask-image: url("../img/flag.png"); mask-image: image-set(url("../img/flag.avif") type("image/avif"), url("../img/flag.webp") type("image/webp"), url("../img/flag.png") type("image/png")); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .big-flag { position: relative; width: 100%; height: 100%; background-color: var(--detail-color); -webkit-mask-image: url("../img/flag.png"); -webkit-mask-image: -webkit-image-set(url("../img/flag.avif") type("image/avif"), url("../img/flag.webp") type("image/webp"), url("../img/flag.png") type("image/png")); mask-image: url("../img/flag.png"); mask-image: image-set(url("../img/flag.avif") type("image/avif"), url("../img/flag.webp") type("image/webp"), url("../img/flag.png") type("image/png")); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .discord-flag { height: auto; min-height: 645px; } .big-flag-logo-container { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; z-index: 2; } .flag-logo-container { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; z-index: 2; } .flag-logo-img, .big-flag-logo-img { position: relative; z-index: 3; } /*** ***/ .codes-2fa-card { background: var(--secondary-color-darker) !important; } /*** PROFILE PART ***/ .profile-card { border-radius: 5px; } .profile-card-skin { mask-image: linear-gradient( to bottom, var(--secondary-color) 50%, transparent 95% ); -webkit-mask-image: linear-gradient( to bottom, var(--secondary-color) 50%, transparent 95% ); max-height: 250px; margin-top: -50px; margin-bottom: -20px; filter: drop-shadow(-1px 6px 5px rgba(0, 0, 0, 0.5)); } /*** ***/ .notifications-container { background: var(--secondary-color); border-color: var(--primary-color-darker); color: var(--detail-color); } .categories-list .category-item a { color: var(--text-color); } .categories-list .category-item a:hover { color: var(--primary-color-lighter); } .category-item a.active, .subcategory-item.active { color: var(--primary-color) !important; /* Couleur d'accentuation */ } .subcategories .subcategory-item.active { border-left: 2px solid var(--primary-color); } .subcategories .subcategory-item { font-size: 0.9em; border-left: 2px solid var(--text-color); } .subcategories .subcategory-item:hover { border-left: 2px solid var(--primary-color-lighter); } .table { --bs-table-bg: var(--secondary-color-lighter); --bs-table-border-color: var(--secondary-color-darker); } .table.coupons { --bs-table-bg: var(--secondary-color-lighter); --bs-table-border-color: var(--secondary-color-darker); } .nav-bmap-section { background-color: var(--secondary-color-lighter); outline: solid 3px var(--detail-color); border-bottom: solid 5px var(--secondary-color-darker); } .shop-bg-top { height: 200px; } thead tr th { background-color: var(--secondary-color-darker) !important; border-color: var(--detail-color) !important; } .vote-card { background-color: var(--secondary-color) !important; } .skin-card-vote { -webkit-mask-image: linear-gradient( to bottom, var(--secondary-color) 50%, transparent 95% ); mask-image: linear-gradient( to bottom, var(--secondary-color) 50%, transparent 95% ); filter: drop-shadow(-1px 6px 5px rgba(0, 0, 0, 0.5)); } @media (max-width: 576px) { img.skin-card-vote.card-img-top { width: auto; max-width: 100%; height: auto; max-height: 130px; object-fit: contain; } } .skin-rate-vote { -webkit-mask-image: linear-gradient( to bottom, var(--secondary-color) 90%, transparent 95% ); mask-image: linear-gradient( to bottom, var(--secondary-color) 90%, transparent 95% ); filter: drop-shadow(-1px 6px 5px rgba(0, 0, 0, 0.5)); } .skin-rate-vote.first { margin-bottom: -15px; } .skin-rate-vote.second { margin-bottom: -24px; } .skin-rate-vote.third { margin-bottom: -12px; } .myself-line > td { color: var(--text-color) !important; background: var(--primary-color-darker) !important; } .ranking-card { border-radius: 10px; background: var(--secondary-color); } .name-title { color: var(--text-color); } .vote-bar { background: var(--secondary-color); } .btn-primary.active { background-color: var(--important-color) !important; border-color: var(--detail-color-darker) !important; } .article-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .offer-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .offer-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .offer-card img { max-height: 120px; object-fit: contain; } .text-price { color: var(--interaction-color) !important; } .litebans-link { color: white; text-decoration: none; transition: all 0.2s; } .litebans-link:hover { color: var(--interaction-color); text-decoration: underline; } .custom-container { background: var(--secondary-color); border: solid 1px var(--secondary-color-lighter); } .bg-maintenance { background-color: #b44e4e !important; } /*** ANIMATIONS ***/ /* Base commune */ .anim { will-change: transform, opacity, scale; transition: transform var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s), opacity var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s), scale var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s); } /* Apparition = état final */ .is-inview { opacity: var(--to-opacity, 1); } /* ----------- FADE ----------- */ .anim--fade-in { opacity: 0; } .is-inview.anim--fade-in { opacity: 1; } .anim--fade-out { opacity: 1; } .is-inview.anim--fade-out { opacity: 0; } /* ----------- SCALE ----------- */ .anim--scale-in { scale: var(--from-scale, 0); } .is-inview.anim--scale-in { scale: var(--to-scale, 1); } .anim--scale-out { scale: var(--from-scale, 1); } .is-inview.anim--scale-out { scale: var(--to-scale, 0.8); } /* ----------- SLIDE ----------- */ .anim--slide-up { transform: translate3d(0, var(--from-y, 30px), 0); } .is-inview.anim--slide-up { transform: translate3d(0, 0, 0); } .anim--slide-down { transform: translate3d(0, var(--from-y, -30px), 0); } .is-inview.anim--slide-down { transform: translate3d(0, 0, 0); } .anim--slide-left { transform: translate3d(var(--from-x, 1500px), 0, 0); } .is-inview.anim--slide-left { transform: translate3d(0, 0, 0); } .anim--slide-right { transform: translate3d(var(--from-x, -150px), 0, 0); } .is-inview.anim--slide-right { transform: translate3d(0, 0, 0); } /* ----------- COMBINÉS ----------- */ /* Ex. un slide + fade */ .anim--slide-up-fade { opacity: 0; transform: translate3d(0, var(--from-y, 20px), 0); } .is-inview.anim--slide-up-fade { opacity: 1; transform: translate3d(0, 0, 0); } /* Accessibilité */ @media (prefers-reduced-motion: reduce) { .anim { transition: none; } } .anim-logo { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { translate: 0 0; } /* au lieu de transform: translateY(...) */ 50% { translate: 0 -10px; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 177, 101, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(15, 177, 101, 0); } /* rayon du halo */ 100% { box-shadow: 0 0 0 0 rgba(15, 177, 101, 0); } } .spider-fixed { position: absolute; top: 55px; right: 150px; /* sera ajusté par JS selon la vraie hauteur de la navbar */ width: 100px; aspect-ratio: 1/3; z-index: 0; /* au-dessus du contenu */ cursor: pointer; image-rendering: pixelated; /* joli pour style Minecraft */ } .announcement-msg { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); border: 1px solid hsl(from #f08080 h s l / 0.75); background-clip: padding-box; backdrop-filter: blur(25px); /* équivalent à blur-2xl */ -webkit-backdrop-filter: blur(25px); /* compatibilité Safari */ font-weight: 700; } .flex-w-75 { width: 75%; } .identity-img { width: 35%; } .identity-infos { width: 50%; } .vote-bubble { width: 48px; height: 48px; margin-bottom: -24px; } @media (max-width: 992px) { .spider-fixed { position: absolute; top: 75px; right: 60px; /* sera ajusté par JS selon la vraie hauteur de la navbar */ width: 60px; aspect-ratio: 1/3; z-index: 0; /* au-dessus du contenu */ cursor: pointer; image-rendering: pixelated; /* joli pour style Minecraft */ } .flex-w-75, .identity-img, .identity-infos { width: 100%; } .vote-bubble { width: 32px; height: 32px; margin-bottom: -15px; } } .under-navbar { margin-top: 130px; } .text-link { color: white; transition: all ease-in 0.1s; } .text-link:hover { color: var(--important-color); } /* --- CRÉNEAUX AU-DESSUS DU FOOTER --- */ .footer-crenelation { /* la “couleur” sera récupérée pour remplir les blocs via currentColor */ color: var(--secondary-color-darker); line-height: 0; } .footer-crenelation-svg { display: block; width: 100%; height: 16px; /* hauteur des créneaux (mobile) */ } /* Remplit les blocs avec la couleur du footer */ .battlement-fill { fill: currentColor; } /* Responsive : on augmente la taille des blocs (visuellement plus “massif” sur grand écran) */ @media (min-width: 576px) { .footer-crenelation-svg { height: 18px; } } @media (min-width: 992px) { .footer-crenelation-svg { height: 22px; } } /* Fallback très vieux navigateurs (si SVG foire, on garde une bordure carrée propre) */ .footer .no-svg &, .no-svg .footer-crenelation { display: none; } /* Citrouille flottante en bas à droite */ .pumpkin-helper { position: fixed; right: 16px; bottom: 16px; width: 96px; /* ajuste la taille */ max-width: 22vw; /* responsive mobile */ z-index: 9999; /* au-dessus du masque pour pouvoir recliquer */ cursor: pointer; user-select: none; } /* Masque plein écran (texture citrouille) */ .pumpkin-vision-overlay { position: fixed; inset: 0; z-index: 9990; /* sous la citrouille, au-dessus du site */ background-repeat: no-repeat; background-position: center; background-size: cover; background-color: rgba( 0, 0, 0, 0.6 ); /* si ton PNG a de la transparence, léger assombrissement */ display: none; /* caché par défaut */ } /* Lorsque visible */ .pumpkin-vision-overlay.is-visible { display: block; } @media (max-width: 575.98px) { #pe-toast-container { left: 0; right: 0; } #pe-toast-container .toast { margin-left: auto; margin-right: auto; } } /* ============================================================ Copié depuis assets/css/navbar.css (correctif temporaire) : le pipeline de déploiement ne publie pas encore ce nouveau fichier en prod (404 -> refus MIME). À retirer une fois le pipeline corrigé pour ne pas dupliquer ces règles. ============================================================ */ /*** --NAVBAR *** Tout ce qui touche à la navbar (desktop + offcanvas mobile + dropdowns qu'elle ouvre) vit dans ce bloc. Les tailles/couleurs/rayons partagés passent par des classes communes (.nav-pill-link, .dropdown-item, .navbar-brand-*, .navbar-mobile-control) réutilisées telles quelles côté mobile, plutôt que redéfinies à côté. Les variables de couleur (--primary-color, --interaction-color, etc.) sont posées sur :root dans layouts/base.blade.php : elles restent disponibles ici telles quelles, ce fichier n'a besoin d'aucun import particulier. */ /* -- Fond & forme de la barre -- rgba(40,56,82,0.82) sur la page de référence == --primary-color à 82%. */ .navbar { background-color: hsl(from var(--primary-color) h s l / 0.82); border: 1px solid hsl(from var(--detail-color) h s l / 0.75); background-clip: padding-box; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); font-weight: 700; } .navbar-shell { width: 92%; max-width: 1240px; border-radius: 14px; z-index: 1; } @media (min-width: 992px) { .navbar-center-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } /* -- Marque (logo + nom + description), identique desktop/mobile -- */ .navbar-brand-block { gap: 10px; } .navbar-brand-logo { width: 40px; height: 40px; -o-object-fit: cover; object-fit: cover; } .navbar-brand-name { color: var(--text-color); font-size: 15px; letter-spacing: 0.5px; } .navbar-brand-desc { color: var(--important-color); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; } /* -- Liens de nav : base + variante "pilule" partagée desktop/mobile -- .nav-link reste la brique de base (couleur, soulignement) utilisée sur tout le site ; .nav-pill-link est la variante navbar (fond arrondi au survol/actif) posée explicitement en classe là où elle doit s'appliquer, desktop comme mobile. */ .nav-link { color: var(--text-color); text-decoration: none; position: relative; transition: all 0.3s; } .nav-link:hover { color: var(--interaction-color-darker); } .nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; border: none; height: 2px; width: 100%; background-color: var(--interaction-color); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-link:hover::after { transform: scaleX(1); } .nav-item .nav-link.active { color: var(--important-color); } #navbar .nav-link, #mobileMenu .nav-link { font-size: 13px; } #navbar .nav-link::after, #mobileMenu .nav-link::after { display: none; } .nav-pill-link { border-radius: 8px; transition: color 0.25s ease, background-color 0.25s ease; } .nav-pill-link:hover { color: var(--interaction-color); background-color: hsl(from var(--interaction-color) h s l / 0.08); } .nav-pill-link.active { color: var(--important-color); background-color: hsl(from var(--important-color) h s l / 0.1); } .navbar-center-nav .navbar-nav { gap: 6px; } .navbar-center-nav .nav-link { padding: 8px 12px; } /* -- Sous-menus "Le serveur" / compte / notifications (desktop) -- */ .navbar-caret { font-size: 9px; display: inline-block; margin-left: 4px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #navbar .dropdown-toggle::after { display: none; } .navbar-center-nav .dropdown:hover .navbar-caret, .navbar-center-nav .dropdown-toggle[aria-expanded="true"] .navbar-caret { transform: rotate(180deg); } #navbar .dropdown { position: relative; } #navbar .dropdown-menu { display: block; position: absolute; top: calc(100% + 14px); left: 0; right: auto; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s; pointer-events: none; } #navbar .dropdown-menu.dropdown-menu-end { left: auto; right: 0; } #navbar .dropdown-menu.flip-left { left: 0; right: auto; } #navbar .dropdown-menu.flip-right { left: auto; right: 0; } #navbar .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } /* -- Contenu des menus déroulants : desktop ET offcanvas mobile -- */ .dropdown-header { color: var(--text-color); text-transform: uppercase; } .dropdown-menu { background-color: var(--primary-color); border: 1px solid hsl(from var(--detail-color) h s l / 0.75); border-radius: 12px; padding: 6px; } .dropdown-item { border-radius: 8px; transition: background-color 0.15s ease, color 0.15s ease; color: var(--text-color); } .dropdown-item:hover, .dropdown-item:focus { background-color: hsl(from var(--interaction-color) h s l / 0.1); color: var(--interaction-color); } .dropdown-item:active { background-color: hsl(from var(--interaction-color) h s l / 0.16); color: var(--interaction-color); } .dropdown-item.active { background-color: hsl(from var(--important-color) h s l / 0.12); color: var(--important-color); } /* Doit rester après .dropdown-item(:hover/.active) pour gagner sur le jaune à spécificité égale : la déconnexion se distingue en rouge, pas en jaune. */ .dropdown-item-danger { color: #e89a9a; } .dropdown-item-danger:hover, .dropdown-item-danger:focus { background-color: rgba(230, 42, 42, 0.12); color: #e89a9a; } /* -- Bloc d'actions à droite (bouton boutique, séparateur, avatar) -- */ .navbar-actions { gap: 12px; } .navbar-actions .navbar-nav { gap: 12px; } .navbar-shop-btn, .navbar-shop-btn:hover { padding: 9px 18px; border-radius: 9px; color: var(--primary-color) !important; } #navbar .navbar-shop-btn:hover, #mobileMenu .navbar-shop-btn:hover { transform: translateY(-2px) scale(1.05); } #navbar .navbar-shop-btn:active, #mobileMenu .navbar-shop-btn:active { transform: translateY(0) scale(0.97); } .navbar-divider { width: 1px; height: 26px; background-color: hsl(from var(--detail-color) h s l / 0.5); } .profile-picture { height: 40px; width: 40px; border-radius: 7px; background: var(--secondary-color-lighter); border: solid 1px var(--important-color); transition: background-color 0.2s ease-in-out; } .profile-navbar:hover > .profile-picture, .profile-picture[aria-expanded="true"] { background: var(--secondary-color-darker); } .profile-picture-avatar { width: 32px; height: 32px; } /* -- Bulle de notifications : intégrée à la navbar, au même gabarit que l'avatar (carré arrondi, même bordure/fond), pas un élément flottant à part. Elle reste dans le flux normal : son menu déroulant profite donc directement des règles génériques #navbar .dropdown / .dropdown-menu. */ .notifications-bell { padding: 0 !important; } .notifications-bell-orb { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 7px; background: var(--secondary-color-lighter); border: solid 1px var(--important-color); transition: background-color 0.2s ease-in-out; } .notifications-bell:hover .notifications-bell-orb, .notifications-bell[aria-expanded="true"] .notifications-bell-orb { background: var(--secondary-color-darker); } .notifications-bell-orb i { font-size: 14px; color: var(--text-color); } .notifications-bell-count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 16px; display: flex; align-items: center; justify-content: center; animation: notificationsPulse 2s infinite; } @keyframes notificationsPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } @media (prefers-reduced-motion: reduce) { .notifications-bell-count { animation: none; } } .notifications-menu { text-align: left; } /* -- Offcanvas mobile : panneau, contrôles (logo, discord, burger), portrait -- */ .offcanvas-navbar { background-color: var(--primary-color) !important; --bs-offcanvas-width: 340px; } /* Regroupements visuels (profil, nav principale) en cartes discrètes plutôt qu'une longue liste plate séparée par des
. La déconnexion vit maintenant dans l'en-tête de l'offcanvas (icône), pas ici. */ .navbar-mobile-section { background: hsl(from var(--secondary-color-lighter) h s l / 0.5); border: 1px solid hsl(from var(--detail-color) h s l / 0.25); border-radius: 12px; padding: 12px; margin-bottom: 16px; } .navbar-mobile-section:last-child { margin-bottom: 0; } /* Petite "porte" de déconnexion dans l'en-tête de l'offcanvas, à côté du bouton de fermeture, à la place de l'ancien bouton pleine largeur tout en bas du menu (fallait scroller pour le trouver). */ .navbar-mobile-logout-btn { width: 32px; height: 32px; margin-left: 12px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: solid 1px hsl(from #e89a9a h s l / 0.5); background: hsl(from #e89a9a h s l / 0.12); color: #e89a9a; font-size: 16px; transition: background-color 0.15s ease, color 0.15s ease; } .navbar-mobile-logout-btn:hover, .navbar-mobile-logout-btn:focus-visible { background: hsl(from #e89a9a h s l / 0.22); color: #e89a9a; } .navbar-mobile-divider { height: 1px; background: hsl(from var(--detail-color) h s l / 0.25); border: none; margin: 10px 0; } /* "Le serveur" en mobile : simple étiquette de groupe (pas de lien propre), ses enfants suivent juste en-dessous dans une sous-liste indentée. */ .navbar-mobile-group-label { display: block; padding: 8px 12px; color: var(--detail-color); font-size: 12px; } .navbar-mobile-submenu { padding-left: 10px; margin-left: 4px; border-left: 2px solid hsl(from var(--detail-color) h s l / 0.3); } .navbar-mobile-control { width: 40px; height: 40px; border-radius: 7px; border: solid 1px var(--important-color); background: var(--secondary-color-lighter); color: var(--text-color); } .navbar-mobile-control .navbar-toggler-icon { width: 1.1em; height: 1.1em; } .navbar-discord-btn { background: #5865f2; } .navbar-ms-logo { width: 16px; } .navbar-decoration { position: absolute; pointer-events: none; } .navbar-decoration-crow { max-height: 48px; z-index: 2; right: -4px; top: -32px; } .navbar-decoration-rabbit { width: 32px; height: 32px; } .navbar-skin { opacity: 0.6; } .mobile-profile-picture { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--secondary-color-lighter); border: solid 1px var(--important-color); overflow: hidden; } .mobile-profile-picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /*** END --NAVBAR ***/