* {
  margin: 0;
  box-sizing:border-box;
  font-family: sans-serif;
}
html,body {
        max-width: 100%;
        overflow-x: hidden;
    }
@-webkit-keyframes roll {
  from {
      -webkit-transform: rotate(0deg)
  }

  to {
      -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes roll {
  from {
      -moz-transform: rotate(0deg)
  }

  to {
      -moz-transform: rotate(360deg)
  }
}

@keyframes roll {
  from {
      transform: rotate(0deg)
  }

  to {
      transform: rotate(360deg)
  }
}

.rotation {
  -moz-animation-name: roll;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: roll;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -o-animation-name: roll;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: 1;
}


a {
  list-style: none;
  text-decoration: none;
  color: white;
  font-size: 10px;
}
main{
  display: flex;
}

nav {
  display: flex;
  background-color: black;
  color: #FFFF;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  align-items: center;
  min-width: 100vw;
  padding: 10px;
  gap: 20px;
}

nav .link {
  display: flex;
  font-size: 10px;
  align-items: center;
  width: 80%;
  gap: 20px;
}

nav a:hover {
  color: #842129;
  transition: 0.25s;
}

nav img {
  height: 20px;
  width: 20px;
}

nav .sac {
  display: flex;
  width: 10%;
}

.hamburger-menu {
  display: none;
}

nav input[type=search] {
  background-color: #000000;
  color: white;
  width: 50%;
  border: none;
  margin: 10px 0 10px 10px;
  padding: 10px 10px 10px 0;
}

nav input[type=submit] {
  background-color: #000000;
  border: none;
  color: red;
  font-weight: bold;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

svg {
  fill: #3c5c92;
}

circle {
  filter: red;
}

.titre10 {
  font-weight: bolder;
  color: white;

}

.titre1 {
  font-weight: 100;
  color: white;
  text-align: left;


}

.categories {
  font-weight: 100;
  color: black;

}

.titre2 {
  font-weight: 100;
  color: black;
  text-align: left;
  

}
h4{
  text-decoration: underline red;
}

.titre3 {
  color: black;
  text-align: left;
  text-decoration: underline red;

}

.cercleOrange {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: orange;
  border: 1px solid #0D0D0D;
}

.cercleViolet {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: purple;
  border: 1px solid #0D0D0D;
}

.cercleVertFoncé {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: darkgreen;
  border: 1px solid #0D0D0D;
}

.cercleBleu {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: blue;
  border: 1px solid #0D0D0D;
}

.cercleRouge {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: red;
  border: 1px solid #0D0D0D;
}

.cercleBleuClair {

  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: lightblue;
  border: 1px solid #0D0D0D;
}

.cercleNoir {

  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: black;
  border: 1px solid #0D0D0D;
}

.cercleRose {

  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: pink;
  border: 1px solid #0D0D0D;
}

.cercleBlanc {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: white;
  border: 1px solid #0D0D0D;
}

.cercleVertClair {
  width: 25px;
  height: 25px;
  border-radius: 12.5px;
  background: lightgreen;
  border: 1px solid #0D0D0D;
}

.couleurs {
  display: flex;
  gap: 10px;
  height: 30px;
  padding-top: 10px;
  flex-wrap: wrap;
  width: 180px;
}

.gauche {
  display: flex;
  flex-direction: column;
  width: 20%;
  padding: 2%;

}

.droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 80%;
  padding: 2px;
  padding-top: 20px;
}

.debut {
  display: flex;
  background-color: black;
  flex-direction: column;
  gap: 10px;


}

.categories {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.texte {
  display: flex;
  padding-top: 10px;
}

.clear {
  text-decoration: underline;
  color: gray;
  padding-left: 10px;

}

.first {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 20px;

}
.texte3{
  display: flex;
}

.trier {
  display: flex;
  padding: 5px;
  border: solid 1px black;


}

.conteneur {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 100px;
  padding: 20px;

}

.img1 {
  border: solid 1px black;

}

.img2 {
  border: solid 1px black;

}

.img3 {
  border: solid 1px black;

}

.img4 {
  border: solid 1px black;

}

.img5 {
  border: solid 1px black;

}

.img6 {
  border: solid 1px black;

}

.Fin1 {
  display: flex;
  padding: 5px;
  width: 300px;
  border: solid 1px black;
  justify-content: center;



}

.Fin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 70%;
  padding: 2px;
  padding-top: 10px;
}

.vide {
  padding: 10px;
}
footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 50px 0 50px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  width: 40%;
  margin: 20px 10px 10px 60px;
  line-height: 16.45px;
  gap: 50px;
}

.footer-left h1 {
  width: 400px;
  height: 44px;
  line-height: 44px;
}

.footer-left p {
  width: 400px;
  height: 32px;
}

.footer-left input[type=text] {
  width: 400px;
  margin-right: 5px;
}

.footer-left a {
  display: flex;
  align-items: center;
  margin-left: -85px;
  height: 80%;
  font-size: 14px;
  color: #000000;
}

.footer-left div {
  display: flex;
  margin-right: 5px;
}

.footer-right {
  display: flex;
  justify-content: flex-start;
  width: 35%;
}

.column {
  display: flex;
  flex-direction: column;
  width: 35%;
  line-height: 26px;
}

.column span a {
  color: #909090;
}

.head,
.footer-left a {
  font-weight: bold;
}




@media screen and (max-width: 1370px) {
  nav {
    font-size: 9px;
    font-weight: bolder;
  }
}

@media screen and (max-width: 1050px) {
  main {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 55%;
  }

  nav img,
  nav span {
      display: none;
  }

  nav {
      min-height: 100px;
      max-width: 100%;
      display: flex;
      justify-content: center;
      font-size: 14px;
  }

  nav .link {
      position: absolute;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      width: 100%;
      top: 8%;
      left: 0;
      background-color: black;
      margin-top: -200%;
  }

  nav .link a,
  nav input[type=search],
  nav input[type=submit] {
      text-align: center;
      margin: 20px;
      width: 100%;
      z-index: 1;
      color: #3c5c92;
      font-size: larger;
      font-weight: bolder;
  }

  nav input[type=search],
  nav input[type=submit] {
      margin: 10px;
      width: 60%;
  }

  nav input[type=submit],
  nav input[type=search] {
      color: #842129;
  }

  nav .link.mobile-menu {
      margin-top: 10px;
  }

  .hamburger-menu {
      display: block;
      position: absolute;
      top: 3%;
      left: 90%;
  }
  .debut{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    text-align: center;
  }
  .titre1{
    text-align: justify;
    padding-left: 10px;
  }

  .gauche {
    order: 0;
    margin: 0;
    width: 85%;
  }

  .droite {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    order: 1;
    margin: 0;
    width: 10%;

  }

.categories {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;


}
.conteneur{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}
.first{
  display: flex;
  justify-content: space-between;
}

.couleurs {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 200%;
  height: 50px;

}
.couleur0{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.type1{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 230%;
}

.Fin {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}
main{
  display: flex;
}
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

.footer-left {
  display: flex;
  align-items: center;
  font-size: smaller;
  width: 80%;
  order: 3;
  margin: 0;
  padding: 0 0 5% 0;
}

.footer-left h1,
.footer-left p {
  margin: 20px;
  width: 100%;
}

.footer-left a {
  margin-top: 1%;
}

.footer-left div {
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer-right {
  display: flex;
  order: 4;
  margin: 0;
  padding: 0 0 0 10%;
  width: 100%;
}
}