body {
    font-family: 'Arial', sans-serif;
    background-color: #ffffff; /* Couleur de fond douce */
    margin: 0;
    padding: 0;
    
}

h1 {
    text-align: center;
    color: #2c3e50;
    margin-top: 23px;
    font-size: 1.5rem;
}
.continent-text {
    position: absolute;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1rem;
    pointer-events: none;
}

.continent-text.eu {
    opacity: 0;
    left: 28%;
    top: 35%;
}

.continent-text.eu.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.continent-text.as {
    opacity: 0;
    left: 40%;
    top: 32%;
}

.continent-text.as.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.continent-text.na {
    opacity: 0;
    left: 8%;
    top: 37%;
}

.continent-text.na.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.continent-text.sa {
    opacity: 0;
    left: 15%;
    top: 77%;
}

.continent-text.sa.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.continent-text.af {
    opacity: 0;
    left: 28%;
    top: 60%;
}

.continent-text.af.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.continent-text.oc {
    opacity: 0;
    left: 46%;
    top: 89%;
}

.continent-text.oc.open {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}

.map-area:focus {
    outline: 0;
}

.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Style des boutons */
.menu-button {
    background-color: #3498db; /* Bleu de fond */
    color: #fff; /* Texte en blanc */
    font-size: 0.9rem; /* Taille de police agréable */
    padding: 9px 15px; /* Espacement confortable */
    border: none;
    border-radius: 30px; /* Coins arrondis pour un look moderne */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce sous les boutons */
    transition: all 0.3s ease; /* Transition fluide */
}

/* Effet au survol */
.menu-button:hover {
    background-color: #2980b9; /* Bleu plus foncé au survol */
    transform: translateY(-3px); /* Légère élévation du bouton au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Ombre plus marquée au survol */
}

/* Effet au focus pour les boutons */
.menu-button:focus {
    outline: none; /* Retirer le contour par défaut */
    border: 2px solid #2980b9; /* Bordure bleue pour indiquer le focus */
}

/* Style pour un bouton sélectionné ou actif */
.menu-button.active {
    background-color: #1abc9c; /* Changer la couleur pour l'état actif */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Ombre plus forte pour le bouton actif */
}

#continent-info {
    position: absolute;
    display: none;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    color: #000;
}
.hidden {
    display: none;
}

/* Taille des conteneurs des graphiques */
#chart1-container {
    width: 800px; /* Fixe la largeur */
    height: 500px; /* Fixe la hauteur */
    margin: 23px auto; /* Centrer le graphique */
}

#chart2-container {
    position: absolute;
    bottom: 30px;   /* Toujours ajuster selon ta préférence */
    left: 20px;     /* Ajuster selon ton besoin */
    width: 300px;   /* Réduire la largeur */
    height: 250px;  /* Réduire la hauteur */
    z-index: 999;
}
#map-container {
    position: relative;
    z-index: 1;
}

#worldMap {
    max-width: 80%; /* Limiter la largeur de la carte */
    height: auto; /* Assurer une hauteur fluide */
    margin: 0 auto; /* Centrer horizontalement */
    display: block; /* Pour que le margin auto fonctionne */
}
#fear {
    width: 60%;
    margin: 0 auto; /* Centrer horizontalement */
    display: block; /* Assure que l'élément est traité comme un bloc */
}

#graph {
    width: 60%;
    margin: 0 auto; /* Centrer horizontalement */
    display: block; /* Assure que l'élément est traité comme un bloc */
}