@charset "UTF-8";
@keyframes gros {
  0% {
    scale: 0.9;
  }
  50% {
    scale: 1.1;
  }
  0% {
    scale: 0.9;
  }
}
@keyframes tourne {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: 360deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes alterne {
  0% {
    rotate: 0deg;
  }
  5% {
    rotate: 10deg;
  }
  15% {
    rotate: -10deg;
  }
  25% {
    rotate: 10deg;
  }
  35% {
    rotate: -10deg;
  }
  45% {
    rotate: 10deg;
  }
  55% {
    rotate: -10deg;
  }
  65% {
    rotate: 10deg;
  }
  75% {
    rotate: -10deg;
  }
  85% {
    rotate: 10deg;
  }
  95% {
    rotate: -10deg;
  }
}
@keyframes bouge {
  0% {
    margin-left: -15px;
  }
  25% {
    margin-left: 15px;
  }
  50% {
    margin-left: -15px;
  }
  75% {
    margin-left: 15px;
  }
  100% {
    margin-left: -15px;
  }
}
@keyframes pailleTranslate {
  0% {
    top: -400px;
    right: 0;
  }
  100% {
    top: -340px;
    right: 400px;
  }
}
@keyframes pailleMobile {
  0% {
    top: -590px;
    left: 0;
  }
  100% {
    top: -370px;
    left: 30px;
  }
}
@keyframes trognonTranslate {
  0% {
    top: -400px;
    left: -100px;
  }
  100% {
    top: -360px;
    left: 300px;
  }
}
@keyframes trognonMobile {
  0% {
    top: -520px;
    left: 330px;
  }
  100% {
    top: -370px;
    left: 210px;
  }
}
@keyframes cafeTranslate {
  0% {
    top: -100px;
    right: -50px;
  }
  100% {
    top: -340px;
    right: 340px;
  }
}
@keyframes cafeMobile {
  0% {
    top: -590px;
    left: 240px;
  }
  100% {
    top: -370px;
    left: 230px;
  }
}
@keyframes bananeTranslate {
  0% {
    top: -250px;
    left: 50px;
  }
  100% {
    top: -340px;
    left: 250px;
  }
}
@keyframes bananeTab {
  0% {
    top: -250px;
    left: -10px;
  }
  100% {
    top: -340px;
    left: 250px;
  }
}
@keyframes bananeMobile {
  0% {
    top: -520px;
    left: 240px;
  }
  100% {
    top: -370px;
    left: 100px;
  }
}
@keyframes orangeTranslate {
  0% {
    top: -100px;
    left: -50px;
  }
  100% {
    top: -340px;
    left: 340px;
  }
}
@keyframes orangeMobile {
  0% {
    top: -520px;
    left: 160px;
  }
  100% {
    top: -370px;
    left: 180px;
  }
}
@keyframes oeufTranslate {
  0% {
    top: -300px;
    right: -100px;
  }
  100% {
    top: -340px;
    right: 340px;
  }
}
@keyframes oeufMobile {
  0% {
    top: -590px;
    left: 80px;
  }
  100% {
    top: -370px;
    left: 40px;
  }
}
@keyframes poissonTranslate {
  0% {
    top: -200px;
    left: -100px;
  }
  100% {
    top: -340px;
    left: 200px;
  }
}
@keyframes poissonMobile {
  0% {
    top: -520px;
    left: 80px;
  }
  100% {
    top: -370px;
    left: 100px;
  }
}
@keyframes cartonTranslate {
  0% {
    top: -200px;
    right: -100px;
  }
  100% {
    top: -340px;
    right: 300px;
  }
}
@keyframes cartonMobile {
  0% {
    top: -590px;
    left: 160px;
  }
  100% {
    top: -370px;
    left: 120px;
  }
}
@keyframes saladeTranslate {
  0% {
    top: -300px;
    left: -100px;
  }
  100% {
    top: -350px;
    left: 250px;
  }
}
@keyframes saladeMobile {
  0% {
    top: -520px;
    left: 0;
  }
  100% {
    top: -370px;
    left: 80px;
  }
}
@keyframes carton2Translate {
  0% {
    top: -250px;
    right: 50px;
  }
  100% {
    top: -350px;
    right: 350px;
  }
}
@keyframes carton2Tab {
  0% {
    top: -250px;
    right: 30px;
  }
  100% {
    top: -350px;
    right: 350px;
  }
}
@keyframes carton2Mobile {
  0% {
    top: -590px;
    left: 330px;
  }
  100% {
    top: -370px;
    left: 170px;
  }
}
@keyframes flecheMenu {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes interrogation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flecheOuvre {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes flecheFerme {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
body {
  background-color: white;
  max-width: 1500px;
  margin: 0 auto;
  font-family: "Aleo", serif;
  scrollbar-color: #0B6463;
}

a {
  text-decoration: none;
  width: 100%;
}

.banniere-content {
  width: 100%;
  height: 250px;
}
@media screen and (max-width: 450px) {
  .banniere-content {
    height: 200px;
  }
}

.banniere {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 730px) {
  .header {
    flex-direction: column;
  }
}

.div-header-border {
  padding-top: 20px;
  width: 98%;
  position: relative;
}
@media screen and (max-width: 600px) {
  .div-header-border {
    flex-direction: column;
  }
}

.disposition-titre {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.img-header {
  width: 5%;
}

.titre-header-content {
  position: absolute;
  top: 30%;
  left: 16%;
  width: 70%;
  background-color: #0B6463;
  opacity: 0.8;
}
@media screen and (max-width: 1328px) {
  .titre-header-content {
    top: 25%;
  }
}
@media screen and (max-width: 340px) {
  .titre-header-content {
    top: 20%;
    left: 6%;
    width: 90%;
  }
}

.logo-header {
  width: 200px;
}
@media screen and (max-width: 714px) {
  .logo-header {
    width: 170px;
  }
}
@media screen and (max-width: 600px) {
  .logo-header {
    width: 130px;
  }
}

.titre-header {
  font-family: "Aleo", serif;
  font-size: 50px;
  color: white;
  text-align: center;
  margin: 0;
  padding: 20px;
}
@media screen and (max-width: 900px) {
  .titre-header {
    font-size: 42px;
  }
}
@media screen and (max-width: 620px) {
  .titre-header {
    font-size: 35px;
  }
}
@media screen and (max-width: 450px) {
  .titre-header {
    font-size: 25px;
  }
}

.fleche {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 600px) {
  .fleche {
    padding-right: 20px;
    width: 35px;
    height: 35px;
  }
}
@media screen and (max-width: 340px) {
  .fleche {
    width: 25px;
    height: 25px;
  }
}

.image-header {
  width: 5rem;
  margin-left: 50px;
  margin-right: 50px;
}
@media screen and (max-width: 730px) {
  .image-header {
    display: none;
  }
}

.img-media-query {
  display: none;
}
@media screen and (max-width: 730px) {
  .img-media-query {
    display: block;
    display: flex;
    flex-direction: row;
  }
}

.img-header-media {
  width: 5rem;
  margin-left: 50px;
  margin-right: 50px;
}
@media screen and (max-width: 730px) {
  .img-header-media {
    margin: 0;
  }
}

#bouton {
  display: none;
  align-self: flex-start;
  width: 35px;
  margin-left: 25px;
}

#bouton > button {
  font-size: 20px;
  margin-top: 30px;
  background-color: rgba(0, 128, 0, 0.041);
  border-radius: 30%;
  border: black solid 2px;
  cursor: pointer;
}

.nav {
  position: relative;
  width: 98%;
  padding-top: 10px;
  background-color: #0B6463;
  margin-top: 0;
  z-index: 100000000;
}

nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  list-style-type: none;
  background-color: #0B6463;
  margin-top: 0;
}

nav ul li {
  float: left;
  text-align: center;
  position: relative;
  background-color: #0B6463;
  position: sticky;
}
@media screen and (max-width: 900px) {
  nav ul li {
    width: 20%;
  }
}

nav ul ::after {
  content: "";
  display: table;
  clear: both;
}

nav a {
  display: block;
  text-decoration: none;
  color: white;
  border-bottom: 2px solid transparent;
  padding: 10px 0px;
  font-size: 20px;
}

nav a:hover {
  color: #18A98D;
  border-bottom: 2px solid #18A98D;
}

.sous {
  display: none;
  box-shadow: 0px 1px 2px #ccc;
  background-color: #0B6463;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.sous li {
  float: none;
  width: 90%;
  text-align: left;
}

.sous a {
  padding: 10px;
  border-bottom: none;
  width: 90%;
}

.sous a:hover {
  border-bottom: none;
  background-color: RGBa(200, 200, 200, 0.1);
}

.deroulant > a::after {
  content: " ▼";
  font-size: 12px;
}

@media screen and (max-width: 900px) {
  #bouton {
    display: block;
    display: flex;
    justify-content: flex-start;
    width: 90%;
    cursor: pointer;
    z-index: 10000000000;
  }
  #display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 333px;
    border-radius: 20px;
  }
  .nav ul {
    margin: 0;
  }
  .nav ul li {
    text-align: start;
    width: 333px;
    background-color: rgba(0, 128, 0, 0.041);
  }
  .nav {
    display: none;
    width: 350px;
    position: absolute;
    top: 340px;
    left: 20px;
    border-radius: 30px;
  }
  .nav a {
    padding: 10px;
    width: 99%;
  }
  .sous {
    position: relative;
    box-shadow: unset;
    padding: 0;
  }
  .sous a {
    padding: 5px;
    padding-left: 15px;
    font-size: 15.5px;
  }
  .element1 {
    padding-top: 10px;
  }
  .border-top {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .border-bottom {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}
@media screen and (max-width: 601px) {
  .nav {
    left: 22px;
  }
}
@media screen and (max-width: 450px) {
  .nav {
    top: 300px;
  }
}

@media screen and (max-width: 490px) {
  .nav {
    left: 20px;
    width: 320px;
  }
  .nav ul li {
    width: 303px;
  }
  #display {
    width: 303px;
  }
  .nav a {
    padding: 10px;
  }
}
@media screen and (max-width: 370px) {
  .nav {
    left: 20px;
    width: 200px;
  }
  .nav ul li {
    width: 200px;
  }
  #display {
    width: 200px;
  }
  #iconeFlecheMenu1 {
    position: absolute;
    left: 120px;
    top: 35px;
  }
  .nav a {
    width: 88%;
  }
}
@media screen and (max-width: 350px) {
  #bouton {
    margin-top: -20px;
  }
}
.fleche-menu-anim {
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
  transition: transform 500ms;
  margin-left: 7px;
}
@media screen and (max-width: 800px) {
  .fleche-menu-anim {
    transform: rotate(90deg);
    transition: none;
  }
}

