107 lines
2.4 KiB
CSS
107 lines
2.4 KiB
CSS
/* 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;
|
|
}
|
|
|
|
/* 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: 10px auto;
|
|
border: 2px solid #333;
|
|
}
|
|
/* Section 2 - Organisation en colonne */
|
|
#section-top-right {
|
|
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: 50px;
|
|
height: 50px;
|
|
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%;
|
|
}
|