/* ============================================
   CV : visionneuse d'expositions légère
   ============================================ */
.cv-expo-gallery-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s
}

.cv-expo-gallery-trigger:hover {
  color: red;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.cv-expo-gallery-trigger.is-active {
  color: red;
}

.cv-gallery-window {
  position: fixed;
  left: 34vw;
  top: 20vh;
  width: 34vw;
  height: 21.25vw;
  aspect-ratio: 16 / 10;
  min-width: 280px;
  min-height: 180px;
  max-width: 86vw;
  max-height: 78vh;
  display: none;
  flex-direction: column;
  background: #000;
  border: 1px solid rgb(104, 103, 103);
  box-shadow: 0.8vw 0.8vw 0 rgba(0,0,0,0.45);
  z-index: 30000;
  overflow: visible;
}

.cv-gallery-window.is-open {
  display: flex;
}

.cv-gallery-header {
  height: 3.2vh;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(104, 103, 103);
  background: #000;
  cursor: move;
  user-select: none;
}

.cv-gallery-title {
  padding-left: 0.75vw;
  font-size: 0.9vw;
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-gallery-title .cv-gallery-header-prefix {
  font-style: normal;
  font-weight: 300;
}

.cv-gallery-title em {
  font-style: italic;
}

.cv-gallery-title .cv-gallery-header-details {
  font-style: normal;
  font-weight: 300;
}

.cv-gallery-actions {
  height: 100%;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.cv-gallery-fullscreen,
.cv-gallery-close,
.cv-gallery-lightbox-close {
  width: 3.2vh;
  min-width: 28px;
  height: 100%;
  background: #000;
  color: #fff;
  border: 0;
  border-left: 1px solid rgb(104, 103, 103);
  font-size: 3.4rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.cv-gallery-fullscreen {
  font-size: 1.45rem;
  font-weight: 400;
}

.cv-gallery-fullscreen.is-disabled {
  opacity: 0.28;
  pointer-events: none;
}

.cv-gallery-fullscreen:hover,
.cv-gallery-close:hover,
.cv-gallery-lightbox-close:hover,
.cv-gallery-nav:hover,
.cv-gallery-lightbox-nav:hover {
  background: #fff;
  color: #000;
}

.cv-gallery-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-bottom: 1px solid rgb(104, 103, 103);
  overflow: hidden;
}

#cv-gallery-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

#cv-gallery-vimeo {
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
  background: #000;
}

#cv-gallery-image.is-hidden,
#cv-gallery-vimeo.is-hidden {
  display: none;
}

#cv-gallery-vimeo.is-visible {
  display: block;
}

.cv-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6vw;
    min-width: 32px;
    height: 4.6vh;
    min-height: 36px;
    padding-bottom: 0.4rem;
    background: rgb(0 0 0 / 70%);
    color: #fff;
    border: 1px solid rgb(104, 103, 103);
    font-size: 3.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    font-family: inherit;
}

.cv-gallery-prev { left: 0.3vw; }
.cv-gallery-next { right: 0.3vw; }

.cv-gallery-nav[hidden],
.cv-gallery-lightbox-nav[hidden],
.cv-gallery-count[hidden] {
  display: none !important;
}

.cv-gallery-count {
  position: absolute;
  right: 0.6vw;
  top: 0.6vh;
  z-index: 3;
  padding: 0.2vh 0.35vw;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75vw;
  font-weight: 300;
}

.cv-gallery-photo-credit {
    position: absolute;
    right: 1vw;
    bottom: 1.24vh;
    z-index: 3;
    max-width: 45%;
    padding: 0.18vh 0.35vw;
    background: rgb(31 31 31 / 59%);
    color: rgb(255 255 255);
    font-size: 0.6vw;
    font-weight: 300;
    line-height: 1.25;
    text-align: right;
    pointer-events: none;
}

.cv-gallery-caption {
    position: absolute;
    bottom: calc(0% + 0px);
    left: 0px;
    right: 0px;
    z-index: 1;
    min-height: 0;
    padding: 0.6vh 0.75vw;
    border: 0px solid rgb(104, 103, 103);
    border-top: 0;
    color: rgba(255,255,255,0.86);
    background: #00000078;
    font-size: 0.72vw;
    font-weight: 300;
    line-height: 1.35;
}

.cv-gallery-caption[hidden],
.cv-gallery-photo-credit[hidden] {
  display: none;
}

.cv-gallery-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-transform: uppercase;
}

.cv-gallery-caption a .lq-caption-detail {
  text-transform: lowercase;
}

.cv-gallery-caption a .lq-caption-exhibition-title {
  text-transform: none;
}

span.lq-caption-exhibition-title {
  font-style: italic;
  font-weight: 500;
}

.cv-gallery-caption a:hover {
  color: #ff0000;
}

.cv-gallery-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 4;
}

.cv-gallery-resize::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.cv-gallery-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  z-index: 40000;
}

.cv-gallery-lightbox.is-open {
  display: flex;
}

#cv-gallery-lightbox-image {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}

.cv-gallery-lightbox-photo-credit {
  position: fixed;
  right: 5vw;
  bottom: 8vh;
  z-index: 2;
  max-width: 42vw;
  padding: 0.22vh 0.4vw;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.78);
  font-size: 0.68vw;
  font-weight: 300;
  line-height: 1.25;
  text-align: right;
  pointer-events: none;
}

.cv-gallery-lightbox-caption {
  position: fixed;
  left: 6vw;
  right: 6vw;
  bottom: 3vh;
  z-index: 2;
  padding: 0.45vh 0.75vw;
  color: rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.64);
  font-size: 0.82vw;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
}

.cv-gallery-lightbox-photo-credit[hidden],
.cv-gallery-lightbox-caption[hidden] {
  display: none;
}

.cv-gallery-lightbox-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cv-gallery-lightbox-caption a:hover {
  color: #ff0000;
}

.cv-gallery-lightbox-close {
  position: fixed;
  top: 5.5vh;
  right: 3vw;
  height: 4vh;
  border: 1px solid rgb(104, 103, 103);
  z-index: 2;
}

.cv-gallery-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2vw;
  min-width: 38px;
  height: 7vh;
  min-height: 46px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgb(104, 103, 103);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
}

.cv-gallery-lightbox-prev { left: 4vw; }
.cv-gallery-lightbox-next { right: 4vw; }

@media (max-width: 800px) {
  .cv-gallery-window {
    left: 8vw;
    top: 18vh;
    width: 84vw;
  }

  .cv-gallery-title,
  .cv-gallery-count {
    font-size: 12px;
  }
}

.cv-text.cv-expo-gallery-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.cv-text.cv-expo-gallery-trigger:hover {
  color: red;
}

.cv-text.cv-expo-gallery-trigger.is-active,
.cv-text.cv-expo-gallery-trigger.is-active * {
  color: red;
}

/* ============================================
   PRESSE — PDF VALÉDICTIONS
   PDF pleine largeur + défilement au survol
   ============================================ */

.media-pdf-wrapper.media-valedictions-pdf {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.media-pdf-wrapper .media-pdf-scroll-area {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.14);
  scrollbar-width: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.media-pdf-wrapper .media-pdf-scroll-area::-webkit-scrollbar {
  width: 10px;
}

.media-pdf-wrapper .media-pdf-scroll-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.14);
}

.media-pdf-wrapper .media-pdf-scroll-area::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
}

.media-active-visual .media-valedictions-web-image,
.media-active-visual .media-pdf-web-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: initial;
  background: #c5c6c8;
}

/* ============================================
   CARTELS — ŒUVRES PARALLÈLES
   ============================================ */

.cartel-inner-parallele {
  position: absolute;
  left: 5vw;
  top: 9vh;
  background: #cdc9c0;
  color: #000;
  padding: 2.5vh 2vw;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3vh;
  box-shadow: 4px 4px 0px #a09890, 8px 8px 0px #8a8078, 12px 12px 0px rgba(0, 0, 0, 0.2);
  max-width: 68%;
}
.cartel-inner-parallele .cartel-title-parallele {
    font-size: 1.6vw;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    color: #000;
}
.cartel-inner-parallele .cartel-data-parallele {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.3vh;
  font-size: 0.85vw;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

.nav-preview-parallele {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: #000;
  padding-left: 3vw;
}

.nav-preview-parallele img,
.nav-preview-parallele video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-preview-parallele.visible {
  opacity: 1;
}

.nav-preview-parallele .mini-cartel-parallele {
  position: absolute;
    bottom: 2.5vh;
    left: 4.5vw;
  text-align: left;
  font-size: 0.8vw;
  font-weight: 300;
  line-height: 1.35;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.35vh;
  color: #000;
}

.nav-preview-parallele .mini-cartel-parallele span {
  background: rgba(255,255,255,0.92);
  color: #000;
  padding: 0.1vh 0.35vw;
}

.nav-preview-parallele .mini-cartel-parallele .mini-title-parallele {
  font-style: italic;
  font-weight: 500;
  font-size: 1vw;
  margin-bottom: 0.75vh;
}

.oeuvre-cartel-parallele {
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.5vh 0 0vh 3vw;
  position: relative;
}

.cartel-nav-btns-parallele {
  position: absolute;
  bottom: 0;
  left: 3vw;
  display: grid;
  grid-template-columns: repeat(2, 6.5vw);
  grid-template-rows: 3.029vw;
  gap: 0;
  z-index: 25;
}

.cartel-nav-btns-parallele button {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgb(104, 103, 103);
    color: #fff;
    width: 6.5vw;
    height: 3.02vw;
    font-size: 3.2vw;
    padding-bottom: 0.9vh;
    font-weight: lighter;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Supreme", sans-serif;
}

.cartel-nav-btns-parallele button:hover {
  background: #fff;
  color: #000;
}

/* ============================================
   CADRE — 4 BANDES NOIRES SUR LES BORDS
   La vidéo passe dessous (z-index inférieur)
   ============================================ */
#ligne-verticale-gauche {
    position: fixed;
    opacity: 1;
    bottom: 0;
    height: 100vh;
    left: 3.0vw;
    z-index: 10000;
    border-right: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
}

#ligne-verticale-milieu {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 50vw;
    height: 96.6vh;
    z-index: 10000;
    border-right: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
#ligne-verticale-droite {
    position: fixed;
    opacity: 1;
    bottom: 0;
    height: 100vh;
    right: 3.0vw;
    z-index: 10000;
    border-left: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
}

#ligne-horizontale-haut {
    position: fixed;
    opacity: 1;
    top: 0vh !important;
    width: 100vw;
    height: 5.61vh;
    z-index: 1000;
    align-items: flex-start;
    border-bottom: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
}

#ligne-horizontale-milieu {
    position: fixed;
    opacity: 0;
    width: 100vw;
    height: 1px;
    top:50vh;
    z-index: 1000;
    align-items: flex-start;
    border-bottom: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

body.is-oeuvre-section #ligne-verticale-milieu,
body.is-oeuvre-section #ligne-horizontale-milieu {
    opacity: 1;
}

body.is-parallele-section #ligne-verticale-milieu,
body.is-parallele-section #ligne-horizontale-milieu {
    opacity: 1;
}

body.is-medias-section #ligne-verticale-milieu,
body.is-medias-section #ligne-horizontale-milieu {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1002 !important;
}

body.is-medias-section #ligne-verticale-milieu {
    display: block !important;
    position: fixed !important;
    left: var(--media-vertical-x, 65vw) !important;
    top: var(--media-middle-top, 5.5vh) !important;
    bottom: auto !important;
    width: 1px !important;
    min-width: 1px !important;
    height: var(--media-middle-height, calc(100vh - 5.5vh - 3.4vh)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10002 !important;
    background-color: rgb(104, 103, 103) !important;
    background: rgb(104, 103, 103) !important;
    border: 0 !important;
    pointer-events: none !important;
}

body.is-medias-section #ligne-horizontale-milieu {
    display: block !important;
    position: fixed !important;
    left: var(--media-middle-x, 65vw) !important;
    right: auto !important;
    top: var(--media-middle-y, 50vh) !important;
    bottom: auto !important;
    width: var(--media-middle-width, 32vw) !important;
    height: 1px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10002 !important;
    background: rgb(104, 103, 103) !important;
    border: 0 !important;
    pointer-events: none !important;
}


#ligne-horizontale-bas {
    position: fixed;
    opacity: 1;
    width: 100vw;
    bottom: 3.35vh;
    z-index: 10000;
    border-top: 1px rgb(104, 103, 103) solid;
    padding: 0rem;
}

#border-left {
    position: fixed;
    top: 0vh;
    left: 0;
    width: 3vw;
    height: calc(100vh - 0vh - 3.4vh);
    background: #000;
    z-index: 500;
    pointer-events: none;
}

#border-right {
    position: fixed;
    top: 0vh;
    right: 0;
    width: 3vw;
    height: calc(100vh - 0vh - 3.4vh);
    background: #000;
    z-index: 500;
    pointer-events: none;
}

#border-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.4vh;
  background: #000;
  z-index: 999;
  pointer-events: none;
  /* Pas de border-top ici — porté par #audio-player uniquement */
}

/* ============================================
   LAURENT QUILLET — styles globaux
   ============================================ */

/* ============================================
   POLICE SUPREME — hébergée localement
   Fichiers statiques en priorité pour garantir
   le bon poids en local (Thin = 100, etc.)
   ============================================ */

@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-ExtralightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-ExtraboldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* Variable en dernier — fallback pour les poids intermédiaires */
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-VariableItalic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ============================================
   POLICE CLASH DISPLAY — hébergée localement
   ============================================ */

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sligoil Micro";
  src: url("../fonts/Sligoil-Micro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sligoil Micro";
  src: url("../fonts/Sligoil-MicroMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sligoil Micro";
  src: url("../fonts/Sligoil-MicroBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Melodrama";
  src: url("../fonts/Melodrama-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Reset & base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Toutes les pages occupent le même espace — permettent la superposition pendant la transition */
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
min-height: calc(100vh - 50px - 0px);}

/* ============================================
   VIDÉO DE FOND FIXE GLOBALE
   ============================================ */

#bg-video-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Rendu GPU — jamais retiré du DOM, jamais interrompu */
  will-change: opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
  contain: strict;
}

#bg-video-global iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 171.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  will-change: transform;
}

#bg-video-global .bg-video-mobile {
  display: none;
}

#bg-overlay-global {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

/* Toujours dans le DOM — opacity uniquement, jamais display */
#bg-video-global {
  display: block !important;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ============================================
   TRANSITION FONDU ENTRE PAGES
   S'applique uniquement au contenu, pas à la vidéo de fond
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Seuls les éléments de contenu font le fondu */
.cv-content,
.actualites-content,
.identite-content,
.identite-quote,
.cartel,
.oeuvres-list,
.preview-zone,
.paralleles-list {
  animation: fadeIn 0.4s ease;
}

/* ============================================
   NAVIGATION FIXE EN HAUT
   ============================================ */

nav#main-nav {
  position: fixed;
  top: 0;
  left: 3vw;
  width: 94%;
  height: 5.5vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 0vw;
  z-index: 1000;
}

/* Lignes verticales gauche/droite gérées via #borders dans le HTML */


nav#main-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}

nav#main-nav .nav-name {
    border-right: 1px rgb(104, 103, 103) solid;
  padding: 0 1em 0 1em;
  height: 5.59vh;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  font-size: 1vw;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}


/* Le "?" n'apparaît qu'au survol */
.nav-name-mark {
  opacity: 0;
  transition: opacity 0.2s;
}

nav#main-nav .nav-name:hover .nav-name-mark {
  opacity: 1;
}

nav#main-nav .nav-links a {
  font-size: 1vw;
  font-weight: 400;
  padding: 0 1.55vw;
  height: 5.59vh;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
    border-right: 1px rgb(104, 103, 103) solid;
}

nav#main-nav .nav-links a[data-page="actualites"] {
  border-left: 1px solid grey !important;
}

body.is-oeuvre-section nav#main-nav .nav-links a[data-page="actualites"] {
  border-left: 0px solid grey !important;
}

/* Micro-menu déroulant sous « œuvres » */
nav#main-nav .nav-dropdown-oeuvres {
  position: relative;
  display: flex;
  align-items: center;
  height: 5.5vh;
}

nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
  font-size: 1vw;
  font-weight: 400;
  padding: 0 1.68vw;
  height: 5.5vh;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  border-right: 1px rgb(104, 103, 103) solid;
  background: #000;
}

nav#main-nav .nav-dropdown-oeuvres:hover > .nav-oeuvres-main,
nav#main-nav .nav-dropdown-oeuvres:focus-within > .nav-oeuvres-main,
nav#main-nav .nav-dropdown-oeuvres.active > .nav-oeuvres-main {
  background: #fff;
  color: #000;
}

nav#main-nav .nav-oeuvres-submenu {
    position: absolute;
    top: 5.5vh;
    left: -0.05vw;
    min-width: 101%;
    display: flex;
    flex-direction: column;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.4vh);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 20000;
}

nav#main-nav .nav-dropdown-oeuvres:hover .nav-oeuvres-submenu,
nav#main-nav .nav-dropdown-oeuvres:focus-within .nav-oeuvres-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

nav#main-nav .nav-oeuvres-subitem {
  position: relative;
  display: flex;
  width: 100%;
  overflow: visible;
}

nav#main-nav .nav-oeuvres-submenu a {
    font-size: 0.9vw;
    font-weight: 400;
    padding: 0 0vw;
    height: 3.5vh;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    border-left: 1px rgb(104, 103, 103) solid;
    border-top: 1px solid rgb(104, 103, 103);
    border-right: 1px rgb(104, 103, 103) solid;
    border-bottom: 1px rgb(104, 103, 103) solid;
}

nav#main-nav .nav-oeuvres-submenu a:hover {
  background: #fff;
  color: #000;
}

@media (min-width: 1025px) {
  .oeuvres-info-btn,
  .oeuvres-info-btn-parallele {
    display: none !important;
  }

  nav#main-nav .nav-links {
    width: 32vw;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  nav#main-nav .nav-links > .nav-actualites {
    display: none !important;
  }

  nav#main-nav .nav-links > a,
  nav#main-nav .nav-dropdown-oeuvres,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    width: 100%;
    min-width: 0;
  }

  nav#main-nav .nav-links > a,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
  }

  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    border-left: 1px solid grey;
  }

  nav#main-nav .nav-oeuvres-submenu {
    width: 100%;
    min-width: 100%;
  }

  nav#main-nav .nav-name,
  nav#main-nav .nav-links > a:not(.nav-home),
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.4vw;
    font-weight: 400;
  }

  nav#main-nav .nav-oeuvres-submenu a {
    font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.1vw;
    font-weight: 400;
  }

  nav#main-nav .nav-oeuvres-subitem > a {
    width: 100%;
  }

  nav#main-nav .nav-oeuvres-info-trigger {
    position: absolute;
    top: 0;
    left: 100%;
    width: 3.5vh;
    height: 3.5vh;
    min-width: 3.5vh;
    min-height: 3.5vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(104, 103, 103);
    border-left: 0;
    background: #000;
    color: red;
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.4vw;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, background 0.15s, color 0.15s, visibility 0.18s;
  }

  nav#main-nav .nav-oeuvres-subitem:hover .nav-oeuvres-info-trigger,
  nav#main-nav .nav-oeuvres-subitem:focus-within .nav-oeuvres-info-trigger,
  nav#main-nav .nav-oeuvres-submenu:has(.nav-oeuvres-info-trigger:hover) .nav-oeuvres-info-trigger,
  nav#main-nav .nav-oeuvres-submenu:has(.nav-oeuvres-info-trigger:focus-visible) .nav-oeuvres-info-trigger {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  nav#main-nav .nav-oeuvres-info-trigger:hover,
  nav#main-nav .nav-oeuvres-info-trigger:focus-visible {
    background: #fff;
    color: #000;
  }

  nav#main-nav .nav-oeuvres-info-tooltip {
    position: absolute;
    top: 100%;
    right: 100%;
    z-index: 22000;
    width: 22vw;
    max-width: 22vw;
    padding: 2vh 2vw;
    border: 1px solid #ccc;
    border-radius: 20px 0 20px 0;
    background: #000000cf;
    color: #fff;
    font-family: "Sligoil Micro", sans-serif;
    font-size: 0.9vw;
    font-weight: 100;
    line-height: 1.5;
    text-align: justify;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }

  nav#main-nav .nav-oeuvres-subitem-personnelles .nav-oeuvres-info-tooltip {
    top: 200%;
  }

  nav#main-nav .nav-oeuvres-info-trigger:hover + .nav-oeuvres-info-tooltip,
  nav#main-nav .nav-oeuvres-info-trigger:focus-visible + .nav-oeuvres-info-tooltip {
    opacity: 1;
    visibility: visible;
  }
}


