:root {
    --background: #ffffff;
    --text: #151515;
    --page-margin: clamp(18px, 2.2vw, 34px);
    --project-type: clamp(10px, 0.72vw, 12px);
    --artist-type: clamp(16px, 1.25vw, 21px);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html,
body {
    background: var(--background);
}

body {
    overflow: hidden;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--project-type);
    line-height: 1.35;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.homepage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--background);
}

.figure-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--background);
}

#fig5-canvas {
    display: block;
    width: 100%;
    height: 100%;
}


.biography-veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, var(--biography-veil-alpha, 0.72));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 4s ease,
        background-color 2s ease-in-out,
        visibility 0s linear 0s;
}

body:has(.biography-overlay.is-visible) .biography-veil {
    opacity: 1;
    visibility: visible;
}

.utility-navigation {
    position: absolute;
    top: var(--page-margin);
    right: var(--page-margin);
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 18px;
    white-space: nowrap;
    letter-spacing: 0.015em;
}

.language-navigation {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.project-navigation {
    position: absolute;
    bottom: 130px;
    left: 55px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    letter-spacing: 0.015em;
}

.project-navigation a {
    display: block;
    white-space: nowrap;
}

.project-navigation a:not(.artist-link) {
    margin-left: 11px;
}

.project-navigation .artist-link {
    margin-bottom: 7px;
    font-size: var(--artist-type);
    line-height: 1.15;
}

/* ==========================================================
   MENU ZEITGEIST - Groupe depliable
   ========================================================== */

.zeitgeist-menu-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: inherit;
}

.project-navigation .zeitgeist-parent-link {
    display: block;
    margin-left: 11px;
    white-space: nowrap;
}

.zeitgeist-submenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        max-height 250ms ease,
        opacity 250ms ease,
        visibility 0s linear 250ms;
}

.zeitgeist-menu-group:focus-within .zeitgeist-submenu,
.zeitgeist-menu-group.is-expanded .zeitgeist-submenu {
    max-height: 8em;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        max-height 1000ms ease,
        opacity 1000ms ease,
        visibility 0s linear 0s;
}

.project-navigation .zeitgeist-project-link {
    display: block;
    margin-left: calc(11px + 4ch);
    color: #555555;
    font-size: calc(var(--project-type) - 1px);
    font-style: italic;
    white-space: nowrap;
    cursor: pointer;
    transition: color 250ms ease;
}

.project-navigation .zeitgeist-project-link:hover,
.project-navigation .zeitgeist-project-link:focus-visible {
    color: #000000;
}

