@charset "UTF-8";

.poste.active .detail-poste{
max-height: 2000px; 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;
}