/* Polices */
@font-face {
  font-family: 'ArialRoundedBold';
  src: url('../fonts/ArialRoundedMT-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'ArialRoundedRegular';
  src: url('../fonts/ArialRoundedMT-Regular.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'ArialRoundedRegular', sans-serif;
  color: white;
  background: #59004a;
  background: -webkit-linear-gradient(90deg,rgba(89, 0, 74, 1) 0%, rgba(156, 0, 148, 1) 50%, rgba(76, 0, 84, 1) 100%);
  background: -moz-linear-gradient(90deg,rgba(89, 0, 74, 1) 0%, rgba(156, 0, 148, 1) 50%, rgba(76, 0, 84, 1) 100%);
  background: linear-gradient(90deg,rgba(89, 0, 74, 1) 0%, rgba(156, 0, 148, 1) 50%, rgba(76, 0, 84, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr="#59004A",
    endColorstr="#4C0054",
    GradientType=1
  );
  text-align: center;
  position: relative;
}

.intro {
  position: relative;
  z-index: 1;
  padding-top: 8vh;
  margin-bottom: 1vh;
}

h1 {
  font-family: 'ArialRoundedBold', sans-serif;
  font-size: 6vh;
  margin: 0;
  color: transparent; /* On cache le remplissage */
  -webkit-text-stroke: 1px #ffffff; /* Contour rose vif */
  text-shadow:
    0 0 5px #ff66cc,
    0 0 10px #ff66cc,
    0 0 20px #ff66cc,
    0 0 40px #ff33aa,
    0 0 80px #ff33aa,
    0 0 100px #ff33aa;
  animation: neonGlow 2s ease-in-out infinite alternate;
}

/* Animation douce pour un effet "tube néon" qui pulse */
@keyframes neonGlow {
  from {
    text-shadow:
      0 0 5px #ff66cc,
      0 0 10px #ff66cc,
      0 0 20px #ff66cc,
      0 0 40px #ff33aa,
      0 0 80px #ff33aa,
      0 0 100px #ff33aa;
  }
  to {
    text-shadow:
      0 0 10px #ff99dd,
      0 0 20px #ff99dd,
      0 0 40px #ff66cc,
      0 0 80px #ff3399,
      0 0 120px #ff3399,
      0 0 200px #ff3399;
  }
}

.projets-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vh;
  padding: 0 2vh;
}

.box {
  background-color: rgba(0, 0, 0, 0.50);
  padding: 4vh;
  border-radius: 2vh;
  margin: 5vh;
  flex: 1 1 300px;
  max-width: 350px;
  box-sizing: border-box;
}

.box p {
  font-size: 1.8vh;
  margin-top: 1vh;
  margin-bottom: 2vh;
}

button {
    background-color: black;
    color: white;
    font-size: 1.75vh;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #666;
}

.infoscomp {
  vertical-align: middle;
  align-items: center;
}

.infoscomp img{
  height: 5vh;
}

.icon {
  height: 3vh;
  margin-bottom: 5px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

input, textarea {
    background-color: #575757bb;
    border: none;
    border-radius: 5px;
    color: #fff;
    height: 3vh;
    margin-top: 1vh;
    padding: 0.3vh;
}