nav#main-nav .nav-links a:hover {
  background: #fff;
  color: #000;
}

nav#main-nav .nav-links a.nav-parallel:hover {
  background: #fff;
  color: #ff0000;
}

nav#main-nav .nav-name:hover {
  background: #fff;
  color: #000;
}

nav#main-nav .nav-links a.active {
  background: #ffffff;
  color: #000;
}

nav#main-nav .nav-links a.nav-parallel {
  color: #ff0000;
}

nav#main-nav .nav-links a.nav-home {
  font-size: 1.5vw;
}

.nav-mobile-toggle,
.nav-mobile-current-title,
.mobile-nav-panel {
  display: none;
}

.nav-profile-photo {
  display: none;
}

/* ============================================
   NAVIGATION MOBILE / TABLETTE
   ============================================ */

@media (max-width: 1024px) {
  body.mobile-nav-open {
    overflow: hidden;
    --lq-mobile-nav-top: 62px;
    --lq-mobile-bottom-bar: calc(54px + env(safe-area-inset-bottom));
  }

  nav#main-nav {
    left: 0;
    width: 100vw;
    height: 62px;
    border-bottom: 1px solid rgb(104, 103, 103);
    z-index: 40000;
  }

  nav#main-nav .nav-name {
    display: flex;
    width: 62px;
    height: 62px;
    padding: 0;
    border-right: 1px solid rgb(104, 103, 103);
    font-size: clamp(13px, 2.2vw, 18px);
    letter-spacing: 0.04em;
    flex: 0 0 62px;
    overflow: hidden;
  }

  nav#main-nav .nav-name-text {
    display: none;
  }

  nav#main-nav .nav-profile-photo {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(1);
  }

  .nav-mobile-current-title {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 14px;
    background: #8b8b8b;
    color: #000;
    border-right: 1px solid rgb(104, 103, 103);
    font-size: clamp(17px, 3.6vw, 30px);
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }

  .nav-mobile-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin-left: auto;
    width: 62px;
    padding: 0;
    background: #000;
    color: #fff;
    border: 0;
    border-left: 1px solid rgb(104, 103, 103);
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .nav-mobile-toggle:hover,
  .nav-mobile-toggle:focus-visible,
  body.mobile-nav-open .nav-mobile-toggle {
    background: #fff;
    color: #000;
  }

  .mobile-nav-panel {
    position: fixed;
    inset: 62px 0 calc(54px + env(safe-area-inset-bottom)) 0;
    display: block;
    background: rgba(0, 0, 0, 0.98);
    border-top: 1px solid rgb(104, 103, 103);
    border-bottom: 1px solid rgb(104, 103, 103);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
    z-index: 120000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-nav-open .mobile-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-nav-panel a,
  .mobile-nav-heading {
    display: flex;
    align-items: center;
    min-height: clamp(48px, 8vh, 78px);
    padding: 0 clamp(18px, 7vw, 72px);
    color: #fff;
    border-bottom: 1px solid rgba(104, 103, 103, 0.75);
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 8vw, 74px);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
  }

  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus-visible {
    background: #fff;
    color: #000;
    padding-left: clamp(26px, 9vw, 88px);
  }

  .mobile-nav-group {
    border-bottom: 1px solid rgba(104, 103, 103, 0.75);
  }

  .mobile-nav-heading {
    min-height: clamp(46px, 7vh, 68px);
    color: rgba(255, 255, 255, 0.52);
    border-bottom: 1px solid rgba(104, 103, 103, 0.45);
    font-size: clamp(15px, 3.8vw, 28px);
    font-weight: 400;
    letter-spacing: 0.12em;
    pointer-events: none;
  }
}

@media (max-width: 600px) {

  nav#main-nav .nav-name {
    width: 62px;
    height: 62px;
    padding: 0;
    flex-basis: 62px;
  }

  .nav-mobile-toggle {
    width: 62px;
    padding: 0;
    font-size: 42px;
  }

  .mobile-nav-panel {
    inset: 62px 0 calc(54px + env(safe-area-inset-bottom)) 0;
  }
}

/* ============================================
   LECTEUR AUDIO FIXE EN BAS
   ============================================ */

#audio-player {
    position: fixed;
    bottom: 0;
    left: 3.1vw;
    right: 3vw;
    width: auto;
    height: 3.4vh;
    background: #000;
    display: grid;
    grid-template-columns: 1.8vw minmax(0, 1fr);
    align-items: center;
    gap: 1vw;
    padding: 0 0vw 0 2vw;
    z-index: 100000;
    border-right: 1px rgb(104, 103, 103) solid;
    border-top: 1px rgb(104, 103, 103) solid;
    box-sizing: border-box;
    overflow: hidden;
}

#audio-player .audio-meta {
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(12vw, 32vw) minmax(0, 1fr);
  align-items: center;
  gap: 1vw;
}

#audio-player .audio-progress-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(8vw, 1fr) auto;
  align-items: center;
  gap: 0.6vw;
  font-size: 0.8vw;
  opacity: 0.8;
}

#audio-player {
  --audio-progress-height: 3.4vh;
  --audio-progress-thumb-width: 5px;
  --audio-progress-played: #717171;
  --audio-progress-unplayed: #000;
  --audio-progress-percent: 0%;
}

#audio-player #audio-progress {
  width: 100%;
  min-width: 0;
  height: var(--audio-progress-height);
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    to right,
    var(--audio-progress-played) 0%,
    var(--audio-progress-played) var(--audio-progress-percent),
    var(--audio-progress-unplayed) var(--audio-progress-percent),
    var(--audio-progress-unplayed) 100%
  );
  cursor: pointer;

}

#audio-player #audio-progress::-webkit-slider-runnable-track {
  height: var(--audio-progress-height);
  background: linear-gradient(
    to right,
    var(--audio-progress-played) 0%,
    var(--audio-progress-played) var(--audio-progress-percent),
    var(--audio-progress-unplayed) var(--audio-progress-percent),
    var(--audio-progress-unplayed) 100%
  );
  border: none;
}

#audio-player #audio-progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--audio-progress-thumb-width);
  height: var(--audio-progress-height);
  background: #717171;
  border: none;
  border-radius: 0;
  margin-top: 0;
}

#audio-player #audio-progress::-moz-range-track {
  height: var(--audio-progress-height);
  background: var(--audio-progress-unplayed);
  border: none;
}

#audio-player #audio-progress::-moz-range-progress {
  height: var(--audio-progress-height);
  background: var(--audio-progress-played);
  border: none;
}

#audio-player #audio-progress::-moz-range-thumb {
  width: var(--audio-progress-thumb-width);
  height: var(--audio-progress-height);
  background: #fff;
  border: none;
  border-radius: 0;
}

#audio-player button#play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 2%;
  width: 2vw;
}

#audio-player .audio-label {
  display: block;
  min-width: 0;
  font-size: 1vw;
  font-weight: 300;
  letter-spacing: 0.02em;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

main#content {
  padding-top: 44px;
  padding-bottom: 36px;
  min-height: 100vh;
}

/* ============================================
   PAGE D'ACCUEIL
   ============================================ */

.page-home {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px - 36px);
  overflow: hidden;
}

/* Vidéo de fond Détachement */
.page-home .bg-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

/* L'iframe est surdimensionnée et centrée — simule un object-fit: cover */
.page-home .bg-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Couvre toujours toute la fenêtre en gardant le ratio 16/9 */
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  pointer-events: none;
}


/* Overlay noir pour réduire l'opacité à ~15% */
.page-home .bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.10);
  z-index: 2;
  pointer-events: none;
}
/* Cartel en bas à droite */
.page-home .cartel {
     opacity: 0.75;
    transform: scale(1.1);
    transform-origin: top right;
    position: absolute;
    outline: 2px rgb(54, 54, 54) solid;
    top: 7vh;
    right: 6vw;
    z-index: 3;
    text-align: right;
    line-height: 1.4;
    background: rgb(221, 219, 216);
    color: #000;
    padding: 1.9vh 1.2vw;
    min-width: 14vw;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0vh;
    box-shadow: 7px 7px 0px rgba(160, 152, 144, 0.75), 6px 6px 0px 0px rgba(138, 128, 120, 0.55), 9px 8px 0px 0px rgb(0, 0, 0);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.page-home .cartel .cartel-title {
  font-size: 1.25vw;
  font-weight: 600;
  font-style: italic;
  color: #000;
  display: inline-block;
  padding: 0;
  margin-bottom: 1.2vh;
  transition: color 0.2s, transform 0.2s;
}

.page-home .cartel:hover {
  transform: translateX(-0.5vw) scale(1.1);
}

.page-home .cartel .cartel-info {
  font-size: 0.8vw;
  font-weight: 300;
  opacity: 0.85;
  display: block;
  color: #000;
  line-height: 1.25;
}

/* ============================================
   PAGE ACTUALITÉS
   ============================================ */

.page-actualites {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 44px - 36px);
  overflow: hidden;
}

.page-actualites .bg-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-actualites .bg-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 1;
}

.page-actualites .bg-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1;
  pointer-events: none;
}

.page-actualites .actualites-content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 5.5vh - 3.4vh);
  padding: 18vh 5.2vw 8vh 3vw;
  display: flex;
  gap: 2.8vw;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.actualite-card {
  background: #000;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.3s;
  border: none;
  outline: 2px rgba(255,255,255,0.55) solid;
  padding: 1.05vh 0.75vw;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.actualite-card:nth-child(1) {
  width: 44vw;
}

.actualite-card:nth-child(2) {
  width: 18.5vw;
}

.actualite-card:hover {
  opacity: 1;
  transform: translateY(-0.3vh);
  box-shadow: 5px 5px 0px white;

}

.actualite-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.actualite-card:nth-child(1) img {
  height: 24.75vw;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.actualite-card:nth-child(2) img {
  height: 25.7vw;
  aspect-ratio: 0.72 / 1;
  object-fit: cover;
}

.actualite-card .card-info {
  padding: 1.2vh 0 0 0;
  font-size: 0.95vw;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
}

.actualite-card .card-info .card-dates {
  font-size: 0.95vw;
  opacity: 1;
  display: block;
  margin-bottom: 1.3vh;
  font-weight: 700;
}

.actualite-card .card-info .card-title {
  font-style: italic;
  font-weight: 700;
  display: block;
  margin-bottom: 0.55vh;
}

.actualite-card .card-info .card-lieu {
  display: block;
  opacity: 0.9;
  font-weight: 600;
}

/* ============================================
   PAGE CV
   ============================================ */

.page-cv {
  position: relative;
  min-height: calc(100vh - 44px - 36px);
}

.page-cv .bg-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-cv .bg-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-cv .bg-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1;
  pointer-events: none;
}

.page-cv .cv-content {
  position: absolute;
  z-index: 2;
  right: 7.5vw;
  top: 13vh;
  padding: 0 0 60px;
  max-width: 60vw;
}

.cv-section {
  margin-bottom: 8vh;
}

.cv-section-title {
  font-size: 1.5vw;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff800;
  text-align: right;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.cv-section-subtitle {
  font-size: 1.3vw;
  color: #fff800;
  text-align: right;
  margin-top: -1.25vh;
  margin-bottom: 3vh;
  font-style: italic;
}

.cv-entry {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 4px;
  text-align: right;
}

.cv-entry .cv-text {
  font-size: 0.8vw;
  font-weight: 300;
  font-style: normal;
  flex: 1;
  text-align: right;
}

.cv-entry .cv-text strong {
  font-weight: 700;
}

.cv-entry .cv-year {
  font-size: 0.9vw;
  font-weight: 700;
  color: #fff800;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

.cv-entry.distinction .cv-text {
  font-weight: 700;
  font-style: italic;
}

/* ============================================
   PAGE IDENTITÉ
   ============================================ */

.page-identite {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px - 36px);
  overflow: hidden;
}

.page-identite .bg-video-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.page-identite .bg-video-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-identite .bg-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1;
}

.page-identite .identite-content {
    transform: scale(0.7);
    transform-origin: bottom right;
    position: absolute;
    bottom: 7vh;
    right: 5.5vw;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 2em;
}

.page-identite .identite-quote {
    border: 1px white solid;
    padding: 24px;
    position: absolute;
    top: 7vh;
    left: 5.5vw;
    z-index: 2;
    width: 32vw;
    max-width: 800px;
    color: #fff;
    font-size: clamp(14px, 1.05vw, 23px);
    font-weight: 300;
    line-height: 1.42;
    text-align: justify;
    font-style: italic;
}

.page-identite .identite-quote p {
  margin: 0 0 1em;
}

.page-identite .identite-quote footer {
  margin-top: 1.25em;
  text-align: right;
  font-style: normal;
  font-weight: 400;
}

.page-identite .identite-text {
  position: relative;
  top: 12px;
  text-align: right;
  font-size: 2.2em;
  font-weight: 300;
  line-height: 1.25;
}

.page-identite .identite-photo {
  outline: 2px white solid;
  width: auto;
  height: 28.7em;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 0px solid rgba(255,255,255,0.2);
}

/* ============================================
   PAGE ŒUVRES — liste
   ============================================ */

.page-oeuvres {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px - 36px);
  background: #000;
  overflow: hidden;
}

.page-oeuvres .preview-zone {
  position: absolute;
  top: 7vh;
  left: 9.6vh;
  width: 68vw;
  height: 60vh;
  z-index: 100;
}

.page-oeuvres .preview-zone .preview-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 47vw;
  max-height: 70vh;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  border-radius:20px;
  transition: opacity 0.75s;
  outline: 1px rgb(210, 210, 210) solid;
  box-shadow: 12px 12px 0px rgba(183, 183, 183, 0.25);
}

.page-oeuvres .preview-zone #preview-je-suis-ne-ici {
  position: absolute;
  top: 0;
  left: 0;
  width: 34vw;
  max-height: 70vh;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  border-radius: 20px;
  transition: opacity 0.75s;
  outline: 1px rgb(210, 210, 210) solid;
  box-shadow: 12px 12px 0px rgba(183, 183, 183, 0.25);
}

.page-oeuvres .preview-zone #preview-je-suis-ne-ici.active {
  opacity: 1;
  pointer-events: auto;
}

.page-oeuvres .preview-zone .preview-media.active {
  opacity: 1;
  pointer-events: auto;
}

.page-oeuvres .preview-zone video,
.page-oeuvres .preview-zone img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.page-oeuvres .oeuvres-list {
  position: fixed;
  right: 0;
  bottom: 3.3vh;
  width: 89vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 2.9vw 0 0;
  z-index: 2;
}

.page-oeuvres .oeuvres-list a {
  display: block;
  text-align: right;
  text-transform: uppercase;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.75vw;
  font-weight: 100;
  font-style: normal;
  line-height: 0.73em;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  /* Typewriter : overflow caché, largeur part de 0 */
  overflow: hidden;
  width: 0;
  margin-left: auto; /* pousse le bloc vers la droite */
  direction: ltr;
  transition: color 0.15s, font-size 0.15s, font-weight 0.12s;
}

.page-oeuvres .oeuvres-list a:hover {
  color: #ff0000;
  font-weight: 300;
  padding: 0.75vh 0.3vw 0.75vh 0vw;
}

.page-oeuvres .oeuvres-list a:hover::before {
  content: "> ";
}

/* ---- Keyframes typewriter ---- */
@keyframes lq-type {
  from { width: 0; }
  to   { width: 100%; }
}

/* Délais échelonnés inversés — le dernier titre en bas apparaît en premier */
/* Le rythme remonte progressivement du plus grand titre vers le plus petit */
.page-oeuvres .oeuvres-list a:nth-child(22) { animation: lq-type 3.2s steps(59, end) 0.55s both; }
.page-oeuvres .oeuvres-list a:nth-child(21) { animation: lq-type 2.5s steps(47, end) 0.95s both; }
.page-oeuvres .oeuvres-list a:nth-child(20) { animation: lq-type 1.9s steps(34, end) 1.30s both; }
.page-oeuvres .oeuvres-list a:nth-child(19) { animation: lq-type 1.2s steps(20, end) 1.65s both; }
.page-oeuvres .oeuvres-list a:nth-child(18) { animation: lq-type 1.2s steps(19, end) 1.90s both; }
.page-oeuvres .oeuvres-list a:nth-child(17) { animation: lq-type 1.0s steps(17, end) 2.15s both; }
.page-oeuvres .oeuvres-list a:nth-child(16) { animation: lq-type 0.9s steps(16, end) 2.35s both; }
.page-oeuvres .oeuvres-list a:nth-child(15) { animation: lq-type 0.9s steps(15, end) 2.55s both; }
.page-oeuvres .oeuvres-list a:nth-child(14) { animation: lq-type 0.85s steps(14, end) 2.75s both; }
.page-oeuvres .oeuvres-list a:nth-child(13) { animation: lq-type 0.85s steps(13, end) 2.92s both; }
.page-oeuvres .oeuvres-list a:nth-child(12) { animation: lq-type 0.8s steps(13, end) 3.09s both; }
.page-oeuvres .oeuvres-list a:nth-child(11) { animation: lq-type 0.8s steps(13, end) 3.26s both; }
.page-oeuvres .oeuvres-list a:nth-child(10) { animation: lq-type 0.8s steps(13, end) 3.40s both; }
.page-oeuvres .oeuvres-list a:nth-child(9)  { animation: lq-type 0.7s steps(11, end) 3.53s both; }
.page-oeuvres .oeuvres-list a:nth-child(8)  { animation: lq-type 0.7s steps(11, end) 3.66s both; }
.page-oeuvres .oeuvres-list a:nth-child(7)  { animation: lq-type 0.7s steps(11, end) 3.79s both; }
.page-oeuvres .oeuvres-list a:nth-child(6)  { animation: lq-type 0.7s steps(11, end) 3.90s both; }
.page-oeuvres .oeuvres-list a:nth-child(5)  { animation: lq-type 0.6s steps(10, end) 4.01s both; }
.page-oeuvres .oeuvres-list a:nth-child(4)  { animation: lq-type 0.6s steps(9,  end) 4.11s both; }
.page-oeuvres .oeuvres-list a:nth-child(3)  { animation: lq-type 0.45s steps(6,  end) 4.20s both; }
.page-oeuvres .oeuvres-list a:nth-child(2)  { animation: lq-type 0.45s steps(7,  end) 4.29s both; }
.page-oeuvres .oeuvres-list a:nth-child(1)  { animation: lq-type 0.35s steps(4,  end) 4.38s both; }

/* Rejouer l'animation quand on arrive sur la page */
.page-oeuvres.anim-reset .oeuvres-list a {
  animation: none;
  width: 0;
}

/* Bouton info — œuvres personnelles */
.oeuvres-info-btn,
.oeuvres-info-btn-parallele {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.oeuvres-info-btn.lq-info-visible,
.oeuvres-info-btn-parallele.lq-info-visible {
  opacity: 1;
}

.oeuvres-info-btn {
  position: fixed;
  right: 0vw;
  top: 5.5vh;
  width: 3vw;
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--oeuvres-info-symbol-size, 2vw);
  color: red;
  padding: 0;
  z-index: 1000;
  border-bottom: 1px rgb(104, 103, 103) solid;
  border-right: 1px rgb(104, 103, 103) solid;  
transition: opacity 0.5s ease, background 0.2s;}

.oeuvres-info-btn:hover {
background: rgb(255, 255, 255);
}