#iconeFlecheMenu, #iconeFlecheMenu1 {
  margin-left: 7px;
}

.icone-fleche-ouvre {
  transform: rotate(0deg);
  animation: flecheOuvre 500ms forwards;
  animation-play-state: paused;
}

.icone-fleche-ferme {
  transform: rotate(90deg);
  animation: flecheFerme 500ms forwards;
  animation-play-state: paused;
}

.style-fleche {
  transform: rotate(0deg);
}

.contain-fleche {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 900px) {
  .contain-fleche {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 800px) {
  .fleche-menu-anim {
    transform: rotate(90deg);
    animation: flecheMenu 500ms;
    animation-play-state: paused;
    animation-fill-mode: forwards;
  }
}

@media screen and (max-width: 800px) {
  .sousQuizz, .sousInfos {
    display: none;
  }
  .sous a {
    font-weight: bold;
  }
}
.sousQuizz {
  width: 320px;
  margin-left: -100px;
}
@media screen and (max-width: 900px) {
  .sousQuizz {
    margin-left: 0;
  }
}
@media screen and (max-width: 800px) {
  .sousQuizz {
    width: 100%;
  }
}

.cache {
  display: none;
}
@media screen and (max-width: 620px) {
  .cache {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .cache {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 620px) {
  .cache > div {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
  }
}

.cache > div > p {
  text-align: center;
}

@media screen and (max-width: 620px) {
  .cache2 {
    display: none;
  }
}

#footer {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  border-top: 3px black solid;
  font-family: "Aleo", serif;
  background-color: #0B6463;
}
@media screen and (max-width: 620px) {
  #footer {
    flex-direction: column;
    align-items: center;
  }
}

#footer > div > p {
  margin: 0;
}

