/* Body pour remplir toute la page */
        body, html {
            height: 100%;
            margin: 0;
            background-color: #99FF99;
            font-family: Arial, sans-serif;
        }

/* Style de l'en-tête */
    .header {
        width: 100%;
        text-align: center;
        padding: 20px;
        background-color: #66cc66;
        color: #fff;
        font-family: Arial, sans-serif;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .header h1 {
        font-size: 2.5rem;
        margin: 0;
    }

    .header span {
        color: #ffcc00; /* Couleur différente pour "BN-AFN" */
    }
/* end Style de l'en-tête */

        /* Conteneur des cubes, avec une marge pour ne pas être sous l'en-tête */
        .main-content {
            margin-top: 80px; /* Assurez-vous que le contenu ne soit pas caché par l'en-tête */
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 100px); /* Ajuster la hauteur en fonction de l'en-tête */
        }

        /* Conteneur du parallélépipède */
        .cube-container {
            width: 400px;
            height: 260px;
            perspective: 1000px;
        }

        /* Parallélépipède 1*/
        .cube1 {
            width: 100%;
            height: 100%;
            position: relative;
            margin-top: -30px;
            margin-left:-60px;
            transform-style: preserve-3d;
            animation: rotation1 15s infinite linear; /* Durée de 15 secondes */
            transform: rotateX(10deg); /* Incliner l'axe de rotation de 10° */
        }

        /* Parallélépipède 2 */
        .cube2 {
            margin-top: 80px;
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotation2 20s infinite linear; /* Durée de 20 secondes */
            transform: rotateX(10deg); /* Incliner l'axe de rotation de 10° */
        }

        /* Faces du parallélépipède */
        .face {
            position: absolute;
            width: 400px;  /* Largeur des faces avant/arrière */
            height: 260px; /* Hauteur des faces avant/arrière */
            background-size: cover;
            background-position: center;
            border: 2px solid #000;
            box-sizing: border-box;
        }

        /* Positionnement des différentes faces du parallélépipède */
        .front  { transform: translateZ(200px); }
        .back   { transform: rotateY(180deg) translateZ(200px); }
        .left   { transform: rotateY(-90deg) translateZ(130px); }
        .right  { transform: rotateY(90deg) translateZ(130px); }

        /* Animation pour faire tourner le parallélépipède */
        @keyframes rotation1 {
            from { transform: rotateX(15deg) rotateY(0deg); }
            to { transform: rotateX(25deg) rotateY(360deg); }
        }

        @keyframes rotation2 {
            from { transform: rotateX(15deg) rotateY(0deg); }
            to { transform: rotateX(25deg) rotateY(360deg); }
        }