.oeuvres-info-tooltip {
  position: fixed;
  top: 9.95vh;
  left: 9.6vh;
  font-size: var(--oeuvres-tooltip-font-size, 0.9vw);
  color: #ffffff;
  padding: 2vh 2vw;
  border: 1px solid #ccc;
  border-radius: 20px 0 20px 0;
  text-align: justify;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--oeuvres-tooltip-duration, 0.3s) ease, visibility var(--oeuvres-tooltip-duration, 0.3s) ease;
  pointer-events: none;
  z-index: 1001;
  max-width: 22vw;
}

.oeuvres-info-btn:hover .oeuvres-info-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Bouton info — œuvres parallèles */
.oeuvres-info-btn-parallele {
  position: fixed;
  left: 0vw;
  top: 5.5vh;
  width: 3vw;
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--oeuvres-info-symbol-size-parallele, 2vw);
  color: red;
  padding: 0;
  z-index: 1000;
  border-bottom: 1px rgb(104, 103, 103) solid;
  border-left: 1px rgb(104, 103, 103) solid;
transition: opacity 0.5s ease, background 0.2s;}

.oeuvres-info-btn-parallele:hover {
  background: rgb(255, 255, 255);
}

.oeuvres-info-tooltip-parallele {
  position: fixed;
  top: 9.95vh;
  right: 9.6vh;
  font-family: "Sligoil Micro", sans-serif;
  font-size: var(--oeuvres-tooltip-font-size-parallele, 0.9vw);
  color: #ffffff;
  padding: 2vh 2vw;
  border: 1px solid #ccc;
  border-radius: 20px 0 20px 0;
  text-align: justify;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--oeuvres-tooltip-duration-parallele, 0.3s) ease, visibility var(--oeuvres-tooltip-duration-parallele, 0.3s) ease;
  pointer-events: none;
  z-index: 1001;
  max-width: 22vw;
}

.oeuvres-info-btn-parallele:hover .oeuvres-info-tooltip-parallele {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   PAGE ŒUVRE INDIVIDUELLE
   ============================================ */

.page-oeuvre {
  background: #000;
  height: calc(100vh - 5.5vh - 3.4vh);
  overflow: hidden;
}

.oeuvre-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 65% 35%;
  grid-template-rows: 68% 32%;
  gap: 1px;
}

/* ---- Quadrant haut-gauche : VISUEL ---- */
.oeuvre-visuel {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 5.5vh 0vw 0vh 3vw;
}

.oeuvre-video-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
}

.oeuvre-video-wrapper iframe {
  position: absolute;
  top: 0vh;
  left: 0vw;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  border: 0;
}

.oeuvre-visuel > .oeuvre-video-wrapper,
.oeuvre-visuel .carousel .oeuvre-video-wrapper,
.oeuvre-visuel .carousel .oeuvre-video-wrapper.carousel-slide,
.oeuvre-visuel .carousel .oeuvre-video-wrapper.is-active,
#page-oeuvre-detachement .oeuvre-video-wrapper {
  width: 100% !important;
  height: 100% !important;
}

#page-oeuvre-detachement .oeuvre-visuel {
  align-items: stretch;
  justify-content: stretch;
}

#page-oeuvre-detachement .oeuvre-video-wrapper .detachement-video-frame {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

#page-oeuvre-detachement .detachement-construction-message {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Melodrama", "Melodrama-Regular", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 3.2vw, 35px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: lowercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#page-oeuvre-detachement.is-construction-year .detachement-construction-message {
  opacity: 1;
  visibility: visible;
}

/* Contrôles Vimeo dessinés par le site afin de conserver le curseur personnalisé. */
.lq-vimeo-custom-host {
  position: relative !important;
  overflow: hidden;
}

iframe.lq-vimeo-custom-iframe {
  pointer-events: none !important;
}

.lq-vimeo-ui {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.lq-vimeo-surface {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  outline: none;
}

.lq-vimeo-controls {
  position: absolute;
  right: 0;
  bottom: 13px;
  left: 0;
  z-index: 2;
  min-height: 42px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.08));
  pointer-events: auto;
}

.lq-vimeo-controls button {
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 11px/1 "Supreme", sans-serif;
  transition-duration: 0.2s;
}

.lq-vimeo-controls button:hover {
  color: #ff0000;
}

.lq-vimeo-play,
.lq-vimeo-fullscreen {
  font-size: 17px !important;
}

.lq-vimeo-time,
.lq-vimeo-duration {
  min-width: 38px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lq-vimeo-progress,
.lq-vimeo-volume {
  height: 16px;
  accent-color: #ffffff;
}

.lq-vimeo-progress {
  flex: 1 1 auto;
  min-width: 80px;
}

.lq-vimeo-volume {
  flex: 0 0 72px;
  width: 72px;
}

.oeuvre-video-wrapper .detachement-video-frame {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.oeuvre-video-wrapper .detachement-video-frame.active {
  opacity: 1;
  pointer-events: auto;
}

.oeuvre-video-wrapper .lq-vimeo-ui[data-detachement-year] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.oeuvre-video-wrapper .lq-vimeo-ui[data-detachement-year].is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.oeuvre-video-wrapper .lq-vimeo-ui[data-detachement-year].is-active .lq-vimeo-surface,
.oeuvre-video-wrapper .lq-vimeo-ui[data-detachement-year].is-active .lq-vimeo-controls {
  pointer-events: auto;
}

.oeuvre-visuel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============================================
   ŒUVRE VISUEL — PARALLÈLES
   ============================================ */

.oeuvre-visuel-parallele {
  background: #000;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.oeuvre-visuel-parallele img,
.oeuvre-visuel-parallele video,
.oeuvre-visuel-parallele iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carrousel pour les séries photo */
.oeuvre-visuel .carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oeuvre-visuel .carousel img {
  position: absolute;
  max-width: calc(100% - 60px);
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.oeuvre-visuel .carousel img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-photo-credit {
  position: absolute;
  right: 1vw;
  bottom: 1vh;
  z-index: 22;
  max-width: 45%;
  padding: 0.18vh 0.35vw;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.78);
  font-size: 0.62vw;
  font-weight: 300;
  line-height: 1.25;
  text-align: right;
  pointer-events: none;
}

.carousel-photo-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 21;
  padding: 0.45vh 1vw;
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.86);
  font-size: 0.72vw;
  font-weight: 300;
  line-height: 1.35;
}

.carousel-photo-credit[hidden],
.carousel-photo-caption[hidden] {
  display: none;
}

.carousel-photo-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.carousel-photo-caption a:hover {
  color: #ff0000;
}

.oeuvre-visuel .carousel .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.oeuvre-visuel .carousel .carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.oeuvre-visuel .carousel img.carousel-slide {
  width: auto;
  height: auto;
  max-width: calc(100% - 60px);
  max-height: 100%;
  inset: auto;
}

.oeuvre-visuel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 2.60vw;
  cursor: pointer;
  padding: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 20;
}

.oeuvre-visuel .carousel-btn:hover { opacity: 1; }
.oeuvre-visuel .carousel-btn.prev { left: 1.25vw; }
.oeuvre-visuel .carousel-btn.next { right: 1.25vw; }


/* Les carrousels parallèles gardent le même comportement de fondu,
   tout en conservant leurs règles de cadrage propres plus bas dans le CSS. */
.page-oeuvre-parallele .carousel:not(.carousel-semballer) img,
.page[id^="page-oeuvre-par-"] .carousel:not(.carousel-semballer) img {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: auto;
  height: auto;
  max-width: calc(100% - 60px);
  max-height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.page-oeuvre-parallele .carousel:not(.carousel-semballer) img.is-active,
.page[id^="page-oeuvre-par-"] .carousel:not(.carousel-semballer) img.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Quadrant haut-droite : CARTEL ---- */
.oeuvre-cartel {
  background: #000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3vh 3vw;
  position: relative; /* ancre les boutons en bas à droite */
}

.cartel-inner {
    position: absolute;
    right: 5vw;
    top: 9vh;
    background: #cdc9c0;
    color: #000;
    padding: 2.5vh 1.35vw;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3vh;
    box-shadow: 4px 4px 0px #a09890, 8px 8px 0px #8a8078, 12px 12px 0px rgba(0, 0, 0, 0.2);
    min-width: 53%;
}

.cartel-subtitle {
  font-size: 1.05vw;
  font-weight: 400;
  margin-top: -1.2vh;
  margin-bottom: -1vh;
  text-align: right;
}

/* Navigation Détachement — bloc interview/années + flèches */
.detachement-nav-cluster {
     position: absolute;
    left: 65%;
    top: 68.02%;
    transform: translateY(-100%);
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 4.76vw);
    grid-template-rows: repeat(3, 1.5vw);
    gap: 0;
    width: 12.8vw;
    height: 4.5vw;
    background: #000;
}

.detachement-mobile-year-nav {
  display: none;
}

.cartel-nav-btns {
  display: flex;
  gap: 0;
}

.oeuvre-side-nav {
  position: absolute;
  right: 2.97vw;
  top: 68.1%;
  transform: translateY(-100%);
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(2, 6.5vw);
  grid-template-rows: 3.029vw;
  gap: 0;
}

.btn-interview {
  position: absolute;
  right: 3vw;
  top: 68.1%;
  transform: translateY(calc(-206% - 1.47vw));
  width: 13vw;
  height: 1.49vw;
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid rgb(104, 103, 103);
  color: #fff;
  font-family: "Supreme", sans-serif;
  font-size: 0.72vw;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.35s ease;
}

.btn-interview:hover,
.btn-interview.active-interview {
  background: #fff;
  color: #000;
}


.cartel-nav-btns button {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgb(104, 103, 103);  
  color: #fff;
  width: 6.49vw;
  height: 3.01vw;
  font-size: 3.2vw;
  padding-bottom: 0.9vh;
  font-weight: lighter;  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Supreme", sans-serif;
}

.cartel-nav-btns button:hover {
  background: #fff;
  color: #000;
  border-top: 1px solid rgb(73, 73, 73);
  border-right: 1px solid rgb(73, 73, 73);
  border-left: 1px solid rgb(73, 73, 73);
}

.cartel-inner .cartel-title {
  font-size: 1.6vw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: #000;
}

.cartel-inner .cartel-data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3vh;
  font-size: 0.85vw;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

.cartel-lien-original {
  margin-top: 1vh;
  font-size: 0.8vw;
  color: #ff0000;
  font-weight: 400;
  text-transform: lowercase;
}

.cartel-lien-original:hover {
  text-decoration: underline;
}

/* Années Détachement — bloc technique à l'intersection */

.detachement-nav-cluster .annee-btn {
  font-size: 0.72vw;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgb(104, 103, 103);
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.28s, color 0.28s, border-color 0.28s;
  cursor: pointer;
  font-family: "Supreme", sans-serif;
}

.detachement-nav-cluster .annee-btn:hover,
.detachement-nav-cluster .annee-btn.active-year {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.oeuvre-side-nav .btn-interview {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  width: 100%;
  height: 1.5vw;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgb(104, 103, 103);
  border-bottom: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.72vw;
  font-weight: 500;
  font-family: "Supreme", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.oeuvre-side-nav .btn-interview:hover,
.oeuvre-side-nav .btn-interview.active-interview {
  background: #fff;
  color: #000;
}

/* ---- Quadrant bas-gauche : DESCRIPTION ---- */
.oeuvre-description {
  background: #000;
  display: flex;
  align-items: flex-start;
  padding: 0vh 0vw 0vh 3vw;
overflow-y: auto;
scroll-behavior: smooth;
}

@media (min-width: 1025px) {
  .oeuvre-description.lq-description-has-more {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - 3.30vh),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - 3.30vh),
      transparent 100%
    );
  }
}

.oeuvre-description-inner {
  padding: 4.5vh 4.5vw 5.5vh 4.5vw;
  width: 100%;

}

.oeuvre-description-inner p {
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 0vh;
  color: rgba(255,255,255,0.85);
  text-align: justify;
}

.oeuvre-description-inner .auteur {
    position: absolute;
    bottom: 2vh;
    right: 39.5vw;
    font-size: 0.85vw;
    font-weight: 400;
    text-align: right;
    background-color: black;
    padding: 4px 10px 4px 11px;
    color: #fff;
    outline: 1px solid #ffffff69;
}

/* ---- Quadrant bas-droite : NAVIGATION ---- */
.oeuvre-nav {
  background: #000;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: #000;
  padding-right: 3vw;
}

.nav-preview img,
.nav-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-preview.visible {
  opacity: 1;
}

.nav-preview .mini-cartel {
  position: absolute;
    bottom: 2.5vh;
    right: 4.5vw;
  text-align: right;
  font-size: 0.8vw;
  font-weight: 300;
  line-height: 1.35;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35vh;
  color: #000;
}

.nav-preview .mini-cartel span {
  background: rgba(255,255,255,0.92);
  color: #000;
  padding: 0.1vh 0.35vw;
}

.mini-cartel .mini-title {
  font-style: italic;
  font-weight: 500;
  font-size: 1vw;
  margin-bottom: 0.75vh;
}

/* ============================================
   PAGE MÉDIAS — grille 3 zones
   ============================================ */

.page-medias {
  background: #000;
  height: calc(100vh - 5.5vh - 3.4vh);
  overflow: hidden;
}

.medias-layout {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 65% 35%;
  grid-template-rows: 68% 32%;
  gap: 1px;
  background: rgba(104, 103, 103, 0);

}

.medias-player-panel,
.medias-description-panel,
.medias-list-panel {
  background: #000;
  overflow: hidden;
  position: relative;
}

.medias-player-panel {
  grid-column: 1;
  grid-row: 1;
  padding: 5.5vh 0 0 3vw;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.medias-description-panel {
  grid-column: 1;
  grid-row: 2;
  padding: 0 0 0 3vw;
}

.medias-list-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 5.5vh 3vw 0vh 0vw;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.medias-list-panel::-webkit-scrollbar {
  display: none;
}

.media-active-visual {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.media-active-visual.is-changing,
.media-active-description.is-changing {
  opacity: 0;
}

.media-active-visual .media-embed,
.media-active-visual .media-thumb-wrapper,
.media-active-visual .media-embed > div {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  position: relative;
  background: #000;
}

.media-active-visual iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media-active-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.media-active-description {
  width: 100%;
  height: 100%;
  padding: 4.5vh 4.5vw 5.5vh 4.5vw;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.35s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.media-active-description::-webkit-scrollbar {
  display: none;
}

.media-active-description .media-info {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45vh;
}

.media-active-description .media-date {
  font-size: 0.85vw;
  font-weight: 400;
  opacity: 0.65;
}

.media-active-description .media-source {
  font-size: 1vw;
  font-weight: 600;
}

.media-active-description .media-duree {
  font-size: 0.85vw;
  font-weight: 300;
  opacity: 0.7;
}

.media-active-description .media-titre {
  font-size: 1.15vw;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  margin-top: 1vh;
  max-width: 55vw;
}

.media-active-description .media-lien {
  margin-top: 1.4vh;
  font-size: 0.9vw;
  color: #ff0000;
  font-weight: 400;
  align-self: flex-start;
  text-align: left;
}

.media-active-description .media-lien:hover {
  text-decoration: underline;
}

.media-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.media-list-item {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgb(104, 103, 103);
  background: #000;
  color: #fff;
  font-family: "Supreme", sans-serif;
  text-align: left;
  cursor: pointer;
  padding: 1.25vh 0vw 1vh 2vw;
  display: flex;
  flex-direction: column;
  gap: 0.15vh;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.media-list-item:first-child {
  border-top: 1px solid rgb(104, 103, 103);
}

.media-list-item:hover {
  background: #fff;
  color: #000;
  padding-left: 1.2vw;
}

.media-list-item.is-active {
  background: #fffcd8;
  color: #000;
  padding-left: 1.2vw;
}

.media-list-date {
  font-size: 0.72vw;
  font-weight: 300;
  opacity: 0.65;
}

.media-list-title {
  font-size: 1vw;
  font-weight: 400;
  line-height: 1.15;
  font-style: italic;
}

.media-list-meta {
  font-size: 0.75vw;
  font-weight: 300;
  opacity: 0.75;
}

/* Anciens composants média gardés compatibles si réutilisés ailleurs */
.media-card,
.media-embed,
.media-thumb-wrapper,
.media-info {
  min-width: 0;
}


/* ============================================
   PAGE ŒUVRES PARALLÈLES
   ============================================ */

.page-paralleles {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px - 36px);
  background: #000;
  overflow: hidden;
}

.page-paralleles .preview-zone {
  position: absolute;
  top: 7vh;
  right: 9.6vh;
  width: 68vw;
  height: 60vh;
  z-index: 100;
}

.page-paralleles .preview-zone .preview-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 47vw;
  max-height: 70vh;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  border-radius:20px;
  transition: opacity 0.75s;
  outline: 1px rgba(255, 255, 255, 0.34) solid;
  box-shadow: 20px 17px 0px rgba(229, 229, 229, 0.23);
}

.page-paralleles .preview-zone .preview-media.active {
  opacity: 1;
  pointer-events: auto;
}

.page-paralleles .preview-zone video,
.page-paralleles .preview-zone img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.preview-media-placeholder {
  min-height: 28vh;
  padding: 4vh 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 4vw, 72px);
  line-height: 0.95;
  text-align: center;
}

.page-paralleles .paralleles-list {
  position: fixed;
  left: 0;
  bottom: 3.35vh;
  width: 97vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 0vh 3vw;
  z-index: 2;
}

.page-paralleles .paralleles-list a {
  display: block;
  text-align: left;
  text-transform: uppercase;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.75vw;
  font-weight: 100;
  font-style: normal;
  line-height: 0.73em;
  letter-spacing: 0.02em;
  transition: color 0.15s, font-size 0.15s, font-weight 0.12s;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}

.page-paralleles .paralleles-list a:hover {
  color: #ff0000;
  font-weight: 300;
  line-height: 0.7em;
  letter-spacing : 0;
      padding: 0.75vh 0.3vw 0.75vh 0vw;
}

.page-paralleles .paralleles-list a:hover::before {
  content: "> ";
}

/* Typewriter inversé — page œuvres parallèles */
/* Il y a maintenant 17 titres : chaque ligne reçoit une animation, sinon elle reste à width:0. */
/* L'apparition commence par le dernier titre en bas, puis remonte progressivement. */
.page-paralleles .paralleles-list a:nth-child(17) { animation: lq-type 3.4s steps(72, end) 0.55s both; }
.page-paralleles .paralleles-list a:nth-child(16) { animation: lq-type 3.1s steps(58, end) 0.85s both; }
.page-paralleles .paralleles-list a:nth-child(15) { animation: lq-type 2.8s steps(42, end) 1.15s both; }
.page-paralleles .paralleles-list a:nth-child(14) { animation: lq-type 2.4s steps(32, end) 1.40s both; }
.page-paralleles .paralleles-list a:nth-child(13) { animation: lq-type 1.9s steps(21, end) 1.65s both; }
.page-paralleles .paralleles-list a:nth-child(12) { animation: lq-type 1.6s steps(19, end) 1.90s both; }
.page-paralleles .paralleles-list a:nth-child(11) { animation: lq-type 1.5s steps(19, end) 2.15s both; }
.page-paralleles .paralleles-list a:nth-child(10) { animation: lq-type 1.35s steps(18, end) 2.40s both; }
.page-paralleles .paralleles-list a:nth-child(9)  { animation: lq-type 1.2s steps(17, end) 2.65s both; }
.page-paralleles .paralleles-list a:nth-child(8)  { animation: lq-type 1.0s steps(16, end) 2.90s both; }
.page-paralleles .paralleles-list a:nth-child(7)  { animation: lq-type 1.0s steps(15, end) 3.10s both; }
.page-paralleles .paralleles-list a:nth-child(6)  { animation: lq-type 0.8s steps(10, end) 3.35s both; }
.page-paralleles .paralleles-list a:nth-child(5)  { animation: lq-type 0.8s steps(8, end) 3.55s both; }
.page-paralleles .paralleles-list a:nth-child(4)  { animation: lq-type 0.75s steps(9, end) 3.75s both; }
.page-paralleles .paralleles-list a:nth-child(3)  { animation: lq-type 0.70s steps(9, end) 3.90s both; }
.page-paralleles .paralleles-list a:nth-child(2)  { animation: lq-type 0.65s steps(7, end) 4.05s both; }
.page-paralleles .paralleles-list a:nth-child(1)  { animation: lq-type 0.55s steps(5, end) 4.20s both; }

.page-paralleles.anim-reset .paralleles-list a {
  animation: none;
  width: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  nav#main-nav .nav-links a {
    padding: 0 10px;
    font-size: 11px;
  }

  .page-oeuvre {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
    overflow-y: auto;
  }

  .oeuvre-visuel {
    height: 50vw;
    min-height: 200px;
  }

  .oeuvre-cartel {
    min-height: 180px;
  }

  .oeuvre-description,
  .oeuvre-nav {
    min-height: 160px;
  }

  .page-oeuvres .oeuvres-list {
    width: 100%;
    padding: 24px;
  }

  .page-oeuvres .preview-zone {
    display: none;
  }

  .page-paralleles .paralleles-list {
    width: 100%;
  }

  .page-paralleles .preview-zone {
    display: none;
  }
}