.footer-paragraph {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.footer-paragraph > p {
  text-align: center;
  color: white;
}

.footer-contact-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  width: auto;
  text-decoration: underline;
  color: white;
  scale: 0.9;
  transition-duration: 200ms;
}
@media screen and (max-width: 1000px) {
  .footer-contact-link {
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  .footer-contact-link {
    flex-direction: row;
  }
}

.footer-contact-link:hover {
  font-weight: 600;
  scale: 1;
}

.footer-contact-link > p {
  margin: 5px;
  font-size: 12px;
}

.footer-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
}
@media screen and (max-width: 1000px) {
  .footer-div {
    width: 25%;
  }
}
@media screen and (max-width: 600px) {
  .footer-div {
    margin-bottom: 10px;
  }
}

.footer-div-titre > h4 {
  font-size: 25px;
  text-align: center;
  color: white;
}

.contain-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  width: 90%;
  padding-bottom: 20px;
}
@media screen and (max-width: 600px) {
  .contain-footer {
    flex-direction: column;
    align-items: center;
  }
}

.img-logo-humus {
  width: 120px;
  border-radius: 20px;
}

.footer-contact, .footer-part, .footer-about {
  color: white;
  text-align: center;
}

.footer-about, .footer-about-link {
  text-align: center;
}

.footer-about-link {
  color: white;
  margin: 3px;
  font-size: 12px;
}

.footer-about-link:hover {
  text-decoration: underline;
}

.img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.image-compost {
  width: 12rem;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 50px;
}

.contact {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 650px) {
  .contact {
    flex-direction: column;
    align-items: center;
  }
}

.logo-fb, .logo-mail {
  width: 30px;
  height: 20px;
  margin-right: 10px;
  border-radius: 30px;
  background-color: white;
}
@media screen and (max-width: 800px) {
  .logo-fb, .logo-mail {
    width: 25px;
    height: 25px;
    margin-right: 0;
  }
}
@media screen and (max-width: 600px) {
  .logo-fb, .logo-mail {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}

.mail, .fb {
  display: flex;
  width: 50%;
  align-items: center;
  text-decoration: none;
  color: black;
}
@media screen and (max-width: 650px) {
  .mail, .fb {
    width: 90%;
  }
}
@media screen and (max-width: 315px) {
  .mail, .fb {
    flex-direction: column;
    font-size: 10px;
  }
}

.fb {
  justify-content: flex-end;
  margin-right: 20px;
}
@media screen and (max-width: 650px) {
  .fb {
    margin-right: 0;
    justify-content: center;
  }
}

.mail {
  justify-content: flex-start;
  margin-left: 20px;
}
@media screen and (max-width: 650px) {
  .mail {
    margin-left: 0;
    justify-content: center;
  }
}

.p-footer {
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .div-header-border {
    flex-direction: column;
    align-items: center;
  }
  .titre-header {
    text-align: center;
  }
}
.img-ok {
  width: 20rem;
}
@media screen and (max-width: 340px) {
  .img-ok {
    width: 15rem;
  }
}
@media screen and (max-width: 260px) {
  .img-ok {
    width: 10rem;
  }
}

.img-non {
  width: 10rem;
}

.titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.titre > h2 {
  text-align: center;
}

.titre-ok, .titre-non, .titre-geste {
  margin-top: -20px;
  font-size: 25px;
}
@media screen and (max-width: 600px) {
  .titre-ok, .titre-non, .titre-geste {
    font-size: 20px;
    text-align: center;
  }
}

.oui, .non {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 60px;
}
@media screen and (max-width: 340px) {
  .oui, .non {
    padding-top: 50px;
  }
}

.cercle {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  width: 100%;
  border-radius: 100px;
}

.ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  width: 25%;
  margin: 30px;
}
@media screen and (max-width: 1080px) {
  .ok {
    width: 35%;
    margin: 20px;
  }
}
@media screen and (max-width: 750px) {
  .ok {
    width: 70%;
  }
}
@media screen and (max-width: 560px) {
  .ok {
    width: 85%;
  }
}

.image-ok {
  width: 100px;
}
@media screen and (max-width: 340px) {
  .image-ok {
    width: 70px;
  }
}

.etape {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  align-content: center;
  align-items: center;
}
@media screen and (max-width: 450px) {
  .etape {
    flex-direction: column;
  }
}

.num {
  border-radius: 100%;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-right: 20px;
  font-size: 30px;
}
@media screen and (max-width: 450px) {
  .num {
    margin-right: 0;
  }
}

.des {
  width: 60%;
  background-color: #4C8D8C;
  border-radius: 30px;
  margin-left: 20px;
  padding: 10px;
  color: white;
  font-size: 20px;
}
@media screen and (max-width: 450px) {
  .des {
    margin-left: 0;
    font-size: 17px;
    width: 80%;
  }
}
@media screen and (max-width: 340px) {
  .des {
    font-size: 15px;
  }
}

#sectionTest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 30px;
}

.divTest {
  width: 60%;
}

.divTest > p {
  color: #0B6463;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
}

.divTestBtn {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnTest {
  border-radius: 30px;
  background-color: #0B6463;
  border: #0B6463;
  color: white;
  font-weight: bold;
  font-size: 18px;
  padding: 12px;
  box-shadow: 2px 2px 10px grey;
  cursor: pointer;
}

.btnTest > a {
  text-decoration: none;
  color: white;
}

.divLienPageQuizz {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  width: 97%;
  margin-bottom: 30px;
  margin-top: 30px;
}

.lienPageQuizz {
  text-align: center;
  font-size: 18px;
  text-decoration: underline;
  font-weight: bold;
  width: auto;
  color: #0B6463;
}

.doigtquizz {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: -60px;
}

.demi-cercle1 {
  width: 200px;
  height: 100px;
  border-radius: 0 100px 0 100px;
  background-color: #0B6463;
  opacity: 0.3;
  transform: rotate(10deg);
  transform-origin: bottom right;
  margin-top: -30px;
}

.demi-cercle2 {
  width: 200px;
  height: 100px;
  border-radius: 100px 0 100px 0;
  background-color: #18A98D;
  opacity: 0.3;
  transform: rotate(-15deg);
  transform-origin: bottom left;
  margin-top: -30px;
}

.demi-cercle2-2 {
  transform: rotate(10deg);
  margin-top: -100px;
}

.demi-cercle3 {
  width: 200px;
  height: 100px;
  border-radius: 0 100px 0 100px;
  background-color: #4C8D8C;
  opacity: 0.3;
  transform-origin: bottom right;
  margin-top: -100px;
  transform: rotate(-10deg);
}

.demi-cercle3-1 {
  transform: rotate(15deg);
}

.demi-cercle3-3 {
  transform: rotate(-30deg);
  margin-top: -100px;
}

.demi-cercle4 {
  width: 200px;
  height: 100px;
  border-radius: 0 100px 0 100px;
  background-color: coral;
  opacity: 0.3;
  transform: rotate(10deg);
  transform-origin: bottom right;
  margin-top: -30px;
}

.container-state-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 98%;
}

.img-home-who {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  object-fit: cover;
}

.container-img-home {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  border: 3px solid #0B6463;
}

.sup-img-home {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 50px 0 50px 0;
}

.section-text-img-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 50px 0 100px 0;
}

.div-container-text-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 98%;
  box-shadow: 5px 5px 15px 5px whitesmoke;
  padding-bottom: 30px;
}

.sup-text-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95%;
}

