/* ===========================================================================
   TEC'OFFICE M08 — feuille des scenes de la page REALISATIONS
   Les classes ci-dessous (.rl-on, .rl-pas, .rl-regle, .rl-bande-cote,
   .rl-mires...) ne sont posees QUE par scenes-realisations.js, sur grand ecran
   et seulement quand GSAP est la. Sans lui (mouvement reduit, librairie
   absente) la page garde sa mise en page de base, entierement visible.
   Aucune regle ici ne cache un contenu.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   PILE — un grand cadre colle a l'ecran, les photos s'y empilent au defilement,
   le texte defile a cote, etape par etape.
   --------------------------------------------------------------------------- */
.rl-us--pile.rl-on .rl-us-grid { align-items: start; }
.rl-us--pile.rl-on .rl-us-med {
  display: block;
  position: sticky;
  top: calc(var(--rl-hdr, 84px) + 2.4vh);
  height: calc(100vh - var(--rl-hdr, 84px) - 4.8vh);
  border-radius: 6px;
  overflow: hidden;
  background: var(--dark);
  /* le cadre deborde de la grille jusqu'a 20 px du bord de l'ecran : la photo en grand */
  margin-right: calc(20px - var(--rl-bord, 0px));
}
.rl-us--pile.rl-us--g.rl-on .rl-us-med { margin-right: 0; margin-left: calc(20px - var(--rl-bord, 0px)); }
/* isolation : chaque photo garde son voile sombre pour elle. Sans cela le voile
   de la premiere photo (z-index 2) passait au-dessus de toute la pile. */
.rl-us--pile.rl-on .rl-us-med > .rl-ph { position: absolute; inset: 0; isolation: isolate; }
.rl-us--pile.rl-on .rl-us-med > .rl-ph .rl-ouvrir { height: 100%; border-radius: 0; background: var(--dark); }
.rl-us--pile.rl-on .rl-us-med > .rl-ph img { height: 100%; aspect-ratio: auto; }
.rl-us--pile.rl-on .rl-us-med > .rl-ph figcaption {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rl-us--pile.rl-on .rl-ouvrir::after { right: auto; left: 14px; bottom: 14px; }
/* le cadre coupe ce qui depasse : l'anneau de focus clavier passe a l'interieur */
.rl-us--pile.rl-on .rl-ouvrir:focus-visible,
.rl-us--grandit.rl-on .rl-ph--grow .rl-ouvrir:focus-visible { outline: 3px solid #fff; outline-offset: -9px; }
.rl-voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #0b0a08; opacity: 0;
}
.rl-cadre-cpt, .rl-cadre-fig {
  position: absolute; top: 14px; z-index: 6; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(12, 11, 9, .72); padding: 6px 10px 5px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.rl-cadre-cpt { right: 14px; }
.rl-cadre-cpt b { display: inline-block; font-weight: 500; }
.rl-cadre-fig { left: 14px; }
.rl-regle {
  position: absolute; z-index: 6; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px; pointer-events: none;
}
.rl-us--g .rl-regle { right: auto; left: 14px; align-items: flex-start; }
.rl-regle i {
  display: block; width: 12px; height: 2px; background: rgba(255, 255, 255, .45);
  transition: width .35s cubic-bezier(.23, 1, .32, 1), background-color .35s ease;
}
.rl-regle i.on { width: 30px; background: #fff; }

.rl-pas { list-style: none; margin: clamp(46px, 7vh, 80px) 0 0; padding: 0; }
.rl-pas-i {
  min-height: 44vh; display: flex; flex-direction: column; justify-content: center;
  padding: 26px 0; border-top: 1px solid var(--line2);
}
.rl-pas-i:last-child { min-height: 62vh; }
.rl-pas-no {
  font-family: var(--disp); font-weight: 900; font-size: clamp(64px, 6.4vw, 104px);
  line-height: .84; letter-spacing: -.05em; color: var(--line);
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}
.rl-pas-no i {
  font-style: normal; font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: .14em; color: #696862; margin-left: 10px; vertical-align: top;
}
.rl-pas-fig {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #696862;
}
.rl-pas-fig::after {
  content: ''; height: 1px; width: 0; background: var(--ink);
  transition: width .5s cubic-bezier(.23, 1, .32, 1);
}
.rl-pas-t {
  margin-top: 10px; font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.015em; line-height: 1.1; color: var(--ghost);
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}
.rl-pas-l {
  margin-top: 8px; max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--ghost);
  transition: color .4s cubic-bezier(.23, 1, .32, 1);
}
.rl-pas-i.on .rl-pas-no { color: var(--ink); }
.rl-pas-i.on .rl-pas-t { color: var(--ink); }
.rl-pas-i.on .rl-pas-l { color: var(--ink2); }
.rl-pas-i.on .rl-pas-fig::after { width: 64px; }

/* ---------------------------------------------------------------------------
   BANDE — la section s'arrete, les photos defilent a l'horizontale.
   --------------------------------------------------------------------------- */
.rl-us--bande.rl-on .wrap {
  max-width: none; padding: 0; position: relative; overflow: hidden;
  height: calc(100vh - var(--rl-hdr, 84px));
  display: flex; align-items: center;
}
.rl-us--bande.rl-on .rl-us-grid {
  display: flex; flex-wrap: nowrap; align-items: center; width: max-content;
  gap: clamp(26px, 2.6vw, 46px); padding: 0 var(--rl-bord) clamp(30px, 5vh, 52px);
  will-change: transform;
}
.rl-us--bande.rl-on .rl-us-txt { flex: 0 0 clamp(380px, 31vw, 500px); }
.rl-us--bande.rl-on .rl-us-med { display: contents; }
.rl-us--bande.rl-on .rl-ph {
  flex: 0 0 auto;
  height: min(72vh, calc(100vh - var(--rl-hdr, 84px) - 150px));
  aspect-ratio: 3 / 4;
}
.rl-us--bande.rl-on .rl-ph .rl-ouvrir { height: 100%; }
.rl-us--bande.rl-on .rl-ph img,
.rl-us--bande.rl-on .rl-us-med > .rl-ph:first-child img { height: 100%; aspect-ratio: auto; }
.rl-us--bande.rl-on .rl-ph figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 60px 16px 14px;
  color: #fff; pointer-events: none; border-radius: 0 0 6px 6px;
  background: linear-gradient(to top, rgba(11, 10, 8, .88), rgba(11, 10, 8, 0));
}
.rl-us--bande.rl-on .rl-ph figcaption em,
.rl-us--bande.rl-on .rl-ph figcaption b { color: #fff; }
.rl-us--bande.rl-on .rl-ph figcaption span { color: rgba(255, 255, 255, .78); }
.rl-us--bande.rl-on .rl-ouvrir::after { bottom: auto; top: 10px; }
.rl-bande-cote {
  position: absolute; left: var(--rl-bord); right: var(--rl-bord); bottom: clamp(14px, 2.4vh, 26px);
  display: flex; align-items: center; gap: 16px; pointer-events: none;
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #696862;
}
.rl-bande-cote i { position: relative; flex: 1; height: 1px; background: var(--line2); }
.rl-bande-cote i::before, .rl-bande-cote i::after {
  content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ink2);
}
.rl-bande-cote i::before { left: 0; }
.rl-bande-cote i::after { right: 0; }
.rl-bande-cote b { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0); }