@media (max-width: 480px) {
  nav#main-nav .nav-name {
    display: none;
  }

  .cv-content {
    padding: 80px 24px 40px !important;
  }
}


/* ============================================
   BOUTONS À L'INTERSECTION DES 4 QUADRANTS
   Positionnés à 60% hauteur × 58% largeur
   = exactement sur les lignes séparatrices
   ============================================ */

.oeuvre-grid {
  position: relative; /* contexte pour les éléments absolus */
}

.annee-btn {
  font-size: 0.7vw;
  font-weight: 400;
  font-family: "Supreme", sans-serif;
  color: #ffffff;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(125, 125, 125);
  padding: 0.45vh 0.8vw 0.3vh 0.8vw;
  cursor: pointer;
  transition: background 0.35s, color 0.35s;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

.annee-btn:hover {
  background: #ffffff;
  color: hsl(0, 0%, 0%);
  border-color: #000000;
}

.annee-btn.active-year {
  background: #323232;
  color: #fff;
  border-color: #ffffff;
}


/* ============================================
   Protection basique : pas de sélection / clic droit
   ============================================ */

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Curseur personnalisé — uniquement pour les souris et trackpads */
@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body * {
    cursor: none !important;
  }

  .lq-custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border: 0 solid transparent;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
      opacity 0.12s ease,
      background-color 0.12s ease,
      border-color 0.12s ease,
      border-width 0.12s ease;
  }

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

  .lq-custom-cursor.is-interactive {
    width: 17px;
    height: 17px;
    border-width: 2px;
    border-color: #000;
    background: #fff800;
  }

  .lq-custom-cursor.is-hidden {
    opacity: 0;
  }
}

img,
video,
iframe {
  -webkit-user-drag: none;
  user-drag: none;
}

.oeuvre-visuel img.oeuvre-image-full-height {
  height: 100%;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

.page-oeuvre-parallele .oeuvre-cartel,
.page[id^="page-oeuvre-par-"] .oeuvre-cartel {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
  padding: 3vh 0 3vh 5vw;
}

.page-oeuvre-parallele .cartel-inner,
.page[id^="page-oeuvre-par-"] .cartel-inner {
  left: 5.2vw;
  right: auto;
  text-align: left;
  align-items: flex-start;
  min-width: 18.5vw;
}

.page-oeuvre-parallele .oeuvre-side-nav,
.page[id^="page-oeuvre-par-"] .oeuvre-side-nav {
  left: 3vw;
  right: auto;
}

body.is-parallele-section #ligne-verticale-milieu {
  left: 35%;
  right: auto;
}

@media (min-width: 1025px) {
  body.is-parallele-section #ligne-verticale-milieu {
    top: 5.55vh !important;
    bottom: auto !important;
    height: 91.1vh !important;
  }
}

body.is-oeuvre-section:not(.is-parallele-section) #ligne-verticale-milieu {
  left: 65%;
  right: auto;
}

.oeuvre-cartel-parallele {
  position: relative;
  overflow: visible;
}

.oeuvre-cartel-parallele .cartel-nav-btns-parallele {
  position: absolute;
  left: 3vw;
  bottom: 0;
  display: grid !important;
  grid-template-columns: repeat(2, 6.5vw);
  grid-template-rows: 3.029vw;
  gap: 0;
  z-index: 100;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.oeuvre-cartel-parallele .cartel-nav-btns-parallele button {
  width: 6.5vw;
  height: 3.029vw;
  background: #000;
  border: 1px solid rgb(104, 103, 103);
  color: #fff;
  font-family: "Supreme", sans-serif;
  font-size: 1.75vw;
  font-weight: 200;
  cursor: pointer;
}

.oeuvre-cartel-parallele .cartel-nav-btns-parallele button:hover {
  background: #fff;
  color: #000;
}
/* ============================================
   PATCH FINAL — STRUCTURE MIROIR PAGES PARALLÈLES
   Nettoyage de priorité : évite les conflits avec les boutons des œuvres personnelles.
   ============================================ */

.page-oeuvre-parallele .oeuvre-grid,
.page[id^="page-oeuvre-par-"] .oeuvre-grid {
  grid-template-columns: 35% 65%;
  grid-template-rows: 68% 32%;
}

.page-oeuvre-parallele .oeuvre-cartel-parallele,
.page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
  grid-column: 1;
  grid-row: 1;
  background: #000;
  position: relative;
  overflow: visible;
  padding: 5.5vh 0 0 3vw;
}

.page-oeuvre-parallele .oeuvre-visuel,
.page[id^="page-oeuvre-par-"] .oeuvre-visuel {
  grid-column: 2;
  grid-row: 1;
  padding: 5.5vh 3vw 0 0;
}

.page-oeuvre-parallele .oeuvre-description,
.page[id^="page-oeuvre-par-"] .oeuvre-description {
  grid-column: 2;
  grid-row: 2;
  padding: 0 3vw 0 0;
}

.page-oeuvre-parallele .oeuvre-nav,
.page[id^="page-oeuvre-par-"] .oeuvre-nav {
  grid-column: 1;
  grid-row: 2;
}

.page-oeuvre-parallele .cartel-inner-parallele,
.page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
  position: absolute;
  left: 5vw;
  top: 9vh;
  background: #cdc9c0;
  color: #000;
  padding: 2.5vh 2vw;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3vh;
  box-shadow: 4px 4px 0px #a09890, 8px 8px 0px #8a8078, 12px 12px 0px rgba(0, 0, 0, 0.2);
  min-width: 48%;
  max-width: 72%;
}

.page-oeuvre-parallele .cartel-title-parallele,
.page[id^="page-oeuvre-par-"] .cartel-title-parallele {
  font-size: 1.6vw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: #000;
}

.page-oeuvre-parallele .cartel-data-parallele,
.page[id^="page-oeuvre-par-"] .cartel-data-parallele {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.3vh;
  font-size: 0.85vw;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

.page-oeuvre-parallele .cartel-nav-btns-parallele,
.page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele {
  position: absolute;
  left: 3vw;
  bottom: -0.1vh;
  right: auto;
  top: auto;
  transform: none;
  display: grid !important;
  grid-template-columns: repeat(2, 6.5vw);
  grid-template-rows: 3.029vw;
  gap: 0;
  z-index: 100;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-oeuvre-parallele .cartel-nav-btns-parallele button,
.page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgb(104, 103, 103);
  color: #fff;
  width: 6.5vw;
  height: 3.02vw;
  font-size: 3.2vw;
  padding: 0 0 0.9vh 0;
  font-weight: lighter;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Supreme", sans-serif;
  line-height: 1;
}

.page-oeuvre-parallele .cartel-nav-btns-parallele button:hover,
.page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button:hover {
  background: #fff;
  color: #000;
  border-top: 1px solid rgb(73, 73, 73);
  border-right: 1px solid rgb(73, 73, 73);
  border-left: 1px solid rgb(73, 73, 73);
}

.page-oeuvre-parallele .nav-preview-parallele,
.page[id^="page-oeuvre-par-"] .nav-preview-parallele {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: #000;
  padding-left: 3vw;
}

.page-oeuvre-parallele .nav-preview-parallele.visible,
.page[id^="page-oeuvre-par-"] .nav-preview-parallele.visible {
  opacity: 1;
}

.page-oeuvre-parallele .nav-preview-parallele img,
.page-oeuvre-parallele .nav-preview-parallele video,
.page[id^="page-oeuvre-par-"] .nav-preview-parallele img,
.page[id^="page-oeuvre-par-"] .nav-preview-parallele video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-oeuvre-parallele .mini-cartel-parallele,
.page[id^="page-oeuvre-par-"] .mini-cartel-parallele {
  position: absolute;
  bottom: 2.5vh;
  left: 4.5vw;
  text-align: left;
  font-size: 0.8vw;
  font-weight: 300;
  line-height: 1.35;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 0.35vh;
  color: #000;
}

.page-oeuvre-parallele .mini-cartel-parallele span,
.page[id^="page-oeuvre-par-"] .mini-cartel-parallele span {
  background: rgba(255,255,255,0.92);
  color: #000;
  padding: 0.1vh 0.35vw;
}

.page-oeuvre-parallele .mini-title-parallele,
.page[id^="page-oeuvre-par-"] .mini-title-parallele {
  font-style: italic;
  font-weight: 500;
  font-size: 1vw;
  margin-bottom: 0.75vh;
}

/* ============================================
   PATCH LIGNES CENTRALES — pilotage JS exact
   Les lignes restent visibles/invisibles via opacity,
   mais leur position est calculée depuis les vraies pistes de .oeuvre-grid.
   ============================================ */
#ligne-verticale-milieu,
#ligne-horizontale-milieu {
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#ligne-verticale-milieu {
  left: 50vw;
  right: auto;
}

#ligne-horizontale-milieu {
  top: 50vh;
  bottom: auto;
}

.carousel-semballer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.carousel-semballer img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.carousel-semballer img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.oeuvre-description-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.oeuvre-description-link:hover {
  color: #ff0000;
}

/* BOUTONS CARROUSEL — commun à toutes les pages parallèles */

.page-oeuvre-parallele .carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3vw;
  height: 5vh;
  border: 1px solid rgb(104, 103, 103);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: "Supreme", sans-serif;
  font-size: 2.2vw;
  font-weight: 100;
  line-height: 1;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0.35vh 0;
  opacity: 1;
  visibility: visible;
}

.page-oeuvre-parallele .carousel .carousel-btn:hover {
  background: #fff;
  color: #000;
}

.page-oeuvre-parallele .carousel .carousel-btn.prev {
  left: 1vw;
  right: auto;
}

.page-oeuvre-parallele .carousel .carousel-btn.next {
  right: 1vw;
  left: auto;
}

/* S'emballer et Recoller utilisent désormais exactement les mêmes boutons que les autres carrousels parallèles */
.page-oeuvre-parallele .carousel-semballer .carousel-btn,
.page-oeuvre-parallele .carousel-recoller .carousel-btn,
.page-oeuvre-parallele .carousel-architecture-intime .carousel-btn {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3vw;
  height: 5vh;
  border: 1px solid rgb(104, 103, 103);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: "Supreme", sans-serif;
  font-size: 3vw;
  font-weight: 100;
  line-height: 1;
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.9vh;
  box-sizing: border-box;
}

.page-oeuvre-parallele .carousel-semballer .carousel-btn:hover,
.page-oeuvre-parallele .carousel-recoller .carousel-btn:hover,
.page-oeuvre-parallele .carousel-architecture-intime .carousel-btn:hover {
  background: #fff;
  color: #000;
}

.page-oeuvre-parallele .carousel-semballer .carousel-btn.prev,
.page-oeuvre-parallele .carousel-recoller .carousel-btn.prev,
.page-oeuvre-parallele .carousel-architecture-intime .carousel-btn.prev {
  left: -0.1vw;
}

.page-oeuvre-parallele .carousel-semballer .carousel-btn.next,
.page-oeuvre-parallele .carousel-recoller .carousel-btn.next,
.page-oeuvre-parallele .carousel-architecture-intime .carousel-btn.next {
  right: -0.1vw;
}


/* ============================================
   LIGHTBOX IMAGES
   Les boutons sont volontairement stylés ici :
   modifier ces classes pour changer leur apparence.
   ============================================ */

body.lightbox-open {
  overflow: hidden;
}

.lq-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.lq-lightbox.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lq-lightbox-frame {
  position: relative;
  width: min(88vw, 150vh);
  height: min(82vh, 88vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lq-lightbox-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.lq-lightbox-img.is-active {
  opacity: 1;
}

.lq-lightbox-photo-credit {
  position: absolute;
  right: 0.75vw;
  bottom: 0.75vh;
  z-index: 5;
  max-width: 45%;
  padding: 0.22vh 0.4vw;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.78);
  font-size: 0.68vw;
  font-weight: 300;
  line-height: 1.25;
  text-align: right;
  pointer-events: none;
}

.lq-lightbox-caption {
  position: fixed;
  left: 6vw;
  right: 6vw;
  bottom: 3vh;
  z-index: 5;
  padding: 0.45vh 0.75vw;
  color: rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.64);
  font-size: 0.82vw;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
}

.lq-lightbox-photo-credit[hidden],
.lq-lightbox-caption[hidden] {
  display: none;
}

.lq-lightbox-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lq-lightbox-caption a:hover {
  color: #ff0000;
}

.lq-lightbox.has-liquid-loupe .lq-lightbox-frame {
  cursor: none;
}

.lq-liquid-loupe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0.6vw 0.6vw 1.25vw rgba(255, 255, 255, 0.24),
    inset -0.7vw -0.75vw 1.35vw rgba(0, 0, 0, 0.28),
    0 0.9vw 2.4vw rgba(0, 0, 0, 0.34);
  filter: drop-shadow(0 0 0.7vw rgba(255, 255, 255, 0.18));
  backdrop-filter: blur(3px) saturate(1.28);
  -webkit-backdrop-fitter: blur(3px) saturate(1.28);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.lq-liquid-loupe::before,
.lq-liquid-loupe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.lq-liquid-loupe::before {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 13%, transparent 30%),
    radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.20), transparent 38%);
  mix-blend-mode: screen;
}

.lq-liquid-loupe::after {
  inset: 0.18vw;
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0.35vw -0.25vw 0.8vw rgba(255, 255, 255, 0.18),
    inset -0.28vw 0.34vw 0.9vw rgba(0, 0, 0, 0.18);
}

.lq-lightbox.has-liquid-loupe .lq-liquid-loupe.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.lq-lightbox-btn,
.lq-lightbox-close {
  border: 1px solid rgb(104, 103, 103);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: "Supreme", sans-serif;
  font-weight: 100;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.lq-lightbox-btn {
  position: absolute;
  top: 50%;
  width: 3vw;
  min-width: 42px;
  height: 5.5vh;
  min-height: 56px;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0 1.05vh 0;
  font-size: clamp(2.4rem, 4vw, 6.5rem);
  line-height: 1;
}

.lq-lightbox.has-multiple .lq-lightbox-btn {
  display: flex;
}

.lq-lightbox-prev {
  left: 3vw;
}

.lq-lightbox-next {
  right: 3vw;
}

.lq-lightbox-close {
  position: absolute;
  top: 7vh;
  right: 3vw;
  z-index: 3;
  width: 2.8vw;
  min-width: 36px;
  height: 2.8vw;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 0;
  font-size: clamp(1.5rem, 2.2vw, 4rem);
  line-height: 1;
}

.lq-lightbox-btn:hover,
.lq-lightbox-close:hover {
  background: #fff;
  color: #000;
}
/* ============================================
   OEUVRE DESCRIPTION — scroll invisible
   ============================================ */

.oeuvre-description-inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.oeuvre-description-inner::-webkit-scrollbar {
  display: none;
}

/* LQ MEDIA PERSISTENT FIX FINAL */

/* ============================================
   LECTEUR GLOBAL — contrôle du flux Vimeo actif
   ============================================ */

#audio-player {
    position: fixed;
    bottom: 0;
    left: 3.1vw;
    right: 3vw;
    width: auto;
    height: 3.4vh;
    background: #000;
    display: grid;
    grid-template-columns: 1.8vw minmax(0, 1fr);
    align-items: center;
    gap: 1vw;
    padding: 0 0vw 0 2vw;
    z-index: 100000;
    border-right: 1px rgb(104, 103, 103) solid;
    border-top: 1px rgb(104, 103, 103) solid;
    box-sizing: border-box;
}

#audio-player button#play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1vw;
  width: 1vw;
  min-width: 14px;
  min-height: 14px;
}

#audio-player button#play-btn svg {
  width: 1vw;
  height: 1vw;
  min-width: 14px;
  min-height: 14px;
  fill: #fff;
}

#audio-player .audio-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(20vw, 24vw) minmax(24vw, 1fr);
  align-items: center;
  gap: 1.2vw;
  width: 100%;
}

#audio-player .audio-label {
  font-size: 0.78vw;
  font-weight: 300;
  letter-spacing: 0.02em;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#audio-player .audio-progress-row {
  display: grid;
  grid-template-columns: 3.2vw minmax(12vw, 1fr) 3.2vw;
  align-items: center;
  gap: 0.65vw;
}

#audio-player #audio-current-time,
#audio-player #audio-duration {
  font-size: 0.65vw;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  text-align: center;
}

#audio-player #audio-progress {
  width: 100%;
  accent-color: #fff;
  cursor: pointer;
}

#audio-player audio {
  display: none;
}

/* ============================================
   PAGE MÉDIAS — panneaux persistants type Détachement
   ============================================ */

.media-active-visual,
.media-active-description {
  position: relative;
  overflow: hidden;
}

.media-panel-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.media-visual-panel,
.media-description-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.media-visual-panel.is-active,
.media-description-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.media-visual-panel .media-embed,
.media-visual-panel .media-embed > div,
.media-visual-panel iframe {
  width: 100%;
  height: 100%;
}

.media-visual-panel iframe {
  display: block;
}

.media-description-panel {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.media-description-panel::-webkit-scrollbar {
  display: none;
}

/* ============================================
   LECTEUR AUDIO — titre cliquable
   ============================================ */

#audio-current-title {
  cursor: pointer;
}

#audio-current-title:empty {
  cursor: default;
}

#audio-current-title:hover:not(:empty) {
  text-decoration: underline;
}


.media-nav-btns {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, 6.5vw);
  height: 5vh;
  z-index: 20;
}

.media-nav-btns button {
  background: #000;
  border: 1px solid rgb(104, 103, 103);
  color: #fff;
  width: 6.5vw;
  height: 5vh;
  font-size: 3.2vw;
  font-weight: lighter;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Supreme", sans-serif;
  padding-bottom: 0.9vh;
}

.media-nav-btns button:hover {
  background: #fff;
  color: #000;
}
/* Sous-titre cartel — Architecture Intime */
.cartel-subtitle-parallele {
  font-family: var(--font-title);
  font-size: clamp(0.95rem, 1.45vw, 1.7rem);
  line-height: 1.05;
  margin-top: 0.2em;
  display: block;
}

.cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
.page-oeuvre-parallele .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
.page[id^="page-oeuvre-par-"] .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele {
  margin-top: calc(-3vh + 0.2em);
}

.oeuvres-info-tooltip {
  font-family: "Sligoil Micro", sans-serif;
}

.media-pdf-wrapper.media-flux-news-pdf {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.media-pdf-scroll-hint {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 7px 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(11px, 0.8vw, 14px);
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.9;
}

.media-flux-open {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 4;
  padding: 8px 11px 7px;
  border: 1px solid rgba(0, 0, 0, 0.72);
  background: #fff;
  color: #000;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.media-flux-reader {
  position: fixed;
  inset: 0;
  z-index: 180000;
  display: none;
  background: #fff;
  color: #000;
}

.media-flux-reader.is-open {
  display: block;
}

.media-flux-reader-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.media-flux-reader-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
}