.container-text-home {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.text-home1 {
  height: 110px;
}

.text-home2 {
  height: 130px;
}

.text-home3 {
  height: 220px;
}

.text-home4 {
  height: 80px;
}

.text-home {
  width: 98%;
}

.text-home-P {
  font-size: 20px;
}

.alinea-text {
  width: 10px;
  background-color: #18A98D;
  height: 100%;
}

#content1 {
  display: flex;
  align-items: center;
  margin-top: 100px;
}
@media screen and (max-width: 890px) {
  #content1 {
    flex-direction: column;
    margin-top: 50px;
  }
}

#content2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media screen and (max-width: 890px) {
  #content2 {
    flex-direction: column;
  }
}

#content3 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
@media screen and (max-width: 900px) {
  #content3 {
    margin-top: -50px;
  }
}

#content4 {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 60px;
}
@media screen and (max-width: 1100px) {
  #content4 {
    margin-top: 100px;
  }
}
@media screen and (max-width: 1000px) {
  #content4 {
    margin-top: 130px;
  }
}
@media screen and (max-width: 900px) {
  #content4 {
    margin-top: 150px;
  }
}
@media screen and (max-width: 800px) {
  #content4 {
    flex-direction: column-reverse;
    margin-top: 300px;
  }
}
@media screen and (max-width: 743px) {
  #content4 {
    margin-top: 350px;
  }
}
@media screen and (max-width: 639px) {
  #content4 {
    margin-top: 400px;
  }
}
@media screen and (max-width: 495px) {
  #content4 {
    margin-top: 450px;
  }
}
@media screen and (max-width: 401px) {
  #content4 {
    margin-top: 500px;
  }
}
@media screen and (max-width: 350px) {
  #content4 {
    margin-top: 550px;
  }
}

.text-welcome {
  display: flex;
  flex-direction: column;
  width: 22%;
  align-items: center;
  justify-content: flex-start;
  margin: 7px;
  height: 350px;
}
@media screen and (max-width: 1100px) {
  .text-welcome {
    width: 40%;
    height: 290px;
  }
}
@media screen and (max-width: 800px) {
  .text-welcome {
    width: 80%;
  }
}
.text-welcome-img {
  width: 70px;
  scale: 0.9;
}
.text-welcome-title {
  font-size: 28px;
  text-align: center;
}
.text-welcome-paragraph {
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
  text-decoration: none;
  align-self: center;
}
.text-welcome-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-left: 0;
}
.text-welcome-list-item {
  font-size: 19px;
  padding: 10px;
  border: #0B6463 1px solid;
  border-radius: 20px;
  margin: 10px;
  text-align: center;
  transition-duration: 400ms;
  cursor: pointer;
  font-weight: 600;
  width: 40%;
  scale: 0.9;
  text-decoration: none;
  color: black;
  margin-top: 0;
}
.text-welcome-list-item:hover {
  box-shadow: black 1px 1px 7px;
  scale: 1;
}
@media screen and (max-width: 800px) {
  .text-welcome-list-item {
    width: 60%;
  }
}
@media screen and (max-width: 540px) {
  .text-welcome-list-item {
    width: 80%;
  }
}

.img-welcome {
  animation: gros 2s infinite;
}

.welcome2 {
  width: 80%;
}
@media screen and (max-width: 800px) {
  .welcome2 {
    width: 70%;
  }
}

.text-welcome > p {
  font-size: 18px;
  text-align: center;
}

#index-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 60px;
  flex-direction: column;
}
@media screen and (max-width: 820px) {
  #index-img {
    margin-top: 120px;
    padding-top: 0;
  }
}
@media screen and (max-width: 600px) {
  #index-img {
    display: none;
  }
}

#index-img > img {
  width: 400px;
}

.contenu {
  background-color: white;
  display: flex;
  width: 30%;
  margin: 70px;
  border-radius: 20px;
  align-items: center;
  align-content: center;
  box-shadow: black 1px 1px 7px;
  padding: 20px;
}
@media screen and (max-width: 1010px) {
  .contenu {
    margin: 50px;
  }
}
@media screen and (max-width: 890px) {
  .contenu {
    width: 60%;
    padding: 5px;
  }
}

.contenu2 {
  background-color: white;
  display: flex;
  width: 50%;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 70px;
  margin-bottom: 70px;
  border-radius: 20px;
  align-items: center;
  align-content: center;
  box-shadow: black 1px 1px 7px;
  padding: 20px;
}
@media screen and (max-width: 1010px) {
  .contenu2 {
    margin: 50px;
  }
}
@media screen and (max-width: 890px) {
  .contenu2 {
    width: 60%;
    padding: 5px;
  }
}

.utilisation {
  width: 93%;
}

.betes {
  margin-right: 100px;
}
@media screen and (max-width: 890px) {
  .betes {
    margin-right: 50px;
  }
}

.titre2 {
  text-align: center;
  color: #0B6463;
  font-size: 30px;
}
@media screen and (max-width: 890px) {
  .titre2 {
    margin-top: 0px;
  }
}

