body,html{width: 100vw; height:auto;overflow-y: scroll;margin:0;padding:0;font-family: Arial, Helvetica, sans-serif;}
h1{font-size: 20px;margin-top:50px;font-weight: normal;}
.container {margin-top:40px;
  margin:0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-image:url("../assets/ecran.png");background-size:cover;
      width:1050px; height:801px;background-repeat: 
      no-repeat;background-position: center;
      user-select: none;
      color:#007bff;}

.container2{width:950px;display: flex;
      flex-direction: row;
      justify-content: space-between;gap:20px;}

.container2 > * {flex: 1;  min-width: 0;  /* chaque élément prend la même largeur */}
.list-container {display: flex;
  flex-direction: column;
  height: 500px;font-size:20px;}
.list-container a {color:#007bff;
  text-decoration: none;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;}
.container2 a:hover{text-decoration: underline;}
.list-container img {max-height: 90%;
  width: auto;
  object-fit: contain;}
.lecon{display: flex;flex-direction: column;
  justify-content:center;
  align-items: center;font-size: 20px;}
.lecon img{width: 100%;}
.lecon a{ color:#007bff; text-decoration: none;}
.legumes {display: flex;flex-direction: column;justify-content:center;align-items: flex-end;font-size: 20px;}
.legumes img{width: 130px;transform: translateY(-100px);}
.container3{display:flex;width:1000px;margin-top:20px; justify-content: space-between;height: 550px;}
.bureau{width: 590px; align-self: flex-start;}
.poubelle{align-self: flex-end;}
.poubelle img{width:200px;height:200px; }

@media screen and (max-width: 768px) {
body,html{overflow-x:hidden;}
h1{font-size:30px;margin:20px 0 30px 0;}
.container {flex-direction: column;
      background-image:none;
      width:90vw; height:auto;}
.container2{width:90vw;
      flex-direction:column;}
.container2 > * {flex: 0; max-width:100vw;}
.list-container {height:auto;font-size:30px;}
.container2 a:active,.container2 a:focus {text-decoration: underline;}
.list-container img {width: 30%;}
.lecon{margin-top:80px;font-size:30px;margin-bottom:50px;}
.legumes {align-items:center;display:none;}
.legumes img{width:100%;transform: translateY(0);}
.container3{display:none;}
    }