html,
body {
    overflow-y: auto !important;
    height: auto !important;
}

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto !important;
}
.modal-dialog {
    display: flex;
    align-items: center; /* centre verticalement */
    min-height: 100vh; /* occupe toute la hauteur de l’écran */
}

:root {
    /* --appcolor: #1e2a38; */
    --appcolor: #5a90cc;
}
.appcol {
    color: var(--appcolor) !important;
}

.material-icons {
    vertical-align: middle !important;
}

.filters-form.pull-right {
    float: right;
    margin-top: 6px;
}

.filters-form .form-group {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .filters-form.pull-right {
        float: none !important;
        display: block;
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }

    .filters-form .form-group {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .filters-form .form-control,
    .filters-form .btn {
        width: 100% !important;
    }
}

nav.navbar {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

div.mdk-drawer__inner {
    background: #ccc;
    background: radial-gradient(
        circle,
        rgba(204, 204, 204, 1) 22%,
        rgba(255, 255, 255, 1) 55%
    );
}

a.nav-link {
    color: #000 !important;
}

/* -------------- */
.carte {
    position: relative;
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 20px;
    width: 100% !important;
}

.carte h4 {
    margin-top: 0;
    font-size: 20px;
}

.carte p {
    margin: 5px 0 0;
    color: #000;
    font-size: 13px;
}
.carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.carte img {
    width: auto;
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    border-radius: 4px;
}

.bg-img-1 {
    background-image: url("../images/im2.jpg") !important;
    /* background-image: url("../images/bg1.jpg") !important; */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

.bg-img-3 {
    background-image: url("../images/bg.jpg") !important;
    /* background-image: url("../images/bg3.jpg") !important; */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

.bg-img-01 {
    background-image: url("../images/im1.jpeg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
}

.modal-content {
    background-image: url("../images/bg4.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    /* color: #fff !important; */
}
/* .modal-contenb > .text-dark {
    color: #fff !important;
} */

.transparent {
    border-radius: 10px !important;
}

.carte,
.transparent {
    background-color: rgba(182, 212, 238, 0.8) !important;
}

.table td,
.table th {
    padding: 4px !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(182, 212, 238) !important;
}
.table-striped tbody tr:nth-of-type(odd) td {
    color: #000;
}
table {
    font-size: 13px !important;
}

[dir="ltr"] .table tr th {
    text-transform: none;
}

/* theme des input */

input.form-control,
textarea.form-control,
select.form-control {
    background-color: #a8c8f0 !important;
    border: 1px solid #9cb9d8 !important;
    color: #1a3b5d !important;
}

input.form-control:focus {
    border-color: #6ca0d9 !important;
    box-shadow: 0 0 3px rgba(108, 160, 217, 0.3) !important;
    background-color: #ffffff !important;
}

/* Conteneur principal */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #a8c8f0 !important;
    border: 1px solid #9cb9d8 !important;
    color: #1a3b5d !important;
    border-radius: 0.25rem; /* optionnel, pour ressembler à bootstrap */
    min-height: 38px; /* correspond à form-control */
}

/* Focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border-color: #6ca0d9 !important;
    box-shadow: 0 0 3px rgba(108, 160, 217, 0.3) !important;
    background-color: #ffffff !important;
}

/* Texte sélectionné */
.select2-container--default .select2-selection__rendered {
    color: #1a3b5d !important;
    line-height: 36px; /* pour aligner verticalement */
}

/* Placeholder */
.select2-container--default .select2-selection__placeholder {
    color: #1a3b5d !important;
    opacity: 0.7;
}

/* Flèche dropdown */
.select2-container--default .select2-selection__arrow b {
    border-color: #1a3b5d transparent transparent transparent !important;
}

/* Bouton principal du multiselect */
.multiselect.btn {
    background-color: #a8c8f0 !important;
    color: #333 !important;
    border: 1px solid #9cb9d8 !important;
}

/* Hover et focus */
.multiselect.btn:hover,
.multiselect.btn:focus {
    background-color: #a8c8f0 !important;
}

/* Menu déroulant */
.multiselect-container.dropdown-menu {
    border: 1px solid #6ca0d9;
}

/* Option sélectionnée */
.multiselect-container > li > a > label {
    color: #333;
}
.multiselect-container > li.active > a > label {
    background-color: #6ca0d9;
    color: #fff;
}

/* theme des boutons */

.btn-primary {
    background-color: #6ca0d9 !important;
    border-color: #6ca0d9 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #5a90cc !important;
    border-color: #5a90cc !important;
}

.btn-primary:active {
    background-color: #4f84bf !important;
    border-color: #4f84bf !important;
}

.btn-primary2 {
    background-color: #a9cff2 !important;
    border-color: #a9cff2 !important;
    /* color: #ccc !important; */
}

.btn-primary2:hover {
    background-color: #9ac4ec !important;
    border-color: #9ac4ec !important;
}

.btn-primary2:active {
    background-color: #8bb8e4 !important;
    border-color: #8bb8e4 !important;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: #a8c8f0 !important;
    border: 1px solid #9cb9d8 !important;
    color: #1a3b5d !important;
}

/* Items */
.dropdown-item {
    color: #1a3b5d !important;
}

/* Hover */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #d4e3f5 !important;
    color: #1a3b5d !important;
}

.cursor {
    cursor: pointer;
}

.container-wide {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    padding: 1.25rem;
}

/* tablette */
@media (min-width: 768px) {
    .container-wide {
        max-width: 750px;
    }
}

/* desktop */
@media (min-width: 992px) {
    .container-wide {
        max-width: 970px;
    }
}

/* large desktop */
@media (min-width: 1200px) {
    .container-wide {
        max-width: 1170px;
    }
}