/* ========================= */
/* BASE BODY & TYPOGRAPHIE   */
/* ========================= */
body {
    font-family: 'Newsreader', serif;
    line-height: 1.4;
    margin: 0;
    font-size: 24pt;
}

/* ------------------------- */
/* Font Ronzino              */
/* ------------------------- */
@font-face {
    font-family: "Ronzino";
    src: url("fonts/Ronzino-Medium.woff2") format("woff2"),
         url("fonts/Ronzino-Medium.woff") format("woff"),
         url("fonts/Ronzino-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ------------------------- */
/* HEADER ET TEXTES          */
/* ------------------------- */
.site-header,
.project-text,
.project-text-2 {
    font-family: "Ronzino", serif;
    font-weight: 100;
    font-size: 15pt;
    color: rgb(0 55 158);
}

.site-header {
    display: grid;
    grid-template-columns: 1fr 4fr 3fr 1fr;
    padding: 10px 20px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    white-space: nowrap;
}

.header-left { grid-column: 1/2; justify-self: start; }
.header-center { grid-column: 3/4; justify-self: start; }
.header-right { grid-column: 4/5; justify-self: end; }

/* ------------------------- */
/* LINK MAIL HEADER          */
/* ------------------------- */
.site-header a,
.site-header a:link,
.site-header a:visited,
.site-header a:hover,
.site-header a:active,
.site-header a:focus {
    color: rgb(0 55 158);
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

/* ------------------------- */
/* HEADER GRADIENT           */
/* ------------------------- */
.header-gradient {
    height: 10px;
    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
    position: sticky;
    top: 46px;
    z-index: 999;
}

/* ========================= */
/* LAYOUT PROJETS            */
/* ========================= */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 20px;
    padding-bottom: 1000px;
}

.project-list {
    grid-column: 1 / -1;
    padding-top: 200px;
    padding-left: 20px;
    padding-right: 20px;
}

.project-wrapper {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
}

.project-wrapper.open {
    border-top: 1px solid #00379E;
    border-bottom: 1px solid #00379E;
    margin-top: -1px;
    margin-bottom: -1px;
}

/* ------------------------- */
/* PROJET ITEM               */
/* ------------------------- */
.project-item {
    display: grid;
    grid-template-columns: 1fr 4fr 3fr 1fr;
    padding: 0;
    font-size: 24pt;
    color: rgb(218 182 196);
    cursor: pointer;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.project-wrapper:not(.open) .project-item:hover {
    border-top: 1px solid #00379E;
    border-bottom: 1px solid #00379E;
    color: rgb(0 55 158);
}

.project-wrapper.open .project-item {
    color: rgb(0 55 158);
}

.col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 0;
}

.project-item .year { justify-self: end; }

/* ========================= */
/* PROJET DETAILS            */
/* ========================= */
.project-details {
    display: grid;
    grid-template-columns: 1fr 4fr 3fr 1fr;
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    padding: 0;
    align-items: start;
}

.project-details.open {
    max-height: 4000px;
}

.project-photos {
    grid-column: 2 / 5;
    display: block;
    margin-bottom: 0;
}

/* ------------------------- */
/* IMAGES - CARROUSEL        */
/* ------------------------- */
.project-photos img {
    width: 100%;
    height: auto;
    cursor: pointer;
    pointer-events: auto;

    /* Sélection et drag interdit */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;
}

/* ------------------------- */
/* TEXTES PROJET             */
/* ------------------------- */
.project-text {
    grid-column: 2 / 3;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 15pt;
    margin-right: 70px;
}

.project-text-2 {
    grid-column: 3 / 5;
    font-weight: 500;
    font-size: 15pt;
    margin-right: 100px;
}

/* ========================= */
/* RESPONSIVE                */
/* ========================= */
@media (max-width: 800px) {

    .project-item {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .project-item .col.number {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .project-item .col.year {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .project-item .col.title {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .project-item .col.category {
        display: none;
    }

    .project-details {
        display: block;
    }

    .project-text,
    .project-text-2 {
        grid-column: auto;
        margin-right: 0;
        margin-bottom: 14px;
        font-size: 14pt;
    }

    .project-photos {
        margin-bottom: 8px;
    }
}