.media-flux-reader-close {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 62px;
  height: 62px;
  border: 0;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #000;
  color: #fff;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.media-flux-reader-title {
  position: fixed;
  top: 0;
  left: 0;
  right: 62px;
  z-index: 2;
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #000;
  color: #000;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.media-pdf-wrapper::before,
.media-pdf-wrapper::after {
  content: "";
  position: absolute;
  right: 5px;
  z-index: 3;
  width: 4px;
  border-radius: 999px;
  pointer-events: none;
}

.media-pdf-wrapper::before {
  top: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.media-pdf-wrapper::after {
  top: 16px;
  height: 20%;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.62);
}
/* ============================================
   CV : Titres d'expositions
   ============================================ */
.cv-section .cv-expo-title,
.cv-section .cv-expo-title em {
  display: inline;
  font-style: italic;
  font-weight: bold;
}

.cv-section .cv-entry a.cv-text:hover {
  color: red;
  text-decoration: none;
}

/* ============================================
   CV : typographie et taille visionneuse
   ============================================ */
#page-cv .cv-content,
#page-cv .cv-content *:not(.cv-year) {
  font-family: "Sligoil Micro", "Supreme", sans-serif;
}

#page-cv .cv-year {
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#page-cv .cv-gallery-window {
  top: 8.75vh;
  left: 5.1vw;
  width: 40vw;
  height: 48vh;
}

/* ============================================
   LQ — fond d'accueil interactif + lecteur discret
   ============================================ */
body:not(.show-bg-video) #bg-video-global {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.show-bg-video #bg-video-global {
  opacity: 1 !important;
}

.page-identite .bg-video-wrapper,
.page-actualites .bg-video-wrapper,
.page-cv .bg-video-wrapper,
.page-identite .bg-overlay,
.page-actualites .bg-overlay,
.page-cv .bg-overlay {
  display: none !important;
}

#audio-player {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 5s ease, visibility 0s linear 5s;
}

#audio-player.lq-audio-player-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 5s ease, visibility 0s linear 0s;
}

.detachement-home-hotspots {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.detachement-hotspot {
  --detachement-hotspot-color: rgba(255, 0, 0, 0.75);
  position: absolute;
  width: 9.3vw;
  height: 9.6vh; /* fallback, recalculé en pixels par JS selon l'iframe */
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: yellow;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5vw;
  -webkit-text-stroke: 0 black;
  text-shadow: 2px 2px 0 black;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2s ease;
}

.detachement-hotspot.is-sequence-visible {
  opacity: 1;
  transition-duration: 2s;
}

.detachement-hotspot:hover,
.detachement-hotspot:focus-visible {
  opacity: 1;
  transition-duration: 0.35s;
}
/* Positions des hotspots calculées par JS à partir du rectangle réel de #bg-video-global iframe. */

.home-mobile-vimeo-stack {
  display: none;
}


/* Refermer le micro-menu œuvres après un clic de navigation */
nav#main-nav .nav-dropdown-oeuvres.is-force-closed > .nav-oeuvres-main {
  background: #000 !important;
  color: #fff !important;
}

nav#main-nav .nav-dropdown-oeuvres.active.is-force-closed > .nav-oeuvres-main {
  background: #fff !important;
  color: #000 !important;
}

nav#main-nav .nav-dropdown-oeuvres.is-force-closed .nav-oeuvres-submenu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-0.4vh) !important;
}

/* ============================================
   COMPATIBILITE NAVIGATEURS PLUS ANCIENS
   ============================================ */

@supports not (width: max(1px, 2px)) {
  #bg-video-global iframe {
    width: 171.78vh;
    height: 100vh;
  }

  .page-home .bg-video-wrapper iframe,
  .page-actualites .bg-video-wrapper iframe,
  .page-cv .bg-video-wrapper iframe,
  .page-identite .bg-video-wrapper iframe {
    width: 177.78vh;
    height: 100vh;
  }
}

@media (min-aspect-ratio: 16/9) {
  @supports not (width: max(1px, 2px)) {
    #bg-video-global iframe,
    .page-home .bg-video-wrapper iframe,
    .page-actualites .bg-video-wrapper iframe,
    .page-cv .bg-video-wrapper iframe,
    .page-identite .bg-video-wrapper iframe {
      width: 100vw;
      height: 56.25vw;
    }
  }
}

nav#main-nav .nav-dropdown-oeuvres.is-touch-open > .nav-oeuvres-main {
  background: #fff;
  color: #000;
}

nav#main-nav .nav-dropdown-oeuvres.is-touch-open .nav-oeuvres-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.oeuvres-info-btn:focus .oeuvres-info-tooltip,
.oeuvres-info-btn-parallele:focus .oeuvres-info-tooltip-parallele {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   MOBILE ET TABLETTE
   ============================================ */

@media (max-width: 768px) {
  html,
  body {
    height: 100%;
    font-size: 14px;
  }

  main#content {
    min-height: 100%;
    padding: 0;
  }

  .page {
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav#main-nav {
    left: 3vw;
    width: 94vw;
    height: 46px;
    align-items: stretch;
  }

  nav#main-nav .nav-name {
    display: none;
  }

  nav#main-nav .nav-links {
    width: 100%;
    justify-content: flex-end;
  }

  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    height: 46px;
  }

  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    padding: 0 10px;
    font-size: 10px;
  }

  nav#main-nav .nav-links a.nav-home {
    font-size: 14px;
  }

  nav#main-nav .nav-oeuvres-submenu {
    top: 46px;
  }

  nav#main-nav .nav-oeuvres-submenu a {
    height: 38px;
    font-size: 10px;
  }

  #ligne-verticale-milieu,
  #ligne-horizontale-milieu {
    display: none !important;
  }

  #bg-video-global iframe {
    width: 177.78vh;
    height: 100vh;
  }

  #bg-video-global .bg-video-desktop {
    display: none;
  }

  #bg-video-global .bg-video-mobile {
    display: block;
  }

  .page-home {
    height: 100vh;
  }

  .page-home .cartel {
    right: 8vw;
    top: 68px;
    min-width: 150px;
    padding: 12px;
  }

  .page-actualites .actualites-content {
    min-height: 100%;
    padding: 78px 18px 48px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 28px;
  }

  .actualite-card:nth-child(1),
  .actualite-card:nth-child(2) {
    width: 100%;
    padding: 8px;
  }

  .actualite-card:nth-child(1) img,
  .actualite-card:nth-child(2) img {
    height: auto;
    aspect-ratio: auto;
  }

  .actualite-card .card-info,
  .actualite-card .card-info .card-dates {
    font-size: 13px;
  }

  .page-identite .identite-content {
    position: relative;
    right: auto;
    bottom: auto;
    min-height: 100%;
    padding: 40px 20px 48px;
    transform: none;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 24px;
  }

  .page-identite .identite-quote {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: none;
    padding: 78px 20px 0;
    font-size: 14px;
  }

  .page-identite .identite-text {
    font-size: 18px;
  }

  .page-identite .identite-photo {
    width: 72vw;
    width: min(72vw, 300px);
    height: auto;
  }

  .page-cv .cv-content {
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    padding: 78px 18px 48px !important;
  }

  .cv-section {
    margin-bottom: 52px;
  }

  .cv-section-title {
    font-size: 20px;
  }

  .cv-section-subtitle {
    font-size: 16px;
  }

  .cv-entry {
    gap: 12px;
    margin-bottom: 10px;
  }

  .cv-entry .cv-text,
  .cv-entry .cv-year {
    font-size: 13px;
  }

  #page-cv .cv-gallery-window {
    left: 5vw;
    top: 72px;
    width: 90vw;
    height: 56.25vw;
  }

  .page-oeuvres,
  .page-paralleles {
    height: 100vh;
    overflow-y: auto;
  }

  .page-oeuvres .preview-zone,
  .page-paralleles .preview-zone {
    display: none;
  }

  .page-oeuvres .oeuvres-list,
  .page-paralleles .paralleles-list {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 100%;
    padding: 78px 18px 56px;
    justify-content: center;
    align-items: stretch;
  }

  .page-oeuvres .oeuvres-list a,
  .page-paralleles .paralleles-list a {
    width: auto !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    animation: none !important;
    overflow: visible;
    white-space: normal;
    font-size: 22px;
    line-height: 1.05;
  }

  .page-oeuvres .oeuvres-list a {
    text-align: right;
  }

  .page-paralleles .paralleles-list a {
    text-align: left;
  }

  .oeuvres-info-btn,
  .oeuvres-info-btn-parallele {
    top: 46px;
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  .oeuvres-info-tooltip,
  .oeuvres-info-tooltip-parallele {
    top: 96px;
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 16px;
    font-size: 13px;
  }

  .page-oeuvre {
    height: 100vh;
    overflow-y: auto;
  }

  .oeuvre-grid,
  .page-oeuvre-parallele .oeuvre-grid,
  .page[id^="page-oeuvre-par-"] .oeuvre-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100%;
    gap: 1px;
  }

  .oeuvre-visuel,
  .page-oeuvre-parallele .oeuvre-visuel,
  .page[id^="page-oeuvre-par-"] .oeuvre-visuel {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    height: 68vw;
    min-height: 250px;
    padding: 58px 12px 12px !important;
  }

  .oeuvre-visuel .carousel img {
    max-width: calc(100% - 48px);
  }

  .oeuvre-visuel .carousel-btn,
  .page-oeuvre-parallele .carousel .carousel-btn {
    width: 44px;
    height: 44px;
    font-size: 32px;
  }

  .oeuvre-cartel,
  .oeuvre-cartel-parallele,
  .page-oeuvre-parallele .oeuvre-cartel-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
    order: 2;
    display: block;
    min-height: 220px;
    padding: 28px 18px 58px !important;
    position: relative;
    overflow: visible;
  }

  .cartel-inner,
  .cartel-inner-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 78%;
    max-width: 300px;
    min-width: 0;
    margin-left: auto;
    padding: 18px;
    gap: 18px;
  }

  .cartel-inner-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    margin-left: 0;
    margin-right: auto;
  }

  .cartel-inner .cartel-title,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele {
    font-size: 21px;
  }

  .cartel-subtitle,
  .cartel-subtitle-parallele {
    font-size: 15px;
  }

  .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele {
    margin-top: calc(-18px + 0.2em);
  }

  .cartel-inner .cartel-data,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    font-size: 13px;
  }

  .oeuvre-side-nav {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    height: 46px;
    margin: 0 12px;
    transform: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 46px;
  }

  .cartel-nav-btns button,
  .oeuvre-side-nav button {
    width: 100%;
    height: 46px;
    font-size: 32px;
  }

  .page-oeuvre-parallele .cartel-nav-btns-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 46px;
  }

  .page-oeuvre-parallele .cartel-nav-btns-parallele button,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button {
    width: 100%;
    height: 46px;
    font-size: 32px;
  }

  .oeuvre-description,
  .page-oeuvre-parallele .oeuvre-description,
  .page[id^="page-oeuvre-par-"] .oeuvre-description {
    order: 4;
    min-height: 0;
    padding: 0 12px !important;
    overflow: visible;
  }

  .oeuvre-description-inner {
    padding: 32px 16px 56px;
  }

  .oeuvre-description-inner p {
    font-size: 14px;
    line-height: 1.45;
  }

  .oeuvre-description-inner .auteur {
    position: static;
    margin-top: 24px;
    font-size: 13px;
  }

  .oeuvre-nav {
    order: 5;
    flex: 0 0 190px;
    min-height: 190px;
  }

  #page-oeuvre-detachement .detachement-nav-cluster {
    position: relative;
    order: 3;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0 12px;
    transform: none;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 38px);
  }

  #page-oeuvre-detachement .detachement-nav-cluster .annee-btn {
    font-size: 12px;
  }

  #page-oeuvre-detachement > .oeuvre-grid > .btn-interview {
    position: relative;
    order: 4;
    top: auto;
    right: auto;
    width: auto;
    height: 40px;
    margin: 0 12px;
    transform: none;
    font-size: 12px;
  }

  #page-oeuvre-detachement .oeuvre-side-nav {
    order: 5;
  }

  #page-oeuvre-detachement .oeuvre-description {
    order: 6;
  }

  #page-oeuvre-detachement .oeuvre-nav {
    order: 7;
  }

  .page-medias {
    height: 100vh;
    overflow-y: auto;
  }

  .medias-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
  }

  .medias-player-panel {
    order: 1;
    flex: 0 0 68vw;
    min-height: 250px;
    padding: 58px 12px 12px;
  }

  .medias-description-panel {
    order: 2;
    flex: 0 0 260px;
    height: 260px;
    min-height: 260px;
    padding: 0 12px;
  }

  .media-active-description {
    padding: 32px 16px 64px;
  }

  .media-active-description .media-date,
  .media-active-description .media-duree,
  .media-active-description .media-lien {
    font-size: 12px;
  }

  .media-active-description .media-source,
  .media-active-description .media-titre {
    font-size: 14px;
    max-width: none;
  }

  .media-nav-btns {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 46px;
    grid-template-columns: repeat(2, 1fr);
  }

  .media-nav-btns button {
    width: 100%;
    height: 46px;
    font-size: 32px;
  }

  .medias-list-panel {
    order: 3;
    max-height: none;
    padding: 0 12px 56px;
    overflow: visible;
  }

  .media-list-item {
    padding: 14px 16px;
  }

  .media-list-date,
  .media-list-meta {
    font-size: 12px;
  }

  .media-list-title {
    font-size: 14px;
  }

  #audio-player {
    left: 3vw;
    right: 3vw;
    height: 46px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding-left: 8px;
  }

  #audio-player button#play-btn,
  #audio-player button#play-btn svg {
    width: 22px;
    height: 22px;
  }

  #audio-player .audio-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  #audio-player .audio-label {
    font-size: 11px;
  }

  #audio-player .audio-progress-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 4px;
  }

  #audio-player #audio-current-time,
  #audio-player #audio-duration {
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    padding: 0 8px;
    font-size: 9px;
  }

  .page-oeuvres .oeuvres-list a,
  .page-paralleles .paralleles-list a {
    font-size: 19px;
  }

  .oeuvre-visuel,
  .page-oeuvre-parallele .oeuvre-visuel,
  .page[id^="page-oeuvre-par-"] .oeuvre-visuel,
  .medias-player-panel {
    min-height: 230px;
  }
}

/* ============================================
   PILE D'ŒUVRES — smartphone et tablette
   Les previews existantes deviennent les cartes sticky.
   ============================================ */

.lq-mobile-stack-media,
.lq-mobile-stack-details,
.lq-mobile-stack-cartel {
  display: none;
}

.lq-desktop-list-title,
.lq-mobile-stack-title {
  display: inline;
}

@media (max-width: 1024px) {
  .lq-desktop-list-title {
    display: none;
  }

  .page-oeuvres,
  .page-paralleles {
    --lq-stack-top: clamp(62px, 9vh, 92px);
    --lq-stack-top: clamp(62px, 9dvh, 92px);
    --lq-stack-gap: clamp(155px, 24vh, 250px);
    --lq-stack-gap: clamp(155px, 24dvh, 250px);
    --lq-stack-bottom: 62vh;
    --lq-stack-bottom: 62dvh;
    --lq-stack-media-height: min(54vh, 560px);
    --lq-stack-media-height: min(54dvh, 560px);
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-top: var(--lq-stack-top);
  }

  .page-oeuvres .preview-zone,
  .page-paralleles .preview-zone {
    display: none;
  }

  .page-oeuvres .oeuvres-list,
  .page-paralleles .paralleles-list {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%;
    min-height: 100%;
    padding: var(--lq-stack-top) 0 calc(var(--lq-stack-bottom) + env(safe-area-inset-bottom));
    z-index: 2;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-card,
  .page-paralleles .paralleles-list .lq-mobile-stack-card {
    position: -webkit-sticky;
    position: sticky;
    top: var(--lq-stack-top);
    z-index: var(--lq-stack-index);
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 0 var(--lq-stack-gap) !important;
    padding: 0 0 clamp(10px, 1.8vh, 16px) !important;
    overflow: visible;
    white-space: normal;
    animation: none !important;
    background: #00000000;
    box-shadow: 0 38vh 0 38vh #00000000;
    color: #fff;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-card:last-child,
  .page-paralleles .paralleles-list .lq-mobile-stack-card:last-child {
    margin-bottom: 0 !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-card:hover,
  .page-paralleles .paralleles-list .lq-mobile-stack-card:hover {
    padding: 0 0 clamp(10px, 1.8vh, 16px) !important;
    color: #fff;
    font-weight: 100;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-card:hover::before,
  .page-paralleles .paralleles-list .lq-mobile-stack-card:hover::before {
    content: none;
  }

  .lq-mobile-stack-media {
    position: relative;
    z-index: 1;
    display: block;
    width: 94vw;
    height: var(--lq-stack-media-height);
    margin: 0 auto;
    background: #000;
    pointer-events: none;
    isolation: isolate;
  }

  .lq-mobile-stack-media > .preview-media {
    position: relative !important;
    z-index: 1;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto;
    object-fit: contain;
    opacity: 1 !important;
    pointer-events: none;
    border-radius: 0;
    outline: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
      3px 1px 54px 18px rgba(0, 0, 0, 0.84),
      0 22vh 40px 15vh #000;
  }

  .lq-mobile-stack-cartel {
    position: relative !important;
    z-index: 4;
    display: flex !important;
    flex-direction: column;
    flex: 0 0 auto;
    width: 94vw;
    min-height: 48px;
    margin: 9px auto 0;
    padding: 0;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0);
    pointer-events: none;
    isolation: isolate;
  }

  .lq-mobile-stack-title,
  .lq-mobile-stack-details,
  .lq-mobile-stack-details > span {
    position: relative;
    z-index: 1;
    display: block !important;
    width: max-content;
    max-width: 94%;
    background: rgba(255, 255, 255, 0.94);
    color: #000;
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    white-space: normal;
  }

  .lq-mobile-stack-title {
    padding: 7px 11px 6px;
    font-size: clamp(15px, 3.9vw, 22px);
    line-height: 1.08;
    text-transform: uppercase;
  }

  .lq-mobile-stack-details {
    display: flex !important;
    flex-direction: column;
    margin-top: 5px;
    background: transparent;
  }

  .lq-mobile-stack-details > span {
    margin-top: 2px;
    padding: 4px 11px 3px;
    background: rgba(255, 255, 255, 0.85);
    font-size: clamp(12px, 3.35vw, 18px);
    line-height: 1.12;
    text-transform: none;
  }

  .page-oeuvres .lq-mobile-stack-cartel,
  .page-oeuvres .lq-mobile-stack-details {
    align-items: flex-end;
    text-align: right;
  }

  .page-paralleles .lq-mobile-stack-cartel,
  .page-paralleles .lq-mobile-stack-details {
    align-items: flex-start;
    text-align: left;
  }

  .lq-mobile-stack-card:focus-visible .lq-mobile-stack-title {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .lq-mobile-stack-card::after {
    content: attr(data-lq-stack-number) " / " attr(data-lq-stack-total);
    position: absolute;
    top: 8px;
    right: calc(3vw + 8px);
    padding: 4px 7px 3px;
    background: rgba(0, 0, 0, 0.72);
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.38);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }

  .lq-mobile-stack-card.lq-mobile-stack-active::after,
  .lq-mobile-stack-card:focus-visible::after {
    opacity: 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  nav#main-nav,
  nav#main-nav .nav-name,
  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    height: 52px;
  }

  nav#main-nav .nav-name,
  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    font-size: 11px;
  }

  nav#main-nav .nav-name {
    padding: 0 14px;
  }

  nav#main-nav .nav-links a,
  nav#main-nav .nav-dropdown-oeuvres > .nav-oeuvres-main {
    padding: 0 clamp(10px, 1.5vw, 16px);
  }

  nav#main-nav .nav-links a.nav-home {
    font-size: 17px;
  }

  nav#main-nav .nav-oeuvres-submenu {
    top: 52px;
  }

  nav#main-nav .nav-oeuvres-submenu a {
    height: 42px;
    font-size: 11px;
  }

  .oeuvres-info-btn,
  .oeuvres-info-btn-parallele {
    top: 52px;
    width: 44px;
    height: 44px;
    font-size: 25px;
  }

  .oeuvres-info-tooltip,
  .oeuvres-info-tooltip-parallele {
    top: 104px;
    left: 3vw;
    right: 3vw;
    max-width: 420px;
    padding: 16px;
    font-size: 13px;
  }

  .oeuvres-info-tooltip-parallele {
    left: auto;
  }

  .lq-mobile-stack-title {
    font-size: clamp(18px, 2.4vw, 22px);
  }

  .lq-mobile-stack-details > span {
    font-size: clamp(13px, 1.8vw, 17px);
  }
}

