/* =========================
   FONT
   ========================= */

@font-face {
    font-family: "TWK Lausanne";
    src: url("fonts/TWKLausanne-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "TWK Lausanne";
    src: url("fonts/TWKLausanne-450.woff2") format("woff2");
    font-weight: 450;
    font-style: normal;
}

@font-face {
    font-family: "TWK Lausanne";
    src: url("fonts/TWKLausanne-350.woff2") format("woff2");
    font-weight: 350;
    font-style: normal;
}


/* =========================
   BASE
   ========================= */

:root {
    --site-space: 15px;
    --projects-top: 67.5px;

    --contact-optical-offset: 5px;
    --showcase-optical-offset: 2px;

    --media-gap: 10px;
    --info-section-gap: calc(var(--site-space) * 2);

    --project-nav-stroke: 3px;

    --site-grey: #d9d9d9;

    --stair-step: clamp(42px, 4.4vw, 64px);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    padding: var(--site-space);

    min-height: 100vh;

    font-family: "TWK Lausanne", sans-serif;
    font-weight: 500;

    color: #222;
}


/* =========================
   HOME
   ========================= */

.home-page {
    --projects-top: 75px;

    height: 100vh;

    overflow: hidden;
}


/* =========================
   CURSEUR PERSONNALISÉ
   ========================= */

@media (pointer: fine) {

    html,
    body,
    body * {
        cursor: none !important;
    }

    .custom-cursor {
        position: fixed;

        top: 0;
        left: 0;

        width: 16px;
        height: 16px;

        border: 1.5px solid #222;
        border-radius: 50%;

        background: #222;

        pointer-events: none;

        transform: translate(-50%, -50%);

        opacity: 0;

        z-index: 9999;
    }

    .custom-cursor.visible {
        opacity: 1;
    }

    .custom-cursor.on-link {
        background: transparent;
    }

}


/* =========================
   HEADER
   ========================= */

.header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.035em;
}

.header a {
    color: #222;
    text-decoration: none;
}


/* =========================
   NAVIGATION
   ========================= */

.navigation {
    display: flex;

    gap: var(--site-space);
}

.navigation .active {
    color: #222;
}

.navigation a:not(.active) {
    color: var(--site-grey);
}

.navigation a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* =========================
   PREMIER CONTENU APRÈS HEADER
   ========================= */

.projects,
.info {
    margin-top: calc(var(--site-space) * 2);
}


/* =========================
   SWITCH LIST / GRID — HOME
   ========================= */

.home-view-switch {
    display: none;
}


/* =========================
   HOME — STRUCTURE EN DEUX
   ========================= */

.home-page .projects {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);

    column-gap: var(--site-space);

    align-items: start;
}


/* =========================
   LISTE PROJETS
   ========================= */

.project-list {
    display: grid;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    column-gap: var(--site-space);
    row-gap: 5px;

    align-items: start;

    width: 100%;
}

.home-page .project-list {
    grid-column: 1;
    grid-row: 1;
}


/* =========================
   LIGNES DE PROJETS
   ========================= */

.project-row {
    grid-column: 1 / 6;

    width: max-content;
    min-width: 0;

    margin: 0;

    justify-self: start;
}


/* =========================
   PREMIER ESCALIER
   ========================= */

.project-01 {
    grid-row: 1;
    padding-left: 0;
}

.project-02 {
    grid-row: 2;
    padding-left: var(--stair-step);
}

.project-03 {
    grid-row: 3;
    padding-left: calc(var(--stair-step) * 2);
}

.project-04 {
    grid-row: 4;
    padding-left: calc(var(--stair-step) * 3);
}

.project-05 {
    grid-row: 5;
    padding-left: calc(var(--stair-step) * 4);
}


/* =========================
   DEUXIÈME ESCALIER
   ========================= */

.project-06 {
    grid-row: 5;
    padding-left: 0;
}

.project-07 {
    grid-row: 6;
    padding-left: var(--stair-step);
}

