@media all and (max-width: 1023px) {
    #recrutement_svg svg {
        width: 150px;
    }

    .episens_metiers__offers_filter_row {
        flex-direction: column;
    }

    .episens_metiers__offers_filter {
        width: 100%;
    }
}

@media all and (min-width: 1024px) {
    #recrutement_svg svg {
        width: 250px;
    }

    .episens_metiers__offers_filter_row {
        display: flex;
        justify-content: space-between;
        gap: 30px;
    }

    .episens_metiers__offers_filter {
        width: calc(100% / 3);
    }
}

/* Styles pour le filtre */

.episens_metiers__offers_search {
    display: flex;
    flex-direction: column;
}

.episens_metiers__offers_filter {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}


/*.episens_metiers__offers_filter:first-of-type {*/
/*    margin-right: 40px;*/
/*}*/

.episens_metiers__offers_filter select,
.episens_metiers__offers_filter input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #CF9955;
    background-color: #fff;
    font-size: 14px;
    /*min-width: 350px;*/
    height: 40px;
    color: #0A517C;
    border-radius: 10px;
}

/*.episens_metiers__offers_filter input {*/
/*    border-radius: 99px 0 0 99px;*/
/*}*/

.episens_metiers__offers_filter input::placeholder {
    color: #0A517C;
}

/*.episens_metiers__offers_filter select {*/
/*    border-radius: 0 99px 99px 0;*/
/*}*/

.episens_metiers__offers_filter label {
    font-family: 'EuclidFlexBold', sans-serif;
    font-size: 16px;
    color: #0A517C;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Styles pour les cartes d'offres */
.episens_metiers__offers_cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 20px;
}

.episens_metiers__offers_cards_item {
    border: 1px solid #ddd;
    border-radius: 40px;
    /*padding: 20px;*/
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.episens_metiers_offers_title {
    background: #0A517C;
    padding: 20px;
    border-radius: 40px 40px 0 0;
}

.episens_metiers__offers_cards_item h3 {
    font-family: 'EuclidFlexBold', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.3em;
    margin-top: 0;
    padding: 0;
    margin-bottom: 15px;
    color: #FFFFFF;
    min-height: 60px;
    height: auto;
}

.episens_metiers__offers_cards_item h5 {
    font-family: 'EuclidFlex', sans-serif;
    font-size: 12px;
    line-height: 1.3em;
    margin-top: 0;
    padding: 0;
    margin-bottom: 10px;
    color: #ffffff;
}

.offer-company-logo {
    text-align: center;
    margin-top: 15px;
}

.offer-company-logo img {
    width: 200px;
}

.offer_informations {
    padding: 20px;
}

.offer_informations H4 {

    font-family: 'EuclidFlexBold', sans-serif;
    font-size: 16px;
    color: #CF9955;
}

.offer_informations p {
    font-family: 'EuclidFlex', sans-serif;
    font-size: 14px;
    line-height: 1.3em;
    color: #0A517C;
}

.offer_details {
    margin-bottom: 15px;
    font-size: 14px;
    padding: 0 20px;
}

.offer_details p {
    display: flex;
    align-items: center;
    color: #CF9955;
    font-family: EuclidFlexBold, sans-serif;
    font-size: 16px;
}

.offer_details svg {
    width: 15px;
    margin-right: 8px;
    fill: #CF9955;
}

.offer_link_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px 20px;
}

.offer-link {
    font-family: 'EuclidFlexBold', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #CF9955;
    color: white;
    border: 1px solid #CF9955;
    text-decoration: none;
    border-radius: 99px;
    font-weight: bold;
}

.offer-link:hover {
    color: #CF9955;
    background-color: #ffffff;
}

.offer-link svg {
    width: 16px;
    margin-right: 8px;
}

.offer-link .logo_cta_gold {
    fill: #ffffff;
}

.offer-link:hover .logo_cta_gold {
    fill: #CF9955;
}

/* Styles pour la pagination */
.episens_metiers__offers_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 5px;
}

.pagination-btn {
    font-family: 'EuclidFlex', sans-serif;
    padding: 8px 12px;
    border: 1px solid #0A517C;
    background: #ffffff;
    color: #0A517C;
    cursor: pointer;
    border-radius: 4px;
}

.pagination-btn.active {
    background: #CF9955;
    color: white;
    border-color: #CF9955;
}

/*.pagination-btn.next-btn {*/
/*    background: #0A517C;*/
/*    color: white;*/
/*}*/

.pagination-ellipsis {
    padding: 0 5px;
}

/* Style pour le chargement */
.episens-loading {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #666;
}

/* Styles pour les options désactivées dans le filtre métier */
#metier-filter option:disabled {
    color: #999;
    font-style: italic;
}