@media (max-width: 768px) {
  .page-oeuvres,
  .page-paralleles {
    --lq-stack-media-height: min(52vh, 500px);
    --lq-stack-media-height: min(52dvh, 500px);
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .page-oeuvres,
  .page-paralleles {
    --lq-stack-top: clamp(56px, 11vh, 78px);
    --lq-stack-top: clamp(56px, 11dvh, 78px);
    --lq-stack-gap: clamp(110px, 22vh, 185px);
    --lq-stack-gap: clamp(110px, 22dvh, 185px);
    --lq-stack-media-height: min(48vh, 420px);
    --lq-stack-media-height: min(48dvh, 420px);
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .page-oeuvres,
  .page-paralleles {
    --lq-stack-top: 56px;
    --lq-stack-gap: clamp(92px, 25vh, 145px);
    --lq-stack-gap: clamp(92px, 25dvh, 145px);
    --lq-stack-bottom: 70vh;
    --lq-stack-bottom: 70dvh;
    --lq-stack-media-height: min(44vh, 230px);
    --lq-stack-media-height: min(44dvh, 230px);
  }

  .lq-mobile-stack-cartel {
    margin-top: 6px;
  }

  .lq-mobile-stack-title {
    padding: 5px 8px 4px;
    font-size: 14px;
  }

  .lq-mobile-stack-details {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 3px;
  }

  .page-oeuvres .lq-mobile-stack-details {
    justify-content: flex-end;
  }

  .page-paralleles .lq-mobile-stack-details {
    justify-content: flex-start;
  }

  .lq-mobile-stack-details > span {
    width: auto;
    margin-top: 0;
    padding: 3px 7px 2px;
    font-size: 11px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .page-oeuvres,
  .page-paralleles {
    --lq-stack-top: clamp(64px, 9vh, 78px);
    --lq-stack-top: clamp(64px, 9dvh, 78px);
    --lq-stack-gap: clamp(150px, 24vh, 215px);
    --lq-stack-gap: clamp(150px, 24dvh, 215px);
    --lq-stack-media-height: min(52vh, 460px);
    --lq-stack-media-height: min(52dvh, 460px);
  }

  .page-oeuvres .oeuvres-list,
  .page-paralleles .paralleles-list {
    padding-top: var(--lq-stack-top);
  }

  .lq-mobile-stack-cartel {
    width: calc(100vw - 14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lq-mobile-stack-media > .preview-media {
    transition: none !important;
  }
}

/* Les listes mobiles/tablette doivent reprendre l'effet pleine largeur
   de l'ancien site : pas de bandes noires autour des previews. */
@media (max-width: 1024px) {
  .page-oeuvres .oeuvres-list .lq-mobile-stack-media,
  .page-paralleles .paralleles-list .lq-mobile-stack-media {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    margin-right: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden;
    background: transparent;
    border: 1px solid #ffffff;
    border-bottom-color: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 3px 1px 139px 40px rgb(0 0 0 / 75%), 0 200px 40px 40px #000;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-media > .preview-media,
  .page-paralleles .paralleles-list .lq-mobile-stack-media > .preview-media {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center;
    background: transparent !important;
    border-radius: 0 !important;
    outline: 0;
    box-shadow: none;
  }
}

/* ============================================
   MOBILE / TABLETTE — pleine largeur et pages
   d'œuvre allégées, dans l'esprit de Fade.
   ============================================ */

@media (max-width: 1024px) {
  #ligne-verticale-gauche,
  #ligne-verticale-droite,
  #ligne-verticale-milieu,
  #ligne-horizontale-milieu,
  #border-left,
  #border-right {
    display: none !important;
  }

  .page-oeuvres .oeuvres-list,
  .page-paralleles .paralleles-list {
    width: 100vw;
  }

  .lq-mobile-stack-media {
    width: 100vw;
  }

  .lq-mobile-stack-media > .preview-media {
    outline: 0;
  }

  .lq-mobile-stack-cartel {
    width: calc(100vw - 16px);
  }

  .lq-mobile-stack-card::after {
    right: 8px;
  }

  .oeuvres-info-btn {
    right: 0;
  }

  .oeuvres-info-btn-parallele {
    left: 0;
  }

  .page-oeuvre,
  .page-oeuvre-parallele,
  .page[id^="page-oeuvre-par-"] {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;
    -webkit-overflow-scrolling: touch;
  }

  .oeuvre-grid,
  .page-oeuvre-parallele .oeuvre-grid,
  .page[id^="page-oeuvre-par-"] .oeuvre-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 100%;
    gap: 0;
  }

  .oeuvre-visuel,
  .page-oeuvre-parallele .oeuvre-visuel,
  .page[id^="page-oeuvre-par-"] .oeuvre-visuel {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    height: min(64vw, 68vh);
    height: min(64vw, 68dvh);
    min-height: 320px;
    padding: 52px 0 0 !important;
    overflow: hidden;
  }

  .oeuvre-video-wrapper,
  .oeuvre-video-wrapper iframe,
  .oeuvre-visuel .carousel {
    width: 100%;
    height: 100%;
  }

  .oeuvre-visuel .carousel img {
    max-width: 100%;
    max-height: 100%;
  }

  .oeuvre-cartel,
  .oeuvre-cartel-parallele,
  .page-oeuvre-parallele .oeuvre-cartel-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
    order: 2;
    display: block;
    min-height: 0;
    padding: 20px 16px 16px !important;
    overflow: visible;
    background: #000;
  }

  .cartel-inner,
  .cartel-inner-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 8px;
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  .cartel-inner {
    align-items: flex-end;
    text-align: right;
  }

  .cartel-inner-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    align-items: flex-start;
    text-align: left;
  }

  .cartel-inner .cartel-title,
  .cartel-inner-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele {
    max-width: min(92vw, 680px);
    color: #fff;
    font-size: clamp(20px, 3.2vw, 28px);
    font-weight: 400;
    line-height: 1.08;
  }

  .cartel-subtitle,
  .cartel-subtitle-parallele {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(13px, 2vw, 17px);
  }

  .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
  .page-oeuvre-parallele .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele > .cartel-title-parallele + .cartel-subtitle-parallele {
    margin-top: calc(-8px + 0.2em);
  }

  .cartel-inner .cartel-data,
  .cartel-inner-parallele .cartel-data-parallele,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    gap: 1px;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, 1.7vw, 15px);
    line-height: 1.25;
  }

  .cartel-inner .cartel-data {
    align-items: flex-end;
  }

  .cartel-inner-parallele .cartel-data-parallele,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    align-items: flex-start;
  }

  .oeuvre-side-nav,
  #page-oeuvre-detachement .oeuvre-side-nav {
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: 44px;
    margin: 0;
    transform: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 44px;
  }

  .cartel-nav-btns button,
  .oeuvre-side-nav button {
    width: 100%;
    height: 44px;
    font-size: 30px;
  }

  .page-oeuvre-parallele .cartel-nav-btns-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 44px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 44px;
  }

  .page-oeuvre-parallele .cartel-nav-btns-parallele button,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button {
    width: 100%;
    height: 44px;
    font-size: 30px;
  }

  .oeuvre-description,
  .page-oeuvre-parallele .oeuvre-description,
  .page[id^="page-oeuvre-par-"] .oeuvre-description {
    order: 4;
    min-height: 0;
    padding: 0 !important;
    overflow: visible;
  }

  .oeuvre-description-inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 64px) 16px calc(76px + env(safe-area-inset-bottom));
  }

  .oeuvre-description-inner .auteur {
    position: static;
    margin-top: 24px;
    font-size: 13px;
  }

  .oeuvre-nav {
    display: none;
  }

  #page-oeuvre-detachement .detachement-nav-cluster {
    position: relative;
    order: 3;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 38px);
  }

  #page-oeuvre-detachement .detachement-nav-cluster .annee-btn {
    font-size: 12px;
  }

  #page-oeuvre-detachement > .oeuvre-grid > .btn-interview {
    position: relative;
    order: 4;
    top: auto;
    right: auto;
    width: 100%;
    height: 40px;
    margin: 0;
    transform: none;
    font-size: 12px;
  }

  #page-oeuvre-detachement .oeuvre-description {
    order: 6;
  }

  #page-oeuvre-detachement .oeuvre-side-nav {
    order: 5;
  }
}

@media (max-width: 600px) {
  #ligne-horizontale-haut {
    height: 46px;
  }

  .oeuvre-visuel,
  .page-oeuvre-parallele .oeuvre-visuel,
  .page[id^="page-oeuvre-par-"] .oeuvre-visuel {
    height: min(72vw, 62vh);
    height: min(72vw, 62dvh);
    min-height: 240px;
    padding-top: 46px !important;
  }

  .oeuvre-cartel,
  .oeuvre-cartel-parallele,
  .page-oeuvre-parallele .oeuvre-cartel-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
    padding: 16px 12px 14px !important;
  }
}

/* Verrouillage final du menu responsive : ces règles passent après les
   anciens ajustements mobile pour éviter que la nav desktop compressée revienne. */
@media (max-width: 1024px) {
  nav#main-nav {
    left: 0 !important;
    width: 100vw !important;
    height: 62px !important;
    align-items: stretch !important;
  }

  nav#main-nav .nav-name {
    display: flex !important;
    width: 62px !important;
    height: 62px !important;
    padding: 0 !important;
    flex: 0 0 62px !important;
  }

  nav#main-nav .nav-links {
    display: none !important;
  }

  nav#main-nav .nav-mobile-toggle {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  nav#main-nav {
    height: 62px !important;
  }

  nav#main-nav .nav-name {
    height: 62px !important;
    padding: 0 !important;
  }
}

/* ============================================
   ECHELLE TYPOGRAPHIQUE RESPONSIVE
   Titres, cartels et textes : plus lisibles sans
   perdre la sobriete graphique du site.
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvres .oeuvres-list .lq-mobile-stack-title,
  .page-paralleles .paralleles-list .lq-mobile-stack-title {
    padding: 0.42em 0.62em 0.34em;
    font-size: clamp(21px, 4.3vw, 34px);
    line-height: 0.98;
    letter-spacing: 0.015em;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-details > span,
  .page-paralleles .paralleles-list .lq-mobile-stack-details > span {
    padding: 0.26em 0.62em 0.2em;
    font-size: clamp(14px, 2.6vw, 20px);
    line-height: 1.08;
    letter-spacing: 0.02em;
  }

  .oeuvres-info-tooltip,
  .oeuvres-info-tooltip-parallele {
    font-size: clamp(14px, 1.8vw, 17px);
    line-height: 1.45;
  }

  .cartel-inner .cartel-title,
  .cartel-inner-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele {
    font-size: clamp(24px, 4.1vw, 38px) !important;
    line-height: 1.02;
    letter-spacing: 0.015em;
  }

  .cartel-subtitle,
  .cartel-subtitle-parallele {
    font-size: clamp(15px, 2.2vw, 20px) !important;
    line-height: 1.18;
  }

  .cartel-inner .cartel-data,
  .cartel-inner-parallele .cartel-data-parallele,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    font-size: clamp(14px, 1.9vw, 17px) !important;
    line-height: 1.22;
  }

  .oeuvre-description-inner {
    max-width: 760px;
  }

  .oeuvre-description-inner p {
    font-size: clamp(15px, 1.9vw, 18px) !important;
    line-height: 1.58;
    text-align: left;
  }

  .oeuvre-description-inner .auteur {
    font-size: clamp(13px, 1.55vw, 15px) !important;
  }

  .media-active-description .media-date,
  .media-active-description .media-duree,
  .media-active-description .media-lien,
  .media-list-date,
  .media-list-meta {
    font-size: clamp(12px, 1.6vw, 15px) !important;
  }

  .media-active-description .media-source,
  .media-list-title {
    font-size: clamp(15px, 2vw, 19px) !important;
    line-height: 1.22;
  }

  .media-active-description .media-titre {
    font-size: clamp(18px, 2.5vw, 25px) !important;
    line-height: 1.25;
    max-width: none;
  }

  .cv-section-title {
    font-size: clamp(22px, 3.4vw, 34px) !important;
    line-height: 1.05;
  }

  .cv-section-subtitle {
    font-size: clamp(16px, 2.4vw, 24px) !important;
  }

  .cv-entry .cv-text,
  .cv-entry .cv-year {
    font-size: clamp(13px, 1.8vw, 16px) !important;
    line-height: 1.32;
  }

  .page-identite .identite-quote {
    font-size: clamp(14px, 1.8vw, 18px) !important;
    line-height: 1.5;
  }

  .page-identite .identite-text {
    font-size: clamp(18px, 2.6vw, 26px) !important;
    line-height: 1.22;
  }

  .actualite-card .card-info,
  .actualite-card .card-info .card-dates {
    font-size: clamp(14px, 1.9vw, 18px) !important;
    line-height: 1.28;
  }
}

@media (max-width: 600px) {
  .page-oeuvres .oeuvres-list .lq-mobile-stack-title,
  .page-paralleles .paralleles-list .lq-mobile-stack-title {
    font-size: clamp(23px, 7.2vw, 34px);
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-details > span,
  .page-paralleles .paralleles-list .lq-mobile-stack-details > span {
    font-size: clamp(14px, 4.3vw, 18px);
  }

  .cartel-inner .cartel-title,
  .cartel-inner-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele {
    font-size: clamp(22px, 6.4vw, 31px) !important;
  }

  .cartel-inner .cartel-data,
  .cartel-inner-parallele .cartel-data-parallele,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    font-size: 14px !important;
  }

  .oeuvre-description-inner {
    padding-top: 30px;
  }

  .media-active-description .media-titre {
    font-size: 19px !important;
  }

  .cv-entry {
    align-items: flex-start;
  }

  .cv-entry .cv-text,
  .cv-entry .cv-year {
    font-size: 13px !important;
  }

  .page-identite .identite-quote {
    font-size: 14px !important;
    text-align: left;
  }

  .page-identite .identite-text {
    font-size: 18px !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — navigation d'œuvre basse
   et lecteur audio compact, dans l'esprit de
   l'ancienne version mobile.
   ============================================ */

@media (max-width: 1024px) {
  #ligne-horizontale-bas {
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    z-index: 100001;
  }

  .page-oeuvre .oeuvre-description-inner,
  .page-oeuvre-parallele .oeuvre-description-inner,
  .page[id^="page-oeuvre-par-"] .oeuvre-description-inner {
    padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  }

  .page-oeuvre .oeuvre-side-nav,
  .page-oeuvre-parallele .cartel-nav-btns-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    z-index: 99990;
    display: grid !important;
    width: 100vw !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 64px !important;
    background: rgba(0, 0, 0, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .page-oeuvre .oeuvre-side-nav button,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font-size: clamp(42px, 9vw, 64px) !important;
    font-weight: 300;
    line-height: 1;
    text-shadow: 0 0 22px rgba(255, 255, 255, 0.38);
  }

  .page-oeuvre .oeuvre-side-nav button:last-child,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button:last-child,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button:last-child {
    border-right: 0;
  }

  .page-oeuvre .oeuvre-side-nav button:hover,
  .page-oeuvre .oeuvre-side-nav button:focus-visible,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button:hover,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button:focus-visible,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button:hover,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button:focus-visible {
    background: #fff;
    color: #000;
    text-shadow: none;
  }

  #audio-player {
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(54px + env(safe-area-inset-bottom)) !important;
    min-height: 54px;
    padding: 0 0 env(safe-area-inset-bottom) 0 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 0 !important;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.72);
    border-right: 0 !important;
    overflow: hidden;
  }

  #audio-player button#play-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.72);
    background: #000;
  }

  #audio-player button#play-btn svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
  }

  #audio-player .audio-meta {
    position: relative;
    display: block !important;
    width: 100%;
    height: 54px;
    min-width: 0;
    overflow: hidden;
  }

  #audio-player .audio-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 18px 0 22px;
    color: #fff;
    font-size: clamp(13px, 2.6vw, 18px) !important;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 1;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  #audio-player .audio-progress-row {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
    gap: 0 !important;
    width: 100%;
    height: 100%;
    opacity: 0.95;
  }

  #audio-player #audio-current-time,
  #audio-player #audio-duration {
    width: 0;
    opacity: 0;
    overflow: hidden;
  }

  #audio-player {
    --audio-progress-height: 54px;
    --audio-progress-thumb-width: 2px;
    --audio-progress-played: rgba(255, 255, 255, 0.2);
    --audio-progress-unplayed: #000;
  }

  #audio-player #audio-progress,
  #audio-player #audio-progress::-webkit-slider-runnable-track {
    height: 54px;
  }

  #audio-player #audio-progress::-webkit-slider-thumb {
    height: 54px;
    background: rgba(255, 255, 255, 0.85);
  }
}

/* ============================================
   VERROUILLAGE FINAL — barre mobile 62px
   ============================================ */

@media (max-width: 1024px) {

  #ligne-horizontale-haut {
    height: 62px !important;
  }

  nav#main-nav .nav-name,
  nav#main-nav .nav-profile-photo,
  nav#main-nav .nav-mobile-toggle {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px;
    min-height: 62px;
  }

  nav#main-nav .nav-name {
    padding: 0 !important;
    flex: 0 0 62px !important;
  }

  nav#main-nav .nav-mobile-current-title {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  .page-identite .identite-quote {
    font-size: 16px !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — Presse mobile/tablette
   et ajustements nav overlay
   ============================================ */

