.menu {
  display: grid; /* IMPORTANT : grid pour 2 cartes par ligne */
  grid-template-columns: repeat(2, 1fr); /* 2 cartes par ligne */
  gap: 20px;
  max-width: 1200px;
  margin: 50px auto;
}



.menu-card {
  display: flex; /* pour centrer le contenu */
  align-items: center;
  justify-content: center;
  height: 500px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  text-decoration: none;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.menu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  background: #e0e0ff;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.menu-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.menu-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.menu-card {
  display: flex;
  flex-direction: column; /* empile verticalement texte et contenu */
  align-items: center;    /* centre horizontalement le contenu */
  justify-content: flex-start;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 20px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
}

.menu-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.menu-card {
  display: flex;
  flex-direction: column; /* empile le texte et le graphique */
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 20px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
}

.menu-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

#miniChart {
  width: 300px !important;
  height: 300px !important;
  margin: auto;
  display: block;
  font-size: 20px;
}

/* la carte agenda doit pouvoir grandir */
#carte-agenda { height: auto; }

/* style du contenu */
#agendaPreview .agenda-item {
  font-size: 14px;
  padding: 2px 0;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.mini-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.note-preview {
  margin-top: 10px;
  font-size: 14px;
  text-align: left;
  max-height: 100px; /* limite la hauteur si beaucoup de texte */
  overflow: hidden;  /* cache le reste si trop long */
}

.contacts-preview {
  margin-top: 10px;
  font-size: 14px;
  text-align: left;
  max-height: 150px; /* optionnel : limite la taille de la carte */
  overflow-y: auto;  /* scroll si trop de liens */
}
.contacts-preview a {
  display: block;
  color: #007bff;
  text-decoration: none;
  margin-bottom: 5px;
}
.contacts-preview a:hover {
  text-decoration: underline;
}

.tasks-preview li {
  display: block;
  color: black;
  text-decoration: none;
  margin-bottom: 5px;
  margin-top: 10px;
  font-size: 16px;
}