#opening-track {position:relative;--opening-run:108svh}
#opening-pin {position:relative}
#brand-intro {position:relative;isolation:isolate;overflow:hidden;min-height:520px;height:100svh;display:grid;place-items:center;background:#090e0d;color:#f1f4e9}
#brand-intro .opening-atmosphere:before {content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x,58%) var(--light-y,38%),#afc89113,transparent 51%),linear-gradient(0deg,#04080785,transparent 24%,transparent 78%,#04070688)}
.opening-scroll {z-index:2;position:absolute;display:flex;align-items:center;justify-content:center}
.opening-scroll {bottom:8.5%;right:var(--pad);gap:12px;font-size:13px}
.opening-arrow {border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-size:21px;color:#f2f4e9;background:linear-gradient(150deg,#e4efcf28,#e9fcdd09);border:1px solid #ebffe14f;backdrop-filter:blur(10px);box-shadow:inset 0 1px 2px #fff3;transition:transform .3s}
.opening-scroll:is(:hover,:focus-visible) .opening-arrow {transform:translateY(4px)}
body:has(#opening-track)>.topbar {position:absolute;z-index:5;top:0;left:0;right:0;background:linear-gradient(180deg,#090d0bca,transparent);border-bottom:0}
#opening-track.ready-intro {height:calc(100svh + var(--opening-run))}
.ready-intro #opening-pin {position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.ready-intro #hero {height:100%;min-height:0}
.ready-intro #brand-intro {position:absolute;inset:0;z-index:3;min-height:0;height:100%;background:transparent}
.ready-intro #brand-intro.opened {visibility:hidden}
.ready-intro #brand-intro .opening-atmosphere {opacity:var(--opening-veil,1)}
.ready-intro .opening-scroll {opacity:var(--opening-label,1)}
#a-laffiche {position:absolute;bottom:100svh;left:0;pointer-events:none}
@media(max-width:680px) {
  #opening-track {--opening-run:91svh}
  .opening-scroll {bottom:9%;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce) {
  #opening-track {--opening-run:36svh}
  #brand-intro .opening-atmosphere {transform:none;will-change:auto}
}
#brand-intro .opening-atmosphere {position:absolute;z-index:-1;inset:-1%;background:radial-gradient(ellipse at 48% 47%,#303735 0%,#222925 31%,#131916 66%,#0b100e 98%);transform:none;will-change:opacity}
#brand-intro .opening-atmosphere::before {background:radial-gradient(ellipse at var(--light-x,54%) var(--light-y,40%),#c9d1c608,transparent 44%)}
#opening-pin {background:#101412}
@media(prefers-reduced-motion:reduce) {
  .ready-intro #hero {transform:none;will-change:auto}
}
#opening-track {--opening-run:83svh}
.opening-project {position:absolute;z-index:2;bottom:8%;left:var(--pad);display:grid;justify-items:start;gap:11px;opacity:var(--opening-label,1)}
.opening-proof {display:block;color:#c6d0c5;font:510 10px/1.5 var(--micro);letter-spacing:.06em;text-transform:uppercase}
.opening-proof i {color:#b9cf84;font-style:normal;margin-inline:4px}
.opening-proof b {color:#e4e9df;font-weight:660}
.opening-play {display:inline-flex;align-items:center;gap:11px;padding:11px 17px;font-size:13px;font-weight:600}
@media(max-width:680px) {
 #opening-track {--opening-run:72svh}
 .opening-project {left:18px;bottom:7%;gap:8px}
 .opening-proof {font-size:8px;letter-spacing:.02em}
 .opening-play {font-size:11px;padding:10px 12px}
 .opening-scroll {left:auto;right:17px;bottom:7%;transform:none;font-size:10px;gap:5px}
 .opening-arrow {width:29px;height:29px;font-size:16px}
}
@media(prefers-reduced-motion:reduce) {#opening-track {--opening-run:36svh}}
/* Both sides of the opening use the same playing shot, so the scroll never cuts the trailer. */
.ready-intro #hero {transform:none}
.ready-intro #hero .hero-shell {opacity:var(--opening-content,0)}
.ready-intro #brand-intro .opening-atmosphere {background:linear-gradient(0deg,#08100de5,transparent 31%,#0e171126 66%,#060c0a9c),radial-gradient(ellipse at 50% 51%,#0e171021 20%,#0c140e77 90%)}
#hero-picture.trailer-feature #hero-loop {object-position:center;transition:opacity .32s}
#hero-picture.trailer-feature #hero-img {object-position:50% 49%}

.ready-intro #hero .shade {opacity:calc(.12 + .88 * var(--opening-content,0))}
#hero-picture.trailer-feature #hero-loop {filter:brightness(calc(1.12 - .12 * var(--opening-content,0)))}
.opening-project {grid-template-columns:auto auto;justify-content:start;column-gap:8px;align-items:center}
.opening-proof {grid-column:1/-1}
.opening-pause {display:grid;place-items:center;border-radius:50%;width:34px;height:34px;font:600 13px/1 Geist,Arial,sans-serif}
.opening-pause[hidden] {display:none}
@media(max-width:390px) {.opening-pause {width:28px;height:28px}.opening-project {column-gap:5px}}

.opening-tools .tools-short { display: none; }
@media (max-width: 480px) {
  #haut.topbar { padding-inline: clamp(10px, 3.5vw, 17px); gap: 6px; }
  #haut .logo { font-size: clamp(19px, 5.5vw, 25px); }
  #haut .brandicon { width: 17px; margin-right: 7px; }
  #haut .opening-tools { padding-inline: 10px; }
  #haut .opening-tools .tools-full { display: none; }
  #haut .opening-tools .tools-short { display: inline; }
  #haut .contact-top { gap: 6px; padding-inline: 11px; white-space: nowrap; }
}
@media (max-width: 360px) {
  #haut.topbar { gap: 3px; }
  #haut .brandicon { display: none; }
}