.project-08 {
    grid-row: 7;
    padding-left: calc(var(--stair-step) * 2);
}

.project-09 {
    grid-row: 8;
    padding-left: calc(var(--stair-step) * 3);
}

.project-10 {
    grid-row: 9;
    padding-left: calc(var(--stair-step) * 4);
}


/* =========================
   PROJECT
   ========================= */

.project {
    display: inline-grid;

    grid-template-columns: 30px auto;

    column-gap: var(--site-space);

    align-items: start;

    width: max-content;

    color: #222;

    text-decoration: none;

    font-size: 25px;
    font-weight: 450;
    line-height: 26px;
    letter-spacing: -0.03em;
}

.project-number {
    display: block;

    color: #222;

    font-weight: 500;
}

.project-name {
    display: block;
}


/* =========================
   HOVER DU TEXTE
   ========================= */

.project:hover .project-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================
   MÉDIAS DES PROJETS AU HOVER
   ========================= */

.project-media {
    position: absolute;

    right: var(--site-space);

    object-fit: contain;

    visibility: hidden;
    opacity: 0;

    z-index: 20;

    pointer-events: none;
}

.project-media.visible {
    visibility: visible;
    opacity: 1;
}


/* =========================
   FORMATS DES MÉDIAS AU HOVER
   ========================= */

.media-4-5 {
    top: var(--projects-top);

    width: auto;

    height: calc(
        100vh -
        var(--projects-top) -
        var(--site-space)
    );

    aspect-ratio: 4 / 5;
}

.media-9-16 {
    top: var(--projects-top);

    width: auto;

    height: calc(
        100vh -
        var(--projects-top) -
        var(--site-space)
    );

    aspect-ratio: 9 / 16;
}

.media-16-9 {
    top: calc(
        100vh -
        var(--site-space) -
        ((55vw - var(--site-space)) * 9 / 16)
    );

    width: calc(
        55vw -
        var(--site-space)
    );

    height: auto;

    aspect-ratio: 16 / 9;
}

.media-4-3 {
    top: calc(
        100vh -
        var(--site-space) -
        ((55vw - var(--site-space)) * 9 / 16)
    );

    width: auto;

    height: calc(
        (55vw - var(--site-space)) * 9 / 16
    );

    aspect-ratio: 4 / 3;
}

.media-square {
    top: calc(
        100vh -
        var(--site-space) -
        (25vw - 18.75px)
    );

    width: calc(
        25vw -
        18.75px
    );

    height: auto;

    aspect-ratio: 1 / 1;
}


/* =========================
   CONTOUR DES MÉDIAS
   ========================= */

.media-border {
    border: 1px solid var(--site-grey);
}


/* =========================
   SÉPARATEUR VERTICAL — HOME
   ========================= */

.home-divider {
    grid-column: 2;
    grid-row: 1;

    width: 1px;

    height: calc(
        100vh -
        60px
    );

    margin-top: calc(
        0px -
        var(--site-space)
    );

    background: var(--site-grey);

    visibility: visible;
    opacity: 1;
}


/* =========================
   GALERIE — HOME
   ========================= */

.home-showcase {
    grid-column: 3;
    grid-row: 1;

    min-width: 0;

    margin-top: calc(
        0px -
        var(--showcase-optical-offset)
    );

    height: calc(
        100vh -
        var(--projects-top) +
        var(--showcase-optical-offset)
    );

    padding-bottom: var(--site-space);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: none;

    visibility: visible;
    opacity: 1;
}

.home-showcase::-webkit-scrollbar {
    display: none;
}


/* =========================
   HOVER — MASQUAGE GALERIE
   ========================= */

.home-page.project-hover-active .home-showcase,
.home-page.project-hover-active .home-divider {
    visibility: hidden;
    opacity: 0;
}


/* =========================
   BLOC D'UN PROJET — HOME
   ========================= */

.home-showcase-project {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: var(--site-space);

    row-gap: calc(
        var(--site-space) / 2
    );

    align-items: start;

    width: 100%;
}