.lien-accueil {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-accueil {
  width: 50px;
  height: 50px;
}

.img-index {
  width: 70px;
  height: 70px;
  position: absolute;
}
@media screen and (max-width: 820px) {
  .img-index {
    width: 50px;
    height: 50px;
  }
}

.trognon {
  top: -400px;
  left: 0;
  animation: trognonTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 1200ms;
}
@media screen and (max-width: 820px) {
  .trognon {
    top: -520px;
    left: 330px;
    animation: trognonMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1200ms;
    z-index: 1;
  }
}

.salade {
  top: -300px;
  left: -100px;
  animation: saladeTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 2600ms;
}
@media screen and (max-width: 820px) {
  .salade {
    top: -520px;
    left: 0;
    animation: saladeMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2600ms;
  }
}

.poisson {
  top: -200px;
  left: -100px;
  animation: poissonTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 2200ms;
}
@media screen and (max-width: 820px) {
  .poisson {
    top: -520px;
    left: 80px;
    animation: poissonMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2200ms;
  }
}

.orange {
  top: -100px;
  left: -50px;
  animation: orangeTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 1800ms;
}
@media screen and (max-width: 820px) {
  .orange {
    top: -520px;
    left: 160px;
    animation: orangeMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1800ms;
    z-index: 2;
  }
}

.paille {
  top: -400px;
  right: 0;
  animation: pailleTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 1000ms;
}
@media screen and (max-width: 820px) {
  .paille {
    top: -590px;
    left: 0;
    animation: pailleMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1000ms;
  }
}

.coquilles {
  top: -300px;
  right: -100px;
  animation: oeufTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 2000ms;
  z-index: 1;
}
@media screen and (max-width: 820px) {
  .coquilles {
    top: -590px;
    left: 80px;
    animation: oeufMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2000ms;
  }
}

.carton {
  top: -200px;
  right: -100px;
  animation: cartonTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 2400ms;
}
@media screen and (max-width: 820px) {
  .carton {
    top: -590px;
    left: 160px;
    animation: cartonMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2400ms;
  }
}

.cafe {
  top: -100px;
  right: -50px;
  animation: cafeTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 1400ms;
}
@media screen and (max-width: 820px) {
  .cafe {
    top: -590px;
    left: 240px;
    animation: cafeMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1400ms;
  }
}

.banane {
  top: -250px;
  left: 50px;
  animation: bananeTranslate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 1600ms;
  z-index: 1;
}
@media screen and (max-width: 1020px) {
  .banane {
    left: -10px;
    animation: bananeTab 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1600ms;
  }
}
@media screen and (max-width: 820px) {
  .banane {
    top: -520px;
    left: 240px;
    animation: bananeMobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 1600ms;
  }
}

.carton2 {
  top: -250px;
  right: 50px;
  animation: carton2Translate 600ms;
  animation-fill-mode: forwards;
  animation-delay: 2800ms;
}
@media screen and (max-width: 1020px) {
  .carton2 {
    right: 30px;
    animation: carton2Tab 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2800ms;
  }
}
@media screen and (max-width: 820px) {
  .carton2 {
    top: -590px;
    left: 330px;
    animation: carton2Mobile 600ms;
    animation-fill-mode: forwards;
    animation-delay: 2800ms;
  }
}

.container-img-index {
  position: relative;
  width: 800px;
  margin-top: 30px;
}
@media screen and (max-width: 1020px) {
  .container-img-index {
    width: 600px;
  }
}
@media screen and (max-width: 820px) {
  .container-img-index {
    width: 400px;
    margin-top: 80px;
  }
}

#text-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 30px 0 30px 0;
}

#text-index > p {
  text-align: center;
  font-size: 20px;
}

.etape-accueil {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  width: 98%;
  margin: 30px 0 30px 0;
  padding: 10px;
}

.texte-demi-cercle {
  display: flex;
  flex-direction: column;
  width: 75%;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
  box-shadow: 5px 5px 15px 5px whitesmoke;
}

.container-circle {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-circle {
  text-decoration: none;
  font-size: 30px;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
}

.P-circle, .P-circle-plus {
  font-size: 20px;
}

.P-circle-plus {
  text-align: center;
  color: white;
}

.plus-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #0B6463;
  border-radius: 30px;
  width: 20%;
  align-self: right;
}

.container-plus-circle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.section-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 70px 0 70px 0;
}

.scroll-and-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 98%;
}

.scroll-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  width: 70%;
  scroll-behavior: smooth;
}

.all-subjects {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-left: 800px;
  margin-right: -200px;
  width: 2000px;
  padding: 30px;
}

#scroll1, #scroll2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 50%;
}

.scroll-subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: 2px whitesmoke solid;
  border-radius: 30px;
  box-shadow: whitesmoke 5px 5px 15px 5px;
  width: 250px;
  height: 200px;
}

.content-link {
  display: flex;
  align-self: center;
  background-color: #0B6463;
  border-radius: 30px;
  padding: 5px;
  width: 30%;
}

.scroll-subject-link {
  color: white;
  text-align: center;
}

.scroll-arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.img-left-scroll {
  display: none;
  transform: rotate(-90deg);
  color: black;
  font-size: 40px;
}

.img-right-scroll {
  transform: rotate(90deg);
  color: black;
  font-size: 40px;
}

.image-geste {
  width: 10rem;
}

