/*------------------------------------
 - COLOR pourpre
 ------------------------------------*/

.active-pourpre{ color:#a251bf;}

.alert-pourpre {
  color: #5b286d;
  background-color: #f1e6f5;
  border-color: #e9d7f0;
}
.alert-pourpre hr {
  border-top-color: #dfc4e9;
}
.alert-pourpre .alert-link {
  color: #3c1a48;
}
.badge-pourpre {
  color: #fff;
  background-color: #a251bf;
}
.badge-pourpre[href]:hover, .badge-pourpre[href]:focus {
  color: #fff;
  background-color: #863ba1;
}
.bg-pourpre {
  background-color: #a251bf !important;
}
a.bg-pourpre:hover, a.bg-pourpre:focus, button.bg-pourpre:hover, button.bg-pourpre:focus {
  background-color: #863ba1 !important;
}
.border-pourpre {
  border-color: #a251bf !important;
}
.btn-pourpre {
  color: #fff;
  background-color: #a251bf;
  border-color: #a251bf;
}
.btn-pourpre:hover {
  color: #fff;
  background-color: #8f3fac;
  border-color: #863ba1;
}
.btn-pourpre:focus, .btn-pourpre.focus {
  box-shadow: 0 0 0 0.2rem rgba(162, 81, 191, 0.5);
}
.btn-pourpre.disabled, .btn-pourpre:disabled {
  color: #fff;
  background-color: #a251bf;
  border-color: #a251bf;
}
.btn-pourpre:not(:disabled):not(.disabled):active, .btn-pourpre:not(:disabled):not(.disabled).active, .show > .btn-pourpre.dropdown-toggle {
  color: #fff;
  background-color: #863ba1;
  border-color: #7d3796;
}
.btn-pourpre:not(:disabled):not(.disabled):active:focus, .btn-pourpre:not(:disabled):not(.disabled).active:focus, .show > .btn-pourpre.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(162, 81, 191, 0.5);
}
.btn-outline-pourpre {
  color: #a251bf;
  background-color: transparent;
  border-color: #a251bf;
}
.btn-outline-pourpre:hover {
  color: #fff;
  background-color: #a251bf;
  border-color: #a251bf;
}
.btn-outline-pourpre:focus, .btn-outline-pourpre.focus {
  box-shadow: 0 0 0 0.2rem rgba(162, 81, 191, 0.5);
}
.btn-outline-pourpre.disabled, .btn-outline-pourpre:disabled {
  color: #a251bf;
  background-color: transparent;
}
.btn-outline-pourpre:not(:disabled):not(.disabled):active, .btn-outline-pourpre:not(:disabled):not(.disabled).active, .show > .btn-outline-pourpre.dropdown-toggle {
  color: #fff;
  background-color: #a251bf;
  border-color: #a251bf;
}
.btn-outline-pourpre:not(:disabled):not(.disabled):active:focus, .btn-outline-pourpre:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-pourpre.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(162, 81, 191, 0.5);
}
.list-group-item-pourpre {
  color: #5b286d;
  background-color: #e9d7f0;
}
.list-group-item-pourpre.list-group-item-action:hover, .list-group-item-pourpre.list-group-item-action:focus {
  color: #5b286d;
  background-color: #dfc4e9;
}
.list-group-item-pourpre.list-group-item-action.active {
  color: #fff;
  background-color: #5b286d;
  border-color: #5b286d;
}
.table-pourpre, .table-pourpre > th, .table-pourpre > td {
  background-color: #e9d7f0;
}
.table-hover .table-pourpre:hover {
  background-color: #dfc4e9;
}
.table-hover .table-pourpre:hover > td, .table-hover .table-pourpre:hover > th {
  background-color: #dfc4e9;
}
.text-pourpre {
  color: #a251bf !important;
}
a.text-pourpre:hover, a.text-pourpre:focus {
  color: #863ba1 !important;
}

/* Styles globaux */
.responsive-image {
    width: 100%;      /* L'image prend 100% de la largeur du conteneur */
    height: auto;     /* La hauteur est calculée automatiquement pour maintenir le ratio */
    max-width: 100%;  /* L'image ne peut pas dépasser la largeur du conteneur */
    display: block;   /* Assure que l'image se comporte comme un bloc */
    margin: 0 auto;   /* Centre l'image horizontalement */
}

/* Styles spécifiques aux petits écrans */
@media screen and (max-width: 768px) {
    .responsive-image {
        width: 100%;    /* L'image prend toute la largeur du conteneur */
        height: auto;   /* Conserve les proportions de l'image */
        margin: 0 auto; /* Centre l'image */
    }
}