/* =========================
   MÉTA GALERIE
   ========================= */

.home-showcase-meta {
    grid-column: 1 / -1;

    width: 100%;
}

.home-showcase-title {
    display: none;
}


/* =========================
   ESPACE ENTRE COMPOSITIONS
   ========================= */

.home-showcase > * + * {
    margin-top: var(--site-space);
}


/* =========================
   NUMÉROTATION — GALERIE
   ========================= */

.home-showcase-number {
    font-family: "TWK Lausanne", sans-serif;

    font-size: 19px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: -0.025em;

    color: #222;
}


/* =========================
   RYTHME DES NUMÉROS
   ========================= */

.home-showcase-project-02 .home-showcase-number,
.home-showcase-project-05 .home-showcase-number,
.home-showcase-project-06 .home-showcase-number,
.home-showcase-project-08 .home-showcase-number,
.home-showcase-project-10 .home-showcase-number {
    text-align: right;
}


/* =========================
   LIENS DES MÉDIAS
   ========================= */

.home-showcase-media-link {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    color: inherit;
    text-decoration: none;
}


/* =========================
   OVERLAY AU HOVER
   ========================= */

.home-showcase-hover {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: var(--site-space);

    background: rgba(0, 0, 0, 0);

    opacity: 0;

    pointer-events: none;

    transition:
        background-color 100ms ease,
        opacity 100ms ease;
}

.home-showcase-media-link:hover .home-showcase-hover {
    background: rgba(0, 0, 0, 0.8);

    opacity: 1;
}


/* =========================
   TITRE DANS LE HOVER
   ========================= */

.home-showcase-hover-title {
    display: block;

    width: 100%;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 19px;
    font-weight: 350;
    line-height: 20px;
    letter-spacing: -0.025em;

    text-align: center;

    color: #fff;
}


/* =========================
   GRILLE MÉDIA 2 × 2
   ========================= */

.home-showcase-media-grid {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--site-space);

    width: 100%;
}


/* =========================
   PAIRE DE PROJETS
   ========================= */

.home-showcase-pair {
    display: grid;

    column-gap: var(--site-space);

    align-items: stretch;

    width: 100%;
}


/* =========================
   PAIRE 04 + 05
   ========================= */

.home-showcase-pair-04-05 {
    grid-template-columns:
        minmax(0, 43fr)
        minmax(0, 57fr);
}


/* =========================
   PAIRE 09 + 10
   ========================= */

.home-showcase-pair-09-10 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* =========================
   PROJETS EN PAIRE
   ========================= */

.home-showcase-project-paired {
    display: flex;

    flex-direction: column;

    gap: calc(
        var(--site-space) / 2
    );

    min-width: 0;
    height: 100%;
}

.home-showcase-project-paired .home-showcase-meta {
    flex: 0 0 auto;

    width: 100%;

    margin: 0;
}


/* =========================
   STACK MÉDIA — PROJET 05
   ========================= */

.home-showcase-media-stack {
    display: flex;

    flex-direction: column;

    gap: var(--site-space);

    width: 100%;
}


/* =========================
   MÉDIAS — GALERIE
   ========================= */

.home-showcase-media {
    display: block;

    width: 100%;
    height: auto;

    min-width: 0;
}


/* =========================
   FORMAT 4:5
   ========================= */

.home-showcase-media-4-5 {
    aspect-ratio: 4 / 5;

    object-fit: cover;
}


/* =========================
   FORMAT 9:16
   ========================= */

.home-showcase-media-9-16 {
    aspect-ratio: 9 / 16;

    object-fit: cover;
}


/* =========================
   FORMAT 16:9
   ========================= */

.home-showcase-media-16-9 {
    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* =========================
   MÉDIA LARGE
   ========================= */

.home-showcase-media-wide {
    grid-column: 1 / -1;
}


/* =========================
   PAGE INFO
   ========================= */

.info-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    column-gap: var(--site-space);
}


/* =========================
   TEXTE INFO
   ========================= */

