/* Styles du curseur */
.cursor {
  width: 20px;
  height: 20px;
  background-color: #00a0d3;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-out, opacity 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Curseur blanc dans le footer et les sections marquee */
.cursor.cursor-white {
  background-color: #f3f3f0;
}

.cursor::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(0);
  transition: all 0.3s ease-out;
}

/* Hover blanc avec icône bleue */
.cursor.cursor-white.link-hover {
  background-color: #f5f5f5;
}

.cursor.cursor-white.link-hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='%2300a0d3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cursor.link-hover {
  width: 80px;
  height: 80px;
  background-color: #00a0d3;
}

.cursor.link-hover:not(.nav-hover)::before {
  opacity: 1;
  transform: scale(1);
}

.cursor.nav-hover {
  width: 40px;
  height: 40px;
}

/* Style pour le curseur grab sur les réalisations */
.cursor.grab {
  width: 80px;
  height: 80px;
  background-color: #00a0d3;
}

.cursor.grab::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8l4 4-4 4M7 8l-4 4 4 4M3 12h18'/%3E%3C/svg%3E");
  opacity: 1;
  transform: scale(1.5);
}

.cursor.grabbing {
  width: 75px;
  height: 75px;
  background-color: #00a0d3;
}

.cursor.grabbing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8l4 4-4 4M7 8l-4 4 4 4M3 12h18'/%3E%3C/svg%3E");
  transform: scale(1.4);
}

@media (max-width: 768px) {
  .cursor {
    display: none;
  }
}

.logo:hover ~ .cursor {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo:hover ~ .cursor::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Styles pour le bouton mail magnétique */
.magnetic-area {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.magnet-btn {
  position: relative;
  border: none;
  background: #00a0d3;
  color: #fff;
  padding: 20px 40px;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.magnet-btn p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.magnet-btn:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .magnetic-area {
    width: 150px;
    height: 150px;
  }

  .magnet-btn {
    width: 100px;
    height: 100px;
    padding: 15px 30px;
  }
}

/* Curseur pour le bouton mail */
.cursor.mail-hover {
  width: 65px;
  height: 65px;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  border: 2px solid #00a0d3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor.mail-hover::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17' stroke='%2300a0d3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1);
}

@media (max-width: 768px) {
  .magnetic-area {
    width: 150px;
    height: 150px;
  }

  .magnet-btn {
    width: 100px;
    height: 100px;
    padding: 15px 30px;
  }
}