/* =========================================================
   FORMULAIRE DE CANDIDATURE
   ========================================================= */

.cnf-application-form {
    width: 100%;
}

.cnf-application-form .forminator-ui {
    width: 100% !important;
    margin: 0 !important;
}


/* =========================================================
   ROWS
   ========================================================= */

.cnf-application-form .forminator-row {
    display: flex !important;
    flex-wrap: wrap !important;

    margin-left: -6px !important;
    margin-right: -6px !important;
    margin-bottom: 10px !important;
}


/* =========================================================
   COLONNES
   ========================================================= */

.cnf-application-form .forminator-col {
    box-sizing: border-box !important;

    padding-left: 6px !important;
    padding-right: 6px !important;
}


/* 2 colonnes */

.cnf-application-form .forminator-col-6 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
}


/* pleine largeur */

.cnf-application-form .forminator-col-12 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   CHAMPS
   ========================================================= */

.cnf-application-form .forminator-field {
    width: 100%;
    margin-bottom: 10px !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.cnf-application-form .forminator-label {
    display: block !important;

    margin-bottom: 5px !important;

    color: #1A2533 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.cnf-application-form .forminator-required {
    color: #E30200 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.cnf-application-form input.forminator-input,
.cnf-application-form textarea.forminator-textarea {
    box-sizing: border-box !important;

    width: 100% !important;

    border: 1px solid #D9DEE5 !important;
    border-radius: 4px !important;

    background: #ffffff !important;

    color: #243b53 !important;

    font-family: inherit !important;
    font-size: 15px !important;

    box-shadow: none !important;
}


/* Inputs */

.cnf-application-form input.forminator-input {
    height: 48px !important;

    padding: 0 10px !important;
}


/* Placeholder */
.cnf-application-form input.forminator-input::placeholder,
.cnf-application-form textarea.forminator-textarea::placeholder {
    color: #98A4B3 !important;
    opacity: 1 !important;
}


/* Focus */

.cnf-application-form input.forminator-input:focus,
.cnf-application-form textarea.forminator-textarea:focus {
    border-color: #1E3A5F !important;

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(255, 156, 37, 0.07) !important;
}


/* =========================================================
   DATE DE NAISSANCE
   ========================================================= */

.cnf-application-form #date-1 .forminator-date-input {
    width: 100% !important;
}


/*
 * Le row interne de la date doit rester en 3 colonnes.
 */

.cnf-application-form #date-1 .forminator-date-input > .forminator-row {
    display: flex !important;

    margin-left: -5px !important;
    margin-right: -5px !important;
}

.cnf-application-form #date-1 .forminator-date-input .forminator-col {
    flex: 1 1 0 !important;

    width: auto !important;
    max-width: none !important;

    padding-left: 5px !important;
    padding-right: 5px !important;
}

.cnf-application-form #date-1 .forminator-input {
    width: 100% !important;
}



/* =========================================================
   SECTION TITLES
   ========================================================= */

.cnf-application-form .forminator-field-html {
    margin-top: 4px !important;
}

.cnf-application-form .forminator-field-html .forminator-label {
    margin: 5px 0 10px !important;

    padding-bottom: 6px !important;

    border-bottom: 1px solid #D9DEE5 !important;

    color: #1E3A5F !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.cnf-application-form textarea.forminator-textarea {
    min-height: 140px !important;

    padding: 12px 15px !important;

    resize: vertical !important;
}

.cnf-application-form .forminator-description {
    display: block !important;

    margin-top: 4px !important;

    color: #7b8996 !important;

    font-size: 8px !important;
    line-height: 1.4 !important;
}

/* =========================================================
   UPLOAD
   ========================================================= */

.cnf-application-form
.forminator-file-upload {
    position: relative !important;

    min-height: 145px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 12px !important;

    border: 1px dashed #D9DEE5 !important;
    border-radius: 4px !important;

    background: #F7F9FB !important;

    text-align: center !important;
}


/*
 * Input file invisible mais toujours utilisable
 */
.cnf-application-form
.forminator-input-file {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;
}


/*
 * Bouton Forminator caché visuellement.
 */
.cnf-application-form
.forminator-file-upload
.forminator-button-upload {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;
}


/*
 * Zone texte
 *
 * On masque "Aucun fichier sélectionné"
 * mais on conserve l'élément pour Forminator.
 */
.cnf-application-form
.forminator-file-upload
span[data-empty-text] {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    padding-top: 52px !important;

    color: transparent !important;

    font-size: 0 !important;

    line-height: 1.4 !important;
}


/*
 * Icône SVG
 */
