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

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

h2 {
  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;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

body {
  min-height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
}

main a:hover {
  background: linear-gradient(
    90deg,
    rgb(139, 0, 0) 0%,
    rgb(150, 57, 1) 10%,
    rgb(178, 169, 0) 20%,
    rgb(6, 121, 0) 30%,
    rgb(0, 157, 142) 40%,
    rgb(0, 142, 202) 50%,
    rgb(0, 0, 116) 60%,
    rgb(71, 0, 133) 80%,
    rgb(102, 7, 136) 90%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  cursor: pointer;
}

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_________________________________________________________*/
header {
  display: flex;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0%;
  padding: 0%;
  background-color: #ffffff;
}

.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_________________________________________________________*/

/*_________________________________MAIN_________________________________________________________*/
main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0% 2% 0% 2%;
  background-color: black;
}

main {
  display: flex;
  flex-direction: column; /* empile les éléments les uns au-dessus des autres */
  align-items: center; /* centre tous les éléments horizontalement */
  gap: 40px; /* espace entre les éléments */
  padding: 20px;
}

main img,
main video {
  max-width: 100%; /* pour que les images et vidéos restent responsives */
  height: auto;
}

main .texte {
  text-align: center; /* centre le texte à l’intérieur */
  max-width: 800px; /* limite la largeur du texte pour qu’il reste lisible */
}

.main_1 {
  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: 20%;
  filter: grayscale(-68%);
  overflow: hidden;
}

.main_1_1 {
  display: flex;
  flex-direction: column;
  margin: 3% 3% 6% 6%;
  padding: 10% 1% 4% 1%;
  align-items: center;
  flex-wrap: nowrap;
}

.bloc_flex {
  display: flex;
  flex-direction: column;

  align-items: center;
  flex-wrap: nowrap;
}

img {
  width: 29%;
  border-radius: 38px;
}

.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%);
}

.img_Présentation {
  width: 66%;
  border-radius: 143px;
  margin: 3%;
}

main a {
  width: 10%;
  margin: 0% 10%;
}

main a img {
  width: 300%;
}
/*_________________________________footer_________________________________________________________*/

/* Bouton hover existant */
.bouton_1:hover {
  background-color: #b36c3e;
  color: #fff;
  transform: scale(1.2);
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}

/* Footer fixe en bas */
footer {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 1.5px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 3.5%;
  overflow: hidden;
  transition: height 0.4s ease;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  font-size: 60%;
  font-family: "Sour Gummy", sans-serif;
}

/* Pseudo-élément fleur pour afficher la nav */
footer::before {
  content: "✿"; /* fleur */
  display: block;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 5px;
}

/* Liste dans le footer en colonne et centrée */
footer ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;

  display: flex;
  flex-direction: column; /* empile les items verticalement */
  align-items: center; /* centre horizontalement */
  justify-content: center; /* centre verticalement si nécessaire */
  gap: 10px; /* espace entre les items */

  opacity: 0; /* caché par défaut */
  transition: opacity 0.4s ease;
}

/* Liens dans le footer */
footer a {
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.3s, color 0.3s;
  display: inline-block;
}

footer a:hover {
  transform: scale(1.2);

  background: linear-gradient(
    90deg,
    rgb(139, 0, 0) 0%,
    rgb(150, 57, 1) 10%,
    rgb(178, 169, 0) 20%,
    rgb(6, 121, 0) 30%,
    rgb(0, 157, 142) 40%,
    rgb(0, 142, 202) 50%,
    rgb(0, 0, 116) 60%,
    rgb(71, 0, 133) 80%,
    rgb(102, 7, 136) 90%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: contrast(200%);
}

footer img {
  width: 40px;
  height: auto;
  border-radius: 40px;
}

footer:hover {
  height: 90px;
}

footer:hover ul {
  opacity: 1;
}