/* --- FEUILLE DE STYLES POUR LA GRILLE DE COMPOSITION DE 12 COLONNES POUR LE DESKTOP ET DE QUATRE COLONNES POUR LE MOBILE --- */

/* --- DÉBUT GUIDE VISUEL ROUGE POUR LE DESKTOP --- */
.grid-composition::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 10;
    /* ajustement du gap à 16px */
    background-image: repeating-linear-gradient( 
        to right, 
        rgba(231, 76, 60, 0) 100%, 
        rgba(231, 76, 60, 0) calc((100% / 12) - (16px * 11 / 12)), 
        transparent calc((100% / 12) - (16px * 11 / 12)), 
        transparent calc(100% / 12));
    /* ajustement de la taille avec le gap à 16px */
    background-size: calc(100% + 16px) 100%;
}
/* --- FIN GUIDE VISUEL ROUGE POUR LE DESKTOP --- */


/* --- DÉBUT POINTS DE RUPTURE POUR MOBILE EN DESSOUS DE 768 PIXELS --- */
@media (max-width: 768px) {
    /* ajustement du guide visuel pour mobile avec le gap de 16px */
    .grid-composition::before { 
        background-image: repeating-linear-gradient( 
            to right, 
            rgba(231, 76, 60, 0) 100%, 
            rgba(231, 76, 60, 0) calc((100% / 4) - (16px * 3 / 4)), 
            transparent calc((100% / 4) - (16px * 3 / 4)), 
            transparent calc(100% / 4) 
        ); 
    }
}/* --- FIN POINTS DE RUPTURE POUR MOBILE EN DESSOUS DE 768 PIXELS --- */