/* CONTENEUR */
.formation-container{
    max-width:1320px;
    margin:0 auto;
    padding:80px 30px;
}

/* HERO */
.formation-hero{
    max-width:1320px;
    margin:60px auto 0;
    padding:0 30px;
}

.formation-hero-card{
    position:relative;
    display:block;
    height:360px;
    overflow:hidden;
    border-radius: var(--ecox-content-border-radius);
    text-decoration:none;
    color:#fff;
    border: 1px solid var(--ecox-border-color);
}

.formation-hero-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.formation-hero-card:hover img{
    transform:scale(1.05);
}

.formation-hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:70px;
    background:linear-gradient(
            to top,
            rgba(5,20,40,.92),
            rgba(5,20,40,.55) 45%,
            rgba(5,20,40,.15)
    );
}

.formation-hero-overlay h1{
    margin:15px 0;
    color:#fff;
    font-size:3.5rem!important;
    line-height:1.15;
}

.formation-hero-overlay p{
    max-width:720px;
    margin-bottom:30px;
    color:#fff;
    font-size:1.2rem;
    line-height:1.7;
}

.formation-link{
    color:#fff;
    font-weight:600;
    padding-top: 15px;
}
.formation-link .material-symbols-outlined {
    font-size: 1.8rem!important;
    transition: transform .3s ease;
}

.formation-hero-card:hover .formation-link .material-symbols-outlined,
.formation-card:hover .formation-link .material-symbols-outlined{
    transform:translateX(4px);
}


/* SECTIONS */
.formation-section{
    padding:30px 0 20px;
}

.formation-section-light{
    background:#f7f9fc;
}

.formation-header{
    margin-bottom:40px;
}

.formation-copyright{
    position:absolute;
    left:30px;
    bottom:20px;
    z-index:5;
    color:rgba(255,255,255,.7);
    font-size:.7rem;
}


/* GRILLE DYNAMIQUE */
.formation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:30px;
}


/* CARTES */
.formation-card{
    position:relative;
    display:block;
    height:320px;
    overflow:hidden;
    border-radius: var(--ecox-content-border-radius);
    text-decoration:none;
    color:#fff;
}

.formation-card:hover,
.formation-card:focus,
.formation-card:visited{
    color:#fff;
}

.formation-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.formation-card:hover img{
    transform:scale(1.08);
}


.formation-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    background:linear-gradient(
            to top,
            rgba(5,20,40,.92),
            rgba(5,20,40,.45) 65%,
            rgba(5,20,40,0)
    );
}

.formation-overlay h3,
.formation-overlay p{
    color:#fff;
}

.formation-overlay h3{
    margin:0;
    font-size:1.45rem;
    line-height:1.3;
}

.formation-overlay p{
    margin:10px 0 0;
    font-size:1rem;
    line-height:1.5;
    opacity:.92;
}

.formation-badge{
    align-self:flex-start;
    margin-bottom:18px;
    padding:7px 16px;
    border-radius:30px;
    background:#fff;
    color:#0f2940!important;
    font-size:.8rem;
    font-weight:600;
}


/* EFFET HOVER */
.formation-card:before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--ecox-border-color);
    border-radius: var(--ecox-content-border-radius);
    z-index:2;
}


/* RESPONSIVE */
@media(max-width:1200px){

    .formation-grid{
        grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    }

}


@media(max-width:768px){

    .formation-container,
    .formation-hero,
    .formation-grid{
        padding-left:20px;
        padding-right:20px;
    }

    .formation-hero-card{
        height:380px;
    }

    .formation-hero-overlay{
        padding:35px;
    }

    .formation-hero-overlay h1{
        font-size:2.2rem!important;
    }

    .formation-hero-overlay p{
        font-size:1rem;
    }

    .formation-grid{
        grid-template-columns:1fr;
    }

    .formation-card{
        height:260px;
    }

    .formation-overlay h3{
        font-size:1.25rem!important;
    }

    .formation-hero-card .formation-link {
        padding-bottom: 15px;
    }

}