.intro {
    flex-wrap: wrap;
}

.intro-text {
    flex: 1;
    padding: 20px;
}

.intro-map {
    flex: 1;
    max-width: 400px;
    padding: 20px;
    background-color: #e0f7e9;
    border-radius: 10px;
    overflow: hidden;
}

.map__image {
    width: 100%;
    border: 1px solid #ccc;
}

.map__image a {
    fill: #a4ced2;
    stroke: #fff;
    transition: fill 0.3s;
}

.map__image a:hover {
    fill: #cf6a18;
}

.regional-coordinations {
    padding: 20px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.coordination {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style pour les régions où la CEEMUCI est présente */
.region-active path {
    fill: #a4ced2; /* Couleur de fond des régions par défaut */
    transition: fill 0.3s;
}

/* Couleur pour les régions non-actives */
.region-non-active path {
    fill: #D3D3D3; /* Couleur des régions actives au survol */
    opacity: 0.8; /* Légère transparence */
}

/* Couleur pour les régions actives */
.region-active.is-active path {
    fill: #20201f; /* Couleur des régions actives au survol */
    opacity: 0.8; /* Légère transparence */
}


/* Surbrillance des régions actives */
.region-active path {
    fill: #0a5f4a;
    opacity: 0.9; /* Transparence pour indiquer la présence */
}

/* Lors du survol */
.region-active:hover path {
    opacity: 0.7;
    fill: #258807;
}

.region-label {
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    text-anchor: middle;
    fill: #333;
}



/* Styles pour améliorer l'apparence */
.intro-university {
    background-color: #e0f7e9;
    padding: 20px;
    border-radius: 10px;
}

.university-coordinations .card {
    border-radius: 10px;
    transition: transform 0.3s;
}

.university-coordinations .card:hover {
    transform: scale(1.05);
}

.university-coordinations .card-body .btn-outline-success, .university-coordinations .card-body .btn-outline-primary, .university-coordinations .card-body .btn-outline-warning {
    border-radius: 20px;
    font-weight: bold;
}

.university-coordinations .card .card-header {
    font-size: 1.2em;
    font-weight: bold;
}

button.toggle-details i {
    margin-left: 5px;
}