.bloc .wrapper .list.programs a,
.bloc .wrapper .list.news a,
.bloc .wrapper .list.ressources a{    
    overflow: hidden;
    display: flex;    
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;    
    transition: all 150ms ease-in-out;
}

.bloc .wrapper .list.programs a .image,
.bloc .wrapper .list.news a .image,
.bloc .wrapper .list.ressources a .image{
    position: relative;
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap);
    text-align: center;
    transition: all 150ms ease-in-out; 
}

.bloc .wrapper .list.ressources a .image{
    height: 150px;
}

.bloc .wrapper .list.programs a:hover .image,
.bloc .wrapper .list.news a:hover .image,
.bloc .wrapper .list.ressources a:hover .image{
    background-color: var(--color-overlay);
}

.bloc .wrapper .list.ressources a .type{    
    font-family: var(--font-text);
    color: var(--color-white);
    background-color: var(--color-action);
    padding: 5px var(--gap);
    border-radius: 50px;
    text-transform: uppercase;
    line-height: 1rem;
    font-size: 1.2rem;
    position: absolute;
    top: var(--gap);
    left: var(--gap);
}
.bloc .wrapper .list.ressources a .themes{    
    
    position: absolute;
    top: calc(var(--gap) + 25px);
    left: var(--gap);
}

.bloc .wrapper .list.ressources a .themes .theme{    
    font-family: var(--font-text);
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 5px var(--gap);
    border-radius: 50px;
    text-transform: uppercase;
    line-height: 1rem;
    font-size: 1.2rem;
    margin-bottom: 5px;
}


.bloc .wrapper .list.programs a .text{
    opacity: 0;
    font-family: var(--font-text);
    transition: all 150ms ease-in-out;   
    color: var(--color-white);
}

.bloc .wrapper .list.programs a:hover .text{
    opacity: 1;
}

.bloc .wrapper .list.news a .text{
    opacity: 1;
    font-family: var(--font-text);
    font-weight: var(--font-text-bold);
    font-size: 2.5rem;
    transition: all 150ms ease-in-out;   
    color: var(--color-white);
    position: absolute;
    bottom: var(--gap);
    right: var(--gap);    
}

.bloc .wrapper .list.programs a .picto,
.bloc .wrapper .list.news a .picto,
.bloc .wrapper .list.ressources a .picto{
    opacity: 0;
    transition: all 150ms ease-in-out;   
    color: var(--color-white);
    position: absolute;
    top: 5px;
    right: 5px;
    transform: rotate(-45deg);
}
.bloc .wrapper .list.programs a:hover .picto,
.bloc .wrapper .list.news a:hover .picto,
.bloc .wrapper .list.ressources a:hover .picto{
    opacity: 1;
}

.bloc .wrapper .list.programs a .content,
.bloc .wrapper .list.news a .content,
.bloc .wrapper .list.ressources a .content{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;    
    width: 100%;
    min-height: 150px;
    background-color: var(--color-white);
    transition: all 150ms ease-in-out;
}
.bloc .wrapper .list.ressources a .content{
    min-height: 100px;
}

.bloc .wrapper .list.programs a:hover .content,
.bloc .wrapper .list.news a:hover .content,
.bloc .wrapper .list.ressources a:hover .content{
    background-color: var(--color-primary);
}
.bloc .wrapper .list.programs a .date,
.bloc .wrapper .list.news a .date{
    position: absolute;
    top: 0;
    left:  0;
    font-family: var(--font-text);
    font-weight: var(--font-text-bold);
    font-size: 1.4rem;
    padding: 5px var(--gap);
    color: var(--color-black);
}
.bloc .wrapper .list.programs a:hover .date,
.bloc .wrapper .list.news a:hover .date,
.bloc .wrapper .list.ressources a:hover .date{
    color: var(--color-white);
}
.bloc .wrapper .list.programs a .title{
    font-family: var(--font-title);
    font-weight: var(--font-title-regular);
    padding: var(--gap);
    color: var(--color-primary);
    text-transform: uppercase;
}
.bloc .wrapper .list.news a .title{
    font-family: var(--font-title);
    font-weight: var(--font-title-bold);
    font-size: 2rem;
    padding: var(--gap);
    color: var(--color-black);
    width: 100%;    
    text-align: right;
}
.bloc .wrapper .list.ressources a .title{    
    font-family: var(--font-title);
    font-weight: var(--font-title-regular);
    font-size: 1.5rem;
    padding: var(--gap);
    color: var(--color-black);    
}

.bloc .wrapper .list.programs a:hover .title,
.bloc .wrapper .list.news a:hover .title,
.bloc .wrapper .list.ressources a:hover .title,
.bloc .wrapper .list.ressources a:hover .text{
    color: var(--color-white);
}

.bloc .wrapper .list.ressources a .text{
    font-size: 1.3rem;
    padding: 0 var(--gap) var(--gap) var(--gap);
    color: var(--color-black);  
}


@media (max-width: 1200px) {
}
@media (max-width: 768px) {
}
@media (max-width: 480px) {
    .bloc .wrapper .list.programs a,
    .bloc .wrapper .list.news a,
    .bloc .wrapper .list.ressources a{
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px 1px;  
    }
}