#section_hero {padding-top: 30px;padding-bottom: 30px;min-height: 40vh;}
#section_hero .section-bg-overlay {background-color: rgba(0, 0, 0, 0.2);}

@media only screen and (min-width: 48em) {#col-main .col-inner { padding-left: 40px;} }

#col-stick > .is-sticky-column > .is-sticky-column__inner > .col-inner {padding: 30px 30px 0px 30px}

.slick-slide {height: inherit!important;}

.formation-vignette p { line-height:1.2em; }
.formation-vignette div.snug { margin-bottom:5px; }

.projet-bg {
    display: block;
    width: 100%;
    min-width: 200px;
    min-height: 200px;
    background-size: cover;
    background-position: center;
}

p.fiche-titre {
    font-family: 'snug-sharp-variable';
    letter-spacing: 1px;
    font-size: 20px;
    margin: 0;
    text-transform:uppercase;
}

p.fiche-details {
    font-size: 13px;
    margin: 0 0 15px 0;
}

/* Mobile styles (100% width, taller boxes) */
@media (max-width: 767px) {
    .projet-images {
        flex-wrap: wrap !important;
        gap:20px;
    }
    .projet-image-col {
        width: 100% !important;
        padding: 0 !important; /* Full width, no gutter */
    }
    .projet-bg {
        min-width: 100%;
        min-height: 400px; /* Taller on mobile */
    }
}

/* Desktop styles (smaller min size, spacing between) */
@media (min-width: 768px) {
    .projet-images {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .projet-image-col {
        padding: 5px;
    }
}



.formation-stats {
    background: #fff;
    padding: 30px 30px 5px 30px;
    margin-bottom: 30px;
    width: fit-content;
    clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0% 100%, 0% calc(0% + 20px));
}

.intervenant-item img {clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0% 100%, 0% calc(0% + 20px));}

.etiquettes-formations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}
.etiquettes-formations div {
    padding: 7px 20px 5px;
    background: #27283a;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 15px, 100% 100%, 20px 100%, 0 calc(100% - 15px));
}
.etiquettes-formations a {
    color: #fff;
    letter-spacing: 1px;
    font-size: 20px;
    line-height: 1em;
}
@media only screen and (min-width: 48em) {
    .row.intervenant-container .col-inner {
        padding-left: 30px;
    }
    }

.formation-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    @media (max-width: 768px) {
        .formation-grid {
            grid-template-columns: 1fr;
        }
    }

    .formation-grid .formation-slide {
        position: relative;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        box-sizing: border-box;
        max-height: 300px;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
    }

    .formation-slide::before {
        content: '';
        position: absolute;
        top:0; left:0;
        width:100%; height:100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 1;
        transition: background-color 0.3s ease;
    }

    .formation-slide h5.post-title {
        border-top: 1px solid #fff;
        padding-top: 10px;
        position: relative;
        z-index: 2;
    }

    .formation-slide .formation-slide-content { 
        position: relative; 
        z-index: 2; 
        display:flex; 
        justify-content: flex-end; 
        flex-direction: column; 
    }

    .formation-ecole-logo { 
        position: absolute; 
        top: 10px; 
        right: 10px; 
    }

    .formation-ecole-logo img { 
        max-height: 20px; 
        width:auto; 
        display:block; 
    }

    .formation-slide.ecole-de-design:hover::before { background-color: #23e274b5; }
    .formation-slide.ecole-de-management:hover::before { background-color: #8800ffad; }
    .formation-slide.ecole-du-numerique:hover::before { background-color: #ff7d01a8; }
    .formation-slide.kedge:hover::before { background-color: #FF325E; }
     .formation-slide.tourisme:hover::before { background-color: #99ccffb5; }