/* =========================================================
   SCÈNE « IMAGE QUI S'OUVRE »
   Inspirée d'offform.net (section Services), réécrite.
   Tout se règle par les variables ci-dessous.
   ========================================================= */
.ouv {
  --ouv-bg: #0b0b0b;
  --ouv-fg: #ffffff;

  /* Ouverture de la grande image */
  --ouv-hold: 35vh;            /* image fermée avant l'ouverture */
  --ouv-split: 120vh;          /* durée (en défilement) de l'ouverture */
  --ouv-edge-visible: 250px;   /* ce qui reste visible de chaque côté une fois ouverte */
  --ouv-side-gap: 20px;
  --ouv-bottom-gap: 20px;
  --ouv-header-gap: 20px;      /* espace sous l'en-tête fixe éventuel */
  --ouv-entry-parallax: 45px;  /* profondeur à l'entrée */
  --ouv-exit-parallax: 45px;   /* profondeur à la sortie */
  --ouv-top: 20px;             /* calculé par le script */

  /* Petite image centrale et textes */
  --ouv-thumb-start: 0.50;     /* la petite image se dévoile à partir de 50 % de l'ouverture */
  --ouv-text-delay: 30vh;      /* pause avant les textes */
  --ouv-item: 125vh;           /* défilement accordé à chaque bloc de texte */
  --ouv-exit-close: 120vh;     /* durée de la fermeture finale */
  --ouv-count: 3;              /* nombre de blocs (mis à jour par le script) */

  --ouv-thumb-w: 150px;
  --ouv-thumb-h: 200px;
  --ouv-label-gap: 15px;
  --ouv-label-size: 10px;
  --ouv-label-weight: 500;
  --ouv-swap: 30vh;            /* fondu entre deux petites images */

  --ouv-title-size: 10px;
  --ouv-title-weight: 500;
  --ouv-copy-size: 11px;
  --ouv-copy-line: 1.5;
  --ouv-title-copy-gap: 50px;

  --ouv-clearance: 35px;       /* marge des textes autour de la petite image */
  --ouv-avoid: 100px;          /* distance d'écartement progressif des lignes */
  --ouv-word-gap: 0.25em;

  --ouv-font-title: "Courier New", Courier, monospace;
  --ouv-font-copy: "IBM Plex Mono", "Courier New", monospace;

  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ouv-fg);
  background: var(--ouv-bg);
}

.ouv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Longueur totale de défilement de la scène */
.ouv-shell {
  position: relative;
  width: 100%;
  height: calc(
    100vh + var(--ouv-hold) + var(--ouv-split) + var(--ouv-text-delay) +
    (var(--ouv-item) * var(--ouv-count)) + var(--ouv-exit-close)
  );
}

/* Scène épinglée pendant toute la séquence */
.ouv-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--ouv-bg);
}

/* Grande image, en deux moitiés */
.ouv-frame {
  position: absolute;
  left: var(--ouv-side-gap);
  right: var(--ouv-side-gap);
  top: var(--ouv-top);
  bottom: var(--ouv-bottom-gap);
  overflow: hidden;
  z-index: 20;
}
.ouv-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.ouv-half--left { left: 0; }
.ouv-half--right { right: 0; }
.ouv-half img {
  position: absolute;
  top: calc(var(--ouv-entry-parallax) * -1);
  display: block;
  width: 200%;
  height: calc(100% + var(--ouv-entry-parallax) * 2);
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.ouv-half--left img { left: 0; }
.ouv-half--right img { right: 0; }

/* Couche des textes et de la petite image */
.ouv-flow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 30;
  pointer-events: none;
}
.ouv-label {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--ouv-thumb-h) / 2 - var(--ouv-label-gap));
  margin: 0;
  font-family: var(--ouv-font-title);
  font-size: var(--ouv-label-size);
  font-weight: var(--ouv-label-weight);
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(-50%, -100%, 0);
  z-index: 6;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.ouv-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ouv-thumb-w);
  height: var(--ouv-thumb-h);
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
  z-index: 5;
  pointer-events: auto;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, transform;
}
.ouv-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.ouv-thumb img:first-child { opacity: 1; }
.ouv-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

