@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;
}

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;
}

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;
}

.server-info-span {
  background: var(--secondary-color-lighter);
  border: solid 2px var(--important-color);
}

.status-dot {
  position: relative;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgb(15, 177, 101); /* vert Bootstrap */
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(15, 177, 101, 0.5);
  animation: pulse 1.5s ease-out infinite;
}

.status-dot-online {
  position: relative;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(177, 15, 15, 0.5);
}

.mc-version {
  color: var(--text-color);
  font-weight: bold;
}

.mc-icon-img {
  filter: drop-shadow(-1px 4px 5px rgba(0, 0, 0, 0.5));
}

/*** --- ***/

/*** HOME : ABOUT SECTION ***/

.crown-img {
  width: 32px;
  height: 32px;
  top: -8px;
  left: -8px;
}

@media (max-width: 767.98px) {
  .crown-img {
    width: 24px;
    height: 24px;
    top: -8px;
    left: -6px;
  }
}

/*** --- ***/

/*** HOME : VOTE SECTION ***/

.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);
}

.card-shop {
  width: 250px;
  height: 250px;
}

.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 ***/

/*** --BOOTSTRAP ***/
.bg-secondary-color {
  background-color: hsl(
    from var(--secondary-color) h s l / var(--bs-bg-opacity)
  ) !important;
}

/*** --NAVBAR ***/
.navbar {
  border: 1px solid hsl(from var(--detail-color) 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;
}

.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);
}

.nav-item.active-mobile {
  background: var(--secondary-color-lighter);
  border-radius: 5px;
}

.profile-picture {
  height: 48px;
  width: 48px;
  background: var(--secondary-color-lighter);
  border: solid 1px var(--important-color);
  transition: background-color 0.2s ease-in-out;
}

.profile-navbar:hover > a.profile-picture {
  background: var(--secondary-color-darker);
}

/*** END --NAVBAR ***/

.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;
}

.copyright {
  background: rgba(0, 0, 0, 0.25);
}

.footer {
  background-color: var(--secondary-color-darker) !important;
  color: #f3f3f3;
}

.footer a.btn-primary {
  background-color: #b0c4de;
  color: #333;
}

.footer a.btn-primary:hover {
  background-color: #8ca9cf;
}

.footer a.btn-warning {
  background-color: #f3c06b;
  color: #333;
}

.footer a.btn-warning:hover {
  background-color: #efac3c;
}

.footer .text-light {
  color: #ddd;
}

.footer .text-decoration-none:hover {
  color: #ccc;
  text-decoration: underline;
}

.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;
}

.shop-card {
  width: 250px;
  height: 325px;
  background: var(--secondary-color);

  color: var(--text-color);
  border: solid 1px var(--important-color) !important;
  transition: all 0.2s ease-in-out;
}

.shop-card:hover {
  cursor: pointer;
  transform: scale(0.9);
  background: var(--secondary-color-lighter) !important;
}
/* - */

/*** 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);
  -webkit-mask-image: url("../img/flag.png");
  mask-image: url("../img/flag.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");
  mask-image: url("../img/flag.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));
}

/*** ***/

.navbar-skin {
  opacity: 0.6;
}

.dropdown-header {
  color: var(--text-color);
  text-transform: uppercase;
}

.dropdown-menu {
  background-color: var(--secondary-color-lighter);
  border: solid 1px var(--primary-color);
}

.dropdown-item {
  transition: all 0.1s;
  color: var(--text-color);
}

.dropdown-item:hover {
  background-color: var(--secondary-color);
  color: var(--text-color-darker);
}

.dropdown-item:focus,
.dropdown-item:active {
  background-color: var(--secondary-color-darker);
  color: var(--text-color-darker);
}

.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;
}

.shop-link {
  background: var(--interaction-color);
  border-radius: 5px;
  transition: 0.25s all;
}

.shop-link:hover {
  background: var(--interaction-color-darker);
  color: var(--text-color);
}

.nav-link.shop-link::after,
.nav-link.drop-link::after,
.nav-link#notificationsDropdown::after {
  content: "";
  width: 0px;
  height: 0px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown .dropdown-menu {
  display: block; /* important pour les animations */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  margin-top: 10px;

  right: 0;
  left: auto;
}

.mobile-profile-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  background: var(--secondary-color-lighter);
  border-radius: 100%;
  padding: 0px !important;
  border: solid 1px var(--detail-color);
  transition: background-color 0.2s ease-in-out;
}

.dropdown-item.nav-link.active.profile {
  background: none !important;
}

.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 */
}

.frankenstein-wrap .theme-button {
  position: relative;
  z-index: 1; /* bouton au-dessus */
}

.frankenstein-gif {
  z-index: 0; /* image en-dessous */
  pointer-events: none; /* évite de bloquer le clic du bouton */
  left: 50%;
  transform: translateX(-50%); /* centré sous le bouton */
  bottom: 25px; /* ajuste verticalement sous le bouton */
  width: 550px; /* ajuste la taille selon ton visuel */
  object-fit: contain;
  opacity: 0.95; /* optionnel : léger fondu */
}

.easter_rabbit {
  z-index: 2; /* image en-dessous */
  pointer-events: none; /* évite de bloquer le clic du bouton */
  left: 50%;
  transform: translateX(-50%) scaleX(-1);
  bottom: 100px; /* ajuste verticalement sous le bouton */
  width: 80px; /* ajuste la taille selon ton visuel */
  object-fit: contain;
  opacity: 0.95; /* optionnel : léger fondu */
}

.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;
}

.aside-shop {
  min-height: 100vh;
}

.aside-section-shop {
  margin-top: 130px;
}

.main-shop {
  margin-top: 130px;
}

@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;
  }

  .frankenstein-gif {
    width: 500px; /* ajuste la taille selon ton visuel */
  }

  .aside-shop {
    height: auto;
    position: static;
    margin-top: 0px;
  }

  .main-shop {
    margin-top: 0px;
  }
}

.under-navbar {
  margin-top: 130px;
}

.text-link {
  color: white;
  transition: all ease-in 0.1s;
}

.text-link:hover {
  color: var(--important-color);
}

.dropdown-item.active {
  background-color: var(--secondary-color) !important;
}

.category-shop {
  transition: transform 0.15s ease-in;
}

.category-shop:hover {
  transform: scale(0.95);
  cursor: pointer;
}

/* --- 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;
}

.shop-rank-category {
  filter: hue-rotate(0deg) brightness(0.9) saturate(1);
}

.shop-key-category {
  filter: hue-rotate(60deg) brightness(0.9) saturate(1.2);
}

.shop-pet-category {
  filter: hue-rotate(120deg) brightness(0.9) saturate(1.4);
}

.shop-limited-category {
  filter: hue-rotate(180deg) brightness(0.9) saturate(1.6);
}

@media (max-width: 575.98px) {
  #pe-toast-container {
    left: 0;
    right: 0;
  }
  #pe-toast-container .toast {
    margin-left: auto;
    margin-right: auto;
  }
}