@media (max-width: 1024px) {
  body.is-medias-section #ligne-verticale-milieu,
  body.is-medias-section #ligne-horizontale-milieu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  nav#main-nav .nav-name {
    border-right: 1px solid #fff !important;
  }

  nav#main-nav .nav-mobile-current-title {
    font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    background: #000 !important;
    color: #fff !important;
    border-right: 1px solid #fff !important;
    font-size: clamp(29px, 3.6vw, 30px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 0.92 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;
  }

  nav#main-nav .nav-mobile-current-title.is-long {
    font-size: clamp(18px, 3vw, 25px) !important;
  }

  nav#main-nav .nav-mobile-current-title.is-very-long {
    font-size: clamp(14px, 2.45vw, 20px) !important;
    line-height: 0.96 !important;
  }

  nav#main-nav .nav-mobile-current-title.is-muted-category {
    font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    opacity: 0.25 !important;
  }

  nav#main-nav .nav-mobile-current-title.is-clickable {
    opacity: 0.25 !important;
  }

  nav#main-nav .nav-mobile-current-title.is-home-title {
    text-transform: initial !important;
  }

  nav#main-nav .nav-mobile-current-title .nav-mobile-current-link {
    font-family: "Melodrama", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.12em;
    cursor: pointer;
  }

  nav#main-nav .nav-mobile-toggle {
    border-left: 0 !important;
  }

  .mobile-nav-heading {
    min-height: clamp(48px, 8vh, 78px) !important;
    padding-left: clamp(18px, 7vw, 72px) !important;
    color: rgba(255, 255, 255, 0.52) !important;
    font-size: clamp(26px, 8vw, 74px) !important;
    font-weight: 300 !important;
    line-height: 0.92 !important;
    letter-spacing: 0.02em !important;
  }

  .mobile-nav-group a {
    padding-left: clamp(18px, 7vw, 72px) !important;
    font-size: clamp(26px, 8vw, 74px) !important;
  }

  .mobile-nav-group a:hover,
  .mobile-nav-group a:focus-visible {
    padding-left: clamp(26px, 9vw, 88px) !important;
  }

  .page-medias {
    height: calc(100vh - 54px - env(safe-area-inset-bottom)) !important;
    height: calc(100dvh - 54px - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .medias-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .medias-player-panel {
    order: 1 !important;
    flex: 0 0 68vw !important;
    min-height: 250px !important;
    padding: 62px 0 0 !important;
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
    box-sizing: border-box !important;
  }

  .medias-description-panel {
    order: 2 !important;
    flex: 0 0 clamp(190px, 30vh, 280px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .media-active-description {
    height: 100% !important;
    padding: 24px 16px !important;
    overflow-y: auto !important;
  }

  .media-nav-btns {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    z-index: 99990 !important;
    display: grid !important;
    width: 100vw !important;
    height: 64px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 64px !important;
    background: rgba(0, 0, 0, 0.94) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.58) !important;
  }

  .media-nav-btns button {
    width: 100% !important;
    height: 64px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
    background: rgba(0, 0, 0, 0.24) !important;
    color: #fff !important;
    font-size: clamp(42px, 9vw, 64px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }

  .media-nav-btns button:last-child {
    border-right: 0 !important;
  }

  .medias-list-panel {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0px calc(74px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — Presse mobile compacte
   ============================================ */

@media (max-width: 1024px) {
  .page-medias .medias-description-panel {
    flex: 0 0 clamp(118px, 20vh, 170px) !important;
    height: clamp(118px, 20vh, 170px) !important;
    min-height: 118px !important;
    max-height: none !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    position: relative !important;
    overflow: hidden !important;
  }

  .page-medias .media-active-description {
    position: relative !important;
    z-index: 1;
    height: 100% !important;
    max-height: none !important;
    padding: 12px 14px 13px !important;
    overflow-y: auto !important;
  }

  .page-medias .media-active-description .media-date,
  .page-medias .media-active-description .media-duree,
  .page-medias .media-active-description .media-lien {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .page-medias .media-active-description .media-source {
    font-size: 13px !important;
    line-height: 1.16 !important;
  }

  .page-medias .media-active-description .media-titre {
    margin-top: 4px !important;
    font-size: 15px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 600px) {
  .page-medias .medias-description-panel {
    flex-basis: 136px !important;
    height: 136px !important;
    min-height: 136px !important;
  }

  .page-medias .media-active-description {
    height: 100% !important;
    max-height: none !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — Presse bas de page audio
   ============================================ */

@media (max-width: 1024px) {
  .media-pdf-wrapper.media-flux-news-pdf {
    cursor: zoom-in;
  }

  .media-pdf-wrapper.media-flux-news-pdf .media-pdf-scroll-area {
    scrollbar-width: thin;
  }

  .media-pdf-wrapper.media-flux-news-pdf .media-pdf-web-image {
    min-height: 100%;
  }

  .media-pdf-wrapper.media-flux-news-pdf .media-pdf-scroll-hint {
    right: 10px;
    bottom: 56px;
    padding: 7px 9px 6px;
    font-size: 11px;
  }

  .media-pdf-wrapper.media-flux-news-pdf .media-flux-open {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    min-height: 42px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 13px;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72);
  }

  .media-flux-reader-scroll {
    padding-top: 62px;
  }

  .media-flux-reader-img {
    width: 100vw;
    max-width: none;
  }

  body.media-flux-reader-open {
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .media-flux-reader-title {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  body {
    --lq-mobile-bottom-unit: calc(65px + env(safe-area-inset-bottom));
    --lq-mobile-audio-offset: 0px;
  }

  body.lq-bottom-player-active {
    --lq-mobile-audio-offset: var(--lq-mobile-bottom-unit);
  }

  .page-medias .medias-description-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #ffffff;
    opacity: 0.4;
    background-image:
      repeating-linear-gradient(to right, #e5e5f7f5 0px, #000000 1px, #000000 4px),
      linear-gradient(to bottom, #ffffff 3px, #ffffff 1px);
    background-size: 100% 100%, 100% 10px;
  }

  #audio-player {
    display: grid !important;
    height: var(--lq-mobile-bottom-unit) !important;
    min-height: var(--lq-mobile-bottom-unit) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
    transition:
      opacity 2s ease,
      transform 2s ease,
      visibility 0s linear 2s !important;
  }

  body.lq-bottom-player-active #audio-player {
    display: grid !important;
    height: var(--lq-mobile-bottom-unit) !important;
    min-height: var(--lq-mobile-bottom-unit) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0s !important;
  }

  body.lq-bottom-player-hiding #audio-player {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
    transition:
      opacity 2s ease,
      transform 2s ease,
      visibility 0s linear 2s !important;
  }

  body.lq-bottom-player-active #audio-player button#play-btn,
  body.lq-bottom-player-active #audio-player .audio-meta,
  body.lq-bottom-player-active #audio-player #audio-progress,
  body.lq-bottom-player-active #audio-player #audio-progress::-webkit-slider-runnable-track,
  body.lq-bottom-player-active #audio-player #audio-progress::-webkit-slider-thumb {
    height: 65px !important;
    min-height: 65px !important;
  }

  body.lq-bottom-player-active #audio-player button#play-btn {
    width: 20vw !important;
    min-width: 20vw !important;
  }

  body.lq-bottom-player-active #audio-player {
    grid-template-columns: 20vw minmax(0, 1fr) !important;
    --audio-progress-height: 65px;
  }

  #ligne-horizontale-bas {
    bottom: var(--lq-mobile-audio-offset) !important;
    height: var(--lq-mobile-bottom-unit) !important;
    pointer-events: none !important;
  }

  #border-bottom {
    height: var(--lq-mobile-bottom-unit) !important;
  }

  body:not(.lq-bottom-player-active) #border-bottom {
    display: none !important;
  }

  .page-medias .media-nav-btns {
    bottom: var(--lq-mobile-audio-offset) !important;
    height: var(--lq-mobile-bottom-unit) !important;
    grid-template-rows: var(--lq-mobile-bottom-unit) !important;
  }

  .page-medias .media-nav-btns button {
    height: var(--lq-mobile-bottom-unit) !important;
    min-height: var(--lq-mobile-bottom-unit) !important;
  }

  .page-medias .media-list {
    min-height: 0;
  }
}

/* ============================================
   MOBILE / TABLETTE — flèches calées sur l'audio
   Sans audio : bas d'écran. Avec audio : au-dessus.
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvre .oeuvre-side-nav,
  .page-oeuvre-parallele .cartel-nav-btns-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele,
  .page-medias .media-nav-btns {
    bottom: var(--lq-mobile-audio-offset) !important;
    height: var(--lq-mobile-bottom-unit) !important;
    grid-template-rows: var(--lq-mobile-bottom-unit) !important;
  }

  .page-oeuvre .oeuvre-side-nav button,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button,
  .page-medias .media-nav-btns button {
    height: var(--lq-mobile-bottom-unit) !important;
    min-height: var(--lq-mobile-bottom-unit) !important;
  }

  #ligne-horizontale-bas {
    bottom: var(--lq-mobile-audio-offset) !important;
  }

  body.lq-bottom-player-active .page-medias .medias-list-panel {
    padding-bottom: calc(var(--lq-mobile-bottom-unit) + var(--lq-mobile-bottom-unit) + 9px) !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — retour tactile des fleches
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvre .oeuvre-side-nav button,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button,
  .page-medias .media-nav-btns button {
    transition: background-color 0.16s ease, color 0.16s ease !important;
  }

  .page-oeuvre .oeuvre-side-nav button:active,
  .page-oeuvre-parallele .cartel-nav-btns-parallele button:active,
  .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele button:active,
  .page-medias .media-nav-btns button:active {
    background-color: #fff !important;
    color: #000 !important;
    text-shadow: none !important;
  }
}

@media (max-width: 1024px) {
  .page-medias .media-active-description .media-lien {
    margin-top: 1px !important;
  }
}

@media (max-width: 1024px) {
  .page-medias .medias-list-panel {
    padding-bottom: calc(var(--lq-mobile-bottom-unit) + -1px) !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — Presse description en cases
   ============================================ */

@media (max-width: 1024px) {
  .page-medias .medias-description-panel {
    background: #000 !important;
    border-top: 1px solid #ffffff75 !important;
    border-bottom: 1px solid #ffffff75 !important;
  }

  .page-medias .medias-description-panel::before {
    content: none !important;
  }

  .page-medias .media-active-description {
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .page-medias .media-active-description::-webkit-scrollbar {
    display: none !important;
  }

  .page-medias .media-active-description .media-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .page-medias .media-active-description .media-info > span,
  .page-medias .media-active-description .media-info > a {
    flex: 1 1 50% !important;
    min-width: 50% !important;
    max-width: none !important;
    width: auto !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 8px 10px 7px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.86) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: clamp(12px, 3.3vw, 17px) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    text-align: left !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  .page-medias .media-active-description .media-titre {
    font-style: italic !important;
  }

  .page-medias .media-active-description .media-lien {
    color: #ff0000 !important;
    text-decoration: underline !important;
  }
}

@media (min-width: 700px) and (max-width: 1024px) {
  .page-medias .media-active-description .media-info > span,
  .page-medias .media-active-description .media-info > a {
    flex-basis: 33.3333% !important;
    min-width: 33.3333% !important;
  }
}

/* ============================================
   CV — respiration mobile/tablette + lignes ouvrables
   ============================================ */

@media (max-width: 1024px) {
  nav#main-nav .mobile-nav-panel a[data-page="actualites"] {
    display: none !important;
  }

  #page-cv {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #page-cv .cv-section-title {
    margin-bottom: 10px !important;
    color: #fff800 !important;
    font-size: clamp(21px, 4.2vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
  }

  #page-cv .cv-section-subtitle {
    margin: 0 0 clamp(20px, 3.2vh, 34px) !important;
    color: #fff800 !important;
    font-size: clamp(15px, 2.7vw, 22px) !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  #page-cv .cv-entry {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(12px, 2.5vw, 22px) !important;
    margin: 0 !important;
    padding: clamp(13px, 2.1vh, 22px) 0 clamp(14px, 2.3vh, 24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    text-align: left !important;
  }

  #page-cv .cv-entry .cv-text {
    width: 100% !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: clamp(16px, 3.15vw, 24px) !important;
    font-weight: 300 !important;
    line-height: 1.24 !important;
    text-align: left !important;
  }

  #page-cv .cv-entry .cv-text .cv-expo-title,
  #page-cv .cv-entry .cv-text .cv-expo-title em {
    color: #fff !important;
    font-size: 1.06em !important;
    font-style: italic !important;
    font-weight: 500 !important;
  }

  #page-cv .cv-entry .cv-year {
    min-width: 0 !important;
    padding-top: 0.1em !important;
    color: #fff800 !important;
    font-size: clamp(14px, 2.7vw, 20px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }

  #page-cv .cv-entry .cv-expo-gallery-trigger {
    position: relative !important;
    padding-right: clamp(44px, 8vw, 62px) !important;
    min-height: clamp(34px, 6vw, 48px) !important;
  }

  #page-cv .cv-entry .cv-expo-gallery-trigger::after {
    content: "⛶";
    position: absolute;
    top: 50%;
    right: 0;
    width: clamp(30px, 5.8vw, 44px);
    height: clamp(30px, 5.8vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-size: clamp(20px, 4vw, 30px);
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  #page-cv .cv-entry .cv-expo-gallery-trigger:hover::after,
  #page-cv .cv-entry .cv-expo-gallery-trigger:focus-visible::after,
  #page-cv .cv-entry .cv-expo-gallery-trigger.is-active::after {
    border-color: #fff;
    background: #fff;
    color: #000;
  }

  #page-cv .cv-entry .cv-expo-gallery-trigger.is-active,
  #page-cv .cv-entry .cv-expo-gallery-trigger.is-active * {
    color: #ff0000 !important;
  }
}

@media (max-width: 600px) {
  #page-cv .cv-content {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #page-cv .cv-entry {
    grid-template-columns: minmax(0, 1fr) minmax(38px, auto) !important;
  }

  #page-cv .cv-entry .cv-text {
    font-size: clamp(16px, 4.1vw, 20px) !important;
  }

  #page-cv .cv-entry .cv-year {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }
}

@media (max-width: 1024px) {
  #page-cv .cv-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: calc(62px + 0vh) clamp(18px, 4vw, 42px) calc(92px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 1024px) {
  nav#main-nav {
    height: 62px !important;
    outline: 1px white solid;
  }
}

@media (max-width: 1024px) {
  body.is-cv-section #ligne-horizontale-bas {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  #page-cv .cv-section-title {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin-right: calc(clamp(18px, 4vw, 42px) * -1) !important;
    margin-left: calc(clamp(18px, 4vw, 42px) * -1) !important;
    padding-top: 23px !important;
    padding-right: clamp(18px, 4vw, 42px) !important;
    padding-bottom: 20px !important;
    padding-left: clamp(18px, 4vw, 42px) !important;
    border-bottom: 1px solid white;
    background: rgba(0, 0, 0, 0.94) !important;
    color: #fff800 !important;
    font-size: clamp(36px, 4.2vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
  }

  #page-cv .cv-section + .cv-section {
    margin-top: 0 !important;
  }
}

@media (max-width: 1024px) {
  #ligne-horizontale-bas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — cartel œuvres personnelles
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvre:not(.page-oeuvre-parallele) .oeuvre-cartel {
    position: relative !important;
    bottom: 13px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-top: 1px solid #ffffff75 !important;
    border-bottom: 1px solid #ffffff75 !important;
    text-align: right !important;
    background: #000 !important;
  }

  .page-oeuvre:not(.page-oeuvre-parallele) .oeuvre-cartel::before {
    content: none !important;
  }

  .page-oeuvre:not(.page-oeuvre-parallele) .oeuvre-cartel .cartel-inner {
    position: relative !important;
    z-index: 1 !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre:not(.page-oeuvre-parallele) .oeuvre-cartel .cartel-data {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre,
  .page-oeuvre-parallele,
  .page[id^="page-oeuvre-par-"] {
    overflow: hidden !important;
  }

  .page-oeuvre .oeuvre-grid,
  .page-oeuvre-parallele .oeuvre-grid,
  .page[id^="page-oeuvre-par-"] .oeuvre-grid {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .page-oeuvre .oeuvre-visuel,
  .page-oeuvre .oeuvre-cartel,
  .page-oeuvre-parallele .oeuvre-visuel,
  .page-oeuvre-parallele .oeuvre-cartel-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-visuel,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
    flex: 0 0 auto !important;
  }

  .page-oeuvre .oeuvre-description,
  .page-oeuvre-parallele .oeuvre-description,
  .page[id^="page-oeuvre-par-"] .oeuvre-description {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .page-oeuvre:not(.page-oeuvre-parallele) .oeuvre-description {
    margin-top: -13px !important;
  }
}

@media (max-width: 600px) {
  .oeuvre-description-inner {
    padding-right: 35px;
    padding-left: 35px;
  }

  .oeuvre-description-inner p {
    font-size: 18px !important;
    line-height: 1.55;
  }
}

/* ============================================
   MOBILE / TABLETTE — cartel en cases fluides
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvre .cartel-inner,
  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 0 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .page-oeuvre:not(.page-oeuvre-parallele) .cartel-inner {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-inner-parallele {
    justify-content: center !important;
    text-align: left !important;
  }

  .page-oeuvre .cartel-data,
  .page-oeuvre-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele {
    display: contents !important;
  }

  .page-oeuvre .cartel-title,
  .page-oeuvre .cartel-data > span,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-data-parallele > span,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele > span {
    flex: 1 1 50% !important;
    min-width: 50% !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    min-height: 38px !important;
    padding: 8px 10px 7px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.86) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .page-oeuvre .cartel-title,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele {
    border-color: rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.86) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(12px, 3.3vw, 17px) !important;
    font-style: italic !important;
    font-weight: 300 !important;
  }

  .page-oeuvre .cartel-data > span,
  .page-oeuvre-parallele .cartel-data-parallele > span,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele > span {
    font-size: clamp(12px, 3.3vw, 17px) !important;
    font-weight: 300 !important;
  }

  .page-oeuvre .cartel-subtitle,
  .page-oeuvre-parallele .cartel-subtitle-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-subtitle-parallele {
    display: block !important;
    margin-top: 3px !important;
    color: inherit !important;
    font-size: 0.58em !important;
    line-height: 1.05 !important;
  }
}

@media (min-width: 700px) and (max-width: 1024px) {
  .page-oeuvre .cartel-title,
  .page-oeuvre .cartel-data > span,
  .page-oeuvre-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-data-parallele > span,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele > span {
    flex-basis: 33.3333% !important;
    min-width: 33.3333% !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — métadonnées image seulement en plein écran
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvre .carousel-photo-credit,
  .page-oeuvre .carousel-photo-caption,
  .page-oeuvre-parallele .carousel-photo-credit,
  .page-oeuvre-parallele .carousel-photo-caption,
  .page[id^="page-oeuvre-par-"] .carousel-photo-credit,
  .page[id^="page-oeuvre-par-"] .carousel-photo-caption {
    display: none !important;
  }

  .lq-lightbox {
    --lq-lightbox-meta-height: calc(68px + env(safe-area-inset-bottom));
    --lq-lightbox-nav-height: 58px;
    --lq-lightbox-nav-bottom: var(--lq-lightbox-meta-height);
    align-items: flex-start !important;
    padding: 62px 0 var(--lq-lightbox-meta-height) !important;
    background: rgba(0, 0, 0, 0.94) !important;
  }

  .lq-lightbox-frame {
    width: 100vw !important;
    height: calc(100dvh - 62px - var(--lq-lightbox-meta-height)) !important;
    min-height: 0 !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .lq-lightbox-img {
    object-fit: contain !important;
  }

  .lq-lightbox.has-multiple .lq-lightbox-btn {
    position: fixed !important;
    top: calc(50% - 3px) !important;
    bottom: auto !important;
    z-index: 7 !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    background: none !important;
    font-size: 32px !important;
    opacity: 0.6 !important;
  }

  .lq-lightbox.has-multiple .lq-lightbox-btn:hover,
  .lq-lightbox.has-multiple .lq-lightbox-btn:focus-visible {
    background: none !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  .lq-lightbox-prev {
    left: 1.25vw !important;
    right: auto !important;
  }

  .lq-lightbox-next {
    right: 1.25vw !important;
    left: auto !important;
  }

  .lq-lightbox-photo-credit,
  .lq-lightbox-caption {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.92) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
    font-weight: 300 !important;
    line-height: 1.25 !important;
    pointer-events: auto !important;
  }

  .lq-lightbox-photo-credit {
    bottom: env(safe-area-inset-bottom) !important;
    min-height: 22px !important;
    padding: 4px 12px 3px !important;
    text-align: right !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: clamp(9px, 2.25vw, 12px) !important;
  }

  .lq-lightbox-close {
    position: fixed !important;
    top: 62px !important;
    right: 0 !important;
    z-index: 9 !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-top: 0 !important;
    border-right: 0 !important;
    background: rgba(0, 0, 0, 0.86) !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — menu mobile plein écran
   ============================================ */

@media (max-width: 1024px) {
  #page-oeuvre-par-guide-off .oeuvre-visuel {
    width: 100% !important;
    padding: 0 !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #page-oeuvre-par-guide-off .oeuvre-visuel-parallele {
    align-items: center !important;
    justify-content: center !important;
  }

  #page-oeuvre-par-guide-off .oeuvre-visuel-parallele img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .page-oeuvre-parallele .oeuvre-cartel-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele {
    position: relative !important;
    bottom: 13px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-top: 1px solid #ffffff75 !important;
    border-bottom: 1px solid #ffffff75 !important;
    text-align: right !important;
    background: #000 !important;
  }

  .page-oeuvre-parallele .oeuvre-cartel-parallele::before,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele::before {
    content: none !important;
  }

  .page-oeuvre-parallele .oeuvre-cartel-parallele .cartel-inner-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele .cartel-inner-parallele {
    position: relative !important;
    z-index: 1 !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre-parallele .oeuvre-cartel-parallele .cartel-data-parallele,
  .page[id^="page-oeuvre-par-"] .oeuvre-cartel-parallele .cartel-data-parallele {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre-parallele .cartel-title-parallele,
  .page-oeuvre-parallele .cartel-data-parallele > span,
  .page[id^="page-oeuvre-par-"] .cartel-title-parallele,
  .page[id^="page-oeuvre-par-"] .cartel-data-parallele > span {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .page-oeuvre-parallele .oeuvre-description,
  .page[id^="page-oeuvre-par-"] .oeuvre-description {
    margin-top: -13px !important;
  }

  .page-oeuvre-parallele .carousel,
  .page[id^="page-oeuvre-par-"] .carousel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-oeuvre-parallele .carousel:not(.carousel-semballer) img,
  .page[id^="page-oeuvre-par-"] .carousel:not(.carousel-semballer) img {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 48px) !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
  }

  .mobile-nav-panel {
    inset: 62px 0 0 0 !important;
    z-index: 200000 !important;
    overflow: hidden !important;
    border-bottom: 0 !important;
  }

  .mobile-nav-panel-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav-panel-inner > a,
  .mobile-nav-panel-inner > .mobile-nav-group {
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  .mobile-nav-panel a,
  .mobile-nav-heading {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 clamp(18px, 7vw, 72px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34) !important;
    background: transparent !important;
    color: #fff !important;
    font: inherit !important;
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: clamp(21px, 3vw, 74px) !important;
    font-weight: 300 !important;
    line-height: 0.92 !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    appearance: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus-visible,
  .mobile-nav-heading:hover,
  .mobile-nav-heading:focus-visible {
    background: #fff !important;
    color: #000 !important;
    padding-left: clamp(18px, 7vw, 72px) !important;
  }

  .mobile-nav-panel a.active {
    display: flex !important;
  }

  .mobile-nav-panel .mobile-nav-home-link,
  .mobile-nav-panel .mobile-nav-current-link {
    flex: 0.5 1 0 !important;
    text-transform: none !important;
  }

  .mobile-nav-group {
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    transition: flex-grow 0.5s ease, flex-basis 0.5s ease !important;
  }

  .mobile-nav-group.is-open {
    flex: 3 1 0 !important;
  }

  .mobile-nav-group.is-open .mobile-nav-heading {
    flex: 1 1 0 !important;
    font-style: italic !important;
  }

  .mobile-nav-group .mobile-nav-heading {
    flex: 2 1 0 !important;
    position: relative;
    text-align: center !important;
  }

  .mobile-nav-group .mobile-nav-heading::after {
    content: "→";
    position: absolute;
    right: clamp(18px, 7vw, 72px);
    font-style: normal;
    font-weight: 300;
  }

  .mobile-nav-group.is-open .mobile-nav-heading::after {
    content: "↓";
  }

  .mobile-nav-submenu {
    display: flex;
    flex: 0.0001 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-18px);
    visibility: hidden;
    pointer-events: none;
    transition:
      flex-grow 0.5s ease,
      flex-basis 0.5s ease,
      opacity 0.5s ease,
      transform 0.5s ease,
      visibility 0s linear 0.5s;
  }

  .mobile-nav-group.is-open .mobile-nav-submenu {
    flex: 2.5 1 0;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      flex-grow 0.5s ease,
      flex-basis 0.5s ease,
      opacity 0.5s ease,
      transform 0.5s ease,
      visibility 0s linear 0s;
  }

  .mobile-nav-submenu a {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding-left: clamp(18px, 7vw, 72px) !important;
    font-size: clamp(21px, 3vw, 74px) !important;
    text-align: center !important;
    transform: translateY(-12px);
    opacity: 0;
    transition:
      opacity 0.5s ease,
      transform 0.5s ease,
      background 0.18s ease,
      color 0.18s ease,
      padding-left 0.18s ease !important;
  }

  .mobile-nav-group.is-open .mobile-nav-submenu a {
    transform: translateY(0);
    opacity: 1;
  }

  .mobile-nav-submenu a:hover,
  .mobile-nav-submenu a:focus-visible {
    padding-left: clamp(18px, 7vw, 72px) !important;
  }

  body.mobile-nav-open nav#main-nav {
    z-index: 300000 !important;
  }

  body.mobile-nav-open .mobile-nav-panel {
    z-index: 300001 !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — CV titre mobile actif
   ============================================ */

@media (max-width: 1024px) {
  #page-cv .cv-content {
    overflow: visible !important;
  }

  #page-cv .cv-section {
    position: relative !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: calc(clamp(46px, 7vh, 78px) + 84px) !important;
    overflow: visible !important;
    contain: none !important;
  }

  #page-cv .cv-section-title {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }

  #cv-mobile-sticky-title {
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    z-index: 5000;
    display: none;
    padding-top: 23px;
    padding-right: clamp(18px, 4vw, 42px);
    padding-bottom: 20px;
    padding-left: clamp(18px, 4vw, 42px);
    border-bottom: 1px solid white;
    background: rgba(0, 0, 0, 0.94);
    color: #fff800;
    font-family: "Sligoil Micro", "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 4.2vw, 34px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    pointer-events: none;
  }

  body.is-cv-section #cv-mobile-sticky-title {
    display: block;
  }

  body.mobile-nav-open #cv-mobile-sticky-title {
    display: none;
  }
}

