#social-page .parallax-item:nth-child(1) {
  min-height: 1200px;
}

/** Social Bento Base **/

#social-page a {
  text-decoration: none;
  color: inherit;
}

.social-gridbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, 11.5em);
  grid-auto-rows: 11.5em;
  grid-auto-flow: row dense;
  grid-gap: 24px;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.s,
.m,
.ml,
.l {
  border-radius: 25px;
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--xds-shadow);
}

.s {
  grid-column-end: span 1;
  grid-row-end: span 1;
}

.m {
  grid-column-end: span 1;
  grid-row-end: span 2;
}

.ml {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

.l {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.bento-link {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bento-button {
  width: fit-content;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: baseline;
}

.bento-button span {
  font-size: 12px;
}

.bento-icon {
  line-height: normal;
  padding-bottom: 18px;
}

.bento-icon .icon-bento svg {
  width: 35px;
  height: 35px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15))
}

/** Social Profil **/

.icon-profil {
  height: 200px;
  width: 200px;
  border-radius: 10%;
  background-image: url("../img/photoprofil-GfJlSsM.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--xds-shadow);
}

/** Bento Global **/

.bento-citation,
.bento-contact {
  background-color: var(--bentocolor-neutral-1);
}

.bento-citation:hover,
.bento-contact:hover {
  background-color: var(--bentocolor-hover-neutral-1);
}

.bento-spotify {
  background-color: var(--bentocolor-spotify);
}

.bento-spotify:hover,
.bento-btn-spotify{
  background-color: var(--bentocolor-hover-spotify);
}

.bento-twitch,
.bento-btn-twitch {
  background-color: var(--bentocolor-twitch);
}

.bento-twitch:hover {
  background-color: var(--bentocolor-hover-twitch);
}

.bento-instagram,
.bento-btn-instagram {
  background-color: var(--bentocolor-instagram);
}

.bento-instagram:hover {
  background-color: var(--bentocolor-hover-instagram);
}

.bento-youtube,
.bento-btn-youtube {
  background-color: var(--bentocolor-youtube);
}

.bento-youtube:hover {
  background-color: var(--bentocolor-hover-youtube);
}

.bento-twitter,
.bento-btn-twitter {
  background-color: var(--bentocolor-twitter);
}

.bento-twitter:hover {
  background-color: var(--bentocolor-hover-twitter);
}

.bento-threads,
.bento-btn-threads,
.bento-planning {
  background-color: var(--bentocolor-threads);
}

.bento-threads:hover {
  background-color: var(--bentocolor-hover-threads);
}

.bento-tiktok--fallback {
  background-color: var(--bentocolor-tiktok);
}

.bento-tiktok--fallback:hover {
  background-color: var(--bentocolor-hover-tiktok);
}

.bento-tiktok--has-video,
.bento-tiktok--has-video:hover {
  background-color: transparent;
}

.bento-tiktok__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

.bento-tiktok {
  overflow: hidden;
}

.bento-tiktok .bento-link {
  overflow: hidden;
}

@supports not (object-fit: cover) {
  .bento-tiktok__video {
    width: 100%;
    height: 100%;
  }
}

.bento-discord,
.bento-btn-discord {
  background-color: var(--bentocolor-discord);
}

.bento-discord:hover {
  background-color: var(--bentocolor-hover-discord);
}

.bento-steam,
.bento-btn-steam {
  background-color: var(--bentocolor-steam);
}
.bento-steam:hover {
  background-color: var(--bentocolor-hover-steam);
}

.bento-contact,
.bento-btn-contact {
  background-color: var(--bentocolor-contact);
}
.bento-contact:hover {
  background-color: var(--bentocolor-hover-contact);
}

.bento-discord .bento-link,
.bento-spotify .bento-link {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.bento-discord .bento-text,
.bento-spotify .bento-text {
    position: relative;
    z-index: 1;
}

.bento-discord .bento-image,
.bento-spotify .bento-image {
    position: absolute;
    z-index: 0;
}

.bento-spotify .bento-image {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.bento-discord .bento-image {
    right: 0;
    bottom: 0;
    height: 100%;
    width: 60%;
    overflow: hidden;
    border-radius: 15px;
}

.bento-discord .bento-image .bento-actual-img,
.bento-spotify .bento-image .bento-actual-img {
    position: absolute;
    right: 0;
    bottom: 0;
    object-fit: cover;
}

.bento-discord .bento-image .bento-actual-img {
    width: 130%;
    height: 170%;
    object-position: -150px 20px;
}

.bento-spotify .bento-image .bento-actual-img {
    width: 45%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
}

/** Bento Buttons **/
.bento-btn-discord,
.bento-btn-instagram,
.bento-btn-twitch,
.bento-btn-youtube,
.bento-btn-twitter,
.bento-btn-threads,
.bento-btn-steam,
.bento-btn-spotify,
.bento-btn-tik-tok {
  color: white;
  box-shadow: var(--xds-shadow);
}


/** Music Particles **/
.bento-spotify,
.bento-spotify .bento-infos {
  overflow: visible;
}

.bento-btn-spotify {
  z-index: 10;
  position: relative;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

/* Container de référence centré sur le bouton */
#particleContainer {
    position: absolute;
    top: 65%;
    left: 10%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none; /* TRÈS important */
}

/* Particule (note) */
.music-note {
    position: absolute;
}

.music-note .icon-spotify svg {
    display: block;
    width: 15px;
    height: 15px;
}

#playState, #stopState {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

#playState .icon-bento svg, #stopState .icon-bento svg {
  width: 16px;
  height: 16px;
}


/* Animation */
@keyframes flyAndFade {
    0% {
        /* Démarrage: Opacité 0 pour un fondu */
        opacity: 0;
        transform: translate(0, 0) scale(1); /* Taille normale, pas de déplacement */
    }
    10% {
        /* Point d'apparition: Opacité maximale peu après le départ */
        opacity: 1;
    }
    100% {
        /* Fin: La particule s'éloigne et disparaît */
        opacity: 0;
        /* Le mouvement est défini par les variables --rand-x et --rand-y */
        transform: translate(var(--rand-x), var(--rand-y)) scale(0.5);
    }
}

/** Responsive Design **/

@media (max-width: 575.98px) {

  .l,
  .ml,
  .m {
    grid-column-end: span 1;
    grid-row-end: span 1;
  }


  #social-page .social-gridbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px;
  }

  #social-page .social-gridbox .s,
  #social-page .social-gridbox .m,
  #social-page .social-gridbox .ml,
  #social-page .social-gridbox .l {
    aspect-ratio: 1 / 1;
  }

  .icon-profil {
    height: 120px;
    width: 120px;
  }

  #social-page .social-gridbox .bento-spotify,
  #social-page .social-gridbox .bento-contact{
    grid-column-end: span 2;
    grid-row-end: span 1;
    aspect-ratio: 2 / 1;
  }


  #social-page .social-gridbox .bento-twitch{
    grid-column-end: span 2;
    grid-row-end: span 1;
    aspect-ratio: auto;
  }

  .bento-discord .bento-image {
    display: none;
  }

  .bento-spotify .bento-image .bento-actual-img {
    width: 50%;
    height: 100%;
  }
  .bento-twitch .bento-planning {
    display: block;
  }

  .bento-tiktok__video {
    display: none;
  }

}


#social-profile-sticky {
    position: static;
}

@media (min-width: 992px) {
    #social-profile-sticky {
        position: sticky;
        top: 150px;
    }
}