/* CONTENU */
.footer-content {
  padding: 3rem;
  height: 100%;
}

.footer-container .footer-content:nth-of-type(2) {
  margin-left: 20px;
}

/* BLOC GAUCHE – NUIT */
.footer-dark {
  background: linear-gradient(180deg, #141414, #0b0b0b);
  color: #fff;
}
.footer-dark-section {
  display: flex;
  align-items: center;
}

.footer-logo img {
  width: 80px;
  margin-bottom: 1rem;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.footer-logo img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255,75,75,0.5));
}

.footer-brand {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Hanson';
}

.footer-desc {
  color: #bdbdbd;
  font-size: 0.95rem;
  margin: 1rem 0;
}

.footer-copy {
  font-size: 0.85rem;
  opacity: 0.7;
}

.footer-credit-btn {
  margin-top: 1.5rem;
  border-radius: 30px;
  padding: 0.4rem 1rem;
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  transition: all 0.3s ease;
}

.footer-credit-btn:hover {
  background: #505050;
}

/* BLOC DROIT – CLAIR */
.footer-light {
  background: #f7f7f7;
  color: #111;
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer-light h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  position: relative;
  font-weight: 600;
  font-family: 'Hanson';
  text-transform: uppercase;
}

.footer-light h4::after {
  content: "";
  width: 30px;
  height: 2px;
  display: block;
  margin-top: 6px;
}

/* LIENS */
.footer-links {
  list-style: none;
  padding: 0;
  padding-left: 15px;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  text-decoration: none;
  color: #111;
  font-weight: 500;
  transition: color 0.25s ease;
}

/* LINK HOVER EFFECTS */
.xdsbtn-accueil:hover {
  color: var(--xdsbtn-hover-Home);
}
.xdsbtn-planning:hover {
  color: var(--xdsbtn-hover-Planning);
}
.xdsbtn-cards:hover {
  color: var(--xdsbtn-hover-Cards);
}
.xdsbtn-bouftypedia:hover {
  color: var(--xdsbtn-hover-BouftyPedia);
}
.xdsbtn-gameotheques:hover {
  color: var(--xdsbtn-hover-Gameotheques);
}
.xdsbtn-commands:hover {
  color: var(--xdsbtn-hover-Commands);
}
.xdsbtn-setups:hover {
  color: var(--xdsbtn-hover-Setups);
}
.xdsbtn-article:hover {
  color: var(--xdsbtn-hover-Article);
}
.xdsbtn-portfolio:hover {
  color: var(--xdsbtn-hover-Portfolio);
}
.xdsbtn-samedi:hover {
  color: var(--xdsbtn-hover-SdR);
}
.xdsbtn-dreamrelax:hover {
  color: var(--xdsbtn-hover-DreamRelax);
}
.xdsbtn-social:hover {
  color: var(--xdsbtn-hover-Social);
}

/* ICON COLORS AND HOVER EFFECTS */

.xdsbtn-all .icon svg {
  color: #dbdbdb;
  transition: color 0.3s ease;
  width: 26px;
  height: 26px;
}

.xdsbtn-twitch .icon svg:hover {
  color: var(--xdsbtn-hover-Twitch)
}
.xdsbtn-instagram .icon svg:hover {
  color: var(--xdsbtn-hover-Instagram)
}
.xdsbtn-threads .icon svg:hover {
  color: var(--xdsbtn-hover-Threads)
}
.xdsbtn-bluesky .icon svg:hover {
  color: var(--xdsbtn-hover-Bluesky)
}
.xdsbtn-tiktok .icon svg:hover {
  color: var(--xdsbtn-hover-Tiktok)
}
.xdsbtn-youtube .icon svg:hover {
  color: var(--xdsbtn-hover-YouTube)
}
.xdsbtn-discord .icon svg:hover {
  color: var(--xdsbtn-hover-Discord)
}



/* Réseaux minimalistes */
.footer-socials-minimal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-left: 15px;
}

.footer-socials-minimal a {
  color: #111;
  font-size: 1.4rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.6;
}

.footer-socials-minimal a:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* SVG icons */
.footer-socials-minimal .icon svg {
  width: 30px;
  height: 30px;
}

.footer-bg-decor {
  bottom: 0;
  position: absolute;
  right: 50px;
  height: 250px;
}

.footer-cookie-action {
  margin-top: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0.25rem;
}

.footer-cookie-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d2d2d2;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  transition: all 0.25s ease;
}

.footer-cookie-link:hover {
  color: var(--xdsbtn-hover-Threads);
  border-color: var(--xdsbtn-hover-Threads);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .footer-content {
    padding: 2rem;
  }

  .footer-bg-decor {
    right: -50px;
  }

  .footer-socials-minimal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 40px));
    gap: 0.8rem 1rem;
    justify-content: start;
  }

  .footer-cookie-action {
    margin-top: 0.5rem;
    padding-bottom: 0;
  }

}


.like-button {
  border: 2px solid #c7c7c7;
  border-radius: 40px;
  padding: 0.45rem 0.75rem;
  color: #878787;
  font-family: 'Hanson', sans-serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.like-button.liked {
  color: #ff4b4b;
  border-color: currentColor;
}

.like-button:hover {
  border-color: currentColor;
}

.like-icon {
  width: 18px;
  height: 16px;
  display: inline-block;
  position: relative;
  margin-right: 0.25em;
  font-size: 1.5rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  -webkit-animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartUnlike 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon {
  -webkit-animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon [class^=heart-animation-] {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 14px;
  opacity: 0;
}

.liked .like-icon [class^=heart-animation-]::before,
.liked .like-icon [class^=heart-animation-]::after {
  content: "";
  background: inherit;
  background-size: 100%;
  width: inherit;
  height: inherit;
  display: inherit;
  position: relative;
  top: inherit;
  left: inherit;
  opacity: 0;
}

.liked .like-icon .heart-animation-1 {
  -webkit-animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::before,
.liked .like-icon .heart-animation-1::after {
  width: 12px;
  height: 10px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-1::before {
  opacity: 0.6;
  -webkit-animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-1::after {
  -webkit-animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.75;
}

.liked .like-icon .heart-animation-2 {
  -webkit-animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.liked .like-icon .heart-animation-2::before,
.liked .like-icon .heart-animation-2::after {
  width: 10px;
  height: 8px;
  visibility: hidden;
}

.liked .like-icon .heart-animation-2::before {
  -webkit-animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.25;
}

.liked .like-icon .heart-animation-2::after {
  -webkit-animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  opacity: 0.4;
}

@-webkit-keyframes heartPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }
}

@keyframes heartPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }
}

@-webkit-keyframes heartUnlike {
  50% {
    transform: scale(0.75);
  }
}

@keyframes heartUnlike {
  50% {
    transform: scale(0.75);
  }
}

@-webkit-keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0);
  }

  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg);
  }
}

@keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0);
  }

  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg);
  }
}

@-webkit-keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0);
  }

  50% {
    opacity: 0.9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1);
  }
}

@keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0);
  }

  50% {
    opacity: 0.9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1);
  }
}

@-webkit-keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg);
  }
}

@keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg);
  }
}

@-webkit-keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg);
  }
}

@keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg);
  }
}

@-webkit-keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg);
  }

  100% {
    transform: translate(-50px, 0);
  }
}

@keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg);
  }

  100% {
    transform: translate(-50px, 0);
  }
}

@-webkit-keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg);
  }
}

@keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0);
  }

  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg);
  }
}