/* ---------------------------------------------------------------------------
   GRANDIT — une photo encadree au centre qui s'ouvre jusqu'a remplir l'ecran.
   --------------------------------------------------------------------------- */
.rl-us--grandit.rl-on .rl-grow {
  max-width: none; padding: 0; position: relative; overflow: hidden;
  height: calc(100vh - var(--rl-hdr, 84px));
}
.rl-us--grandit.rl-on .rl-ph--grow { position: absolute; inset: 0; }
.rl-us--grandit.rl-on .rl-ph--grow .rl-ouvrir { height: 100%; border-radius: 0; }
.rl-us--grandit.rl-on .rl-ph--grow img { height: 100%; aspect-ratio: auto; }
.rl-us--grandit.rl-on .rl-ph--grow .rl-ouvrir::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 10, 8, .82) 0, rgba(11, 10, 8, .4) 150px, rgba(11, 10, 8, 0) 34%);
}
.rl-us--grandit.rl-on .rl-ph--grow figcaption {
  position: absolute; left: var(--rl-bord); right: var(--rl-bord); bottom: clamp(22px, 4vh, 40px); z-index: 3;
  padding: 0; color: #fff; pointer-events: none; font-size: 15px;
}
.rl-us--grandit.rl-on .rl-ph--grow figcaption em,
.rl-us--grandit.rl-on .rl-ph--grow figcaption b { color: #fff; }
.rl-us--grandit.rl-on .rl-ph--grow figcaption b {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.02em; line-height: 1.05;
}
.rl-us--grandit.rl-on .rl-ph--grow figcaption span { color: rgba(255, 255, 255, .8); }
.rl-mires { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rl-mires i { position: absolute; width: 26px; height: 26px; border-color: var(--ink); border-style: solid; border-width: 0; }
.rl-mires i:nth-child(1) { left: calc(27% - 14px); top: calc(15% - 14px); border-left-width: 1px; border-top-width: 1px; }
.rl-mires i:nth-child(2) { right: calc(27% - 14px); top: calc(15% - 14px); border-right-width: 1px; border-top-width: 1px; }
.rl-mires i:nth-child(3) { right: calc(27% - 14px); bottom: calc(15% - 14px); border-right-width: 1px; border-bottom-width: 1px; }
.rl-mires i:nth-child(4) { left: calc(27% - 14px); bottom: calc(15% - 14px); border-left-width: 1px; border-bottom-width: 1px; }
.rl-mires b {
  position: absolute; left: 27%; right: 27%; top: calc(15% - 30px); display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #696862;
}
.rl-mires b::before, .rl-mires b::after { content: ''; flex: 1; height: 1px; background: var(--line2); }