html {
  background-color: rgb(0, 0, 0);
}

html,
body {
  height: 100%;
  margin: 1%;
  padding: 0;
  overflow-x: hidden; /* Supprime le scroll horizontal */
  font-family: "Sour Gummy", sans-serif;
}

header {
  display: flex;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0%;
  padding: 0%;
  background-color: #ffffff;
}
h1 {
  font-family: "Rubik Mono One", monospace;

  /* Dégradé */
  background: linear-gradient(
    90deg,
    rgb(150, 0, 0) 0%,
    rgb(150, 57, 1) 10%,
    rgb(178, 169, 0) 20%,
    rgba(13, 255, 0, 1) 30%,
    rgba(0, 255, 229, 1) 40%,
    rgba(0, 178, 255, 1) 50%,
    rgba(0, 0, 255, 1) 60%,
    rgb(71, 0, 133) 80%,
    rgb(102, 7, 136) 90%
  );

  -webkit-background-clip: text; /* pour Chrome, Safari, Edge */
  -webkit-text-fill-color: transparent; /* rend le texte transparent pour voir le dégradé */
  background-clip: text; /* pour Firefox */
  color: transparent; /* fallback */
}
.header_1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 1% 0%;
  flex-direction: row;
  justify-content: flex-start;
}

.logo_1 {
  width: 88px;
  border-radius: 92px;
  padding: 2px 8px;
}

.header_2 {
  position: relative;
  width: 100%;
  height: 300px;
  background: url(../img_1/acceuil/pattern_1.svg),
    linear-gradient(
      180deg,
      rgb(150 0 0) 0%,
      rgb(150 57 1) 10%,
      rgb(178 169 0) 20%,
      rgba(13, 255, 0, 1) 30%,
      rgba(0, 255, 229, 1) 40%,
      rgba(0, 178, 255, 1) 50%,
      rgba(0, 0, 255, 1) 60%,
      rgb(71 0 133) 80%,
      rgb(102 7 136) 90%
    );

  background-size: 22%;
  background-position: center;
  filter: grayscale(38%);
  overflow: hidden;
}

.haut_page {
  position: absolute;
  top: 17%;
  right: 0%;
  width: 106%;
  height: 69%;
  object-fit: cover;
}

header nav ul {
  display: flex;
  font-size: 33px;
}

header nav ul li {
  margin: 10px;
}

ul {
  list-style-type: none;
}

/*_________________________________HEADER_________________________________________________________*/

/*_________________________________MAIN_________________________________________________________*/
main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0% 2% 0% 2%;
  background: url(../img_1/acceuil/pattern_1.svg),
    linear-gradient(
      180deg,
      rgba(102, 7, 136, 0.12) 11%,
      rgba(71, 0, 133, 0.2) 21%,
      rgba(0, 0, 184, 0.24) 33%,
      rgba(0, 145, 207, 0.23) 44%,
      rgb(0 86 77 / 22%) 55%,
      rgb(7 102 2 / 24%) 66%,
      rgb(123 117 1 / 25%) 78%,
      rgb(70 26 0 / 29%) 89%,
      rgb(44 1 1 / 23%) 100%
    );
  background-size: 10%;
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex-direction: row;
  position: absolute;
}

/*______________________________.main_1___________________*/

.main_1 {
  display: flex;
  flex-direction: column;
  margin: 3% 3% 4% 20%;
  align-items: center;
  flex-wrap: nowrap;
}
.img_Présentation {
  width: 71%;
  border-radius: 60px;
}

.texte {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  border-radius: 33px;
  padding: 5% 1% 5% 2%;
  margin: 3% 0%;
  width: 75%;
  box-shadow: 20px 23px 18px rgb(235 0 0 / 41%);
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #c70000;
}

main {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

main aside ul {
  padding-bottom: 600%;
  padding-top: 22%;
  margin: 0% 0% 0% 0%;
  margin-right: -193%;
  z-index: 2;
  background-color: #fff;
  box-shadow: 20px 23px 18px rgb(235 0 0 / 41%);
}

section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  margin: 0px 1px 0px 0;
  padding: 0px 0px 0px -1px;
  align-items: flex-start;
  z-index: 1;
}
article {
  margin: 7px 18px;
  padding: 9px 17px;
  font-size: 26px;
}
article img {
  width: 130px;
  height: 120px;
  object-fit: cover;
}

#logo {
  margin: 9px 23px 0 0;
  padding: 6px 10px;
  width: 124px;
}

/*animation*/
.main_1 {
  position: relative;
  overflow: hidden;
}

.main_1 .drops-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.main_1 .drops-bg span {
  position: absolute;
  bottom: 90%;
  width: 2.5%;
  height: 99%;
  background: rgb(9, 0, 0);
  border-radius: 49%;
  animation: rainDrop 6s linear infinite;
}

.main_1 .drops-bg span:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 7s;
}
.main_1 .drops-bg span:nth-child(2) {
  left: 25%;
  animation-delay: 2s;
  animation-duration: 5s;
}
.main_1 .drops-bg span:nth-child(3) {
  left: 40%;
  animation-delay: 4s;
  animation-duration: 8s;
}
.main_1 .drops-bg span:nth-child(4) {
  left: 55%;
  animation-delay: 1s;
  animation-duration: 6s;
}
.main_1 .drops-bg span:nth-child(5) {
  left: 70%;
  animation-delay: 3s;
  animation-duration: 9s;
}
.main_1 .drops-bg span:nth-child(6) {
  left: 85%;
  animation-delay: 5s;
  animation-duration: 7s;
}
.main_1 .drops-bg span:nth-child(7) {
  left: 15%;
  animation-delay: 6s;
  animation-duration: 6s;
}
.main_1 .drops-bg span:nth-child(8) {
  left: 35%;
  animation-delay: 1.5s;
  animation-duration: 8s;
}
.main_1 .drops-bg span:nth-child(9) {
  left: 60%;
  animation-delay: 2.5s;
  animation-duration: 5s;
}
.main_1 .drops-bg span:nth-child(10) {
  left: 80%;
  animation-delay: 4.5s;
  animation-duration: 9s;
}

@keyframes rainDrop {
  0% {
    transform: translateY(-10%);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110%);
    opacity: 0;
  }
}
/*animation*/