.tuto {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
  padding-top: 30px;
  padding-bottom: 60px;
}
@media screen and (max-width: 950px) {
  .tuto {
    flex-direction: column;
    align-items: center;
  }
}

.brasser, .verser {
  display: flex;
  flex-direction: column;
  width: 45%;
  margin: 30px;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  border: black solid;
  border-radius: 30px;
  padding: 10px;
}
@media screen and (max-width: 950px) {
  .brasser, .verser {
    width: 80%;
  }
}

.verser > h3 {
  font-size: 25px;
  align-self: center;
}

.brasser > h3 {
  font-size: 25px;
  align-self: center;
}

.verser > p {
  margin-bottom: 50px;
  align-self: center;
}

.brasser > p {
  margin-bottom: 50px;
  align-self: center;
}

.num > p {
  margin-top: -1px;
  padding-top: 10px;
  color: #4C8D8C;
}

.photo {
  width: 200px;
  height: 150px;
}

.photo-bete {
  width: 200px;
  height: 150px;
  border-radius: 30px;
}

.section-bete {
  padding-top: 50px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 950px) {
  .section-bete {
    padding-top: 30px;
  }
}

.bete {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 60%;
  margin: 30px;
}
@media screen and (max-width: 870px) {
  .bete {
    width: 90%;
  }
}
@media screen and (max-width: 580px) {
  .bete {
    flex-direction: column;
    align-items: center;
  }
}

.explication {
  width: 60%;
  margin-left: 20px;
}
@media screen and (max-width: 580px) {
  .explication {
    width: 80%;
    margin-left: 0;
    text-align: center;
  }
}

#section-utilisation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px;
}

.photo-utilisation {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-content: center;
  margin-top: 100px;
}
@media screen and (max-width: 500px) {
  .photo-utilisation {
    flex-direction: column;
    align-items: center;
  }
}

.photo-utilisation-double {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 600px;
}
@media screen and (max-width: 990px) {
  .photo-utilisation-double {
    width: 30%;
    height: auto;
  }
}
@media screen and (max-width: 500px) {
  .photo-utilisation-double {
    width: 60%;
  }
}

@media screen and (max-width: 990px) {
  .photo-utilisation-seule {
    width: 30%;
  }
}
@media screen and (max-width: 500px) {
  .photo-utilisation-seule {
    width: 70%;
    display: contents;
  }
}

.photo3 {
  height: 560px;
  margin: 20px;
  border-radius: 30px;
}
@media screen and (max-width: 990px) {
  .photo3 {
    height: 440px;
  }
}
@media screen and (max-width: 880px) {
  .photo3 {
    height: 340px;
  }
}
@media screen and (max-width: 730px) {
  .photo3 {
    height: 240px;
  }
}

.photo1, .photo2 {
  height: 300px;
  margin: 20px;
  border-radius: 30px;
}
@media screen and (max-width: 990px) {
  .photo1, .photo2 {
    height: 200px;
  }
}
@media screen and (max-width: 880px) {
  .photo1, .photo2 {
    height: 150px;
  }
}
@media screen and (max-width: 730px) {
  .photo1, .photo2 {
    height: 100px;
  }
}
@media screen and (max-width: 500px) {
  .photo1, .photo2 {
    height: 150px;
  }
}
@media screen and (max-width: 330px) {
  .photo1, .photo2 {
    height: 100px;
  }
}

.utilisation-paragraphe {
  display: flex;
  flex-direction: column;
  align-self: center;
  text-align: center;
  width: 70%;
}

.utilisation-cat {
  border: solid 2px #0B6463;
  border-radius: 30px;
  padding: 10px;
  margin-top: 30px;
}

.utilisation-cat-p {
  text-align: left;
}

.utilisation-description {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-around;
}
@media screen and (max-width: 800px) {
  .utilisation-description {
    flex-direction: column;
  }
}

.img-utilisation {
  width: 150px;
  height: 150px;
}

.div-img-utilisation {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.div-utilisation-description {
  width: 100%;
}

#content-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.paragraph-search > p {
  text-align: center;
}

.div-input-search {
  display: flex;
  flex-direction: row;
}

#search {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border-right: none;
  padding: 7px;
  color: #0B6463;
  font-weight: 600;
  cursor: auto;
}

#button-search {
  cursor: pointer;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  background-color: rgba(0, 128, 0, 0.041);
  font-weight: 600;
}

#search-result {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.indication {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.indication > p {
  font-size: 20px;
}

.indication img {
  width: 30px;
  height: 30px;
}

#section-msg-error {
  padding-bottom: 60px;
  padding-top: 10px;
}

.msg-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.msg-error > p {
  text-align: center;
  color: red;
  font-weight: 600;
  margin: 5px;
}

.msg-error > p a {
  color: red;
  text-decoration: underline;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  border: antiquewhite solid 3px;
  border-radius: 120px;
  padding: 20px;
  width: 40%;
}
@media screen and (max-width: 800px) {
  .item {
    width: 60%;
  }
}
@media screen and (max-width: 500px) {
  .item {
    width: 80%;
  }
}

.itemContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}

.pContent {
  text-align: center;
  width: 80%;
}

#contact-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 60px;
}

#contact-content > .titre {
  background-color: white;
}

.contact-perso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
}
@media screen and (max-width: 530px) {
  .contact-perso {
    width: 90%;
  }
}

.contact-pro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
}

.img-contact-equipe {
  display: flex;
  width: 150px;
  height: 150px;
  border: black 3px solid;
  border-radius: 100%;
}

.img-contact-equipe > img {
  width: 150px;
  object-fit: contain;
  border-radius: 100%;
}

.contact-equipe {
  color: black;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scale: 0.9;
  transition-duration: 200ms;
}

.contact-equipe:hover {
  scale: 1;
}

.p-contact {
  text-align: center;
}

.liens-contacts-pros {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  width: 100%;
}

.div-contact-pro {
  width: 33%;
}
@media screen and (max-width: 800px) {
  .div-contact-pro {
    width: 50%;
  }
}
@media screen and (max-width: 530px) {
  .div-contact-pro {
    width: 100%;
  }
}

h3 {
  font-size: 16px;
  text-decoration: underline;
  color: #0B6463;
  text-align: center;
}

.liens {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.div-liens-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div-liens-contacts > a {
  text-align: center;
  font-size: 15px;
  padding: 5px;
}

.div-liens-contacts > a:hover {
  text-decoration: underline;
}

#section-ok {
  padding-top: 30px;
}

#section-compostable-med {
  padding-top: 30px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.compostable-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  width: 70%;
}
@media screen and (max-width: 900px) {
  .compostable-content {
    width: 100%;
  }
}

.compostable, .non-compostable {
  border-radius: 30px;
  padding: 20px;
  background-color: antiquewhite;
  width: 33%;
}
@media screen and (max-width: 600px) {
  .compostable, .non-compostable {
    width: 80%;
    margin-bottom: 20px;
  }
}

.compostable > a:hover {
  text-decoration: underline;
}

.non-compostable > a:hover {
  text-decoration: underline;
}

h2 {
  text-align: center;
  font-weight: 500;
  font-size: 33px;
}

#actu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 60px;
}

.actus {
  display: flex;
  flex-direction: column;
  width: 90%;
}
.actus-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
  border: #0B6463 solid 2px;
  border-radius: 30px;
}
@media screen and (max-width: 800px) {
  .actus-div {
    flex-direction: column;
  }
}
.actus-div-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
}
.actus-div-img-item {
  width: 250px;
  border-radius: 30px;
}
@media screen and (max-width: 1000px) {
  .actus-div-img-item {
    width: 200px;
  }
}
@media screen and (max-width: 800px) {
  .actus-div-img-item {
    width: 150px;
  }
}
.actus-div-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 70%;
}
@media screen and (max-width: 800px) {
  .actus-div-content {
    width: 90%;
    align-items: center;
  }
}
@media screen and (max-width: 800px) {
  .actus-div-content > p {
    text-align: center;
  }
}
.actus-div-content-date {
  font-style: italic;
}
.actus-div-content-contact > a {
  text-decoration: underline;
  color: black;
}
.actus-div-content-contact > a:hover {
  color: #0B6463;
}

.bonneRep1, .bonneRep2, .bonneRep3, .bonneRep4, .bonneRep5, .bonneRep6, .bonneRep7, .bonneRep8, .bonneRep9, .bonneRep10 {
  display: none;
  font-style: italic;
  font-weight: 200;
  border: grey solid 1px;
  border-radius: 30px;
  padding-left: 7px;
}

.containButton {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#boutonForm {
  margin: 16px;
  width: 90px;
  border-radius: 30px;
  background-color: #0B6463;
  color: white;
  font-weight: bold;
  font-size: 17px;
  padding: 5px;
  border: #0B6463;
  cursor: pointer;
}

#total {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}

.msgPerso {
  text-align: center;
}

#tousLesQuizz {
  margin-bottom: 30px;
}

.tousLesQuizz {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.quizz {
  display: flex;
  width: 25%;
  border: 1px solid black;
  border-radius: 30px;
  margin: 10px;
  flex-direction: column;
  align-items: center;
  height: 100px;
  justify-content: center;
  padding: 10px;
}
@media screen and (max-width: 950px) {
  .quizz {
    width: 40%;
  }
}
@media screen and (max-width: 500px) {
  .quizz {
    width: 80%;
  }
}

.lienTest {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  column-gap: 10px;
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
  text-decoration: underline;
  color: black;
  width: 100%;
  height: 100%;
  position: relative;
  align-items: center;
}

.imgquizz {
  width: 100px;
  height: 100px;
}

.container-imgpagequizz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.imgpagequizz {
  width: 150px;
  height: 150px;
}

.pquizz {
  margin-top: -20px;
  font-style: italic;
  font-size: smaller;
}

input {
  cursor: pointer;
}

select {
  cursor: pointer;
}

.imgresulttest {
  width: 70px;
  height: 70px;
}

.profil {
  padding: 10px;
}

/*# sourceMappingURL=style2.css.map */