:root { --currentColor: var(--vert); }
/* INTRO ------------------------------- */ 
#intro {
    color: var(--lightColor);
    background-color: var(--currentColor);
}

/* DERNIERS PROJETS ---------------------- */
#derniersProjets ul {
    list-style: none;
    min-height: fit-content;
 }

#derniersProjets ul li {
    width: 100%;
    height: 100%;
    gap: var(--padding);
    min-height: fit-content;
    margin-bottom: calc(var(--padding)*2);
}  
#derniersProjets ul li a {
    border: none;
    font-weight: var(--fw-normal);

} 
#derniersProjets .liste {
    padding: 1rem;
    height: 100%;
    color: var(--currentColor);
    background-color: var(--blanc);
}

#derniersProjets .liste > * {
    margin: 0 0 .5rem  0;
}
    #derniersProjets .liste figure {
        width: 100%;
    }

    #derniersProjets .liste > h3 {
        display: inline-block;
        font-size: var(--fs-l);
        text-decoration: underline;
        margin: 0 0 1rem 0;
    }

/* PROJETS ------------------------------- */
#projets {
    padding-top:calc( var(--padding) + var(--hauteurMenu));
    border-top: 1px solid;
}
.actif {
    background-color: var(--blanc);
}
.actif:hover {
    background-color: var(--lightColor) !important;
}
.liste > * {
    width: fit-content;
}
/* BLOC Filtres NAV  */
.liste-header {
    margin-bottom: .5rem;
}
.liste-header h2 {
    padding-bottom: 0;
}
.liste-header h2,
nav.filtercloud, 
    nav.filtercloud h4,
    nav.filtercloud a {
    display: flex;
    flex-wrap: wrap;
}
.liste-header,
nav.filtercloud {
    align-content: center;
}
.liste-header h2,
    nav.filtercloud h4 {
        height: fit-content;
        align-self: center;
    }
    nav.filtercloud h4{
        font-weight: var(--fw-normal);
        margin: 0;
    }
    nav.filtercloud h4, 
    nav.filtercloud a {
        padding-inline-end: .5rem;
        font-size: var(--fs-xs);
        line-height: 1.5rem;
    }
    nav.filtercloud a {
        border: none;
        font-weight: var(--fw-normal);
        border: 1px solid;
        border-radius: 1rem;
        padding-inline-start: .5rem;
        padding-bottom: .1rem;
        margin: .25rem;
    }
        nav.filtercloud a.filtre-actif { 
            color: var(--lightColor);
            background-color: var(--currentColor);
            border-color: transparent;
        } 


    /* Liste des projets */
    #projets ul {
        list-style: none;
        margin-bottom: var(--padding);
    }
    #projets li {
        border-bottom: 1px solid;
        margin: 0;
    }
    #projets li:first-of-type {
        border-top: 1px solid;
    }
    #projets 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);
        }

        #projets div.liste.grid > time {
            grid-column: 1/2;
        }

            #projets div.liste.grid > h3 {
                grid-column: 2/3;
                justify-self: start;
                font-weight: var(--fw-gras);
            }
            #projets div.liste.grid > .liste-lieu, 
            #projets div.liste.grid > .liste-lieu span {
                grid-column: 2/3;
                font-size: var(--fs-xs);
            }
            #projets div.liste.grid > .liste-categorie {
                grid-column: 2/3; 
                font-size: var(--fs-xs);
            }
                #projets div.liste.grid > .liste-categorie:before {
                    content: "| ";
                    white-space: pre;
                    padding-top: .1rem;
                }
            #projets div.liste.grid > .fleche {
                display: block;
                grid-column: 3/4;
                grid-row: 1/-1;
                align-self: start;
                height: 100%;
            }
@media screen and (min-width: 600px) {
    /* DERNIERS PROJETS */
    #derniersProjets ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--padding);
        min-height: fit-content;
        }
    }

@media screen and (min-width: 1024px) {
/* INTRO ------------------------------- */
#intro {
    min-height: var(--hauteur-section);
}

/* DERNIERS PROJETS */
#derniersProjets {
    padding-bottom: var(--padding);
}
    #derniersProjets ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--padding);
        min-height: fit-content;
    }
        #derniersProjets ul li {
            margin-bottom: 0;
            
        }

            #derniersProjets a:hover .liste {
                color: var(--blanc);
                background-color: var(--bleu);
                transition: background-color 0.15s ease-in-out; /* Animer l'apparition/disparition du sous-menu */
                -webkit-transition: background-color 0.15s ease-in-out;
                -moz-transition: background-color 0.15s ease-in-out;
                -o-transition: background-color 0.15s ease-in-out;
            }

            #derniersProjets h3 {
                font-size: var(--fs-m);
            }
            #derniersProjets a:hover .liste h3:before {
                content: "→ ";
                white-space: pre;
            }

            #derniersProjets a:hover .liste .categories {
                border-color: inherit;
            }
/* ARCHIVES ------------------------------- */
#projets h2 {
    padding-bottom: 0;
}
/* BLOC Filtres NAV */
nav.filtercloud a {
    padding-bottom: 0;
} 
    nav.filtercloud a:hover { 
        color: var(--lightColor);
        background-color: var(--currentColor);
        border-color: transparent;
    }

/* Liste des projets */    
#projets li a:hover {
    background-color: var(--blanc);
}

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


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