/* Blocs de texte */
.ouv-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ouv-title {
  position: absolute;
  left: 50%;
  top: 200vh;
  width: max-content;
  margin: 0;
  font-family: var(--ouv-font-title);
  font-size: var(--ouv-title-size);
  font-weight: var(--ouv-title-weight);
  line-height: 1.4;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
  will-change: top;
}
.ouv-copy {
  position: absolute;
  left: 0;
  top: 200vh;
  width: 100%;
  margin: 0;
  font-family: var(--ouv-font-copy);
  font-size: var(--ouv-copy-size);
  font-weight: 400;
  line-height: var(--ouv-copy-line);
  letter-spacing: -0.015em;
  z-index: 7;
  will-change: top;
}

/* Une ligne = deux moitiés qui s'écartent autour de la petite image */
.ouv-line {
  --left-shift: 0px;
  --right-shift: 0px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: max-content;
  margin: 0 auto;
  white-space: nowrap;
}
.ouv-title.ouv-line { position: absolute; margin: 0; }
.ouv-part { display: inline-block; will-change: transform; }
.ouv-part--left {
  text-align: right;
  padding-right: var(--ouv-word-gap);
  transform: translate3d(calc(-1 * var(--left-shift)), 0, 0);
}
.ouv-part--right {
  text-align: left;
  padding-left: var(--ouv-word-gap);
  transform: translate3d(var(--right-shift), 0, 0);
}
.ouv-title .ouv-part--left { padding-right: 0; }
.ouv-title .ouv-part--right { padding-left: 0; }

/* Tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  .ouv {
    --ouv-title-copy-gap: 28px;
    --ouv-side-gap: 16px;
    --ouv-edge-visible: 20px;
    --ouv-thumb-w: 120px;
    --ouv-thumb-h: 160px;
    --ouv-clearance: 25px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .ouv {
    --ouv-hold: 25vh;
    --ouv-split: 90vh;
    --ouv-edge-visible: 15px;
    --ouv-entry-parallax: 30px;
    --ouv-exit-parallax: 30px;
    --ouv-thumb-start: 0.58;
    --ouv-text-delay: 24vh;
    --ouv-item: 120vh;
    --ouv-exit-close: 90vh;
    --ouv-thumb-w: 120px;
    --ouv-thumb-h: 160px;
    --ouv-label-size: 9px;
    --ouv-swap: 24vh;
    --ouv-copy-size: 9px;
    --ouv-title-copy-gap: 28px;
    --ouv-clearance: 24px;
    --ouv-avoid: 90px;
    --ouv-word-gap: 0.2em;
  }
  /* Lignes plus courtes, centrées, qui passent sous la petite image */
  .ouv-copy {
    left: 50%;
    width: min(82vw, 330px);
    transform: translateX(-50%);
    text-align: center;
    z-index: 4;
  }
  .ouv-copy .ouv-line {
    display: block;
    width: 100%;
    margin-inline: 0;
    text-align: center;
  }
  .ouv-copy .ouv-part { display: inline; }
  .ouv-copy .ouv-part--left,
  .ouv-copy .ouv-part--right { padding: 0; }

  /* Grande image plein écran */
  .ouv-frame { left: 0; right: 0; top: 0; bottom: 0; }
  .ouv-half, .ouv-half img { backface-visibility: hidden; }
  .ouv-half { transform: translate3d(0, 0, 0); }
  .ouv-flow, .ouv-thumb, .ouv-label {
    backface-visibility: hidden;
    will-change: clip-path, transform;
  }
  /* Épinglage mobile géré par le script (évite les sauts de la barre d'adresse) */
  .ouv-stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
  }
  .ouv-stage.is-pinned {
    position: fixed;
    z-index: 50;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .ouv-half, .ouv-half img, .ouv-part { transform: none !important; }
}