* {
  padding: 0;
  margin: 0;
  text-decoration: unset;
  list-style: none;
  font-family: 'Poppins', sans-serif;
}
html, body {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  overflow-x: hidden;
}
/* body:before {
  content: "<>";
  font-size: 1000px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( -90deg, #fff, #ababab);
  font-weight: 800;
  filter: blur(30px);
  width: 100%;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
} */


#conversationContainer {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #f9f9f9; /* Couleur de fond de la zone de conversation */
}

#inputContainer {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff; /* Couleur de fond de la zone de saisie */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Ombre pour séparer visuellement la zone de saisie */
}

#textInput {
  flex-grow: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ddd; /* Couleur de la bordure */
  border-radius: 20px; /* Arrondi des coins */
  outline: none; /* Supprime l'outline par défaut */
}

#fileInputLabel {
  cursor: pointer;
  margin-right: 10px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}


#sendButton {
  padding: 10px 20px;
  background-color: #007BFF; /* Couleur de fond du bouton */
  color: white;
  border: none;
  border-radius: 20px; /* Arrondi des coins */
  cursor: pointer;
}

#sendButton:hover {
  background-color: #0056b3; /* Couleur de fond du bouton au survol */
}

/* Style pour les messages (à personnaliser selon vos besoins) */
.message {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f1f1f1; /* Couleur de fond des messages */
  border-radius: 10px; /* Arrondi des coins */
  width: fit-content;
  max-width: 80%; /* Largeur maximale des messages */
}




#gradient-canvas {
            --gradient-color-1: #ccf46e;
            --gradient-color-2: #32ffd3;
            --gradient-color-3: #61b3ff;
            --gradient-color-4: #ffdf76;
}

.projet {
	display: flex;
	flex-direction: column;
  	flex-wrap: wrap;
	align-items: center;
	column-gap: 15px;
	margin-left: 20px;
}



#projets {
	margin: auto;
    position: relative;
	display: flex;
	flex-direction: column;
  /*flex-wrap: wrap;*/
	align-items: center;
	justify-content: center;
	height: 620px;
	position: absolute;
}

#toutElem {
	display: flex;

	justify-content: center;
}

.container {
  width: 90%;
  max-width: 1240px;
  margin: auto;
  position: relative;
}
.grid-row {
  display: grid;
  grid-template-columns: 20% auto 100px;
  align-items: center;
}
ul.menus {
  display: flex;
  align-items: center;
  column-gap: 15px;
  margin-left: 20px;
}
header#master-header {
  padding: 20px 0;
}
.logo {
  font-size: 20px;
  font-weight: 600;
  color: white;
}
.menu a {
  font-size: 15px;
  color: white;
  font-weight: 500;
}
.animated {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 620px;
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: -1;
  clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 65%, 2% 64.95%, 3% 64.9%, 4% 64.8%, 5% 64.7%, 6% 64.6%, 7% 64.45%, 8% 64.3%, 9% 64.1%, 10% 63.9%, 11% 63.7%, 12% 63.45%, 13% 63.15%, 14% 62.9%, 15% 62.55%, 16% 62.25%, 17% 61.9%, 18% 61.55%, 19% 61.15%, 20% 60.8%, 21% 60.35%, 22% 59.95%, 23% 59.5%, 24% 59.05%, 25% 58.6%, 26% 58.1%, 27% 57.6%, 28% 57.1%, 29% 56.6%, 30% 56.05%, 31% 55.55%, 32% 55%, 33% 54.45%, 34% 53.9%, 35% 53.35%, 36% 52.8%, 37% 52.2%, 38% 51.65%, 39% 51.05%, 40% 50.5%, 41% 49.9%, 42% 49.35%, 43% 48.75%, 44% 48.2%, 45% 47.6%, 46% 47.05%, 47% 46.5%, 48% 45.9%, 49% 45.35%, 50% 44.8%, 51% 44.3%, 52% 43.75%, 53% 43.25%, 54% 42.75%, 55% 42.25%, 56% 41.75%, 57% 41.25%, 58% 40.8%, 59% 40.35%, 60% 39.9%, 61% 39.5%, 62% 39.1%, 63% 38.7%, 64% 38.35%, 65% 38%, 66% 37.65%, 67% 37.35%, 68% 37.05%, 69% 36.75%, 70% 36.5%, 71% 36.25%, 72% 36.05%, 73% 35.85%, 74% 35.65%, 75% 35.5%, 76% 35.35%, 77% 35.25%, 78% 35.15%, 79% 35.1%, 80% 35.05%, 81% 35%, 82% 35%, 83% 35%, 84% 35.05%, 85% 35.1%, 86% 35.2%, 87% 35.3%, 88% 35.45%, 89% 35.6%, 90% 35.75%, 91% 35.95%, 92% 36.15%, 93% 36.4%, 94% 36.65%, 95% 36.95%, 96% 37.2%, 97% 37.55%, 98% 37.85%, 99% 38.2%, 100% 38.55%);
}