.cnf-application-form
.forminator-file-upload
span[data-empty-text]::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 50px !important;
    height: 50px !important;

    display: block !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M28 20V25.3333C28 26.0406 27.719 26.7189 27.219 27.219C26.7189 27.719 26.0406 28 25.3333 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V20' stroke='%2329ABE2' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6673 10.6667L16.0007 4L9.33398 10.6667' stroke='%2329ABE2' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4V20' stroke='%2329ABE2' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat !important;

    background-position: center !important;

    background-size: 32px 32px !important;
}


/*
 * Texte principal
 */
.cnf-application-form
.forminator-file-upload
span[data-empty-text]::after {
    content: "Glissez-déposez vos fichiers ici ou cliquez pour parcourir\A CV, lettre de motivation, dossier de projet — PDF ou DOC, 5 Mo max. par fichier";

    white-space: pre-line !important;

    display: block !important;

    margin-top: 0 !important;

    color: #5A6B7C !important;

    font-size: 14px !important;

    line-height: 1.5 !important;
}

/* Version anglaise */
html[lang^="en"]
.cnf-application-form
.forminator-file-upload
span[data-empty-text]::after {
    content: "Drag and drop your files here or click to browse\A CV, cover letter, project proposal — PDF or DOC, 5 MB max. per file";
}

/* =========================================================
   CHECKBOX RGPD
   ========================================================= */

.cnf-application-form
.forminator-field-checkbox
.forminator-checkbox {
    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 6px !important;

    margin: 0 !important;

    color: #5A6B7C !important;

    font-size: 13px !important;
    line-height: 1.45 !important;
}


/*
 * Cacher la vraie checkbox native.
 *
 * Elle reste présente pour l'accessibilité et le fonctionnement
 * de Forminator.
 */

