/* Styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: Arial, sans-serif; /* Police d'écriture pour toute la page */
}

#macarte {
    width: 100%;
    height: 100%;
}

/* Style pour le titre centré */
.titre-centrer {
    text-align: center; /* le titre est centré sur la page*/
    font-size: 2em; /* taille fixe du titre */
    margin: 20px 0; /* espace en haut de 20px */
    color: #1e2535;
}

/* Conteneur pour la carte */
#map-container {
    position: relative;
    width: 80%; /* largeur de 80% de la page */ 
    height: 70vh; /* hauteur fixée */ 
    margin: 20px auto; /* espace en heut de 20px, le reste est automatique */ 
    border: 2px solid #1e2535; /* définition des bordures, taille, type et couleur */ 
    border-radius: 10px; /* bords arrondies */ 
    overflow: hidden; /* quand le contenu d’un élément dépasse sa taille (width/height), alors on le cache */
}


/* =============================== Popup générale =============================== */
#popup {
    position: absolute; /* position relative à #map-container */
    display: none;      /* masquée par défaut */
    z-index: 1000;      /* au-dessus de la carte */
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    max-height: auto;
    max-width: 400px;
    border-radius: 15px;
}

/* =============================== Conteneur principal =============================== */
.popup-slider {
    display: flex;
    flex-direction: column; /* Organise les éléments en colonnes */
    overflow: hidden; /* empêche le scroll */
}

/* =============================== Compteur =============================== */
/* Compteur qui affiche le nombre de cas pour un même point */
.popup-counter {
    text-align: center; /* Centre le compteur */
    font-weight: bold; /* s'affiche en gras */
    font-size: 14px; /* taille du texte */
    margin-bottom: 6px; /* espace en haut du comptreur, à avec l'élément du dessus */
}

/* =============================== Slider horizontal =============================== */
.popup-track {
    display: flex;
    transition: transform 0.3s ease; /* caractéristique de la transition au chagement de popup */
}

/* =============================== Contenu d’une fiche =============================== */
.popup-content {
    min-width: 100%; /* taille minimum */
    box-sizing: border-box; /* contrôle la taille, le padding est inclus */
}

/* STYLE H3*/
.popup-content h3 {
    margin: 0 0 6px; /* marge en haut, droite et gauche et en bas (6px) */
    font-size: 1.2em; /* Taille du titre h3 */
    color: #FFA500; /* Couleur du titre h3 */
}

/* STYLE PARAGRAPHE */
.popup-content p {
    margin: 2px 0; /* marge de 2px en haut */
    line-height: 1.5; /* interligne */
    color: #000000; /* coueur du texte */
    font-size: 0.8em; /* taille du texte */
}

/* STYLE POUR LES ELEMENTS EN STRONG dans le html */
.popup-content strong {
    color: #1e2535; /* Couleur */
}

/* =============================== Navigation bas =============================== */
.popup-nav {
    display: flex;
    justify-content: space-between; /* le premier élément est collé au début, le dernier à la fin, et tout l’espace restant est réparti entre les éléments */
    margin-top: 10px; /* marge avec le haut */
}

/* STYLE DES BOUTON SUIVANT ET PRECEDENT */
.popup-arrow {
    background: #f5f5f5; /* couleur de fond */
    border: 1px solid #ccc; /* défintion des bordures */ 
    padding: 6px 12px; /* espace en heut / droite et gauche */ 
    cursor: pointer; /* type de curseur de la souris, au passage sur l'élément */ 
    border-radius: 6px; /* bordure arrondie */ 
    font-size: 13px; /* taille du texte des boutons */ 
}

.popup-arrow:hover {
    background: #eaeaea; /* changement de couleur du bouton, au passage de la souris, via un fond légérement grisé */ 
}