/* Archive */
.img-realisation > a{display: block; width: 100%; height: 100%; aspect-ratio: 1; overflow: hidden; position: relative; transition: 500ms ease;}
.img-realisation > a > img{position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 500ms ease; transform-origin: center center;}
.img-realisation > a:hover{scale: 1.025;}
.img-realisation > a:hover > img{scale: 1.15;}
.img-realisation > a:hover > .bg_green_item{ background-color: #A6BE4C; z-index: 3; position: absolute; top:0; bottom: 0; left: 0; right: 0; opacity: 0.5; transition: 1s; overflow: hidden;}

.x-item-realisation{position: absolute; top: 1rem; left: 1rem; opacity: 0; transition: 500ms ease; color: white; font-size: 3.25rem; font-weight: 300!important;}
.title-item-realisation{position: absolute; bottom: 0;  opacity: 0; transition: 500ms ease; transition: translateY(1rem); font-size: 1.25rem!important; line-height: 130%; margin-bottom: 0rem; padding: 1rem;}

.img-realisation > a:hover > div > .x-item-realisation{opacity: 1; transform: rotate(180deg); z-index: 4; }
.img-realisation > a:hover > .title-item-realisation{opacity: 1; z-index: 4; transition: translateY(0);}

.realisation-item{ opacity: 1;  transform: translateY(0); transition: opacity 0.5s ease, width 0.5s ease, transform 0.5s ease  }

.realisation-item.hide {opacity: 0; transform: translateY(100%); width: 0; transition: opacity 0.3s ease, transform 0.3s ease, width 1s ease; display:none}