@charset "UTF-8";

html,
body {
  overflow: hidden; /* empêche le scroll */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  font-size: 20px;
  line-height: 1;
  background: rgb(199, 198, 198);
  color: black;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 2px; /* espace entre les calques */
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.footer-calque {
  position: relative;
  width: 150px;
  height: 150px;
}

.footer-boutons-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

section,
.footer-titre {
  pointer-events: none;
}
.footer-titre {
  position: absolute;
  top: 46%;
  left: -18%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  width: 200px; /* ou 80%, selon ce que tu veux */
}
.footer-titre.titre-1 {
  animation: float 3s ease-in-out infinite;
  animation-delay: 0;
}

.footer-titre.titre-2 {
  animation: float 3s ease-in-out infinite;
  animation-delay: -0.6s;
}

.footer-titre.titre-3 {
  animation: float 3s ease-in-out infinite;
  animation-delay: -1.2s;
  top: 36%;
}

.footer-titre.titre-4 {
  animation: float 3s ease-in-out infinite;
  animation-delay: -1.8s;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Button link */
.footer-boutons a {
  position: relative;
  z-index: 10;
}

/* Kaleidoscope button style */
.container-kaleidoscope {
  box-sizing: border-box;
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-top: 10px;
}

/* Button backgrounds by color */
.footer-boutons-bleu .container-kaleidoscope {
  background-image: url(../images/Boutons/bouton-03.png);
}
.footer-boutons-rose .container-kaleidoscope {
  background-image: url(../images/Boutons/bouton-04.png);
}
.footer-boutons-vert .container-kaleidoscope {
  background-image: url(../images/Boutons/bouton-08.png);
}
.footer-boutons-jaune .container-kaleidoscope {
  background-image: url(../images/Boutons/bouton-01.png);
}

/* Segment and dot styles (keep your animation and segment rules as needed) */
.container-kaleidoscope .segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  overflow: hidden;
}
.footer-calque .container-kaleidoscope .segment.is-16 {
  clip-path: polygon(0 0, 60% 0, 100% 100%);
  animation: animimage ease infinite;
  /* animation-duration: 3s; */
}

.footer-calque:nth-child(1) .container-kaleidoscope .segment.is-16 {
  animation-delay: -1;
  animation-duration: 2.8s;
}
.footer-calque:nth-child(2) .container-kaleidoscope .segment.is-16 {
  animation-delay: -1.2s;
  animation-duration: 3s;
}
.footer-calque:nth-child(3) .container-kaleidoscope .segment.is-16 {
  animation-delay: -1.5s;
  animation-duration: 3.2s;
}
.footer-calque:nth-child(4) .container-kaleidoscope .segment.is-16 {
  animation-delay: -1.9s;
  animation-duration: 2.8s;
}

.footer-boutons-bleu .container-kaleidoscope .segment.is-16 {
  background-image: url(../images/Boutons/bouton-07.png);
  background-size: 200% 200%;
}
.footer-boutons-rose .container-kaleidoscope .segment.is-16 {
  background-image: url(../images/Boutons/bouton-13.png);
  background-size: 200% 200%;
}
.footer-boutons-vert .container-kaleidoscope .segment.is-16 {
  background-image: url(../images/Boutons/bouton-05.png);
  background-size: 200% 200%;
}
.footer-boutons-jaune .container-kaleidoscope .segment.is-16 {
  background-image: url(../images/Boutons/bouton-05.png);
  background-size: 200% 200%;
}

.container-kaleidoscope .segment .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  filter: blur(15px);
  animation: animdot 10s linear infinite;
  mix-blend-mode: color-burn;
}

/* Example dot gradients (customize as needed) */
.footer-boutons-bleu .container-kaleidoscope .segment .dot {
  background-image: radial-gradient(
    circle,
    rgb(201, 255, 170),
    rgb(59, 181, 146) 50%,
    rgb(96, 255, 109) 100%
  );
}
.footer-boutons-rose .container-kaleidoscope .segment .dot {
  background-image: radial-gradient(
    circle,
    rgb(155, 153, 255),
    rgb(223, 209, 255) 50%,
    rgb(117, 96, 255) 100%
  );
}
.footer-boutons-vert .container-kaleidoscope .segment .dot {
  background-image: radial-gradient(
    circle,
    rgb(255, 170, 215),
    rgb(255, 114, 166) 50%,
    rgb(212, 106, 139) 100%
  );
}
.footer-boutons-jaune .container-kaleidoscope .segment .dot {
  background-image: radial-gradient(
    circle,
    rgb(233, 233, 146),
    rgb(237, 237, 121) 50%,
    rgb(255, 255, 255) 100%
  );
}

/* Animations */
@keyframes animdot {
  0% {
    transform: translate3d(100%, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 60%, 0) rotate(180deg);
  }
  100% {
    transform: translate3d(100%, 0, 0) rotate(360deg);
  }
}
@keyframes animimage {
  0% {
    background-size: 300% 300%;
  }
  50% {
    background-size: 250% 250%;
  }
  100% {
    background-size: 300% 300%;
  }
}

/* Title image corners */
.full-screen-title {
  position: fixed;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  width: 100%;
  text-align: center;
  z-index: 20;
  margin: 0;
}
.title-img {
  position: absolute;
  width: 24%;
  height: auto;
  z-index: 10;
  padding: 0 8px;
}
.title-img.tl {
  top: 0;
  left: 0;
}
.title-img.tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}
.title-img.bl {
  bottom: 0;
  left: 0;
  width: 22%;
}
.title-img.br {
  bottom: 0;
  right: 0;
  width: 22%;
  transform: scaleX(-1);
}

/* Responsive adjustments */
@media screen and (min-width: 768px) {
  body {
    font-size: 24px;
  }
  .title-img.bl,
  .title-img.br {
    width: 14%;
  }
  .title-img {
    width: 16%;
  }
  .container-kaleidoscope {
    width: 470px;
    height: 470px;
  }

  .footer {
    flex-direction: row;
    flex-wrap: wrap;
    width: 580px; /* 2 blocs de 200px + 2x20px gap */
    height: 580px; /* idem pour former un carré */
    gap: 240px;
    justify-content: center;
    align-items: center;
  }
  .footer-titre {
    width: 230px;
    left: -26%;
  }

  .full-screen-title {
    height: 100vh;
  }
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 30px;
  }

  .title-img.bl,
  .title-img.br {
    width: 12%;
  }
  .title-img {
    width: 12%;
  }
  .container-kaleidoscope {
    width: 500px;
    height: 500px;
  }

  .footer {
    flex-direction: row;
    flex-wrap: wrap;
    width: 600px; /* 2 blocs de 200px + 2x20px gap */
    height: 600px; /* idem pour former un carré */
    gap: 270px;
    justify-content: center;
    align-items: center;
  }

  .footer-titre {
    width: 300px;
    left: -45%;
  }

  .full-screen-title {
    height: 100vh;
  }
}