@media (min-width: 1025px) {
  #cv-mobile-sticky-title {
    display: none !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — menu mobile au premier plan
   ============================================ */

@media (max-width: 1024px) {
  .mobile-nav-panel {
    z-index: 999999 !important;
  }

  .mobile-nav-panel-inner,
  .mobile-nav-panel a,
  .mobile-nav-heading,
  .mobile-nav-submenu {
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   VERROUILLAGE FINAL — pile œuvres personnelles
   cartel titre + année
   ============================================ */

@media (max-width: 1024px) {
  .page-oeuvres .oeuvres-list .lq-mobile-stack-media {
    margin-bottom: 0 !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-cartel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #000 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    border-left: 1px solid white;
    border-radius: 0 0 12px 12px;
    overflow: hidden !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-title,
  .page-oeuvres .oeuvres-list .lq-mobile-stack-details,
  .page-oeuvres .oeuvres-list .lq-mobile-stack-details > span {
    width: auto !important;
    min-width: 50% !important;
    max-width: none !important;
    min-height: 23px !important;
    margin: 0 !important;
    padding: 7px 10px 6px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.86) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-size: clamp(12px, 3vw, 17px) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    text-align: right !important;
    text-transform: none !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-title {
    flex: 1 1 36% !important;
    font-style: italic !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-details {
    flex: 0 0 auto !important;
    display: contents !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-details > span {
    flex: 1 1 50% !important;
    white-space: nowrap !important;
  }

  .page-oeuvres .oeuvres-list .lq-mobile-stack-details > span:nth-child(n + 2) {
    display: none !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — bouton info dans la nav mobile
   ============================================ */

@media (max-width: 1024px) {
  body.is-oeuvres-list-section .page-oeuvres {
    --lq-stack-top: 62px !important;
    top: 62px !important;
    scroll-padding-top: 62px !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list {
    padding-top: 62px !important;
    padding-bottom: calc(var(--lq-stack-bottom) + env(safe-area-inset-bottom)) !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    pointer-events: none;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card {
    top: calc(62px + var(--lq-stack-offset, 0vh)) !important;
    width: 85% !important;
    max-width: 85% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:last-child {
    margin-bottom: var(--lq-stack-gap) !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-media,
  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-cartel {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-media > .preview-media {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.is-oeuvres-list-section nav#main-nav .nav-mobile-current-title {
    margin-right: 62px !important;
  }

  body.is-oeuvres-list-section .oeuvres-info-btn {
    position: fixed !important;
    top: 0 !important;
    right: 62px !important;
    left: auto !important;
    z-index: 40050 !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
    background: #000 !important;
    color: red !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body.is-oeuvres-list-section .oeuvres-info-btn:hover,
  body.is-oeuvres-list-section .oeuvres-info-btn:focus-visible {
    background: #fff !important;
    color: #000 !important;
  }

  body.is-oeuvres-list-section .oeuvres-info-tooltip {
    top: 70px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
  }
}

.oeuvres-info-tooltip-close {
  display: none;
}

/* ============================================
   VERROUILLAGE FINAL — fenêtre info œuvres mobile
   ============================================ */

@media (max-width: 1024px) {
  body.is-oeuvres-list-section .oeuvres-info-btn:not(.is-tooltip-open) .oeuvres-info-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-oeuvres-list-section .oeuvres-info-btn.is-tooltip-open .oeuvres-info-tooltip {
    position: fixed !important;
    top: 74px !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 40060 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 56px 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 18px 0 18px 0 !important;
    background: rgba(0, 0, 0, 0.96) !important;
    color: #fff !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.7) !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: default !important;
  }

  body.is-oeuvres-list-section .oeuvres-info-tooltip-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open .oeuvres-info-btn .oeuvres-info-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================
   VERROUILLAGE FINAL — pile œuvres parallèles
   même rendu que les œuvres personnelles,
   avec textes alignés à gauche.
   ============================================ */

@media (max-width: 1024px) {
  body.is-paralleles-list-section .page-paralleles {
    --lq-stack-top: 62px !important;
    top: 37px !important;
    scroll-padding-top: 62px !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list {
    padding-top: 62px !important;
    padding-bottom: calc(var(--lq-stack-bottom) + env(safe-area-inset-bottom)) !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    pointer-events: none;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card {
    top: calc(62px + var(--lq-stack-offset, 0vh)) !important;
    width: 85% !important;
    max-width: 85% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:last-child {
    margin-bottom: var(--lq-stack-gap) !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-media,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-cartel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-media > .preview-media {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-media {
    margin-bottom: 0 !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-cartel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #000 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    border-left: 1px solid white;
    border-radius: 0 0 12px 12px;
    overflow: hidden !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-title,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-details,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-details > span {
    width: auto !important;
    min-width: 50% !important;
    max-width: none !important;
    min-height: 23px !important;
    margin: 0 !important;
    padding: 7px 10px 6px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.86) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: clamp(12px, 3vw, 17px) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    text-align: left !important;
    text-transform: none !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-title {
    flex: 1 1 36% !important;
    font-style: italic !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-details {
    flex: 0 0 auto !important;
    display: contents !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-details > span {
    flex: 1 1 50% !important;
    white-space: nowrap !important;
  }

  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-details > span:nth-child(n + 2) {
    display: none !important;
  }

  body.is-paralleles-list-section nav#main-nav .nav-mobile-current-title {
    margin-right: 62px !important;
  }

  body.is-paralleles-list-section .oeuvres-info-btn-parallele {
    position: fixed !important;
    top: 0 !important;
    right: 62px !important;
    left: auto !important;
    z-index: 40050 !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid #fff !important;
    border-left: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
    background: #000 !important;
    color: red !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  body.is-paralleles-list-section .oeuvres-info-btn-parallele:hover,
  body.is-paralleles-list-section .oeuvres-info-btn-parallele:focus-visible {
    background: #fff !important;
    color: #000 !important;
  }

  body.is-paralleles-list-section .oeuvres-info-btn-parallele:not(.is-tooltip-open) .oeuvres-info-tooltip-parallele {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.is-paralleles-list-section .oeuvres-info-btn-parallele.is-tooltip-open .oeuvres-info-tooltip-parallele {
    position: fixed !important;
    top: 74px !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 40060 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 56px 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 18px 0 18px 0 !important;
    background: rgba(0, 0, 0, 0.96) !important;
    color: #fff !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.7) !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: default !important;
  }

  body.is-paralleles-list-section .oeuvres-info-tooltip-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.66) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  body.mobile-nav-open .oeuvres-info-btn-parallele .oeuvres-info-tooltip-parallele {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — deux piles sticky
   impaires en haut, paires en bas.
   ============================================ */

@media (max-width: 1024px) {
  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card {
    top: auto !important;
    bottom: auto !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(odd),
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(odd) {
    margin-bottom: 80vh !important;
    margin-bottom: 80dvh !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(even),
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(even) {
    margin-bottom: 40vh !important;
    margin-bottom: 40dvh !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(2),
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(2) {
    margin-bottom: 60vh !important;
    margin-bottom: 60dvh !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:first-child,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:first-child {
    margin-bottom: 0 !important;
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(odd),
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(odd) {
    top: 99px !important;
    bottom: auto !important;
    z-index: var(--lq-stack-index);
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(even),
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(even) {
    top: var(--lq-even-sticky-top, 50vh) !important;
    bottom: auto !important;
    z-index: calc(var(--lq-stack-index) + 100);
  }

  body.is-oeuvres-list-section .page-oeuvres .oeuvres-list .lq-mobile-stack-card:nth-child(even) .lq-mobile-stack-media,
  body.is-paralleles-list-section .page-paralleles .paralleles-list .lq-mobile-stack-card:nth-child(even) .lq-mobile-stack-media {
    box-shadow: 3px 1px 139px 40px rgb(0 0 0 / 75%), 0 200px 40px 40px rgb(0 0 0 / 0%) !important;
  }

  body.is-oeuvres-list-section::after,
  body.is-paralleles-list-section::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 39000;
    height: 40vh;
    height: 11dvh;
    pointer-events: none;
    background:
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.92) 24%,
        rgba(0, 0, 0, 0.66) 52%,
        rgba(0, 0, 0, 0.28) 78%,
        rgba(0, 0, 0, 0) 100%
      );
  }

  body.mobile-nav-open::after,
  body.is-oeuvre-section::after,
  body.is-parallele-section::after,
  body.is-medias-section::after,
  body.is-cv-section::after {
    content: none !important;
  }
}

/* ============================================
   MOBILE / TABLETTE — accueil en trois Vimeo
   ============================================ */

@media (max-width: 1024px) {
  body.show-bg-video #bg-video-global {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .page-home .bg-overlay,
  .page-home .cartel,
  .page-home .detachement-home-hotspots {
    display: none !important;
  }

  .page-home .home-mobile-vimeo-stack {
    --lq-home-mobile-video-area: calc(100dvh - 62px - var(--lq-mobile-audio-offset, 0px));
    position: fixed;
    top: 62px;
    right: 0;
    bottom: var(--lq-mobile-audio-offset, 0px);
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    width: 100vw;
    height: var(--lq-home-mobile-video-area);
    padding: 0;
    margin: 0;
    gap: 0;
    overflow: hidden;
    background: #000;
  }

  .page-home .home-mobile-vimeo-slot {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .page-home .home-mobile-vimeo-slot iframe,
  .page-home .home-mobile-r2-slot video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100vw, calc((var(--lq-home-mobile-video-area) / 3) * 1.7777778));
    height: max(calc(100vw * 0.5625), calc(var(--lq-home-mobile-video-area) / 3));
    transform: translate(-50%, -50%);
    display: block;
    border: 0;
    object-fit: cover;
    pointer-events: none;
  }

  .page-home .home-mobile-r2-slot.is-top video {
    object-position: center top;
  }

  .page-home .home-mobile-r2-slot.is-middle video {
    object-position: center center;
  }

  .page-home .home-mobile-r2-slot.is-bottom video {
    object-position: center bottom;
  }

  .page-home .home-mobile-video-label {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    max-width: min(64vw, 360px);
    padding: 4px 8px 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.58);
    border-left: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(0, 0, 0, 0.58);
    color: rgba(255, 255, 255, 0.86);
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 2.4vw, 13px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: right;
    pointer-events: none;
  }

  .page-home .home-mobile-video-title {
    font-style: italic;
  }

  .page-home .home-mobile-video-year {
    font-style: normal;
  }
}

/* Détachement : navigation annuelle simplifiée sur mobile et tablette. */
@media (max-width: 1024px) {
  #page-oeuvre-detachement .detachement-nav-cluster {
    display: none !important;
  }

  #page-oeuvre-detachement .detachement-mobile-year-nav {
    position: relative;
    order: 3;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: 48px;
    margin: -13px 0 0;
    padding: 0;
    gap: 0;
    background: #000;
  }

  #page-oeuvre-detachement .detachement-mobile-year-btn {
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 clamp(14px, 4vw, 32px);
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.46);
    border-bottom: 1px solid rgba(255, 255, 255, 0.46);
    background: #000;
    color: #fff;
    font-family: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(15px, 4vw, 22px);
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  #page-oeuvre-detachement .detachement-mobile-year-prev {
    border-right: 1px solid rgba(255, 255, 255, 0.46);
    text-align: left;
  }

  #page-oeuvre-detachement .detachement-mobile-year-next {
    text-align: right;
  }

  #page-oeuvre-detachement .detachement-mobile-year-btn:active,
  #page-oeuvre-detachement .detachement-mobile-year-btn:focus-visible {
    background: #fff;
    color: #000;
  }

  #page-oeuvre-detachement > .oeuvre-grid > .btn-interview {
    order: 4;
    width: 100%;
    min-height: 42px;
    margin: 0;
    border-top: 0;
  }

  #page-oeuvre-detachement .oeuvre-description {
    margin-top: 0 !important;
  }

  .oeuvre-description-inner .auteur {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 24px 0 0 auto !important;
    padding: 4px 10px !important;
    box-sizing: border-box;
  }
}

/* CV : légende lisible et interactive dans la visionneuse mobile. */
@media (max-width: 1024px) {
  .cv-gallery-lightbox {
    --cv-lightbox-caption-space: clamp(96px, 18dvh, 160px);
  }

  .cv-gallery-lightbox.has-caption {
    box-sizing: border-box;
    padding-bottom: var(--cv-lightbox-caption-space);
  }

  .cv-gallery-lightbox.has-caption #cv-gallery-lightbox-image {
    max-width: 100vw;
    max-height: calc(100dvh - var(--cv-lightbox-caption-space));
  }

  .cv-gallery-lightbox-caption {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40005;
    width: 100%;
    max-height: var(--cv-lightbox-caption-space);
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.62);
    background: rgba(0, 0, 0, 0.96);
    color: #fff;
    font-size: clamp(14px, 3.8vw, 18px);
    font-weight: 300;
    line-height: 1.42;
    text-align: left;
    pointer-events: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .cv-gallery-lightbox-caption a {
    position: relative;
    z-index: 1;
    display: inline;
    padding: 4px 2px;
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 0, 0.3);
  }

  .cv-gallery-lightbox-caption a:active,
  .cv-gallery-lightbox-caption a:focus-visible {
    color: #fff800;
  }

  .cv-gallery-lightbox-photo-credit {
    top: 68px;
    right: 12px;
    bottom: auto;
    z-index: 40004;
    max-width: calc(100vw - 76px);
    padding: 4px 7px;
    font-size: clamp(10px, 2.5vw, 12px);
  }
}

/* Architecture Intime : titre court dans le cartel mobile uniquement. */
@media (max-width: 1024px) {
  #page-oeuvre-par-architecture-intime .cartel-title-parallele {
    font-size: 0 !important;
  }

  #page-oeuvre-par-architecture-intime .cartel-title-parallele::before {
    content: "Architecture Intime";
    font-size: clamp(12px, 3.3vw, 17px);
    line-height: 1.05;
  }

  #page-oeuvre-par-architecture-intime .cartel-subtitle-parallele {
    display: none !important;
  }
}

/* Œuvres : plein écran mobile sans navigation de page, légende tactile en bas. */
@media (max-width: 1024px) {
  body.lightbox-open .page-oeuvre .oeuvre-side-nav,
  body.lightbox-open .page-oeuvre-parallele .cartel-nav-btns-parallele,
  body.lightbox-open .page[id^="page-oeuvre-par-"] .cartel-nav-btns-parallele {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .lq-lightbox.has-caption {
    --lq-lightbox-meta-height: clamp(96px, 18dvh, 160px);
  }

  .lq-lightbox-caption {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 30005 !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: var(--lq-lightbox-meta-height) !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.62) !important;
    background: rgba(0, 0, 0, 0.96) !important;
    color: #fff !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    font-weight: 300 !important;
    line-height: 1.42 !important;
    text-align: left !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .lq-lightbox-caption a {
    position: relative;
    z-index: 1;
    display: inline;
    padding: 4px 2px;
    color: #fff !important;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 0, 0.3);
  }

  .lq-lightbox-caption a:active,
  .lq-lightbox-caption a:focus-visible {
    color: #fff800 !important;
  }

  .lq-lightbox-photo-credit {
    top: 68px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 30004 !important;
    width: auto !important;
    max-width: calc(100vw - 76px) !important;
    min-height: 0 !important;
    padding: 4px 7px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
  }
}