/* SECTION BASE ------------------------------- */ 
main > section, 
main #contenu_principal {
    width: 100%;
    padding: 0;
}
section > .layout:first-child,
main #contenu_principal > .layout:first-child{
    border-top:none;
}
/* SECTION LAYOUTS + PARTENAIRES ------------------------------- */ 
main #contenu_principal,
main #partenaires, 
main #references {
    min-height: fit-content;
}
    /* BLOC Layout */
    main #contenu_principal div.layout,
    main #partenaires div.layout, 
    main #references {
        padding: var(--padding);
    }

/* SECTION RÉFÉRENCES --------------------------------------- */
#references {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 0;
    border-top: 1px solid;
}
#references h2, 
#partenaires h2 {
    font-size: var(--t3);
}
    /* Liste des projets */
    #references ul {
        list-style: none;
        margin-bottom: var(--padding);
    }
    #references li {
        border-bottom: 1px solid;
        margin: 0;
    }
    #references li:first-of-type {
        border-top: 1px solid;
    }
    #references li a {
        display: block;
        padding: .5rem 0;
        border: none;
    }
    .liste.grid {
        grid-template-columns: min-content 1fr min-content;
    }
        .liste.grid * {
            margin: 0;
            padding: 0;
            font-size: var(--fs-s);
            font-weight: var(--fw-normal);
        }
        #references div.liste.grid > time {
            grid-column: 1/2;
        }

            #references div.liste.grid > h3 {
                grid-column: 2/3;
                justify-self: start;
                font-weight: var(--fw-gras);
            }
            #references div.liste.grid > .liste-lieu {
                grid-column: 2/3;
            }
            #references div.liste.grid > .liste-lieu, 
            #references div.liste.grid > .liste-lieu span {
                font-size: var(--fs-xs);
            }

            #references div.liste.grid > .fleche {
                display: block;
                grid-column: 3/4;
                grid-row: 1/-1;
                align-self: start;
                height: 100%;
            }

            
@media screen and (min-width: 1024px) {
/* SECTION RÉFÉRENCES --------------------------------------- */
#references li a:hover {
    background-color: var(--blanc);
}

#references li a:hover * {
    font-weight: var(--fw-gras);
}
    .liste.grid {
        align-items: center;
        grid-template-columns: repeat(12, minmax(min-content, 1fr));
    }

        #references div.liste.grid > time {
            grid-column: 1/2;
        }
        #references li a:hover time:before {
            content:"→ ";
            white-space: pre;
    
        }
        #references div.liste.grid > h3 {
            grid-column: 2/9;
        }
        #references div.liste.grid > .liste-lieu {
            justify-self: end;
            grid-column: 9/13;
        }
        #references div.liste.grid > .fleche {
            display: none;
            height: 0;
        }
}