body {
    font-family: 'Newsreader', serif;
    line-height: 1.4;
    margin: 0;
    font-size: 24pt;

}

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

.site-header,
.project-text-2,
.project-text {
    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-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    white-space: nowrap;
}

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

.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; }

.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: Opx solid transparent;
    border-bottom: 0px solid transparent;
}

.project-wrapper.open {
    border-top: 1px solid #00379E;
    border-bottom: 1px solid #00379E;
    margin-top: -1px; /* pour que le trait ne se dédouble pas */
    margin-bottom: -1px; /* pour que le trait ne se dédouble pas */
}

.project-photos img.cursor-left {
    cursor: w-resize; 
}

.project-photos img.cursor-right {
    cursor: e-resize; 
}
.project-item {
    display: grid;
    grid-template-columns: 1fr 4fr 3fr 1fr;
    padding: 0px ;
    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; }

.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: 0px;
}

.project-photos img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;

    pointer-events: auto;
    width: 100%; 
    height: auto;
    cursor: pointer;
}


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

.project-text-2 {

    font-weight: 500;
    font-size: 15pt ;
    grid-column: 3 / 5;
     margin-right: 100px;

}

/* responsive  */

@media (max-width: 800px) {
    .project-item {
        display: grid;
        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;
    }

}