.info-text {
    grid-column: 1 / 7;

    display: flex;

    flex-direction: column;
    align-items: flex-start;

    width: 95%;
    min-width: 0;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 25px;
    font-weight: 450;
    line-height: 26px;
    letter-spacing: -0.03em;
}


/* =========================
   SÉLECTEUR DE LANGUE
   ========================= */

.language-switch {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;
}

.language-button {
    margin: 0;
    padding: 0;

    border: 0;

    background: none;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 16px;
    font-weight: 450;
    line-height: 1;
    letter-spacing: -0.02em;

    color: var(--site-grey);
}

.language-button.active {
    color: #222;
}

.language-button:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* =========================
   BIO
   ========================= */

.bio-text {
    display: none;

    margin: 0;
}

.bio-text.active {
    display: block;
}


/* =========================
   DÉTAILS INFO
   ========================= */

.info-details {
    grid-column: 1 / 7;

    display: grid;

    grid-template-columns:
        29fr
        28fr
        43fr;

    column-gap: 0;

    align-items: start;

    width: 100%;

    margin-top: var(--info-section-gap);
}


/* =========================
   BLOCS INFO
   ========================= */

.info-detail-block {
    min-width: 0;

    margin: 0;
}


/* =========================
   TITRES INFO
   ========================= */

.info-detail-title {
    margin: 0 0 5px 0;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 24px;
    font-weight: 450;
    line-height: 25px;
    letter-spacing: -0.03em;

    color: var(--site-grey);
}


/* =========================
   LISTES INFO
   ========================= */

.info-detail-list {
    margin: 0;
    padding: 0;

    list-style: none;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 24px;
    font-weight: 450;
    line-height: 25px;
    letter-spacing: -0.03em;

    color: #222;
}

.info-detail-list li {
    display: block;

    margin: 0;
    padding: 0;
}


/* =========================
   SERVICES TRADUITS
   ========================= */

.service-list {
    display: none;
}

.service-list.active {
    display: block;
}


/* =========================
   CONTACT
   ========================= */

.contact-list {
    overflow-wrap: anywhere;
}

.contact-list a {
    color: #222;

    text-decoration: none;
}

.contact-list a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================
   PAGE PROJET
   ========================= */

.project-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* =========================
   HEADER STICKY — GLOBAL
   ========================= */

.project-page .header,
.home-page .header,
body:not(.project-page):not(.home-page) .header {
    position: sticky;

    top: 0;

    margin-top: calc(
        0px -
        var(--site-space)
    );

    padding-top: var(--site-space);
    padding-bottom: var(--site-space);

    margin-bottom: calc(
        0px -
        var(--site-space)
    );

    z-index: 100;

    background: #fff;
}


/* =========================
   TRAIT DU HEADER
   ========================= */

.project-page .header::after,
.home-page .header::after,
body:not(.project-page):not(.home-page) .header::after {
    content: "";

    position: absolute;

    left: calc(
        0px -
        var(--site-space)
    );

    right: calc(
        0px -
        var(--site-space)
    );

    bottom: 0;

    height: 1px;

    background: var(--site-grey);

    pointer-events: none;
}


/* =========================
   NAVIGATION PROJET
   ========================= */

.project-navigation {
    display: flex;

    align-items: center;

    gap: 12px;
}

.project-nav-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 30px;

    color: #222;

    text-decoration: none;
}

.project-nav-button-disabled {
    pointer-events: none;
}

.project-nav-button-disabled .nav-icon-arrow::before {
    background: var(--site-grey);
}

.project-nav-button-disabled .nav-icon-arrow::after {
    border-color: var(--site-grey);
}

.nav-icon {
    position: relative;

    display: block;

    width: 26px;
    height: 26px;
}


/* =========================
   FLÈCHES
   ========================= */

.nav-icon-arrow::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 3px;

    width: 20px;
    height: var(--project-nav-stroke);

    background: #222;

    transform: translateY(-50%);
}

