/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Conteneur principal */
#container {
    display: flex;
    flex-direction: row;
    height: 100vh; /* Vue entière */
    gap: 10px; /* Espacement entre les sections */
    padding: 10px;
}

/* Section principale (à gauche) */
.large-section {
    flex: 2; /* Prend plus d'espace */
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 5px;
}

/* Conteneur pour les sections de droite */
.section-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement vertical */
}

/* Petites sections (à droite) */
.small-section {
    flex: 1;
    background-color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 5px;
}

/* Section pour Baptiste */
#section-top-right-baptiste {
    background-color: #82c4f3; /* Couleur bleutée */
}

/* Section pour Julien */
#section-top-right-julien {
    background-color: #a379e6; /* Couleur rosée */
}

/* Responsivité : Pour les tablettes */
@media (max-width: 1024px) {
    #container {
        flex-direction: column; /* Colonne pour iPad portrait */
    }
    .large-section {
        flex: 1;
    }
    .section-container {
        flex: 1;
    }
}

#section-top-right h2,
#section-top-right p {
    margin: 5px 0;
    text-align: center;
}

#user-avatar {
    display: block;
    margin: 5px auto;
    border: 0px solid #333;
}
/* Section 2 - Organisation en colonne */
#section-top-right, #section-top-right-baptiste, #section-top-right-julien {
    display: flex;           /* Active le flexbox */
    flex-direction: column;  /* Aligne les éléments en colonne */
    align-items: center;     /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
    gap: 10px;               /* Espacement entre les éléments */
    font-size: 14px;         /* Taille identique pour tous les caractères */
    text-align: left;        /* Alignement du texte */
    padding: 10px;
}

#section-top-right h2,
#section-top-right p {
    margin: 0;               /* Enlève les marges par défaut */
    font-size: 14px;         /* Taille identique */
}

#user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;      /* Avatar en forme de cercle */
    object-fit: cover;
   /* border: 2px solid #333;  /* Bordure autour de l'avatar */
}
#map {
    width: 100%;
    height: 100%;
}

#user-avatar-julien {
    width: 70px;
    height: 70px;
    border-radius: 50%;      /* Avatar en forme de cercle */
    object-fit: cover;
    /*border: 2px solid #333;  /* Bordure autour de l'avatar */
}