body {
    font-family: 'Arial', sans-serif; /* Utilise la police Arial */
    background-image: url('BG.jpg'); /* Définit une image de fond */
    background-size: cover; /* L'image de fond couvre toute la surface */
    background-position: center; /* Centre l'image de fond */
    margin: 0; /* Enlève la marge par défaut autour de la page */
    padding: 0; /* Enlève les bordures internes */
    color: #333; /* Définit la couleur du texte par défaut */
    display: flex; /* Utilise Flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100vh; /* La hauteur du corps prend toute la hauteur de la fenêtre */
    overflow: hidden; /* Empêche le débordement et le défilement de la page */
}

#container {
    width: 1850px; /* Largeur fixe du conteneur */
    max-height: 900px; /* Hauteur maximale du conteneur */
    background-color: rgba(255, 255, 255, 0.2); /* Fond semi-transparent */
    overflow: hidden; /* On cache l'excès de contenu qui dépasse */
    position: relative; /* Position relative pour un positionnement interne */
    padding: 5px; /* Espace interne de 5px */
    box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur/hauteur */
    display: flex; /* Utilise Flexbox pour organiser le contenu en colonnes */
    flex-direction: column; /* Dispose les éléments enfants en colonne */
    margin-top: 80px; /* Décale légèrement le conteneur vers le bas */
    flex-grow: 1; /* Permet au conteneur de s'adapter en fonction du contenu */
}

#data-container {
    display: flex;
    flex-direction: column;
    padding: 10px; /* Ajoute un espace interne de 20px */
    box-sizing: border-box; /* Inclut les bordures et padding dans la largeur/hauteur */
/*	animation: scroll 20s linear 2s infinite; /* Animation de défilement */
}

/* Couleur de fond pour le groupe "MSC_DE" */
.grp-msc-de {
    background-color: #f4eee5; /*  */
}

/* Couleur de fond pour le groupe "MSC_DM" */
.grp-msc-dm {
    background-color: #f4eee5; /*  */
}

/* Couleur de fond pour le groupe "MSC_AIB" */
.grp-msc-aib {
    background-color: #f4eee5; /*  */
}

/* Couleur de fond pour le groupe "PGE" */
.grp-pge {
    background-color: #f4eee5; /*  */
}

/* Couleur de fond pour le groupe "BSC_IAA" */
.grp-bsc-iaa {
    background-color: #f4eee5; /*  */
}

/* Couleur de fond par défaut si aucun Groupe_Code spécifique n'est trouvé */
.grp-default {
    background-color: #f4eee5; /*  */
}

/* Style des éléments individuels dans le conteneur de données */
.data-item {
    border: 1px solid #ddd; /* Bordure grise légère autour des éléments */
    margin-bottom: 5px; /* Espace entre les éléments */
    padding: 10px; /* Espace interne pour chaque élément */
    border-radius: 5px; /* Angles arrondis */
    display: grid; /* Utilisation de la grille CSS pour disposer le contenu */
    grid-template-columns: auto 1fr auto auto; /* Quatre colonnes : 2 automatiques, 1 flexible et 1 fixe */
    gap: 10px; /* Espacement entre les colonnes */
    align-items: center; /* Aligne verticalement les éléments au centre */
    justify-items: start; /* Aligne tout à gauche par défaut */
    position: relative; /* Position relative pour pouvoir ajouter des séparateurs */
}

/* Suppression des marges des éléments <p> dans .data-item */
.data-item p {
    margin: 0; /* Enlève les marges par défaut */
    padding: 0 10px; /* Ajoute un peu de padding pour aérer */
    position: relative;
}

/* Ajouter un séparateur avant chaque élément sauf le premier */
.data-item p:not(:first-child)::before {
    content: "|"; /* Le séparateur à afficher */
    color: #333333; /* Couleur du séparateur pour être bien visible */
    position: absolute;
    left: -8px; /* Ajustement de la position à gauche du texte */
    top: 50%;
    transform: translateY(-50%); /* Centre verticalement le séparateur */
    font-size: 20px; /* Taille du séparateur pour correspondre au texte */
}

/* Justification à gauche pour certains éléments */
.justifG {
    flex: 1; /* Prend tout l'espace disponible */
    text-align: left; /* Aligne le texte à gauche */
}

/* Justification à droite pour certains éléments */
.justifD {
    flex: 1; /* Prend tout l'espace disponible */
    justify-self: end; /* Assure que l'élément est aligné à droite dans la grille */
    text-align: right; /* Aligne le texte à droite */
}

/* Taille de texte moyenne (text-medium) */
.text-medium {
    font-size: 22px; /* Taille de police */
}

/* Animation de défilement */
@keyframes scroll {
    0% {
        transform: translateY(0); /* Début en haut */
    }
    20% {
        transform: translateY(0); /* Début en haut */
    }
    80% {
        transform: translateY(-50%); /* Le contenu défile jusqu'à -2000px */
    }
    100% {
        transform: translateY(-50%); /* Pause de 5% du temps */
    }
}