@media (max-width: 620px) {
    :root {
        --page-margin: 18px;
        --project-type: 11px;
        --artist-type: 17px;
    }

    .utility-navigation {
        gap: 14px;
    }
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

button:hover {
    cursor: pointer;
}

.language-button,
.artist-link,
.bio-link,
.infinite-link {
    text-decoration: none;
}

.biography-overlay {
    position: absolute;
    top: 50%;
    left: 45%;
    z-index: 2;
    width: min(21vw, 310px);
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate(-100%, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.biography-overlay::-webkit-scrollbar {
    display: none;
}

.biography-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.biography-text {
    padding-top: 14vh;
    padding-bottom: 12vh;
    color: #000000;
    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.38;
}

.biography-text p {
    margin: 0 0 1.15em;
}

.biography-text-en {
    display: none;
}

body.language-en .biography-text-fr {
    display: none;
}

body.language-en .biography-text-en {
    display: block;
}

body.language-fr .biography-text-fr {
    display: block;
}

body.language-fr .biography-text-en {
    display: none;
}

.language-button.is-active {
    font-weight: 700;
}

@media (max-width: 800px) {
    .biography-overlay {
        width: min(58vw, 310px);
        max-height: 68vh;
    }
}

/* ==========================================================
   ZEITGEIST - Page generique
   Squelette initial sans contenu editorial
   ========================================================== */

.project-navigation .zeitgeist-parent-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.zeitgeist-overlay {
    position: absolute;
    top: 18vh;
    left: 50%;
    z-index: 3;
    width: calc(100vw - 80px);
    height: 88vh;
    overflow: visible;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.zeitgeist-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.zeitgeist-open .figure-stage {
    opacity: 0;
    visibility: hidden;
}

body.zeitgeist-open .biography-overlay,
body.zeitgeist-open .air-overlay,
body.zeitgeist-open .infinite-overlay,
body.zeitgeist-open .acoustic-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.zeitgeist-project-title {
    margin: 0;
    color: #000000;
    font-size: clamp(11px, 0.78vw, 13px);
    font-weight: 400;
    line-height: 1.38;
}

@media (max-width: 1000px) {
    .zeitgeist-overlay {
        width: calc(100vw - 36px);
    }
}

@media (max-width: 720px) {
    .zeitgeist-overlay {
        height: 86vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .zeitgeist-overlay::-webkit-scrollbar {
        display: none;
    }

}

.air-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.air-open .figure-stage {
    opacity: 0;
    visibility: hidden;
}

body.air-open .biography-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * Navigation permanente dans les vues centrales.
 * Sur l'accueil, aucun changement visuel.
 */

.project-navigation .bio-link,
.project-navigation .air-link,
.project-navigation .infinite-link,
.project-navigation .acoustic-link {
    display: block;
    margin-left: 11px;
    white-space: nowrap;
}

body.project-view-open .project-navigation > * {
    color: #555555;
    transition: color 250ms ease;
}

body.project-view-open .project-navigation > *:hover,
body.project-view-open .project-navigation > *:focus-visible {
    color: #000000;
}

/*
 * Les navigations permanentes restent au-dessus des contenus centraux.
 * Cela garantit le survol et le clic lorsque l'overlay d'un projet est ouvert.
 */

.project-navigation,
.utility-navigation {
    z-index: 5;
}

/* Colonne texte */

.air-project-text {
    box-sizing: border-box;
    position: absolute;
    top: 36.5vh;
    right: calc(60% + 3vw);
    left: auto;
    width: min(21vw, 310px);
    max-height: 115vh;
    padding: 26vh 0 12vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-50%);
    color: #000000;
    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.38;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.air-project-text::-webkit-scrollbar {
    display: none;
}

.air-project-text p {
    margin: 0 0 1.15em;
}

/* ==========================================================
   AIR-ZEITGEIST - Credits colonne texte
   ========================================================== */

.air-credits {
    margin-top: 3.2em;
}

.air-credit-entry {
    margin: 0 0 2.2em;
}

.air-credit-entry:last-child {
    margin-bottom: 0;
}

.air-credit-role,
.air-credit-name {
    display: block;
}

.air-credit-role {
    margin-bottom: 0.18em;
}

.air-credit-name {
    font-style: normal;
}

.air-project-subtitle {
    padding-top: 1.4em;
}

.air-project-text-en {
    display: none;
}

body.language-en .air-project-text-fr {
    display: none;
}

body.language-en .air-project-text-en {
    display: block;
}

body.language-fr .air-project-text-fr {
    display: block;
}

body.language-fr .air-project-text-en {
    display: none;
}

/* Colonne stream */

.air-stream-column {
    position: absolute;
    top: 50%;
    left: calc(40% + 3vw);
    width: min(52vw, 720px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.air-stream-column .air-player-frame {
    position: relative;
    display: block;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: min(520px, 45vh);
    min-height: 0;
    border: 0;
    background: transparent;
    transform: none;
}


/* Titre du prototype de stream */

.air-stream-heading {
    width: 100%;
    margin: 0;
}

.air-stream-heading-en {
    display: none;
}

body.language-fr .air-stream-heading-fr,
body.language-en .air-stream-heading-en {
    display: block;
}

body.language-fr .air-stream-heading-en,
body.language-en .air-stream-heading-fr {
    display: none;
}

.air-stream-title {
    margin: 0 0 3px;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: 700;
    line-height: 1.38;
}

.air-stream-subtitle {
    margin: 0;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: 400;
    line-height: 1.38;
}

/* Reduction de moitie de la distance lecteur / boutons */

.air-player-frame + .air-document-links {
    margin-top: -11px;
}

/* Liens documentaires */

.air-document-links {
    width: 100%;
    padding: 0;
    color: #000000;
    font-size: 14px;
    line-height: 1.2;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    align-items: center;
}

.air-document-links-en {
    display: none;
}

body.language-fr .air-document-links-fr,
body.language-en .air-document-links-en {
    display: grid;
}

body.language-fr .air-document-links-en,
body.language-en .air-document-links-fr {
    display: none;
}

.air-document-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #000000;
    background: transparent;
    color: #000000;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.air-document-links a:nth-child(1) {
    grid-column: 2;
}

.air-document-links a:nth-child(2) {
    grid-column: 4;
}

.air-document-links a:nth-child(3) {
    grid-column: 6;
}

.air-document-links a:hover,
.air-document-links a:focus-visible {
    background: #000000;
    color: #ffffff;
    text-decoration: none;
}

/* AIR-ZEITGEIST responsive */

@media (max-width: 1000px) {
    .air-overlay {
        width: calc(100vw - 36px);
        height: 88vh;
    }

    .air-stream-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .air-stream-column .air-player-frame {
        width: 100%;
        height: min(700px, 82vh);
    }

    .air-project-text {
        width: min(28vw, 310px);
    }
}

@media (max-width: 720px) {
    .air-overlay {
        height: 86vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .air-overlay::-webkit-scrollbar {
        display: none;
    }

    .air-stream-column {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
    }

    .air-stream-column .air-player-frame {
        width: 100%;
        height: 62vh;
    }

    .air-project-text {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(72vw, 310px);
        max-height: 68vh;
        margin: 36px 0 80px;
        padding: 18vh 0 10vh;
        transform: none;
    }

    body.language-fr .air-document-links-fr,
    body.language-en .air-document-links-en {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .air-document-links a:nth-child(1),
    .air-document-links a:nth-child(2),
    .air-document-links a:nth-child(3) {
        grid-column: 1;
    }
}

/* ==========================================================
   AIR-ZEITGEIST - Visuels
   ========================================================== */

.air-project-figure {
    width: 100%;
    margin: 54px 0 0;
}

.air-project-image {
    display: block;
    width: 100%;
    height: auto;
}

.air-stream-column {
    box-sizing: border-box;
    max-height: 88vh;
    padding-right: 4px;
    padding-bottom: 40px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.air-stream-column::-webkit-scrollbar {
    display: none;
}

.air-transduction-plans {
    width: 100%;
    margin-top: 38px;
}

.air-transduction-plan {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    background: #ffffff;
}

.air-transduction-plan-en {
    display: none;
}

body.language-fr .air-transduction-plan-fr {
    display: block;
}

body.language-fr .air-transduction-plan-en {
    display: none;
}

body.language-en .air-transduction-plan-fr {
    display: none;
}

body.language-en .air-transduction-plan-en {
    display: block;
}

@media (max-width: 720px) {
    .air-project-figure {
        margin-top: 38px;
    }

    .air-transduction-plan {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================
   AIR-ZEITGEIST - Ordre vertical stream boutons plan
   ========================================================== */

@media (min-width: 1001px) {
    .air-stream-column {
        top: 6vh;
        max-height: 82vh;
        padding-right: 4px;
        padding-bottom: 40px;
        overflow-y: auto;
        transform: none;
        scroll-behavior: smooth;
    }

    .air-stream-column .air-player-frame {
        flex: 0 0 auto;
        width: 100%;
        height: min(720px, 64vh);
    }

    .air-document-links {
        flex: 0 0 auto;
    }

    .air-transduction-plans {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 48px;
    }

    .air-transduction-plan {
        width: 100%;
        height: auto;
    }
}

/* AIR-ZEITGEIST - Espacement plan identique au lecteur */

@media (min-width: 1001px) {
    .air-transduction-plans {
        margin-top: 0;
    }
}

/* AIR-ZEITGEIST - Lecteur entier et colonne droite abaissee */

@media (min-width: 1001px) {
    .air-stream-column {
        top: 9.5vh;
        max-height: 79vh;
    }

    .air-stream-column .air-player-frame {
        height: min(720px, 65vh);
    }
}

/* AIR-ZEITGEIST - Colonne droite nettement abaissee */

@media (min-width: 1001px) {
    .air-stream-column {
        top: 9.5vh;
        max-height: 70vh;
    }
}

/* AIR-ZEITGEIST - Position intermediaire colonne droite */

@media (min-width: 1001px) {
    .air-stream-column {
        top: 9.5vh;
        max-height: 86vh;
    }
}

/* ==========================================================
   INFINITE PENDULUMS - Colonne texte FR / EN
   ========================================================== */

.infinite-project-text {
    box-sizing: border-box;
    position: absolute;
    top: 36.5vh;
    right: calc(60% + 3vw);
    left: auto;
    width: min(21vw, 310px);
    max-height: 115vh;
    padding: 26vh 0 12vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-50%);
    color: #000000;
    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.38;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.infinite-project-text::-webkit-scrollbar {
    display: none;
}

.infinite-project-text p {
    margin: 0 0 1.15em;
}

.infinite-pdf-button {
    display: inline-block;
    margin: 0 0 2.4em;
    padding: 0.55em 0.75em;
    border: 1px solid #000000;
    color: #000000;
    text-decoration: none;
    font-size: 0.92em;
    line-height: 1;
    white-space: nowrap;
    transition:
        color 250ms ease,
        background-color 250ms ease;
}

.infinite-pdf-button:hover,
.infinite-pdf-button:focus-visible {
    color: #ffffff;
    background-color: #000000;
}

.infinite-credits {
    margin-top: 3.2em;
}

.infinite-credit-group {
    margin-bottom: 3.2em;
}

.infinite-credit-group:last-child {
    margin-bottom: 0;
}

.infinite-project-text .infinite-credit-entry {
    margin: 0 0 1.55em;
}

.infinite-credit-entry:last-child {
    margin-bottom: 0;
}

.infinite-credit-role,
.infinite-credit-name {
    display: block;
}

.infinite-credit-role {
    margin-bottom: 0.18em;
}

.infinite-credit-name {
    font-style: normal;
}

.infinite-project-text-en {
    display: none;
}

body.language-fr .infinite-project-text-fr {
    display: block;
}

body.language-fr .infinite-project-text-en {
    display: none;
}

body.language-en .infinite-project-text-fr {
    display: none;
}

body.language-en .infinite-project-text-en {
    display: block;
}

@media (max-width: 1000px) {
    .infinite-project-text {
        width: min(28vw, 310px);
    }
}

@media (max-width: 720px) {
    .infinite-project-text {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: min(72vw, 310px);
        max-height: 68vh;
        margin: 36px 0 80px;
        padding: 18vh 0 10vh;
        transform: none;
    }
}

/* ==========================================================
   INFINITE PENDULUMS - Titre et sous-titre colonne media
   ========================================================== */

.infinite-media-heading {
    margin: 0 0 22px;
}

.infinite-media-title {
    margin: 0 0 3px;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: 700;
    line-height: 1.38;
    text-transform: none;
}

.infinite-media-subtitle {
    margin: 0;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.38;
}

/* ==========================================================
   INFINITE PENDULUMS - Premiere integration videos
   ========================================================== */

.infinite-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: calc(100vw - 80px);
    height: 88vh;
    overflow: visible;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.infinite-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.infinite-open .figure-stage {
    opacity: 0;
    visibility: hidden;
}

body.infinite-open .biography-overlay,
body.infinite-open .air-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.infinite-media-column {
    box-sizing: border-box;
    position: absolute;
    top: 10.1vh;
    left: calc(40% + 3vw);
    width: min(52vw, 720px);
    max-height: 77.9vh;
    padding-right: 4px;
    padding-bottom: 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.infinite-media-column::-webkit-scrollbar {
    display: none;
}

.infinite-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 42px;
    background: #ffffff;
}

.infinite-video-frame:last-child {
    margin-bottom: 0;
}

.infinite-video-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1000px) {
    .infinite-overlay {
        width: calc(100vw - 36px);
    }

    .infinite-media-column {
        width: min(52vw, 720px);
    }
}

/* ==========================================================
   INFINITE PENDULUMS - Lecteur photo horizontal
   ========================================================== */

.infinite-photo-reader {
    width: 100%;
    margin-top: 0;
}

.infinite-photo-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
}

.infinite-photo-viewport.is-dragging {
    cursor: grabbing;
}

.infinite-photo-track {
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 420ms ease;
    will-change: transform;
}

.infinite-photo-track.is-dragging {
    transition: none;
}

.infinite-photo-slide {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    height: min(72vh, 760px);
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
}

.infinite-photo-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    user-select: none;
    -webkit-user-drag: none;
}

.infinite-photo-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1;
}

.infinite-photo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    font-size: 17px;
    line-height: 1;
    color: #000000;
    transition: opacity 250ms ease;
}

.infinite-photo-button:hover,
.infinite-photo-button:focus-visible {
    opacity: 0.45;
}

.infinite-photo-previous {
    justify-self: start;
}

.infinite-photo-next {
    justify-self: end;
}

.infinite-photo-counter {
    margin: 0;
    justify-self: center;
    color: #000000;
}

@media (max-width: 720px) {
    .infinite-photo-slide {
        height: min(68vh, 680px);
    }
}

@media (max-width: 720px) {
    .infinite-overlay {
        height: 86vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .infinite-overlay::-webkit-scrollbar {
        display: none;
    }

    .infinite-media-column {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: none;
        padding: 0 0 80px;
        overflow: visible;
    }

    .infinite-video-frame {
        margin-bottom: 28px;
    }
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Titre et sous-titre colonne media
   ========================================================== */

.acoustic-media-heading {
    margin: 0 0 22px;
}

.acoustic-media-title {
    margin: 0 0 3px;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: 700;
    line-height: 1.38;
    text-transform: none;
}

.acoustic-media-subtitle {
    margin: 0;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.38;
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Premiere integration video
   ========================================================== */

.acoustic-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: calc(100vw - 80px);
    height: 88vh;
    overflow: visible;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.acoustic-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.acoustic-open .figure-stage {
    opacity: 0;
    visibility: hidden;
}

body.acoustic-open .biography-overlay,
body.acoustic-open .air-overlay,
body.acoustic-open .infinite-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.acoustic-media-column {
    box-sizing: border-box;
    position: absolute;
    top: 10.1vh;
    left: calc(40% + 3vw);
    width: min(52vw, 720px);
    max-height: 77.9vh;
    padding-right: 4px;
    padding-bottom: 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.acoustic-media-column::-webkit-scrollbar {
    display: none;
}

.acoustic-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 42px;
    background: #ffffff;
}

.acoustic-video-frame:last-child {
    margin-bottom: 0;
}

.acoustic-video-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1000px) {
    .acoustic-overlay {
        width: calc(100vw - 36px);
    }

    .acoustic-media-column {
        width: min(52vw, 720px);
    }
}

@media (max-width: 720px) {
    .acoustic-overlay {
        height: 86vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .acoustic-overlay::-webkit-scrollbar {
        display: none;
    }

    .acoustic-media-column {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: none;
        padding: 0 0 80px;
        overflow: visible;
    }

    .acoustic-video-frame {
        margin-bottom: 28px;
    }
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Lecteur photo horizontal
   ========================================================== */

.acoustic-photo-reader {
    width: 100%;
    margin-top: 0;
}

.acoustic-photo-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
}

.acoustic-photo-viewport.is-dragging {
    cursor: grabbing;
}

.acoustic-photo-track {
    display: flex;
    width: 100%;
    transform: translateX(0);
    transition: transform 420ms ease;
    will-change: transform;
}

.acoustic-photo-track.is-dragging {
    transition: none;
}

.acoustic-photo-slide {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    height: min(72vh, 760px);
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
}

.acoustic-photo-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    user-select: none;
    -webkit-user-drag: none;
}

.acoustic-photo-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1;
}

.acoustic-photo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    font-size: 17px;
    line-height: 1;
    color: #000000;
    transition: opacity 250ms ease;
}

.acoustic-photo-button:hover,
.acoustic-photo-button:focus-visible {
    opacity: 0.45;
}

.acoustic-photo-previous {
    justify-self: start;
}

.acoustic-photo-next {
    justify-self: end;
}

.acoustic-photo-counter {
    margin: 0;
    justify-self: center;
    color: #000000;
}

@media (max-width: 720px) {
    .acoustic-photo-slide {
        height: min(68vh, 680px);
    }
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Boutons PDF
   ========================================================== */

.acoustic-pdf-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0 0 24px;
}

.acoustic-pdf-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    white-space: normal;
}

@media (max-width: 720px) {
    .acoustic-pdf-buttons {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Texte francais
   ========================================================== */

.acoustic-project-description {
    width: 100%;
}

.acoustic-project-description > p {
    margin: 0 0 1.15em;
}

.acoustic-project-section {
    margin-top: 2em;
}

.acoustic-project-section-title {
    margin: 0 0 0.75em;
    font: inherit;
    font-weight: 600;
}

.acoustic-project-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acoustic-project-list li {
    margin: 0 0 0.28em;
}

/* ==========================================================
   PENDULE ACOUSTIQUE - Derniere ligne anglaise compacte
   ========================================================== */

@media (min-width: 1001px) {
    .acoustic-project-list-nowrap {
        white-space: nowrap;
        font-size: 0.96em;
        letter-spacing: -0.01em;
    }
}

/* ==========================================================
   ZEITGEIST - Page editoriale generique
   ========================================================== */

/*
 * L'overlay utilise maintenant le viewport comme referentiel.
 * La zone de gauche reste disponible pour le menu permanent.
 */

.zeitgeist-overlay {
    left: 0;
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    transform: none;
}

.zeitgeist-editorial {
    box-sizing: border-box;
    width: auto;
    min-height: 100%;
    margin-left: 22vw;
    margin-right: 4vw;
    padding: 0 0 12vh;
    transform: translateX(-4vw);
}

/*
 * Titre, sous-titre et image conservent la largeur
 * visuelle validee avant l'integration du texte.
 */

.zeitgeist-editorial-header {
    box-sizing: border-box;
    width: min(60vw, 1080px);
    margin: 0 auto;
    padding: 0;
}

.zeitgeist-project-title {
    margin: 0;
    text-align: left;
}

.zeitgeist-editorial-subtitle {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0.65em 0 1.3em;
    padding: 0;
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.zeitgeist-editorial-figure {
    box-sizing: border-box;
    width: min(60vw, 1080px);
    margin: 0 auto;
    padding: 0;
}

.zeitgeist-editorial-image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

/*
 * Le texte occupe toute la largeur de la zone editoriale,
 * sans entrer dans la zone reservee au menu.
 */

.zeitgeist-editorial-text {
    box-sizing: border-box;
    display: block;
    width: min(60vw, 1080px);
    max-width: 100%;
    margin: 2.4em auto 0;
    padding: 0;
    text-align: left;
}

.zeitgeist-overlay .zeitgeist-editorial-text > p {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 auto 0.65em;
    padding: 0;
    font: inherit;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.zeitgeist-overlay
.zeitgeist-editorial-text
> .zeitgeist-editorial-text-final {
    margin-top: 1.3em;
}

/*
 * Adaptation uniquement pour les petits ecrans.
 * Le seuil 1000px est supprime afin de ne plus agrandir
 * l'image dans une fenetre de bureau relativement etroite.
 */

@media (max-width: 720px) {
    .zeitgeist-overlay {
        left: 0;
        width: 100vw;
        transform: none;
    }

    .zeitgeist-editorial {
        width: auto;
        margin: 0;
        padding: 8vh 18px 80px;
    }

    .zeitgeist-editorial-header,
    .zeitgeist-editorial-figure {
        width: 100%;
    }

    .zeitgeist-editorial-image {
        width: 100%;
        max-width: 100%;
    }

    .zeitgeist-editorial-text {
        width: 100%;
        margin-top: 2em;
    }

    .zeitgeist-overlay .zeitgeist-editorial-text > p {
        width: 100%;
        line-height: 1.2;
        text-align: left;
    }
}

/* ==========================================================
   ZEITGEIST - Boutons PDF bilingues
   ========================================================== */

.zeitgeist-pdf-links {
    display: block;
    width: 100%;
    margin: 0 0 2.4em;
    text-align: left;
}

.zeitgeist-pdf-button {
    margin-bottom: 0;
}

.zeitgeist-pdf-button-en {
    display: none;
}

body.language-fr .zeitgeist-pdf-button-fr {
    display: inline-block;
}

body.language-fr .zeitgeist-pdf-button-en {
    display: none;
}

body.language-en .zeitgeist-pdf-button-fr {
    display: none;
}

body.language-en .zeitgeist-pdf-button-en {
    display: inline-block;
}

/* ==========================================================
   ZEITGEIST - Bouton PDF en bas du texte
   ========================================================== */

.zeitgeist-pdf-links {
    display: block;
    width: 100%;
    margin-top: 2.4em;
    padding-bottom: 1.5em;
    text-align: left;
}

.zeitgeist-pdf-links .zeitgeist-pdf-button {
    display: inline-block;
    margin: 0;
}

.zeitgeist-pdf-button-en {
    display: none !important;
}

body.language-fr .zeitgeist-pdf-button-fr {
    display: inline-block !important;
}

body.language-fr .zeitgeist-pdf-button-en {
    display: none !important;
}

body.language-en .zeitgeist-pdf-button-fr {
    display: none !important;
}

body.language-en .zeitgeist-pdf-button-en {
    display: inline-block !important;
}

/* ==========================================================
   ZEITGEIST - Contenu editorial bilingue
   ========================================================== */

.zeitgeist-editorial-title-en,
.zeitgeist-editorial-text-en {
    display: none;
}

.zeitgeist-editorial-title-fr {
    display: block;
}

.zeitgeist-editorial-text-fr {
    display: block;
}

body.language-fr .zeitgeist-editorial-title-fr,
body.language-fr .zeitgeist-editorial-text-fr {
    display: block;
}

body.language-fr .zeitgeist-editorial-title-en,
body.language-fr .zeitgeist-editorial-text-en {
    display: none;
}

body.language-en .zeitgeist-editorial-title-fr,
body.language-en .zeitgeist-editorial-text-fr {
    display: none;
}

body.language-en .zeitgeist-editorial-title-en,
body.language-en .zeitgeist-editorial-text-en {
    display: block;
}

.zeitgeist-editorial-text-en p {
    margin-top: 0;
    margin-bottom: 1.4em;
}

.zeitgeist-editorial-text-en p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   MENU - Couleurs projets uniquement au survol
   ========================================================== */

/* Virgile Abela reste toujours noir. */
.project-navigation .artist-link {
    color: #000000;
}

/* Tous les projets sont gris au repos, meme lorsqu'ils sont ouverts. */
.project-navigation .bio-link,
.project-navigation .air-link,
.project-navigation .zeitgeist-parent-link,
.project-navigation .infinite-link,
.project-navigation .acoustic-link,
.project-navigation .zeitgeist-project-link {
    color: #9a9a9a;
    transition: color 250ms ease;
}

/* Le projet pointe devient noir au survol ou au focus clavier. */
.project-navigation .bio-link:hover,
.project-navigation .bio-link:focus-visible,
.project-navigation .air-link:hover,
.project-navigation .air-link:focus-visible,
.project-navigation .zeitgeist-parent-link:hover,
.project-navigation .zeitgeist-parent-link:focus-visible,
.project-navigation .infinite-link:hover,
.project-navigation .infinite-link:focus-visible,
.project-navigation .acoustic-link:hover,
.project-navigation .acoustic-link:focus-visible,
.project-navigation .zeitgeist-project-link:hover,
.project-navigation .zeitgeist-project-link:focus-visible {
    color: #000000;
}
/* ==========================================================
   ZEITGEIST #1 - BLOC DEFINITIF CONSOLIDE
   ========================================================== */

.zeitgeist1-overlay {
    --zeitgeist1-media-width: min(52vw, 720px);
    --zeitgeist1-media-height: min(29.25vw, 405px);
}

.zeitgeist1-overlay {
    position: absolute;
    top: 18vh;
    left: 50%;
    z-index: 3;
    width: calc(100vw - 80px);
    height: 88vh;
    overflow: visible;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.zeitgeist1-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.zeitgeist1-open .figure-stage {
    opacity: 0;
    visibility: hidden;
}

body.zeitgeist1-open .biography-overlay,
body.zeitgeist1-open .air-overlay,
body.zeitgeist1-open .infinite-overlay,
body.zeitgeist1-open .acoustic-overlay,
body.zeitgeist1-open .zeitgeist-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ----------------------------------------------------------
   Colonnes et media
   ---------------------------------------------------------- */

.zeitgeist1-media-column {
    box-sizing: border-box;
    position: absolute;
    top: 10.1vh;
    left: calc(40% + 3vw);
    width: var(--zeitgeist1-media-width);
    max-height: 77.9vh;
    padding-right: 4px;
    padding-bottom: 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.zeitgeist1-media-column::-webkit-scrollbar,
.zeitgeist1-text-scroll::-webkit-scrollbar {
    display: none;
}

.zeitgeist1-video-frame {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: var(--zeitgeist1-media-height);
    margin: 0;
    overflow: hidden;
    background: #ffffff;
}

.zeitgeist1-video-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.zeitgeist1-text-column {
    box-sizing: border-box;
    position: absolute;
    top: 10.1vh;
    right: calc(60% + 3vw);
    left: auto;
    width: min(21vw, 310px);
    height: var(--zeitgeist1-media-height);
    max-height: var(--zeitgeist1-media-height);
    overflow: hidden;
}

.zeitgeist1-text-scroll {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0 16px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

/* ----------------------------------------------------------
   En-tete et typographie
   ---------------------------------------------------------- */

.zeitgeist1-media-header {
    box-sizing: border-box;
    position: absolute;
    top: 10.1vh;
    left: calc(40% + 3vw);
    z-index: 1;
    width: var(--zeitgeist1-media-width);
    margin: 0;
    transform: translateY(calc(-100% - 24px));
}

.zeitgeist1-project-title {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: normal;
    line-height: 1.08;
    text-transform: none;
}

.zeitgeist1-project-subtitle {
    max-width: 1200px;
    margin: 0;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.32;
}

.zeitgeist1-text-scroll p {
    margin: 0 0 1.2em;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.38;
}

.zeitgeist1-project-text p + p {
    margin-top: 1.2em;
}

/* ----------------------------------------------------------
   Affichage bilingue
   ---------------------------------------------------------- */

.zeitgeist1-project-text-en,
.zeitgeist1-project-subtitle-en {
    display: none;
}

body.language-fr .zeitgeist1-project-text-fr,
body.language-fr .zeitgeist1-project-subtitle-fr {
    display: block;
}

body.language-fr .zeitgeist1-project-text-en,
body.language-fr .zeitgeist1-project-subtitle-en {
    display: none;
}

body.language-en .zeitgeist1-project-text-fr,
body.language-en .zeitgeist1-project-subtitle-fr {
    display: none;
}

body.language-en .zeitgeist1-project-text-en,
body.language-en .zeitgeist1-project-subtitle-en {
    display: block;
}

/* ----------------------------------------------------------
   Tablette
   ---------------------------------------------------------- */

@media (max-width: 1000px) {
    .zeitgeist1-overlay {
        width: calc(100vw - 36px);
    }

    .zeitgeist1-text-column {
        right: calc(60% + 3vw);
        left: auto;
        width: min(28vw, 310px);
    }
}

/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 720px) {
    .zeitgeist1-overlay {
        height: 86vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .zeitgeist1-overlay::-webkit-scrollbar {
        display: none;
    }

    .zeitgeist1-media-header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: 20px;
        transform: none;
    }

    .zeitgeist1-text-column {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-height: none;
        margin-bottom: 36px;
        overflow: visible;
    }

    .zeitgeist1-text-scroll {
        height: auto;
        max-height: none;
        padding-right: 0;
        padding-bottom: 0;
        overflow: visible;
    }

    .zeitgeist1-media-column {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: none;
        padding: 0 0 80px;
        overflow: visible;
    }

    .zeitgeist1-video-frame {
        margin-bottom: 28px;
    }
}

@media (max-width: 700px) {
    .zeitgeist1-overlay {
        --zeitgeist1-media-width: 100%;
        --zeitgeist1-media-height: auto;
    }

    .zeitgeist1-media-column,
    .zeitgeist1-media-header {
        width: 100%;
    }

    .zeitgeist1-video-frame {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Second document integre dans Zeitgeist #2 */

#zeitgeist-2 .zeitgeist2-secondary-text {
    margin-top: 42px;
}

#zeitgeist-2 .zeitgeist2-secondary-header {
    width: 100%;
    margin: 42px 0 18px;
}

#zeitgeist-2 .zeitgeist2-secondary-header p {
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================
   ZEITGEIST #2 - MEDIAS IMAGE ET SOUNDCLOUD
   ========================================================== */

.zeitgeist2-unified-overlay .zeitgeist3-image-frame {
    width: min(
        100%,
        calc(var(--zeitgeist1-media-height) * 4 / 3)
    );
    margin: 0 auto;
    transform: translateX(-12%);
}

.zeitgeist2-unified-overlay .zeitgeist3-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.zeitgeist2-unified-overlay .zeitgeist3-audio-frame {
    box-sizing: border-box;
    width: min(
        100%,
        calc(var(--zeitgeist1-media-height) * 4 / 3)
    );
    max-width: none;
    margin: 18px auto 0;
    padding: 0;
    transform: translateX(-12%);
}

.zeitgeist2-unified-overlay .zeitgeist3-audio-frame iframe {
    display: block;
    width: 100%;
    height: 120px;
    margin: 0;
    border: 0;
}

@media (max-width: 700px) {
    .zeitgeist2-unified-overlay .zeitgeist3-image-frame,
    .zeitgeist2-unified-overlay .zeitgeist3-audio-frame {
        width: 100%;
    }

    .zeitgeist2-unified-overlay .zeitgeist3-audio-frame {
        margin-top: 14px;
    }
}
/* ==========================================================
   ZEITGEIST #2 - VARIANTE MULTI-CHAPITRES
   Defilement vertical unique : texte et media synchronises
   ========================================================== */

.zeitgeist2-unified-overlay {
    box-sizing: border-box;
    height: 82vh;
    padding: 0 4px 80px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.zeitgeist2-unified-overlay::-webkit-scrollbar {
    display: none;
}

.zeitgeist2-unified-overlay .zeitgeist2-page-shell {
    box-sizing: border-box;
    width: min(100%, 1090px);
    margin: 0 auto;
}

.zeitgeist2-unified-overlay .zeitgeist2-page-header {
    display: grid;
    grid-template-columns:
        minmax(220px, 310px)
        minmax(0, 720px);
    column-gap: 60px;
    width: 100%;
    margin: 0 0 28px;
}

.zeitgeist2-unified-overlay .zeitgeist2-page-header .zeitgeist1-project-title {
    margin: 0;
}

.zeitgeist2-unified-overlay .zeitgeist2-flow {
    display: flex;
    flex-direction: column;
    gap: 76px;
    width: 100%;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry {
    display: grid;
    grid-template-columns:
        minmax(220px, 310px)
        minmax(0, 720px);
    column-gap: 60px;
    align-items: start;
    width: 100%;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-text,
.zeitgeist2-unified-overlay .zeitgeist2-entry-media {
    box-sizing: border-box;
    min-width: 0;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-text {
    padding-right: 16px;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-text p {
    margin: 0 0 1.2em;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.38;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-text p + p {
    margin-top: 1.2em;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle {
    margin: 0 0 18px;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle p {
    margin-top: 0;
    margin-bottom: 0;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-media .zeitgeist1-video-frame {
    width: 100%;
}

.zeitgeist2-unified-overlay .zeitgeist3-image-frame,
.zeitgeist2-unified-overlay .zeitgeist3-audio-frame {
    transform: none;
}

.zeitgeist2-unified-overlay .zeitgeist3-audio-frame {
    margin-top: 18px;
}

@media (max-width: 1000px) {
    .zeitgeist2-unified-overlay .zeitgeist2-page-shell {
        width: 100%;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-page-header,
    .zeitgeist2-unified-overlay .zeitgeist2-entry {
        grid-template-columns:
            minmax(200px, 28vw)
            minmax(0, 1fr);
        column-gap: 36px;
    }
}

@media (max-width: 720px) {
    .zeitgeist2-unified-overlay {
        height: 86vh;
        padding-right: 0;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-page-header {
        display: block;
        margin-bottom: 28px;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-header-spacer {
        display: none;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-flow {
        gap: 64px;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-entry {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-entry-text {
        width: 100%;
        padding-right: 0;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-entry-media {
        width: 100%;
    }

    .zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle {
        margin-bottom: 16px;
    }
}

/* ----------------------------------------------------------
   ZEITGEIST #2 - EN-TETES STRUCTURES
   ---------------------------------------------------------- */

.zeitgeist2-unified-overlay .zeitgeist2-entry-heading {
    margin: 0 0 22px;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-title {
    margin: 0 0 3px;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: 600;
    line-height: 1.38;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-location {
    margin: 0;
    font-family: inherit;
    font-size: clamp(10px, 0.70vw, 12px);
    font-weight: normal;
    line-height: 1.38;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-heading-en {
    display: none;
}

body.language-fr .zeitgeist2-unified-overlay .zeitgeist2-entry-heading-fr {
    display: block;
}

body.language-fr .zeitgeist2-unified-overlay .zeitgeist2-entry-heading-en {
    display: none;
}

body.language-en .zeitgeist2-unified-overlay .zeitgeist2-entry-heading-fr {
    display: none;
}

body.language-en .zeitgeist2-unified-overlay .zeitgeist2-entry-heading-en {
    display: block;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle
.zeitgeist1-project-subtitle span {
    display: block;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle
.zeitgeist1-project-subtitle span + span {
    margin-top: 1px;
}

/* ----------------------------------------------------------
   ZEITGEIST #2 - AJUSTEMENTS FINAUX DES EN-TETES
   ---------------------------------------------------------- */

.zeitgeist2-unified-overlay .zeitgeist2-entry-title {
    font-weight: 700;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle
.zeitgeist1-project-subtitle span {
    display: inline;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle
.zeitgeist1-project-subtitle span + span {
    margin-top: 0;
}

.zeitgeist2-unified-overlay .zeitgeist2-entry-subtitle
.zeitgeist1-project-subtitle span:not(:last-child)::after {
    content: ", ";
}

/* ==========================================================
   ZEITGEIST #2 - CHAPITRE 2 : EXPERIMENTA
   Sous-titre, photo et SoundCloud :
   meme bord gauche et meme largeur.
   ========================================================== */

#zeitgeist-2 .zeitgeist2-entry:nth-child(2) .zeitgeist2-entry-media {
    transform: none;
}

#zeitgeist-2 .zeitgeist2-entry:nth-child(2)
:is(
    .zeitgeist2-entry-subtitle,
    .zeitgeist3-image-frame,
    .zeitgeist3-audio-frame
) {
    width: min(
        100%,
        calc(var(--zeitgeist1-media-height) * 4 / 3)
    );
    max-width: none;
    margin-left: 0;
    margin-right: auto;
    transform: none;
    position: relative;
    left: auto;
}

#zeitgeist-2 .zeitgeist2-entry:nth-child(2)
.zeitgeist3-image {
    left: auto;
}

#zeitgeist-2 .zeitgeist2-entry:nth-child(2)
.zeitgeist3-audio-frame {
    margin-top: 18px;
}

#zeitgeist-2 .zeitgeist2-entry:nth-child(2)
.zeitgeist3-audio-frame iframe {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    position: static;
    left: auto;
    transform: none;
}

/* ==========================================================
   ZEITGEIST #2 - CHAPITRE 3 : JPO CAP15
   Decalage visuel valide : -12%.
   ========================================================== */

#zeitgeist-2 .zeitgeist2-entry:nth-child(3)
.zeitgeist3-image-frame {
    transform: translateX(-12%);
}

/* Extension verticale du texte de Zeitgeist #3 */
#zeitgeist-3 .zeitgeist1-text-column {
    top: 10.1vh;
    bottom: 6vh;
    height: auto;
    max-height: none;
}

#zeitgeist-3 .zeitgeist1-text-scroll {
    height: 100%;
    max-height: none;
}

/* ==========================================================
   ZEITGEIST #3 - IMAGES SOUS LA VIDEO
   ========================================================== */

#zeitgeist-3 .zeitgeist3-image-frame {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
}

#zeitgeist-3 .zeitgeist3-image {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-height: 72vh;
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.zeitgeist2-credits {
    margin-top: 6.5em;
}

/* Zeitgeist #4 - cadres horizontaux communs aux photos et videos */
#zeitgeist-4 .zeitgeist2-entry-media {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* Photos */
#zeitgeist-4 .zeitgeist4-image-frame {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    transform: none;
}

#zeitgeist-4 .zeitgeist4-image-frame .zeitgeist3-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

/* Videos */
#zeitgeist-4 .zeitgeist2-entry-media .zeitgeist1-video-frame {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    transform: none !important;
    left: auto !important;
}

#zeitgeist-4 .zeitgeist2-entry-media .zeitgeist1-video-frame iframe {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0;
    transform: none !important;
}

/* Zeitgeist #4 - Resonances : espacement photo video */
#zeitgeist-4
.zeitgeist4-resonances-entry
.zeitgeist2-entry-media
.zeitgeist1-video-frame {
    margin-top: 56px !important;
}


/* BIOGRAPHIE - PRESENTATION CENTREE 20260727 */
.biography-text {
    text-align: center;
    font-size: clamp(12px, 0.9vw, 15px);
    line-height: 1.55;
    color: rgba(0,0,0,0.22);
    transition: color 4s ease;
}

body:has(.biography-overlay.is-visible) .biography-text {
    color: rgba(0,0,0,1);
}

.biography-text p {
    margin: 0 0 1.45em;
}

.biography-text .bio-temporalities {
    margin: 1.8em 0;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* BIOGRAPHIE - ALIGNEMENT CENTRE FIG5 */
.biography-overlay {
    top: 48%;
    left: 50%;
    width: min(42vw, 620px);
    transform: translate(-50%, -50%);
}

@media (max-width: 800px) {
    .biography-overlay {
        top: 50%;
        left: 50%;
        width: min(82vw, 620px);
        transform: translate(-50%, -50%);
    }
}


/* BIOGRAPHIE - LIENS CV-BIO / PORTFOLIO */
.biography-documents {
    position: absolute;
    top: calc(100% + 3.2em);
    left: 50%;
    width: 100%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(11px, 0.78vw, 13px);
    line-height: 1.4;
}

.biography-documents-fr,
.biography-documents-en {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2.6em;
}

.biography-documents-en {
    display: none;
}

body.language-en .biography-documents-fr {
    display: none;
}

body.language-en .biography-documents-en {
    display: flex;
}

body.language-fr .biography-documents-fr {
    display: flex;
}

body.language-fr .biography-documents-en {
    display: none;
}

.biography-documents a {
    color: #9a9a9a;
    text-decoration: none;
    transition: color 250ms ease;
}

.biography-documents a:hover,
.biography-documents a:focus-visible {
    color: #000000;
}

.biography-documents span {
    color: #9a9a9a;
}


/* BIOGRAPHIE - LIENS HORS DU FLUX DU TEXTE */
.biography-overlay {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.biography-text {
    box-sizing: border-box;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.biography-text::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   ZEITGEIST #2 #3 #4 - REMONTEE DES ZONES DE CONTENU
   Alignement haut proche de la ligne Contact / FR / EN.
   Zeitgeist #1 et affichage mobile inchanges.
   ========================================================== */

@media (min-width: 721px) {
    #zeitgeist-2,
    #zeitgeist-3,
    #zeitgeist-4 {
        top: 8vh;
    }
}
/* ==========================================================
   CONTACT - COMPOSITION ET ANIMATION BIOGRAPHIE
   ========================================================== */

.contact-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

.contact-overlay {
    position: absolute;
    top: 48%;
    left: 50%;
    z-index: 2;
    width: min(42vw, 620px);
    max-height: 78vh;
    overflow: visible;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}

.contact-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-text {
    box-sizing: border-box;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 14vh;
    padding-bottom: 12vh;
    text-align: center;
    color: rgba(0, 0, 0, 0.22);
    font-size: clamp(12px, 0.9vw, 15px);
    line-height: 1.55;
    transition: color 4s ease;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.contact-text::-webkit-scrollbar {
    display: none;
}

body:has(.contact-overlay.is-visible) .contact-text {
    color: rgba(0, 0, 0, 1);
}

body:has(.contact-overlay.is-visible) .biography-veil {
    opacity: 1;
    visibility: visible;
}

.contact-text p {
    margin: 0 0 1.45em;
}

.contact-text a {
    color: #9a9a9a;
    text-decoration: none;
    transition: color 250ms ease;
}

.contact-text a:hover,
.contact-text a:focus-visible {
    color: #000000;
}

.contact-social-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8em;
    margin-top: 2.8em;
}

.contact-text-en {
    display: none;
}

body.language-en .contact-text-fr {
    display: none;
}

body.language-en .contact-text-en {
    display: block;
}

body.language-fr .contact-text-fr {
    display: block;
}

body.language-fr .contact-text-en {
    display: none;
}

@media (max-width: 800px) {
    .contact-overlay {
        top: 50%;
        left: 50%;
        width: min(82vw, 620px);
        transform: translate(-50%, -50%);
    }

    .contact-social-links {
        gap: 2em;
    }
}