@charset "UTF-8";

.poste.active .detail-poste{
  max-height: 2000px; /* Set a maximum height that is greater than your content */
  transition: max-height 1s ease;
  padding-bottom: 3rem;
}


.footer-poste {
  display: flex;
  justify-content: space-between;
}

.footer-poste ul {
 list-style: none;
 display: flex;
 gap: 1rem;
 margin: 0;
 padding: 0;
}

.footer-poste li {
  list-style: none;
  display: flex;
  gap: .5rem;
  align-items: center;
 }


.detail-poste {
  transition: max-height 0.4s ease;
  max-height: 0;
  overflow: hidden;
}

.detail-poste .link-poste {
  text-align: center;
}


.detail-poste .link-poste a{
  padding: 1rem 1.5rem;
  color:#fff;
  background-color: ;
}


.more {
position: absolute;
  width: 60px;
  height: 60px;
  background-color: white;
  bottom: -16px;
  right: -24px;
  border-top-left-radius: 30px;
  transition: all ease-in 150ms;
}

.more:before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 20h20V0c0 11.047-8.953 20-20 20Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  position: absolute;
  bottom: 0px;
  left: -20px;
}

.more:after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 20h20V0c0 11.047-8.953 20-20 20Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  position: absolute;
  top: -20px;
  right: 0px; 
}
.more svg {
  position: relative;
  left: 5px;
  top: 5px;
  transition: all ease-in 150ms;
}


.link-poste {
  margin:2rem 0 0;
}

.link-poste a {
  border-color: var(--wp--preset--color--custom-pelorous) !important;
  background-color: var(--wp--preset--color--custom-pelorous) !important;
  color: var(--wp--preset--color--custom-white) !important;
  font-size: 1.2rem;
}


.poste.active .more svg{ transform: rotate(45deg);}

.poste.active .more svg rect,
.poste:hover .more svg rect{
  fill: #075E72;
}


.poste:hover .more{
  width: 70px;
  height: 70px;
}

.poste:hover .more svg{
  left: 10px;
  top: 10px;
}