@font-face {
    font-family: Arrows;
    src: url(../fonts/Arrows-Regular.woff2);
}

:root {
    /*    --gray: rgba(123, 132, 160, 0.4);*/
    --gray: rgba(82, 87, 111, 0.75);
    --hover-gray: rgba(1, 1, 1, 0.2);
}

* {
    font-synthesis: none;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "clarendon-urw", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    overflow-x: hidden;
}

h1 {
    font-size: 48px;
    font-weight: normal;
    margin: 0;
}

h1 nbts {
    font-size: 24px;
}

p {
    font-size: 24px;
    margin: 0;
    margin: 0;
    line-height: 28px;
    letter-spacing: 0.25px;
}

a {
    text-decoration: none;
    -webkit-touch-callout:none;
    color: inherit;
}

a:visited {
    color: black;
}

.lien {
    text-decoration: underline;
}

em {
    font-style: italic;
}

.wrapper {
    /*    animation: animate-in 4s forwards cubic-bezier(0.22, 1, 0.36, 1);*/
    display: flex;
    flex-wrap: wrap;
    column-gap: 32px;
    color: black;
    animation: animate-in 2s ease-in forwards;
    padding: 36px 36px;
    background-color: white;
}

@keyframes animate-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.section-title{
    color: var(--gray);
    transition: 2s;
    left: 0;
    padding-left: 0;
    transition-delay: 2s;
    /*    text-box: trim-both cap alphabetic;*/
}

.project { 
    position: relative;
    transition: 2s;
    color: black;
    /*    text-box: trim-both cap alphabetic;*/
}

a:visited {
    font-style: italic !important;
} 

.project > img {
    position: absolute;
    width: 480px;
    height: 480px;
    object-fit: contain;
    object-position: top left;
    opacity: 0;
    transition: 9s;
    /*    transition: 0.1s;*/
    /*    transition-delay: 3s;*/
    filter: grayscale(0.2);
    z-index: -99;
    pointer-events: none;
}

.counter {
    display: flex;
    width: 100%;
    font-size: 16px;
    letter-spacing: 0.5px;
    width: calc(100vw/12);
}

.pagination {
    position: fixed;
    bottom: 16px;
    right: 36px;
    display: flex;
    flex-direction: column;
    height: calc(25vh - 36px - 16px);
    justify-content: end;
    font-size: 16px;
    gap: 12px;
    letter-spacing: 0.5px;
    width: calc(100vw/12);
    z-index: 10;
}

.pagination > a {
    position: relative;
    z-index: 10;
}

.up-down-arrows {
    position: fixed;
    bottom: 36px;
    right: 36px;
    display: flex;
    gap: 8px;
    font-family: Arrows !important;
    color: var(--gray);
    font-size: 36px;
}

.up-down-arrows:hover {
    cursor: pointer;
}

.down {
    margin-top: 2px;    
}

.carousel–counter {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: -24px;
}

.pagination a {
    color: inherit;
}

.pagination a:not(.current) {
    color: var(--gray);
}

.wrapper:has(.project:hover) .project:not(:hover) {
    color: var(--hover-gray);
    transition: 4s;
    transition-delay: 0.2s;
}

.wrapper:has(.project:hover) .section-title {
    color: var(--hover-gray);
    transition: 4s;
}

.wrapper .project:hover {
    color: black;
    cursor: pointer;
}



.project:hover > img {
    transition: 14s cubic-bezier(0,.23,.71,.59);
    transition-delay: 0.2s;
    opacity: 0.8;   
}

#videos, #commandes, #photos, #editions, #infos {
    scroll-margin-top: 36px;
}

.space-line {
    display: block;
    padding-top: 48px;
    width: 100%;
}


.image-carousel {
    display: flex;
    gap: 36px;
    overflow-x: scroll;
    height: calc(75vh + 36px);
    scroll-snap-type: x mandatory;
    width: 100vw;
    scroll-margin-top: 25vh;
    overflow: hidden;
    animation: animate-in 3s ease-in forwards;
    margin-right: 0;
    position: relative;
    /*    z-index: 10;*/
}

.hidden {
    display: none !important;
    transition: 0.5s;

}

