<style>
    body {
            /* Pas de scroll sur le body global */
        height: 100vh;
        margin: 0;
        padding: 0;
        display: flex;
        overflow: hidden;
        justify-content: center;
    }

    .firstLayer {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 100;
    }

    .border-image {
        width: 60px;
        height: 100%;
        object-fit: fill; 
    }

    #particles-js {
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        background-image: url('');
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    
    .copyright {
        position:absolute;
        bottom:0px;
        width:100%;
        height:42px;
        left:0px;
        padding:0;
        z-index:99;
        color:#212529;
        font-size: 0.9em;
    }
    /* ======================================== OPUS 4.5 */
        /* =========================================
        VARIABLES CSS
        ========================================= */
    :root {
        --fixed-size-x: 60px;
        --fixed-size-y: 60px;
        
        --margin-top: 20px;
        --margin-bottom: 0px;
        
        --container-min-width: 400px;
        --container-max-width: 1300px;

        /*--primary-color: #1266f1;
        /*--bg-body: transparent;
        --text-color: #bbbbbb;
        */
        --cell-bg: transparent;
        --cell-5-bg: #212529; /* Fond légèrement différent pour la zone de contenu */
        --opacity-5: 0.92;
    }

    /* =========================================
        RESET
        ========================================= */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        }

    /* =========================================
        GRILLE PRINCIPALE
        ========================================= */
    .grid-wrapper {
        width: 100%;
        max-width: var(--container-max-width);
        min-width: var(--container-min-width);
        opacity: var(--opacity-5);
        /* Calcul de la hauteur : Total - (Marge Haut + Marge Bas) */
        height: calc(100vh - var(--margin-top) - var(--margin-bottom));
        margin-top: var(--margin-top);
        margin-bottom: var(--margin-bottom);
        margin-left: auto;
        margin-right: auto;

        display: grid;
        grid-template-columns: var(--fixed-size-x) 1fr var(--fixed-size-x);
        grid-template-rows: var(--fixed-size-y) 1fr var(--fixed-size-y);
        gap: 0;
    }

    /* =========================================
        STYLE DES CELLULES
        ========================================= */
    .cell {
        background-color: var(--cell-bg);
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-color);
    }

    .cell-2, .cell-8 {
        justify-content: space-between; /* Un élément au début, un à la fin */
        align-items: center; /* Centrage vertical */
        padding: 0px; /* Petit espace pour que les images ne touchent pas le bord exact */
        display: flex; /* Flexbox est activé ici */
    }

    /* Spécifique à la cellule 5 pour le contenu */
    .cell-5 {
        background-color: var(--cell-5-bg);
        /* Important : on force la cellule à ne pas dépasser de la grille */
        overflow: hidden; 
        padding: 0; /* On enlève le padding par défaut de la flexbox si on mettait du padding sur .cell */
        display: block; /* On change flex en block pour gérer le scroll vertical proprement */
    }

    /* =========================================
        CONTENU SCROLLABLE DANS LA CELLULE 5
        ========================================= */
    .scroll-container {
        height: 100%;       /* Prend 100% de la hauteur de la cellule 5 */
        width: 100%;
        overflow-y: auto;   /* Active la scrollbar verticale */
        overflow-x: hidden; /* Désactive la scrollbar horizontale */
        padding: 20px;      /* Marge interne pour le contenu */
        
        /* Typographie pour le contenu */
        color: #444;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.6;
    }

    /* Empêcher le texte de déborder horizontalement */
    .scroll-container p {
        margin-bottom: 15px;
        word-wrap: break-word; /* Coupe les mots trop longs */
    }

    /* Personnalisation de la scrollbar (Optionnel : pour Chrome/Safari/Edge) */
    .scroll-container::-webkit-scrollbar {
        width: 20px; /* Largeur de la scrollbar */
    }
    .scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1; 
    }
    .scroll-container::-webkit-scrollbar-thumb {
        background: #ccc; 
        border-radius: 5px;
    }
    .scroll-container::-webkit-scrollbar-thumb:hover {
        background: #aaa; 
    }

    /* =========================================
        PLACEMENT DES CELLULES
        ========================================= */
    .cell-1 { grid-column: 1 / 2; grid-row: 1 / 2; }
    .cell-2 { grid-column: 2 / 3; grid-row: 1 / 2; }
    .cell-3 { grid-column: 3 / 4; grid-row: 1 / 2; }

    .cell-4 { grid-column: 1 / 2; grid-row: 2 / 3; }
    .cell-5 { grid-column: 2 / 3; grid-row: 2 / 3; } /* La cellule centrale */
    .cell-6 { grid-column: 3 / 4; grid-row: 2 / 3; }

    .cell-7 { grid-column: 1 / 2; grid-row: 3 / 4; }
    .cell-8 { grid-column: 2 / 3; grid-row: 3 / 4; }
    .cell-9 { grid-column: 3 / 4; grid-row: 3 / 4; }

</style>