.animatedTelechargement {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0px;
  position: absolute;
  left: 0;
  right: 0;
  top: -220px;
  bottom: 0;
  z-index: -1;
  transform: skewY(0deg);
}

.interaction {
  display: flex;
  align-items: center;
  margin: auto;
}

.interaction a {
  align-items: center;
  padding: 10px 15px;
}

.wrapper {
  width: 100%;
  height: 100%;
  background: #62a3ff;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

div#content {
  margin-top: 80px;
}
div#content .info h2 {
  color: #3a3a3a;
  font-size: 70px;
  line-height: 90px;
  margin-bottom: 20px;
  background: -webkit-linear-gradient(#0a2540, #a567b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 720px;
}
p {
  font-size: 20px;
  line-height: 30px;
}
.grid-3-1 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 20px;
  align-items: center;
}

div#content .colmun img{
  width: 100%;
  max-width: 280px;
}
.align-right {
  text-align: right;
}

@keyframes fly {
  100% {
    transform: rotate(2turn) translate(200px) rotate(-2turn);
    -webkit-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -moz-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -ms-transform: rotate(2turn) translate(200px) rotate(-2turn);
    -o-transform: rotate(2turn) translate(200px) rotate(-2turn);
}
}
.sign-in a {
  color: #ffffff;
  padding: 5px 20px;
  background: rgb(255 255 255 / 20%);
  border-radius: 50px;
}

.dlnom {
  color: #000000;
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 50px;
  outline: 1px solid #c5c5c5;
  text-align: center;
}

.dlcontent {
  text-align: center;
  color: #79b791;
}

.dllecteur {
  text-align: center;
  color: #79b791;
  padding: 30px;
}

.button-grop button {
  padding: 10px 20px;
  font-size: 16px;
  background: transparent;
  border: 5px solid #182b4a;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.button-grop {
  margin: 50px 0;
}
button.blue-btn {
  background: #182b4a;
  color: #fff;
  margin-right: 20px;
}
.toggle-menu,
.toggle-menu-close {
  display: none;
}
@media screen and (max-width: 497px) and (min-width: 200px) { 
  .grid-3-1 {
      grid-template-columns: 1fr;
  }
  .m-sl-hide {
    display: none;
  }
  .button-grop button {
      display: block;
      margin: 20px auto;
      width: 100%;
  }

  .animated {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 620px;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: 0;
    z-index: -1;
  }

  .animatedTelechargement {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: -290px;
    bottom: 0;
    z-index: -1;
    transform: skewY(0deg);
  }
}
@media screen and (max-width: 767px) and (min-width: 200px) { 
  div#content {
      margin-top: 20px;
  }
  nav.navigation:before {
      content: "";
      width: 70vw;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      padding: 20px;
      filter: blur(150px);
      pointer-events: none;
  }
  nav.navigation {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      padding: 20px;
      background: rgb(255 255 255 / 80%);
      z-index: 999;
      width: 70vw;
      transform: translateX(1000px);
      transition: transform 0.5s linear;
  }
  ul.menus {
      display: block;
      margin: 0;
  }
  .menu a {
      font-size: 18px;
      color: #233347;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 3px;
      margin-bottom: 10px;
      display: block;
      background: white;
  }
  header#master-header .grid-row {
    grid-template-columns: auto auto;
  }
  .toggle-menu {
    display: inline-block;
  }
  .m-hide {
    display: none;
  }
  .toggle-menu svg {
      max-width: 40px;
      max-height: 40px;
  }
  .logo {
      font-size: 25px;
  }
  div#content .info h2 {
    color: #3a3a3a;
    font-size: 40px;
    line-height: 50px
  }
  .mobile-menu-toggle {
      display: inline-block;
      height: 40px;
      cursor: pointer;
  }
  nav.navigation.mobile-menu-active {
      transform: translateX(0);
  }
  .toggle-menu-close.active {
      display: block;
      opacity: 1;
      position: fixed;
      z-index: 999999;
      background: #182b4a;
      height: 40px;
  }
  .mobile-menu-close svg {
      width: 40px;
      height: 40px;
  }

  .animatedTelechargement {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: -220px;
    bottom: 0;
    z-index: -1;
    transform: skewY(0deg);
  }
}