body {
    /* Ajustez cette valeur à la hauteur réelle de votre navbar si nécessaire */
    padding-top: 0; 
}

.bg-home {
            background: #57C785;
            background: radial-gradient(circle, rgba(87, 199, 133, 1) 6%, rgba(131, 194, 68, 1) 77%);
        }

        .md-form .prefix {
            top: 1rem;
            font-size: 1.25rem;
        }


        .card {
            background-color: rgba(87, 199, 133, 0.1);
        }

        .md-form label {
            color: var(--qs-light-color);
        }

        h6 {
            line-height: 1.7;
        }

        /* --- Styles pour l'icône afficher/masquer mdp --- */
        .input-group-password-container {
            position: relative;
        }

        /* Ajuster le padding droit des champs password pour laisser la place à l'icône */
        .input-group-password-container input[type="password"],
        .input-group-password-container input[type="text"] {
            /* Augmentez cette valeur si l'icône est large ou si vous voulez plus d'espace */
            padding-right: 40px !important;
        }

        .input-group-password-container .toggle-password-vis {
            position: absolute;
            top: 50%;
            /* Alignement vertical initial */
            right: 1.5rem;
            /* Distance du bord droit */
            transform: translateY(-50%);
            /* Centrage vertical parfait */
            cursor: pointer;
            color: #aaa;
            /* Couleur discrète pour l'icône */
            z-index: 2;
            /* Pour être sûr qu'elle est au-dessus de l'input */
            background: none !important;
            /* Annuler le fond de input-group-text si MDB l'ajoute */
            border: none !important;
            /* Annuler la bordure si MDB l'ajoute */
            padding: 0 !important;
            /* Annuler le padding si MDB l'ajoute */
            /* Ajuster la taille si nécessaire */
            font-size: 1rem;
            line-height: 1;
            /* Pour éviter des décalages verticaux */
            color: #ffffff;
        }

        /* Optionnel: changer la couleur au survol */
        .input-group-password-container .toggle-password-vis:hover {
            color: #ffff8d;
        }

        .btn-orange,
        .btn-orange:hover,
        .btn-orange:active,
        .btn-orange:visited {
            background-color: #ffc822 !important;
        }

        .md-form input[type="text"]:not(.browser-default):focus,
        .md-form input[type="password"]:not(.browser-default):focus,
        .md-form input[type="email"]:not(.browser-default):focus,
        .md-form input[type="tel"]:not(.browser-default):focus {

            box-shadow: none !important;
            border-bottom: 2px solid #ffff8d !important;
        }

        .md-form input[type="text"]:not(.browser-default):focus+label,
        .md-form input[type="password"]:not(.browser-default):focus+label,
        .md-form input[type="email"]:not(.browser-default):focus+label,
        .md-form input[type="tel"]:not(.browser-default):focus+label {
            color: #ffff8d !important;
            font-weight: 600 !important;
        }

        .md-form .input-prefix {
            color: white !important;
            line-height: 1; /* Pour éviter des décalages verticaux */

        }

        .md-form .input-prefix.active {
            color: #ffff8d !important;

        }

        .form-check-input[type="checkbox"]:not(.filled-in):focus+label::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 18px;
            height: 18px;
            margin-top: 3px;
            content: "";
            border: 2px solid #ffff8d;
            border-radius: 1px;
            -webkit-transition: .2s;
            transition: .2s;
            box-shadow: none;
        }

        .form-check-input[type="checkbox"]:not(.filled-in)+label::after,
        label.btn input[type="checkbox"]:not(.filled-in)+label::after {
            border: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .form-check-input[type="checkbox"]+label::before, 
        .form-check-input[type="checkbox"]:not(.filled-in)+label::after {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 18px;
            height: 18px;
            margin-top: 3px;
            content: "";
            border: 2px solid #e3dddd;
            border-radius: 1px;
            -webkit-transition: .2s;
            transition: .2s;
        }

        .form-check-input[type="checkbox"]:checked+label::before {
            top: -4px;
            left: -5px;
            width: 12px;
            height: 1.375rem;
            border-top: 2px solid transparent;
            border-right: 2px solid #ffff8d;
            border-bottom: 2px solid #ffff8d;
            border-left: 2px solid transparent;
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
            -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }


        .form-check-input[type="checkbox"]:focus:checked+label::before,
        label.btn input[type="checkbox"]:focus:checked+label::before {
            border-color: #ffff8d;
            -webkit-box-shadow: 3px 2px 0 0rgb(255, 255, 141, 0.25);
            box-shadow: 3px 2px 0 0rgb(255, 255, 141, 0.25);
            border-top: 2px solid transparent;
            border-left: 2px solid transparent;
        }

        .yellow-light-text {
            color: #ffff8d;
        }

        a:hover {
            color: #ffff8d;
            text-decoration: none;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }