/* Styles communs pour tous les diagrammes */
.diagram-small, .diagram-medium, .diagram-big {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center;     /* Centre le contenu verticalement */
    flex-direction: column;  /* Aligne les éléments verticalement */
    margin: 0 auto;          /* Centre la div sur la page */
    overflow: hidden;        /* Masque tout débordement du contenu */
    /* Dimensions spécifiques pour chaque taille de diagramme */
}
.diagram-small {
    width: 320px;  /* Largeur fixe de la div */
    height: 240px; /* Hauteur fixe de la div */
}
.diagram-medium {
    width: 700px;  /* Largeur fixe de la div */
    height: 500px; /* Hauteur fixe de la div */
}
.diagram-big {
    width: 100%;            /* Largeur responsive */
    max-width: 1024px;      /* Largeur maximale de la div */
    height: auto;           /* Hauteur ajustée automatiquement */
}
/* Styles pour les images à l'intérieur des diagrammes */
.diagram-small img,
.diagram-medium img,
.diagram-big img {
    width: 100%;               /* L'image occupe toute la largeur du conteneur */
    height: 100%;              /* L'image occupe toute la hauteur du conteneur */
    object-fit: contain;       /* Maintient le ratio d'aspect sans déformer l'image */
    object-position: center;   /* Centre l'image dans le conteneur */
}