@font-face {
    font-family: "Museo700";
    src: url("../../../../../font/Museo700-Regular.otf") format("truetype");
}

body {
    background: #EFEFEC;
    height: 100vh;
    background-attachment: fixed;
    font-family: "Museo700", sans-serif;
}

.blockOptincanal {
    display: none;
}

.main_view {
    background: #EFEFEC;
    -webkit-box-shadow: 1px 0px 38px 7px #221b1a;
    box-shadow: 1px 0px 38px 7px #221b1a;
    min-height: 100vh;
    font-family: "Museo700", sans-serif;
    background-size: cover;
    background-image: url('../../../../../images/carrefour/talentsdici/971/bg_mini.png');
    background-position: center center;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

.card-custom {
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.412); */
    background: var(--Color-4, rgba(37, 55, 121, 0.50));
    border-radius: 10px;
}

/* Styles pour les champs du formulaire */
input[type="text"],
input[type="email"],
input[type="tel"],
.customfield,
select {
    background-color: #E83687;
    border-color: #E83687;
    color: #fff !important; /* couleur du texte */
    padding: 10px;
    border-radius: 20px 20px 20px 0px;
    font-family: "Museo700", sans-serif; /* forcer Museo */
    font-weight: 500; /* facultatif, pour un léger gras */
}

::placeholder {
    color: #fff !important; /* couleur du placeholder */
    opacity: 1; /* pour s'assurer que la couleur est appliquée */
    font-family: "Museo700", sans-serif; /* forcer Museo pour le placeholder */
}

.gradient-border {
    position: relative;
    border-radius: 20px;
    z-index: 0;
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(
        129deg,
        #4F85AB 0%,
        #98BBD0 50%,
        #6875A1 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
    z-index: -1;
}

/* Appliquer Museo sur labels, checkboxes, boutons texte */
.main_view .form-check-label,
.main_view .form-check-input,
.main_view label,
.main_view .text-center,
.main_view .btn {
    font-family: "Museo700", sans-serif;
}

/* Pour les inputs cochés */
.form-check-input:checked {
    background-color: #E83687;
    border-color: #E83687;
}

/* Autres éléments custom */
.blockInfo {
    background-color: #E83687;
    border-color: #E83687;
    padding: 15px;
    border-radius: 20px 20px 20px 0px;
}

.bag {
    background-image: url('../../../../images/carrefour/talentsdici/bag.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 280px;
    height: 280px;
    position: relative;
}

.bag img {
    position: absolute;
    bottom: 35px;
    left: 25px;
    width: 200px;
    height: 125px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
.customfield,
select {
    background-color: #E83687 !important;
    border: none;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    padding: 10px;
    border-radius: 20px 20px 20px 0;
    font-family: "Museo700", sans-serif;
    font-weight: 500;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
.customfield:focus,
select:focus {
    background-color: #E83687 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    border-color: #E83687 !important;

    box-shadow: 0 0 0 0.2rem rgba(232, 54, 135, 0.25) !important;

    outline: none;
}

input::placeholder,
textarea::placeholder,
select {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff !important;
}




.consent-error {
    margin-top: 8px;
    padding-left: 5px;
    color: #E83687;
    font-size: 14px;
    font-family: "Museo700", sans-serif;
}

#consent.is-invalid {
    border: 2px solid #E83687 !important;
    box-shadow: none !important;
}


/* =========================================
   CHAMPS DU FORMULAIRE TALENTS D'ICI
   ========================================= */

.talent-form-control {
    background-color: #E83687 !important;
    border: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    padding: 10px;
    border-radius: 20px 20px 20px 0;
    font-family: "Museo700", sans-serif;
    font-weight: 500;
}

.talent-form-control:focus {
    background-color: #d92f78 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    border: none !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 54, 135, 0.25) !important;

    outline: none;
}

.talent-form-control::placeholder {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff !important;
}


/* =========================================
   AUTOCOMPLETION NAVIGATEUR (Chrome / Safari / Edge)
   Chrome peint un fond bleu clair via une regle UA
   sur :-webkit-autofill que background-color ne peut
   pas ecraser : on le recouvre avec un inset box-shadow
   et on force la couleur du texte + du curseur.
   ========================================= */

.talent-form-control:-webkit-autofill,
.talent-form-control:-webkit-autofill:hover,
.talent-form-control:-webkit-autofill:active,
input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:active,
input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:active,
input[type="tel"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill:hover,
input[type="tel"]:-webkit-autofill:active,
input[type="number"]:-webkit-autofill,
.customfield:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #E83687 !important;
    box-shadow: inset 0 0 0 1000px #E83687 !important;

    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    caret-color: #fff !important;

    border: none !important;
    border-radius: 20px 20px 20px 0 !important;
    font-family: "Museo700", sans-serif !important;
    font-weight: 500 !important;

    /* empeche Chrome de repeindre son fond apres l'animation */
    -webkit-transition: background-color 9999s ease-in-out 0s !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* etat focus sur un champ auto-rempli : on garde la teinte de focus */
.talent-form-control:-webkit-autofill:focus,
input[type="text"]:-webkit-autofill:focus,
input[type="email"]:-webkit-autofill:focus,
input[type="tel"]:-webkit-autofill:focus,
input[type="number"]:-webkit-autofill:focus,
.customfield:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-box-shadow:
        inset 0 0 0 1000px #d92f78,
        0 0 0 0.2rem rgba(232, 54, 135, 0.25) !important;
    box-shadow:
        inset 0 0 0 1000px #d92f78,
        0 0 0 0.2rem rgba(232, 54, 135, 0.25) !important;

    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    caret-color: #fff !important;

    border: none !important;
    outline: none !important;
}

/* Syntaxe standard (Firefox 86+, navigateurs recents) */
.talent-form-control:autofill,
input[type="text"]:autofill,
input[type="email"]:autofill,
input[type="tel"]:autofill,
input[type="number"]:autofill,
.customfield:autofill,
select:autofill {
    background-color: #E83687 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    border: none !important;
}