.nav-icon-arrow::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 9px;
    height: 9px;

    border-top:
        var(--project-nav-stroke)
        solid
        #222;

    border-left:
        var(--project-nav-stroke)
        solid
        #222;
}

.nav-icon-arrow-left::after {
    left: 3px;

    transform:
        translateY(-50%)
        rotate(-45deg);
}

.nav-icon-arrow-right::after {
    right: 3px;

    transform:
        translateY(-50%)
        rotate(135deg);
}


/* =========================
   CROIX
   ========================= */

.nav-icon-close::before,
.nav-icon-close::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 22px;
    height: var(--project-nav-stroke);

    background: #222;

    transform-origin: center;
}

.nav-icon-close::before {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.nav-icon-close::after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* =========================
   INFORMATIONS DU PROJET
   ========================= */

.project-detail {
    margin-top: calc(
        var(--site-space) * 2
    );

    margin-bottom: 0;
}

.project-detail-info {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: baseline;

    font-size: 26px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.025em;
}

.project-detail-year {
    text-align: left;

    color: var(--site-grey);
}

.project-detail-title {
    text-align: center;

    color: #222;
}

.project-detail-category {
    text-align: right;

    color: var(--site-grey);
}


/* =========================
   GRILLE DES MÉDIAS
   ========================= */

.project-detail-media-grid {
    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap: var(--media-gap);

    margin-top: var(--media-gap);
    margin-bottom: var(--site-space);
}

.project-detail-media {
    grid-column: span 4;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;
}

.project-detail-media-first {
    grid-column: 3 / span 4;
}

.project-detail-media-new-row {
    grid-column: 1 / span 4;
}


/* =========================
   VITOO
   ========================= */

.project-detail-media-vitoo {
    grid-column: 1 / -1;

    justify-self: center;

    display: block;

    width: auto;

    height: calc(
        (55vw - var(--site-space)) *
        9 / 16
    );

    max-width: 100%;

    object-fit: contain;
}

.project-detail-media-vitoo-4-3 {
    aspect-ratio: 4 / 3;
}


/* =========================
   LOGO ANIMATIONS
   ========================= */

.project-detail-media-logo {
    grid-column: 1 / -1;

    justify-self: center;

    display: block;

    width: calc(
        55vw -
        var(--site-space)
    );

    height: auto;

    max-width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: contain;
}


/* =========================
   SYNAMEDIA
   ========================= */

.project-detail-media-synamedia {
    grid-column: span 6;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: contain;
}


/* =========================
   PLAYER YOUTUBE
   ========================= */

.project-detail-youtube {
    grid-column: 1 / -1;

    justify-self: center;

    width: calc(
        55vw -
        var(--site-space)
    );

    max-width: 100%;

    aspect-ratio: 16 / 9;
}

.project-detail-youtube iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================
   MÉDIA SEUL
   ========================= */

.project-detail-media-centered {
    grid-column: 1 / -1;

    justify-self: center;

    display: block;

    width: auto;

    height: calc(
        100vh -
        var(--projects-top) -
        27px -
        var(--media-gap) -
        var(--site-space) -
        16px -
        var(--site-space)
    );

    max-width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: contain;
}

.project-detail-media-centered-9-16 {
    aspect-ratio: 9 / 16;
}


/* =========================
   PLACEHOLDERS
   ========================= */

.project-detail-placeholder {
    grid-column: span 4;

    width: 100%;

    aspect-ratio: 4 / 5;

    background: var(--site-grey);
}

.placeholder-1 {
    background: #d2d2d2;
}

.placeholder-2 {
    background: #dddddd;
}

.placeholder-3 {
    background: #d5d5d5;
}

.placeholder-4 {
    background: #e0e0e0;
}

.placeholder-5 {
    background: #d7d7d7;
}


/* =========================
   COPYRIGHT
   ========================= */

.copyright {
    font-family: "TWK Lausanne", sans-serif;

    font-size: 16px;
    font-weight: 350;

    line-height: 1;

    letter-spacing: 0;

    color: var(--site-grey);
}


/* =========================
   COPYRIGHT — INFO
   ========================= */

body:not(.project-page):not(:has(.home-footer)) .copyright {
    position: fixed;

    left: var(--site-space);
    bottom: var(--site-space);

    z-index: 30;
}


/* =========================
   COPYRIGHT — PROJET
   ========================= */

.project-page .copyright {
    position: static;

    margin-top: auto;
}


/* =========================
   N2B
   ========================= */

.project-detail-n2b-main {
    grid-column: 1 / -1;

    justify-self: center;

    display: block;

    width: 75%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: contain;
}

.project-detail-n2b-vertical {
    grid-column: span 3;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 9 / 16;

    object-fit: cover;
}

.project-detail-n2b-horizontal {
    grid-column: span 6;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* =========================
   FOOTER HOME
   ========================= */

.home-footer {
    position: fixed;

    left: var(--site-space);

    bottom: calc(
        var(--site-space) -
        var(--contact-optical-offset)
    );

    z-index: 30;
}


/* =========================
   CONTACT HOME
   ========================= */

.home-contact {
    display: flex;

    flex-direction: column;
    align-items: flex-start;

    font-family: "TWK Lausanne", sans-serif;

    font-size: 24px;
    font-weight: 450;
    line-height: 25px;
    letter-spacing: -0.03em;
}

.home-contact a {
    color: #222;

    text-decoration: none;
}

.home-contact a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================
   RESPONSIVE — HOME
   ========================= */

@media (max-width: 900px), (orientation: portrait) {

    .home-page {
        --stair-step: clamp(34px, 10.8vw, 95px);

        height: auto;
        min-height: 100svh;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .home-page .header {
        font-size: clamp(18px, 5.2vw, 30px);
        letter-spacing: -0.035em;
    }

    .home-page .navigation {
        gap: clamp(8px, 2.8vw, 15px);
    }

    .home-page .home-view-switch {
        display: flex;

        align-items: baseline;

        gap: 10px;

        margin-top: calc(var(--site-space) * 1.5);

        font-family: "TWK Lausanne", sans-serif;

        font-size: clamp(13px, 3.6vw, 16px);
        font-weight: 450;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .home-view-button {
        margin: 0;
        padding: 0;

        border: 0;

        background: none;

        font: inherit;
        letter-spacing: inherit;

        color: var(--site-grey);
    }

    .home-view-button.active {
        color: #222;
    }

    .home-page .projects {
        display: block;

        margin-top: var(--site-space);

        padding-bottom: 95px;
    }

    .home-page.home-view-grid .projects {
        padding-bottom: 0;
    }

    .home-page .home-divider {
        display: none;
    }

    .home-page .project-list {
        grid-template-columns: minmax(0, 1fr);

        column-gap: 0;
        row-gap: clamp(3px, 1vw, 5px);

        width: 100%;
    }

    .home-page .project-row {
        grid-column: 1 / -1;

        width: max-content;
        max-width: 100%;
    }

    .home-page .project {
        grid-template-columns:
            clamp(19px, 5.6vw, 48px)
            auto;

        column-gap: clamp(8px, 2.7vw, 24px);

        font-size: clamp(16px, 4.8vw, 40px);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .home-page .project-media {
        display: none;
    }

    .home-page.home-view-grid .project-list {
        display: none;
    }

    .home-page .home-showcase {
        display: none;

        width: 100%;
        min-width: 0;
        height: auto;

        margin-top: 0;
        padding-bottom: var(--site-space);

        overflow: visible;

        overscroll-behavior: auto;

        visibility: visible;
        opacity: 1;
    }

    .home-page.home-view-grid .home-showcase {
        display: block;
    }

    .home-page .home-showcase-project,
    .home-page .home-showcase-pair,
    .home-page .home-showcase-media-grid {
        display: block;

        width: 100%;
    }

    .home-page .home-showcase-project-paired {
        height: auto;
    }

    .home-page .home-showcase-project-paired +
    .home-showcase-project-paired {
        margin-top: var(--site-space);
    }

    .home-page .home-showcase-meta {
        display: flex;

        align-items: baseline;
        justify-content: space-between;

        gap: var(--site-space);

        width: 100%;
    }

    .home-page .home-showcase-title {
        display: block;

        min-width: 0;

        font-family: "TWK Lausanne", sans-serif;

        font-size: clamp(14px, 3.8vw, 19px);
        font-weight: 450;
        line-height: 1;
        letter-spacing: -0.025em;

        white-space: nowrap;

        color: #222;
    }

    .home-page .home-showcase-number {
        flex: 0 0 auto;

        font-size: clamp(14px, 3.8vw, 19px);
        line-height: 1;

        text-align: left;
    }

    .home-page .home-showcase-project-02 .home-showcase-meta,
    .home-page .home-showcase-project-05 .home-showcase-meta,
    .home-page .home-showcase-project-06 .home-showcase-meta,
    .home-page .home-showcase-project-08 .home-showcase-meta,
    .home-page .home-showcase-project-10 .home-showcase-meta {
        flex-direction: row-reverse;
    }

    .home-page .home-showcase-project-02 .home-showcase-number,
    .home-page .home-showcase-project-05 .home-showcase-number,
    .home-page .home-showcase-project-06 .home-showcase-number,
    .home-page .home-showcase-project-08 .home-showcase-number,
    .home-page .home-showcase-project-10 .home-showcase-number {
        text-align: right;
    }

    .home-page .home-showcase-project >
    .home-showcase-meta +
    .home-showcase-media-link,
    .home-page .home-showcase-project >
    .home-showcase-meta +
    .home-showcase-media-grid,
    .home-page .home-showcase-project >
    .home-showcase-meta +
    .home-showcase-media-stack {
        margin-top: calc(var(--site-space) / 2);
    }

    .home-page .home-showcase-project >
    .home-showcase-media-link +
    .home-showcase-media-link,
    .home-page .home-showcase-media-grid >
    .home-showcase-media-link +
    .home-showcase-media-link {
        margin-top: var(--site-space);
    }

    .home-page .home-showcase-hover {
        display: none;
    }

    .home-page .home-footer {
        position: fixed;

        left: var(--site-space);
        bottom: var(--site-space);
    }

    .home-page.home-view-grid .home-footer {
        display: none;
    }

    .home-page .home-contact {
        font-size: clamp(16px, 4.6vw, 24px);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

}


/* =========================
   RESPONSIVE — PROJETS
   ========================= */

@media (max-width: 900px), (orientation: portrait) {

    .project-page {
        min-height: 100svh;

        overflow-x: hidden;
    }

    .project-page .header {
        font-size: clamp(18px, 5.2vw, 30px);
        letter-spacing: -0.035em;
    }

    .project-page .project-navigation {
        gap: clamp(6px, 2vw, 10px);
    }

    .project-page .project-nav-button {
        width: clamp(22px, 6vw, 28px);
        height: clamp(22px, 6vw, 28px);
    }

    .project-page .nav-icon {
        width: clamp(20px, 5.5vw, 26px);
        height: clamp(20px, 5.5vw, 26px);
    }

    .project-page .nav-icon-arrow::before {
        left: 3px;

        width: clamp(15px, 4.5vw, 20px);

        height: 2px;
    }

    .project-page .nav-icon-arrow::after {
        width: clamp(7px, 2.2vw, 9px);
        height: clamp(7px, 2.2vw, 9px);

        border-top-width: 2px;
        border-left-width: 2px;
    }

    .project-page .nav-icon-close::before,
    .project-page .nav-icon-close::after {
        width: clamp(17px, 4.8vw, 22px);
        height: 2px;
    }

    .project-page .project-detail {
        margin-top: calc(var(--site-space) * 1.5);
    }

    .project-page .project-detail-info {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-rows:
            auto
            auto;

        column-gap: var(--site-space);
        row-gap: 6px;

        align-items: baseline;

        font-size: clamp(17px, 4.6vw, 26px);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .project-page .project-detail-year {
        grid-column: 1;
        grid-row: 1;

        text-align: left;
    }

    .project-page .project-detail-category {
        grid-column: 2;
        grid-row: 1;

        text-align: right;

        white-space: nowrap;
    }

    .project-page .project-detail-title {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        text-align: center;
    }

    .project-page .project-detail-media-grid {
        display: block;

        width: 100%;

        margin-top: var(--site-space);
        margin-bottom: var(--site-space);
    }

    .project-page .project-detail-media-grid > * {
        margin: 0;

        max-width: none;
    }

    .project-page .project-detail-media-grid > * + * {
        margin-top: var(--site-space);
    }

    .project-page .project-detail-media,
    .project-page .project-detail-media-first,
    .project-page .project-detail-media-new-row {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: cover;
    }

    .project-page .project-detail-media-vitoo {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: contain;
    }

    .project-page .project-detail-media-vitoo-4-3 {
        width: 100%;
        height: auto;
    }

    .project-page .project-detail-media-logo,
    .project-page .project-detail-media-synamedia {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: contain;
    }

    .project-page .project-detail-media-centered,
    .project-page .project-detail-media-centered-9-16 {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: contain;
    }

    .project-page .project-detail-n2b-main,
    .project-page .project-detail-n2b-vertical,
    .project-page .project-detail-n2b-horizontal {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: cover;
    }

    .project-page .project-detail-n2b-main {
        object-fit: contain;
    }

    .project-page .project-detail-youtube {
        display: block;

        width: 100%;
        max-width: none;

        aspect-ratio: 16 / 9;
    }

    .project-page .project-detail-placeholder {
        display: block;

        width: 100%;

        margin-left: 0;
        margin-right: 0;
    }

    .project-page .copyright {
        margin-top: 0;

        font-size: 14px;
    }

}


/* =========================
   RESPONSIVE — INFO
   ========================= */

@media (max-width: 900px), (orientation: portrait) {

    .info-page {
        min-height: 100svh;

        overflow-x: hidden;
    }

    .info-page .header {
        font-size: clamp(18px, 5.2vw, 30px);
        letter-spacing: -0.035em;
    }

    .info-page .navigation {
        gap: clamp(8px, 2.8vw, 15px);
    }

    .info-page .info {
        margin-top: calc(var(--site-space) * 1.5);
    }

    .info-page .info-grid {
        display: block;

        width: 100%;
    }


    /* =========================
       BIO
       ========================= */

    .info-page .info-text {
        display: flex;

        width: 100%;

        font-size: clamp(16px, 4.8vw, 40px);
        font-weight: 450;
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .info-page .language-switch {
        gap: 8px;

        margin-bottom: 10px;
    }

    .info-page .language-button {
        font-size: clamp(13px, 3.6vw, 16px);
        line-height: 1;
    }


    /* =========================
       LISTES INFO
       ========================= */

    .info-page .info-details {
        display: flex;

        flex-direction: column;

        gap: var(--site-space);

        width: 100%;

        margin-top: calc(var(--site-space) * 2);
    }

    .info-page .info-detail-block {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding-left: 0;
    }


    /* =========================
       TITRES INFO
       ========================= */

    .info-page .info-detail-title {
        margin-bottom: 5px;

        font-size: clamp(16px, 4.6vw, 24px);
        font-weight: 450;
        line-height: 1.04;
        letter-spacing: -0.03em;

        color: var(--site-grey);
    }


    /* =========================
       CONTENU INFO
       ========================= */

    .info-page .info-detail-list {
        font-size: clamp(16px, 4.6vw, 24px);
        font-weight: 450;
        line-height: 1.04;
        letter-spacing: -0.03em;
    }


    /* =========================
       COPYRIGHT
       ========================= */

    .info-page .copyright {
        position: static;

        margin-top: calc(var(--site-space) * 2);

        font-size: 14px;
    }

}