.cnf-application-form
.forminator-field-checkbox
.forminator-checkbox
input[type="checkbox"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;

    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/*
 * UNE SEULE case visible.
 */

.cnf-application-form
.forminator-checkbox-box {
    position: relative !important;

    flex: 0 0 18px !important;

    width: 18px !important;
    height: 18px !important;

    box-sizing: border-box !important;

    margin-top: 1px !important;

    border: 1px solid #1E3A5F !important;
    border-radius: 3px !important;

    background: #ffffff !important;
}


/*
 * Checkbox cochée
 */

.cnf-application-form
.forminator-checkbox
input[type="checkbox"]:checked
+ .forminator-checkbox-box {
    background: #1E3A5F !important;

    border-color: #1E3A5F !important;
}

.cnf-application-form
.forminator-checkbox
input[type="checkbox"]:checked
+ .forminator-checkbox-box::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 1px;

    width: 6px;
    height: 10px;

    border: solid #ffffff;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}

/* =========================================================
   SELECT / SELECT2
   ========================================================= */

/*
 * Le select HTML original est caché par Forminator.
 * C'est le .select2-container qui est affiché.
 */
.cnf-application-form
.forminator-field-select
select.forminator-select2 {
    display: none !important;
}

.cnf-application-form
.forminator-field-select
.select2-container.forminator-select {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


/*
 * Boîte visible
 */
.cnf-application-form
.forminator-field-select
.select2-selection--single {
    position: relative !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;

    border: 1px solid #DCE3E9 !important;
    border-radius: 4px !important;

    background: #FFFFFF !important;

    box-shadow: none !important;
}


/*
 * Texte affiché dans le select
 */
.cnf-application-form
.forminator-field-select
.select2-selection__rendered {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    padding-left: 12px !important;
    padding-right: 45px !important;

    color: #243B53 !important;

    font-size: 15px !important;
    line-height: 46px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/*
 * Placeholder "Sélectionner"
 */
.cnf-application-form
.forminator-field-select
.select2-selection__placeholder {
    color: #98A4B3 !important;
}


/*
 * =========================================================
 * FLÈCHE
 * =========================================================
 *
 * On ne dépend plus de l'icône Forminator.
 * On dessine directement la flèche avec CSS.
 */
.cnf-application-form
.forminator-field-select
.select2-selection__arrow {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 42px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
}


/*
 * Flèche CSS
 */
/* .cnf-application-form
.forminator-field-select
.select2-selection__arrow::after {
    content: "" !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    border-right: 2px solid #5A6B7C !important;
    border-bottom: 2px solid #5A6B7C !important;

    transform: rotate(45deg) translateY(-2px) !important;

    box-sizing: border-box !important;
} */


/*
 * On cache l'ancienne icône Forminator.
 */
/* .cnf-application-form
.forminator-field-select
.select2-selection__arrow
.forminator-icon-chevron-down {
    display: none !important;
} */


/*
 * Focus / ouverture
 */
.cnf-application-form
.forminator-field-select
.select2-container--focus
.select2-selection--single,
.cnf-application-form
.forminator-field-select
.select2-container--open
.select2-selection--single {
    border-color: #1E3A5F !important;

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(17, 41, 73, 0.07) !important;
}


/* =========================================================
   SELECT2 - RECHERCHE
   ========================================================= */

.cnf-application-form
.select2-search--dropdown,
.cnf-application-form
.select2-search--hide {
    display: none !important;
}

.cnf-application-form
.select2-search__field {
    display: none !important;
}


/* =========================================================
   SELECT2 - LISTE DES OPTIONS
   ========================================================= */

.select2-container--open
.forminator-select-dropdown {
    box-sizing: border-box !important;

    /* width: 100% !important; */

    background: #FFFFFF !important;
}

.select2-container--open
.select2-dropdown {
    box-sizing: border-box !important;

    background: #FFFFFF !important;

    border: 1px solid #DCE3E9 !important;
    border-radius: 4px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;

    overflow: hidden !important;
}

.select2-container--open
.select2-results {
    background: #FFFFFF !important;
}

.select2-container--open
.select2-results__options {
    background: #FFFFFF !important;

    padding: 4px 0 !important;

    margin: 0 !important;
}

.select2-container--open
.select2-results__option {
    padding: 10px 12px !important;

    background: #FFFFFF !important;

    color: #243B53 !important;

    font-size: 15px !important;

    line-height: 1.4 !important;

    cursor: pointer !important;
}


/*
 * Option survolée
 */
.select2-container--open
.select2-results__option--highlighted {
    background: #F2F5F8 !important;

    color: #1E3A5F !important;
}


/*
 * Option sélectionnée
 */
.select2-container--open
.select2-results__option[aria-selected="true"] {
    background: #EAF0F6 !important;

    color: #1E3A5F !important;

    font-weight: 600 !important;
}

  /* -----------------------------------------------------
       MESSAGES D'ERREUR
       ----------------------------------------------------- */

 .forminator-error-message,
    .forminator-response-message.forminator-error,
    .forminator-field .forminator-error {
        color: #E30200 !important;
    }

.forminator-ui .forminator-has_error input,
.forminator-ui .forminator-has_error input.forminator-input,
.forminator-ui .forminator-has_error textarea,
.forminator-ui .forminator-has_error .select2-selection {
    border: 1px solid #E30200 !important;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.cnf-application-form .forminator-row-last {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}


/*
 * Ligne des boutons
 */
.cnf-application-form
.forminator-row-last
.forminator-col {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-end !important;
    align-items: center !important;

    gap: 9px !important;

    flex-wrap: nowrap !important;

    margin-bottom: 0 !important;
}


/*
 * Conteneur interne contenant Annuler + Submit
 */
.cnf-application-form
.forminator-row-last
.forminator-col
.forminator-field {
    width: auto !important;

    margin-bottom: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    justify-content: flex-end !important;
    align-items: center !important;

    gap: 9px !important;

    flex-wrap: nowrap !important;
}


/*
 * Submit
 */
.cnf-application-form
.forminator-button-submit {
    margin: 0 !important;

    padding: 12px 24px !important;

    border: 1px solid #1E3A5F !important;
    border-radius: 4px !important;

    background: #1E3A5F !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 30px !important;

    box-shadow: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;
}

.cnf-application-form
.forminator-button-submit:hover {
    opacity: 0.9 !important;
}


/*
 * Annuler
 */
.cnf-application-form
.forminator-row-last
.cnf-application-cancel {
    box-sizing: border-box !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    padding: 12px 24px !important;

    border: 1px solid #1E3A5F !important;
    border-radius: 4px !important;

    background: #ffffff !important;

    color: #1E3A5F !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 30px !important;

    text-decoration: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;
}

.cnf-application-form
.forminator-row-last
.cnf-application-cancel:hover {
    background: #f4f7fa !important;

    color: #1E3A5F !important;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cnf-application-form .forminator-col-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cnf-application-form .forminator-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cnf-application-form .forminator-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*
     * Exception : les 3 champs de date restent sur une ligne.
     */

    .cnf-application-form
    #date-1
    .forminator-date-input
    > .forminator-row {
        display: flex !important;

        margin-left: -4px !important;
        margin-right: -4px !important;
    }

    .cnf-application-form
    #date-1
    .forminator-date-input
    .forminator-col {
        flex: 1 1 0 !important;

        width: auto !important;
        max-width: none !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }

       /* Boutons mobile */

    .cnf-application-form
    .forminator-row-last
    .forminator-col {
        flex-direction: column-reverse !important;

        align-items: stretch !important;
    }

    .cnf-application-form
    .forminator-row-last
    .forminator-col
    .forminator-field {
        width: 100% !important;

        flex-direction: column-reverse !important;

        align-items: stretch !important;
    }

    .cnf-application-form
    .forminator-row-last
    .forminator-button-submit,
    .cnf-application-form
    .forminator-row-last
    .cnf-application-cancel {
        width: 100% !important;
    }
}