.display-flex {display: flex;}
    .flex-wrap {flex-wrap: wrap;}
    .flex-column {flex-direction: column;}
    .full-height {height: 100% !important; /* flex-grow: 1; */}
    .full-width {width: 100% !important; /* flex-grow: 1; */}
    .flex-gap-20 {gap: 20px; /* pour un espacement uniforme entre les éléments Flex */}
    .flex-100 {flex-basis: 100%; width: 100%;}
    .flex-75 {flex-basis: 75%; width: 75%;}
    .flex-50 {flex-basis: 50%; width: 50%;}
    .flex-33 {flex-basis: 33.333%; width: 33.333%;}
    .flex-66 {flex-basis: 66.666%; width: 66.666%;}
    .flex-25 {flex-basis: 25%; width: 25%;}
    .text-left {text-align: left;}
    .img-responsive {width: 100%; height: auto; display: block;}
    .cover-image {object-fit: cover;}
    .cover-image-top {object-fit: cover; object-position: top;}
    .my-container {max-width: 1400px; margin: 0 auto; padding: 0 15px;}
    .obj-fit {object-fit: cover;}
    .obj-position-center {object-position: center !important;}
    .obj-position-right {object-position: right !important;}
    .obj-position-top {object-position: top !important;}
    .obj-position-left {object-position: left !important;}
    .normal-text {font-size: 16px; line-height: 1.5;}
    .flex-between {justify-content: space-between;}

    .text-accent {color: rgb(19, 96, 170);}
    .bg-white {background-color: #ffffff;}
    .bg-ligth {background-color:  #f8f9fa;}

    .justify-content-between {justify-content: space-between;}

    .pad-1 {padding: 5px;}
    .pad-2 {padding: 10px;}
    .pad-3 {padding: 15px;}
    .pad-4 {padding: 20px;} 
    .pad-5 {padding: 25px;}
    .rounded {border-radius: 10px;}

    h5 {font-size: 1.25rem; }

    .pb-5 {padding-bottom: 25px;}
    .pb-3 {padding-bottom: 15px;}
    .pb-6 {padding-bottom: 50px;}

    .pt-6 {padding-top: 50px;}
    .pt-5 {padding-top: 25px;}

    .px-1 {padding-left: 5px; padding-right: 5px;}
    .px-2 {padding-left: 10px; padding-right: 10px;}
    .px-3 {padding-left: 15px; padding-right: 15px;}
    .px-4 {padding-left: 20px; padding-right: 20px;}
    .px-5 {padding-left: 25px; padding-right: 25px;}

    .mx-1 {margin-left: 5px; margin-right: 5px;}
    .mx-2 {margin-left: 10px; margin-right: 10px;}
    .mx-3 {margin-left: 15px; margin-right: 15px;}
    .mx-4 {margin-left: 20px; margin-right: 20px;}
    .mx-5 {margin-left: 25px; margin-right: 25px;}

    .my-1 {margin-top: 5px; margin-bottom: 5px;}
    .my-2 {margin-top: 10px; margin-bottom: 10px;}
    .my-3 {margin-top: 15px; margin-bottom: 15px;}
    .my-4 {margin-top: 20px; margin-bottom: 20px;}
    .my-5 {margin-top: 25px; margin-bottom: 25px;}
    .my-6 {margin-top: 50px; margin-bottom: 50px;}

    .py-1 {padding-top: 5px; padding-bottom: 5px;}
    .py-2 {padding-top: 10px; padding-bottom: 10px;}
    .py-3 {padding-top: 15px; padding-bottom: 15px;}
    .py-4 {padding-top: 20px; padding-bottom: 20px;}
    .py-5 {padding-top: 25px; padding-bottom: 25px;}
    .py-6 {padding-top: 50px; padding-bottom: 50px;}

    .mt-6 {margin-top: 50px;}
    .mb-6 {margin-bottom: 50px;}
    .mt-5 {margin-top: 25px;}
    .mt-4 {margin-top: 20px !important;}
    .mb-5 {margin-bottom: 25px;}
    .mt-3 {margin-top: 15px;}
    .mb-3 {margin-bottom: 15px;}

    .mb-7 {margin-bottom: 75px;}

    .pt-2 {padding-top: 10px;}
    .pt-3 {padding-top: 15px;}

    body {overflow-x: hidden;}


    .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    }

    /* Amélioration de l'esthétique des cartes */
    .card {
        border: none;
        border-radius: 0.75rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(2, 62, 138, 0.1) !important; /* Ombre avec une teinte du bleu */
    }
    .page-header-left {
        width: 330px !important;
    }


    @media (min-width: 1000px) and (max-width: 1400px) {
        .my-container {max-width: 1200px; padding: 0 10px;}
    }

    @media (max-width: 500px) {
        .flex-25 {
            flex-basis: 100% !important; 
            width: 100% !important;
        }

        .page-header-left {
            width: 250px !important;
        }

    }

    @media (max-width: 800px) {
        .flex-25 {
            flex-basis: 50%; 
            width: 50%;
        }

        .flex-50 {
            flex-basis: 100%; 
            width: 100%;
        }

        .flex-33 {
            flex-basis: 100%; 
            width: 100%;
            margin-bottom: 50px !important;
        }

        .flex-66 {
            flex-basis: 100%; 
            width: 100%;
        }

        
        /*.responsive-bm { margin-bottom: 15px !important; }*/
    }