.offres-emploi-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2rem 0;
    gap: 20px;
}

.offre-emploi-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.8rem;
    width: calc(33.33% - 20px);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

@media (max-width: 992px) {
    .offre-emploi-card {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .offre-emploi-card {
        width: 100%;
    }
}

.offre-emploi-titre {
    color: #c00;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-family: 'Urbane Rounded Bold', sans-serif;
}

.title-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.offre-emploi-details {
    flex-grow: 1;
    font-family: 'Effra Regular', sans-serif;
}

.offre-detail {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    font-size: 16px;
    color: #000;
}

.offre-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* Largeur commune pour les icônes - crée un effet de colonne */
.icon-column {
    width: 38px; /* 28px icône + 10px marge droite */
    display: inline-block;
    flex-shrink: 0;
}

.location-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
}

.salary-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/></svg>');
}

.contract-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>');
}

.hours-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
}

.info-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
}

.offre-description {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
    font-size: 13px;
    line-height: 1.6;
    font-family: 'Effra Regular', sans-serif;
    color: #000;
    padding-left: 50px; /* Aligné avec le contenu des détails */
}

.offre-postuler-btn {
    display: inline-block;
    background-color: #c00;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    margin-left: 50px; /* Aligné avec le contenu des détails */
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: auto;
    max-width: 120px;
    font-family: 'Urbane Rounded Bold', sans-serif;
}

.offre-postuler-btn:hover {
    background-color: #a00;
    color: white;
    text-decoration: none;
}

.offres-voir-plus-container {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.offres-voir-plus-btn {
    display: inline-block;
    border: 2px solid #000;
    color: #000;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Urbane Rounded Bold', sans-serif;
}

.offres-voir-plus-btn:hover {
    background-color: #000;
    color: white;
    text-decoration: none;
}

.offres-voir-plus-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.offres-reduire-btn {
    display: inline-block;
    border: 2px solid #c00;
    color: #c00;
    font-weight: bold;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: transparent;
    cursor: pointer;
    font-family: 'Urbane Rounded Bold', sans-serif;
    margin-left: 10px;
}

.offres-reduire-btn:hover {
    background-color: #c00;
    color: white;
    text-decoration: none;
}

/* Styles pour la modale en plein écran avec personnalisations */
.offre-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    overflow-y: auto;
    font-family: 'Effra Regular', sans-serif;
}

.offre-modal-content {
    background-color: #191919;
    color: white;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 30px;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.offre-modal-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    padding-top: 20px;
}

.offre-modal-logo {
    max-width: 300px; /* Taille ajustée pour le logo VDW */
    height: auto;
    margin-bottom: 15px;
}

.offre-modal-header h2 {
    font-family: 'ub thin', sans-serif;
    font-weight: normal;
    font-size: 38px;
    margin: 10px 0;
    color: white;
}

.offre-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 42px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    z-index: 10001;
}

.offre-modal-body {
    padding: 20px 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.offre-modal-form {
    width: 100%;
    max-width: 1200px;
}

.offre-form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.offre-form-col {
    flex: 1;
    padding: 0 15px;
    min-width: 300px;
}

.offre-form-group {
    margin-bottom: 20px;
}

.offre-form-group input,
.offre-form-group textarea {
    width: 100%;
    padding: 20px 20px; /* Padding augmenté */
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: white; /* Fond blanc */
    color: #535353; /* Couleur du texte */
    font-family: 'Effra Regular', sans-serif;
    font-size: 18px; /* Taille augmentée */
}

.offre-form-group input::placeholder,
.offre-form-group textarea::placeholder {
    color: #535353;
    font-family: 'Effra Regular', sans-serif;
    font-size: 18px;
}

upload-group {
    position: relative;
    margin-bottom: 25px;
}

.upload-group label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: normal;
    font-size: 18px;
    font-family: 'Effra Regular', sans-serif;
    color: white;
    cursor: pointer;
}

/* Masquer le champ file input original */
.upload-group input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* Icône de téléchargement personnalisée */
.upload-icon-img {
    height: 24px;
    width: auto;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* Zone d'affichage du nom du fichier sélectionné */
.file-name-display {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #ccc;
    font-style: italic;
}

/* Style pour la case consentement - moins compacte */
.offre-form-consent {
    margin: 30px auto; 
    max-width: 900px; /* Augmenté */
    display: flex;
    align-items: flex-start;
    padding: 0 15%; /* Ajusté */
}

.offre-form-consent input {
    margin-top: 5px;
    margin-right: 15px;
}

.offre-form-consent label {
    font-size: 16px;
    line-height: 1.6; /* Augmenté pour plus d'espacement */
    font-family: 'Effra Regular', sans-serif;
}

/* Style pour le bouton de soumission - restauration du style */
.offre-form-submit {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.offre-form-submit button {
    background-color: #c90005; /* Rouge VDW */
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 6px;
    font-family: 'Urbane Rounded Bold', sans-serif;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 260px;
}

.offre-form-submit button:hover {
    background-color: #a00000;
}

.success-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 40px;
    border-radius: 10px;
    margin: 0;
    font-size: 24px;
    font-family: 'Effra Regular', sans-serif;
    font-weight: 500;
    max-width: 80%;
    width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    line-height: 1.4;
    z-index: 10002; /* S'assurer qu'il est au-dessus de tout autre élément */
}

/* Style responsive */
@media (max-width: 992px) {
    .offre-form-consent {
        padding: 0 10%;
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .offre-form-consent {
        padding: 0 5%;
        max-width: 100%;
    }
}