:root {
    --custom-success-bg: #d4edda;
    --custom-success-color: #155724;
    --custom-success-border: #c3e6cb;
    --custom-success-icon: #28a745;

    --custom-error-bg: #f8d7da;
    --custom-error-color: #721c24;
    --custom-error-border: #f5c6cb;
    --custom-error-icon: #dc3545;

    --custom-warning-bg: #fff3cd;
    --custom-warning-color: #856404;
    --custom-warning-border: #ffeeba;
    --custom-warning-icon: #ffc107;

    --custom-info-bg: #d1ecf1;
    --custom-info-color: #0c5460;
    --custom-info-border: #bee5eb;
    --custom-info-icon: #17a2b8;

    --custom-default-bg: #ffffff;
    --custom-default-color: #333333;
    --custom-default-border: #cccccc;
    --custom-default-icon: #888888;

    --custom-color-view: #656de7;
    --custom-color-list: #325579;
    --custom-color-return: #34495e;
    --custom-color-refresh: #90a097;
    --custom-color-edit: #696d6a;
    --custom-color-create: #27ae60;
    --custom-color-archive: #f39c12;
    --custom-color-unarchive: #2e977d;
    --custom-color-delete: #e74c3c;
    --custom-color-remove: #e74c3c;
    --custom-color-reset: #6b2f66;
    --custom-color-confirm: #288850;
    --custom-color-user: #87a091;
    --custom-color-close: #c04d40;
    --custom-color-cancel: #c04d40;

    --toast-bg: #2d2d2d;
    --toast-text-color: #fff;
    --toast-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    --toast-progress-bar: #4ea8f7; 
}

.text-justify {
    text-align: justify;
}


.custom-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    margin: auto;
    margin-bottom: 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease;
}

/* Animation d'apparition (slide-in + fade-in) */
.custom-alert.show {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de disparition (slide-out + fade-out) */
.custom-alert.hide {
    opacity: 0;
    transform: translateY(-15px);
    margin-bottom: 0;
}

/* Variantes de type - Success */
.custom-alert.custom-success {
    background-color: var(--custom-success-bg);
    color: var(--custom-success-color);
    border: 2px solid var(--custom-success-border);
    border-left: 8px solid var(--custom-success-icon);
}

.custom-alert.custom-success .custom-icon-alert svg {
    fill: var(--custom-success-icon);
}

.custom-alert.custom-success .custom-close-btn {
    color: var(--custom-success-color);
}

/* Variantes de type - Error */
.custom-alert.custom-error {
    background-color: var(--custom-error-bg);
    color: var(--custom-error-color);
    border: 2px solid var(--custom-error-border);
    border-left: 8px solid var(--custom-error-icon);
}

.custom-alert.custom-error .custom-icon-alert svg {
    fill: var(--custom-error-icon);
}

.custom-alert.custom-error .custom-close-btn {
    color: var(--custom-error-color);
}

/* Variantes de type - Danger */
.custom-alert.custom-danger {
    background-color: var(--custom-error-bg);
    color: var(--custom-error-color);
    border: 2px solid var(--custom-error-border);
    border-left: 8px solid var(--custom-error-icon);
}

.custom-alert.custom-danger .custom-icon-alert svg {
    fill: var(--custom-error-icon);
}

.custom-alert.custom-danger .custom-close-btn {
    color: var(--custom-error-color);
}

/* Variantes de type - Warning */
.custom-alert.custom-warning {
    background-color: var(--custom-warning-bg);
    color: var(--custom-warning-color);
    border: 2px solid var(--custom-warning-border);
    border-left: 8px solid var(--custom-warning-icon);
}

.custom-alert.custom-warning .custom-icon-alert svg {
    fill: var(--custom-warning-icon);
}

.custom-alert.custom-warning .custom-close-btn {
    color: var(--custom-warning-color);
}

/* Variantes de type - Info */
.custom-alert.custom-info {
    background-color: var(--custom-info-bg);
    color: var(--custom-info-color);
    border: 2px solid var(--custom-info-border);
    border-left: 8px solid var(--custom-info-icon);
}

.custom-alert.custom-info .custom-icon-alert svg {
    fill: var(--custom-info-icon);
}

.custom-alert.custom-info .custom-close-btn {
    color: var(--custom-info-color);
}

/* Variantes de type - Default */
.custom-alert.custom-default {
    background-color: var(--custom-default-bg);
    color: var(--custom-default-color);
    border: 2px solid var(--custom-default-border);
    border-left: 8px solid var(--custom-default-icon);
}

.custom-alert.custom-default .custom-icon-alert svg {
    fill: var(--custom-default-icon);
}

.custom-alert.custom-default .custom-close-btn {
    color: var(--custom-default-color);
}

/* Icône */
.custom-alert .custom-icon-alert {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 0px;
}

/* Texte */
.custom-alert .custom-text-alert {
    flex: 1;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.custom-alert .custom-text-alert .custom-message-title {
    margin-bottom: 0rem;
    padding-bottom: 0.3rem;
    font-weight: 600;
}

/* Bouton de fermeture */
.custom-alert .custom-close-btn {
    flex-shrink: 0;
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-left: auto;
    line-height: 1;
}

.custom-alert .custom-close-btn:hover {
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 480px) {
    .custom-alert {
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        padding: 12px 16px;
    }

    .custom-alert .custom-close-btn {
        align-self: flex-end;
        margin-left: 0;
    }
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background-color: currentColor; /* important */
}

/* ============================= */
/* PAGE CONTACT */
/* ============================= */

.contact-form-box .form-section-title {
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #0d6efd;
    border-left: 4px solid #0d6efd;
    padding-left: 8px;
}



.contact-form-box .card {
    border-radius: 12px;
}

.contact-form-box .card-header {
    border-radius: 12px 12px 0 0;
}

/* Forcer le fond blanc sur les select Bootstrap */
.form-select,
select.form-control,
select.form-select {
    background-color: #fff !important;
    color: #212529;
}

/* Au focus aussi */
.form-select:focus,
select.form-control:focus {
    background-color: #fff !important;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* Désactiver le fond bleu autofill */
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
}
/* Enlever l'effet trop arrondi des select */
.form-select,
select.form-control {
    border-radius: 4px !important; /* léger arrondi normal */
}