.prev,
.next
{
    font-family: Arrows;
    font-size: 0;
    line-height: 0;
    position: absolute;
    display: block;
    width: 50%;
    height: 75vh;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    top: 0;
    mix-blend-mode: difference;
    z-index: 20;
    transition: 0.5s;
}
.next{
    left: 50%;
    cursor: none;
}
.next-arrow:before{
    /*
    content: url('../../img/misc/fleche.svg');
    width: 72px;
    opacity: 0;
    display: block;
    mask: url('../../img/misc/fleche.svg') no-repeat center;
    background-color: white;
    */
    opacity: 0;
    content: 'nextarrow';
    font-size: 48px;
    color: white;
} 
.prev{
    cursor: none;
}
.prev:has([hidden]), .next:has([hidden]) {
    cursor: default;
}
.prev-arrow:before{
    /*
    content: url('../../img/misc/fleche.svg');
    transform: rotate(180deg);
    width: 72px;
    opacity: 0;
    display: block;
    mask: url('../../img/misc/fleche.svg') no-repeat center;
    background: white;
    */
    opacity: 0;
    content: 'prevarrow';
    font-size: 48px;
    color: white;
}
.prev-arrow, .next-arrow {
    position: absolute;
    display: block;
}

.prev:hover .prev-arrow::before,
.next:hover .next-arrow::before
{
    opacity: 1 !important;
}


.image-carousel img {
    scroll-snap-align: center;
    max-height: 75vh;
    height: auto;
    width: auto;
    max-width: min(calc(100vw - 72px), calc(1920px - 72px));
    object-fit: contain;
    object-position: center;
}

.image-carousel > img:first-child, .image-carousel > figure:first-child, .image-carousel > figure:first-child > video{
    scroll-snap-align: end;
    margin-left: auto;
}

.image-carousel > img:last-child {
}

.filler {
    width: 100vw;
}

.title-header {
    display: flex;
    width: 100%;
    column-gap: 16px;
    position: absolute;
    bottom: 16px;
    align-self: end;
    height: calc(25vh - 36px - 36px);
    left: 32px;
}

/*
.title-header:has(:not(.carousel-counter)) {
position: relative;
} 
*/

.description {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
}

.description > h1 {
    align-self: end;
    width: 100%;
}



.description > .technique, .description > .year {
    align-self: end;
}

.title-header > .technique {
    justify-self: end;
}

.content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding-top: 25vh;
}

#textes {
    width: 100%;
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    scroll-margin-top: 272px;
}

nbts {
    line-height: 0;
}

#textes nbts{
    font-size: 12px;
}

.info {
    grid-column: 2 / span 6;
    display: grid;
    align-content: center;
}

.critic {
    padding-top: 128px;
    grid-column: 5 / span 6;
    display: grid;
    align-content: center;
}

.odd {
    grid-column: 2 / span 6;
    padding-bottom: 24px;
}
.even {
    grid-column: 5 / span 6;
    padding-bottom: 24px;
}


.author {
    padding-bottom: 24px;
}

.credits {
    font-size: 16px;
    letter-spacing: 0.5px;
}

.credits:not(:first-of-type) {
    padding-top: 64px;
}

.credits nbts {
    font-size: 8px;
}

#expositions {
    grid-column: 2 / span 8;
    scroll-margin-top: 128px;
    padding-top: 256px;
}

.credits span:not(:first-child:not(.date), :nth-child(3)){
    padding-left: 2em;
}

.date:first-of-type {
    padding-left: 0em !important;
}

.back {
    display: grid;
    align-items: center;
    justify-content: start;
    padding-top: 20vh;
    padding-bottom: 25vh;
    grid-auto-flow: column;
    grid-gap: 0.25em;
    width: 100%;
    font-size: 16px;
}
.smallarrowback{
    font-family: Arrows !important;
}
/*
.back:before {
font-family: Arrows;
content: 'smallarrowback';
font-size: 32px;
margin-bottom: -8px;
}
*/






