/* === Bouton 3 (Menu) === */
.button3 {
  position: relative;
  padding: 2px;
  border: none;
  border-radius: 16px;
  background: radial-gradient(circle 80px at 80% -10%, #008cff9c, #0084ff46);
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.button3:hover {
  transform: scale(0.98);
}

.button3::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 60%;
  border-radius: 120px;
  z-index: -1;
  transition: box-shadow 0.3s;
}

.blob3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 100%;
  border-radius: 16px;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #0066ffff,
    #0066ffff,
    transparent
  );
  transition: background 0.3s;
}

.inner3 {
  position: relative;
  z-index: 3;
  padding: 14px 25px;
  border-radius: 14px;
  color: #000000;
  background: radial-gradient(circle 80px at 80% -50%, #ffffffc9, #ffffff);
  transition: background 0.3s, box-shadow 0.3s, color 0.3s, padding 0.3s;
}

.button3:hover .inner3 {
  background: radial-gradient(circle 80px at 80% -50%, #b9b9b9, #0f0f0f);
  color: #ffffff;
  box-shadow: 0 0 10px 5px #0000005e;
}

.inner3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: radial-gradient(
    circle 60px at 0% 100%,
    #0066ff2f,
    #0066ff21,
    transparent
  );
  transition: opacity 0.3s;
}
.button3:hover .inner3::before {
  opacity: 0;
}

/* === Bouton Contact === */
.contact-btn {
  position: relative;
  padding: 1px;
  margin-left: auto;
  border: none;
  border-radius: 16px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  background: transparent;
  transition: transform 0.3s;
}
.contact-btn:hover {
  background: radial-gradient(circle 80px at 80% -10%, #dce6e6ff, #ffffffff);
  transform: scale(0.98);
}

.contact-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 60%;
  border-radius: 0px;
  z-index: -1;
  transition: box-shadow 0.3s;
}

.contact-blob1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 100%;
  border-radius: 16px;
  transition: background 0.3s, box-shadow 0.3s;
}

.contact-inner {
  position: relative;
  z-index: 3;
  padding: 14px 25px;
  border-radius: 14px;
  color: #ffffffff;
  background: radial-gradient(circle 80px at 80% -50%, #000000a2, #000000ff);
  transition: background 0.3s, color 0.3s, padding 0.3s;
}
.contact-btn:hover .contact-inner {
  background: radial-gradient(
    circle 80px at 80% -50%,
    rgb(153, 153, 153),
    #fcfcfcff
  );
  color: #000000ff;
}

.contact-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  transition: opacity 0.3s;
}

.contact-btn .dots_border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  background-color: transparent;
  border-radius: 14px;
  z-index: -10;
  overflow: hidden;
}
.contact-btn .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform-origin: left;
  transform: rotate(0deg);
  width: 100%;
  height: 2rem;
  background-color: rgb(0, 0, 0);
  mask: linear-gradient(transparent 0%, white 120%);
  animation: rotate 2.5s linear infinite;
}
.contact-btn .dots_border:hover::before {
  animation: rotate 1s infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}