#root {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: fit-content;
  background-color: white;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.aside {
  padding-top: 5vh;
  position: sticky;
  display: flex;
  height: 95vh;
  top: 0;
  flex-direction: column;
  width: 15%;
  text-align: center;
  background-color: #a72319;
  color: white;
  z-index: 99;
  align-self: flex-start;
  justify-content: space-between;
}

.content {
  padding: 0;
  width: 100%;
  min-height: calc(100vh - 3.5rem - 5rem);
  background-color: white;
  color: black;
  overflow-y: auto;
}

.logo {
  width: 85%;
}

h1,
h2,
h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

h1 {
  position: relative;
  padding-left: 13%;
  font-weight: normal;
  text-transform: uppercase;
}
h1::after {
  content: "";
  background-color: #a72319;
  width: 20%;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: -15px;
}

.loader-box {
  position: fixed;
  z-index: 999;
  height: 100%;
  width: 100%;
  background-color: rgba(153, 153, 153, 0.5215686275);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-box img {
  height: 5rem;
  width: 5rem;
  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
  border: none !important;
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.select-lang {
  max-width: fit-content;
}

.select-lang > * {
  color: #fff;
}

.uppercase {
  text-transform: uppercase;
}

.page-404 {
  background-color: rgb(37, 62, 77);
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 5vh 0 0 5vw;
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
}

.conteneur {
  display: flex;
  width: 100vw;
}

.presentation {
  background-color: white;
  /* background-image: url('../fond.jpg'); */
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 1em;
  max-width: 600px;
  margin: auto;
}
.presentation-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.presentation-flex-lang {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.presentation-flex-img {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 2rem;
}
.presentation-flex-img img {
  border-radius: 3px;
  max-height: 250px;
  max-width: 80%;
}
.presentation-logo {
  width: 10%;
  height: auto;
  margin: 10px;
}
.presentation-select {
  margin-right: 5%;
  height: 3rem;
  margin-top: 1rem;
  border: none;
  box-shadow: 0px 0px 2px rgb(228, 73, 73);
  border-radius: 6px;
  padding: 0 1rem;
  cursor: pointer;
}
.presentation-contenu {
  background-color: white;
  margin: 50px auto 0 auto;
  width: 95%;
  padding-top: 30px;
  margin-top: 1rem;
  border-radius: 10px;
}
.presentation-contenu-grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 0.9em;
  margin-bottom: 0.5em;
  margin-left: 5%;
}
.presentation-contenu-grid p {
  margin: 0;
}
.presentation-contenu-grid .desc {
  padding: 0 10px 0 0;
  white-space: wrap;
  /*                 overflow: hidden;
              text-overflow: ellipsis; */
}
.presentation-contenu-grid .newline {
  font-size: 1.2rem;
}
.presentation-contenu-grid .retry {
  font-weight: bold;
  font-size: 2em;
  color: #a72319;
  margin: 1rem;
  background-color: white;
  border: 2px solid rgba(179, 177, 177, 0.5);
}
.presentation-contenu-grid .red {
  color: #e34f43;
}
.presentation-tableau {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.presentation-tableau-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5em;
}
.presentation-tableau-grid p {
  font-size: 0.9rem;
  border-radius: 5px;
  border-width: 1px;
  margin: 0;
}
.presentation-tableau-grid em {
  font-style: italic;
  padding-left: 5px;
}
.presentation-tableau .white {
  gap: 0.5rem;
}
.presentation-tableau .white p {
  background-color: white;
  padding: 2px 15px;
  border-bottom-style: inset;
}
.presentation .rectangle {
  width: 12rem;
  height: 4rem;
  border-radius: 10px 6px 10px 90px;
  border-right: 20px solid transparent;
  transform: skew(-30deg, 0deg);
  margin-bottom: 2rem;
  box-shadow: -5px -5px 5px #888;
}
.presentation .rectangle p {
  padding-left: 2rem;
  font-size: 0.8rem;
  transform: skew(30deg, 0deg);
}
.presentation .rectangle-green {
  color: white;
  background: rgb(44, 185, 65);
}
.presentation .rectangle-brown {
  color: white;
  background: rgb(178, 112, 30);
}
.presentation .rectangle-blue {
  color: white;
  background: rgb(30, 114, 178);
}
.presentation .rectangle-yellow {
  background: rgb(254, 250, 24);
  color: black;
}
.presentation .rectangle-grey {
  color: white;
  background: rgb(120, 121, 121);
}
.presentation .rectangle-orange {
  color: white;
  background: rgb(255, 123, 0);
}
.presentation .rectangle-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.presentation .recyclage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5%;
  gap: 5%;
  width: 90%;
}
.presentation .recyclage-simulateur {
  display: grid;
  grid-template-columns: 3fr 2fr;
  margin-top: 1rem;
}
.presentation .recyclage-conteneur {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}
.presentation .recyclage-name {
  font-size: 1rem !important;
  padding-left: 5rem !important;
}
.presentation .recyclage-label {
  padding-left: 5rem !important;
}
.presentation .recyclage-dest {
  padding-left: 5rem !important;
}
.presentation .recyclage img {
  width: 70px;
}
.presentation .recyclage-msg {
  margin-top: 1rem;
  font-size: small;
}
.presentation .recyclage-france {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 5%;
  align-items: flex-start;
}
.presentation .recyclage-france-triman {
  width: auto;
}
.presentation .recyclage-france-conteneur {
  border: 5px solid black;
  border-radius: 0 21px 0 21px;
  margin-top: 30px;
  position: relative;
  min-width: 100px;
  max-width: 200px;
}
.presentation .recyclage-france-conteneur::before {
  content: "FR";
  top: -26px;
  position: absolute;
  left: -5px;
  height: 20px;
  color: white;
  background-color: black;
  font-weight: bold;
  padding: 1px 5px 3px 5px;
  border-radius: 3px;
}
.presentation .recyclage-france-conteneur-item {
  height: 76px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.presentation .recyclage-france-conteneur-item-bordeur {
  border-bottom: 5px solid black;
}
.presentation .recyclage-france-conteneur-item-first {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.6rem;
  height: 100%;
  width: 40%;
}
.presentation .recyclage-france-conteneur-item-second-middle {
  width: 33px;
  border: solid 38px transparent;
  border-left-color: white;
  border-left-width: 20px;
  border-right-width: 66px;
  border-bottom-width: 38px;
  border-top-width: 38px;
  display: flex;
  align-items: center;
  position: relative;
}
.presentation .recyclage-france-conteneur-item-second-middle::before {
  content: "";
  position: absolute;
  height: 47px;
  width: 5px;
  top: -3px;
  left: -14px;
  transform: rotate(25deg);
  background-color: black;
}
.presentation .recyclage-france-conteneur-item-second-middle::after {
  content: "";
  position: absolute;
  height: 47px;
  width: 5px;
  top: -43px;
  left: -14px;
  transform: rotate(-25deg);
  background-color: black;
}
.presentation .recyclage-france-conteneur-item-second-end {
  width: 0;
}
.presentation .recyclage-france-conteneur-item-second-bordeur {
  border-radius: 0 15px 0 0;
}
.presentation .recyclage-france-conteneur-item-second-green {
  color: white;
  background: rgb(35, 134, 50);
}
.presentation .recyclage-france-conteneur-item-second-yellow {
  background: rgb(254, 212, 24);
  color: black;
}
.presentation .recyclage-france-conteneur-item-second-black {
  color: white;
  background: black;
}
.presentation .recyclage-france-icone {
  position: absolute;
  right: -40px;
  width: 45px;
}
.presentation .recyclage-france-icone-verre {
  position: absolute;
  right: -45px;
  width: 55px;
}
.presentation .recyclage-france-icone-white {
  fill: white;
}
.presentation .recyclage-france-icone-black {
  fill: black;
}
.presentation .beige {
  background-color: transparent;
  font-size: 0.8rem;
}
.presentation .beige p {
  background-color: #f7ccc8;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.8rem;
  margin: 0;
}
.presentation .beige p span {
  display: block;
}
.presentation .espace {
  height: 0.2em;
}
.presentation-footer {
  background-color: white;
  color: black;
  margin: 5px auto;
  width: 95%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.presentation-footer p {
  border-radius: 15px;
  text-align: center;
  padding: 0.5rem 1rem;
  background-color: #f7ccc8;
}
.presentation-footer a {
  color: inherit;
  text-decoration: none;
}
.presentation-mention {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: 0px 1px 2px rgb(78, 78, 78);
  border-radius: 3px;
}
.presentation-mention-accordeon {
  width: 100%;
  user-select: none;
  z-index: 10;
  background-color: white;
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease-in-out;
}

.presentation-mention-accordeon-ouvert {
  width: 100%;
  user-select: none;
  z-index: 10;
  background-color: white;
  overflow: hidden;
  max-height: 300px;
  transition: max-height 300ms ease-in-out;
}
.presentation-mention:hover {
  cursor: pointer;
}
.presentation-mention-fleche {
  color: grey;
  transform: rotate(90deg) scaleY(1.6);
  font-size: 1rem;
  transition: transform 300ms ease-out;
}

.presentation-mention-fleche-ouvert {
  color: grey;
  transform: rotate(-90deg) scaleY(1.6);
  font-size: 1rem;
  transition: transform 300ms ease-out;
}
.presentation-mention-button {
  background-color: white;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}
.presentation-mention-button p {
  width: 80%;
  text-align: center;
}
.presentation-mention-conteneur {
  overflow:hidden;
  transform: translateY(-100%) scaleY(0);
  transition: transform 300ms ease-in-out;
}
.presentation-mention-conteneur-ouvert {
  overflow:hidden;
  transform: translateY(0) scaleY(1);
  transition: transform 300ms ease-in-out;
}
.presentation-mention-text {
  font-style: italic;
  font-size: 0.8rem;
  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  text-align: justify;
}
.presentation .titre {
  font-weight: bold;
}

.ingredients {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.ingredients-liste {
  font-weight: normal;
  padding: 10px 20px;
}
.ingredients-liste-sous {
  margin: 10px;
}
.ingredients-liste-sous .teteliste {
  margin-bottom: 3px;
}
.ingredients-liste-sous .sousliste {
  margin-left: 10px !important;
}
.ingredients-liste-sous .gras {
  font-size: 0.9rem;
  font-weight: bold;
}
.ingredients-liste-sous .bold {
  font-weight: bold;
}
.ingredients-liste .mentiongaz {
  font-style: italic;
}
.ingredients span {
  display: block;
}
.redirector_link {
  color: #43cbe3;
  width: 80%;
  padding: 3% 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.redirector_link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (min-width: 680px) {
  .presentation {
    max-width: 60vw;
  }
  .presentation-tableau {
    margin-top: 0;
  }
  .presentation-contenu {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    align-items: flex-start;
    gap: 1rem;
  }
  .presentation-mention {
      box-shadow: 0px 1px 2px rgb(155, 154, 154);
  }
  .presentation-mention-button {
    padding: 15px 8px;
  }
}