:root {
  --white: #fafaf8;
  --black: #1a1a1a;
}

body {
   cursor: url(https://cdn.prod.website-files.com/682310547ba9eeb97324a89e/682510013bf56c1de91cc6b6_cursor-default%402x.svg) 2 0, auto;
}

body a,
body button{
   cursor: url(https://cdn.prod.website-files.com/682310547ba9eeb97324a89e/682510005ac62e3f220e8f48_cursor-pointer%402x.svg) 2 0, auto;
}

body input,
body textarea{
   cursor: url(https://cdn.prod.website-files.com/682310547ba9eeb97324a89e/68251000735e1ffa3cdf5fdd_cursor-text%402x.svg) 2 0, auto !important;
}
.text-white {
  color: var(--white) !important;
}
.text-black {
  color: var(--black) !important;
}
.vc_text-black {
  color: var(--black);
}
.vc_text-white {
  color: var(--white);
}

body {
  background-color: var(--white);
  color: var(--black);
}
 /* Chevron au hover uniquement */
    .nav-link,
    .btn-site {
      position: relative;
      display: inline-flex;
      align-items: center;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .nav-link::before,
    .btn-site::before {
      content: '›';
      position: absolute;
      left: -0.5rem;
      opacity: 0;
      transform: translateX(-5px);
      transition: all 0.3s ease;
      color: var(--black);
    }

    .nav-footer .nav-link::before {
            color: var(--white);

    }

    .nav-link:hover::before,
    .btn-site:hover::before {
      opacity: 1;
      transform: translateX(0);
    }

    .vc_principal-texte {
      font-weight: 700;
      line-height: 1.2;
      margin: 2rem 0;
      text-align: center;
      color: var(--black);
    }


.avis-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}

.card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  max-width: 250px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

.logo-client {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%;
  margin-bottom: 10px;
}

.nom-client {
  font-weight: bold;
  margin-bottom: 10px;
}

.avis {
  font-size: 14px;
  margin-bottom: 15px;
}

.stars {
  color: gold;
  font-size: 18px;
}


/*Contact Form */
input#email::placeholder,
textarea#message::placeholder {
  color: var(--white);
  text-align: end;
  text-transform: uppercase;
}


/* 1. On cache le curseur natif dès que l'on survole une image */
#vc_carousel-scroll img:hover {
  cursor: none;
}

/* 2. Le rond noir centré sur la souris */
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;       /* pour centrer le cercle sur la souris */
  border-radius: 50%;
  background: black;
  color: white;
  font: 10px/1 sans-serif;
  display: none;                /* caché par défaut */
  align-items: center;
  justify-content: center;
  pointer-events: none;         /* pour que le div ne bloque pas les clics */
  z-index: 9999;
  user-select: none;
}

/* 3. On n’affiche le curseur personnalisé que quand le natif est caché */
body.cursor-hidden .custom-cursor {
  display: flex;
}

.logo-experience {
  max-width: 250px;
}


#grain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
}