figure {
    width: min-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.image-carousel video {
    scroll-snap-align: center;
    height: calc(75vh - 24px);
    width: auto;
    max-width: min(calc(100vw - 72px), calc(1920px - 72px));
}
video[poster]{  
    object-fit: cover;
}

.controls {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    position: relative;
    font-family: inherit;
    flex-wrap: wrap;
    z-index: 10;
    margin-top: -4px;
    text-transform: lowercase;
}
.controls[data-state="hidden"] {
    display: none;
}
.controls button {
    width: max-content;
    text-align: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    background-color: transparent;
    color: inherit;
    text-transform: lowercase;
    margin: 4px 0 12px 0;
    z-index: 100;
    padding: 0;
}

button.play-button {
    /*    mix-blend-mode: difference;*/
    font-size: 48px;
    line-height: 1;
    width: 100%;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    text-transform: lowercase;
    color: white;
    height: calc(75vh - 24px);
    margin-top: calc(-1 * calc(75vh - 20px) / 1);
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "clarendon-urw", serif;
    transition: 0.5s ease-in;
    z-index: 30;
}

button.play-button[hidden]{
    display: none !important;
}

button.play-button:has(.play:hover) {
    opacity: 1 !important;
    transition: 0.5s ease-in;
}

.play {
    height: 100%;
    padding: 0 96px;
    display: flex;
    align-items: center;
}

figure:hover {
    cursor: pointer;
}

.player {
    font-family: Arrows;
    margin-bottom: -8px;
}


.controls button:not(:first-of-type){
    margin-left: 16px;
}
.controls button:hover
/*.controls button:focus */{
    cursor: pointer;
    color: var(--gray);
}
.controls .progress {
    flex-grow: 1;
    cursor: pointer;
    height: 4px;
    width: 100%;
}
.controls progress {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    color: var(--gray);
    margin: 0 auto;
}
.controls progress::-moz-progress-bar {
    background-color: var(--gray);
}

.controls progress::-webkit-progress-value {
    background-color: var(--gray);
}

.disabled {
    text-decoration: line-through;
}
figure:fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
    height: 100%;
    background-color: transparent;
    padding-left: 0 !important;
}
figure:fullscreen video {
    margin: 0 auto;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

figure:fullscreen .controls {
    background-color: transparent;
    color: white;
}



@media only screen and (max-width: 968px) {
    .up-down-arrows  {
        display: none;
    }
}

@media only screen and (max-width: 720px) {
    body, h1 {
        font-size: 24px;
    }
    h1 nbts {
        font-size: 8px;
    }

    #textes nbts {
        font-size: 6px;
    } 
    .space-line {
        padding-top: 24px;
    }
    p {
        font-size: 16px;
        line-height: 20px;
    }

    .project > img {
        width: 40vw;
        height: 40vw;
    }

    .odd {
        grid-column: 1;
        padding-bottom: 20px;
    }
    .even {
        grid-column: 1;
        padding-bottom: 20px;
    }
    .counter, .credits {
        font-size: 16px;
        margin-top: 4px;
    }
    .credits nbts {
        font-size: 4px;
    }
    .counter {
        width: auto;
    }
    .wrapper {
        padding: 16px 16px;
        row-gap: 12px;
    }
    .content {
        grid-template-columns: 100%;
    }

    #textes {
        width: 100%;
        grid-column: 1;
        grid-template-columns: 100%;
    }

    .info {
        grid-column: 1;
    }

    .critic {
        grid-column: 1;
    }
    .credits {
        grid-column: 1;
    }
    .image-carousel {
        overflow-x: scroll;
        height: fit-content;
    }
    .image-carousel img {
        max-height: calc(100svh - 192px);
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        object-fit: contain;
        object-position: center;
    }
    .image-carousel video {
        object-fit: contain;
        max-width: calc(100vw - 32px);
        height: auto;
    }
    figure {
        height: calc(100svh - 192px);
        align-content: center;
        justify-content: center;
    }

    button.play-button{
        position: absolute;
        top: calc(100svh - 192px);
        font-size: 24px;
    }
    .play {
        margin-bottom: 32px;
    }
    .player {
        margin-bottom: -2px;
    }
    .title-header {
        width: 100%;
        bottom: 36px;
        left: 16px;
        height: calc(25vh - 36px - 36px - 16px);
        width: calc(100vw - 32px);
    }
    .carousel–counter {
        width: 100%;
        margin-top: 0;
    }
    .pagination {
        position: fixed;
        bottom: 12px;
        right: auto;
        flex-direction: row;
        height: auto;
        justify-content: start;
        font-size: 12px;
        gap: 16px;
        width: 100%;
    }
    .content{
        padding-top: 75vh;
    }
    .content:has(.single) {
        padding-top: 25vh;
    }
    .pagination {
        display: none;
    }
    #expositions {
        grid-column: 1;
    }
}


@media only screen and (min-width: 1920px) {
    body {
        max-width: 1920px;
        margin: 0 auto;
    }

    .up-down-arrows, .pagination {
        right: calc(100vw / 2 - 1920px / 2 + 36px);
    }

    .title-header {
        max-width: 1920px;
        left: calc(100vw / 2 - 1920px / 2 + 36px);
    }

    .project > img {
        width: 720px;
        height: 720px;
    }
}

@media (pointer: coarse) {
    .next-arrow:before, .prev-arrow:before{
        content: '';
    }
    .next, .prev, .prev-arrow, .next-arrow {
        display: none;
    }
}