/*
  Animation d'entrée « La clé de l'impossible »
  Durée normale : 5 secondes. Aucun service externe requis.
*/

.vault-intro {
  --vault-gold-1: #fff1aa;
  --vault-gold-2: #efc35e;
  --vault-gold-3: #b7781e;
  --vault-deep: #01060c;
  --vault-blue: #061a2c;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #fff7da;
  pointer-events: all;
  touch-action: none;
  opacity: 1;
  visibility: visible;
  background: transparent;
  animation: vault-intro-failsafe 0.01s linear 6s forwards;
}

.vault-intro[hidden] { display: none !important; }

.vault-intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.22,.8,.24,1), visibility 0s linear .7s;
}

@keyframes vault-intro-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.vault-intro__veil,
.vault-intro__atmosphere,
.vault-intro__rays,
.vault-intro__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vault-intro__veil { z-index: -4; }

.vault-intro__mask-hole {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.01);
}

.vault-intro.is-running .vault-intro__mask-hole {
  animation: vault-mask-reveal 2.12s cubic-bezier(.2,.82,.16,1) 2.58s forwards;
}

@keyframes vault-mask-reveal {
  0% { transform: scale(.01); }
  38% { transform: scale(.72); }
  100% { transform: scale(4.6); }
}

.vault-intro__atmosphere {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 226, 130, .08) 0 10%, transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(17, 61, 94, .5), transparent 56%),
    linear-gradient(180deg, rgba(1, 8, 15, .25), rgba(1, 5, 10, .86));
}

.vault-intro.is-running .vault-intro__atmosphere {
  animation: vault-atmosphere-out 1.4s ease 3.25s forwards;
}

@keyframes vault-atmosphere-out {
  to { opacity: .12; }
}

.vault-intro__grain {
  z-index: -2;
  opacity: .18;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.vault-intro__rays {
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(120vmax, 1500px);
  height: min(120vmax, 1500px);
  transform: translate(-50%, -50%) scale(.25) rotate(0deg);
  opacity: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 4deg,
    rgba(255, 219, 111, .24) 0 2deg,
    transparent 2deg 12deg
  );
  filter: blur(8px);
  -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 65%);
  mask-image: radial-gradient(circle, #000 0 20%, transparent 65%);
}

.vault-intro.is-running .vault-intro__rays {
  animation: vault-rays 2.1s cubic-bezier(.2,.8,.2,1) 2.25s forwards;
}

@keyframes vault-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
  35% { opacity: .68; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(14deg); }
}

.vault-intro__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1800px;
}

.vault-intro__brand {
  position: absolute;
  z-index: 50;
  top: clamp(1rem, 4.2vh, 3.2rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 1.6vw, 1rem);
  width: min(92vw, 760px);
  transform: translate(-50%, -18px);
  opacity: 0;
  text-align: left;
  text-shadow: 0 3px 24px rgba(0,0,0,.85);
}

.vault-intro.is-running .vault-intro__brand {
  animation: vault-brand-in .78s cubic-bezier(.2,.8,.2,1) .12s forwards,
             vault-brand-out .55s ease 4.05s forwards;
}

.vault-intro__brand-mark {
  flex: 0 0 auto;
  width: clamp(42px, 6vw, 68px);
  height: clamp(42px, 6vw, 68px);
  padding: .35rem;
  border: 1px solid rgba(241, 196, 88, .48);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,221,117,.18), rgba(4,16,29,.7));
  box-shadow: 0 0 0 6px rgba(226,182,84,.06), 0 0 35px rgba(226,182,84,.22);
}

.vault-intro__brand-mark img { width: 100%; height: 100%; }

.vault-intro__brand-title {
  display: block;
  margin: 0;
  color: var(--vault-gold-1);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .035em;
}

.vault-intro__brand-tag {
  display: block;
  margin-top: .3rem;
  color: rgba(255, 244, 209, .78);
  font-size: clamp(.62rem, 1.35vw, .9rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@keyframes vault-brand-in {
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes vault-brand-out {
  to { opacity: 0; transform: translate(-50%, -12px); }
}

.vault-intro__portal {
  position: relative;
  z-index: 10;
  height: min(70vh, 700px);
  height: min(70dvh, 700px);
  max-width: 88vw;
  aspect-ratio: 4 / 5;
  transform: translateY(2.4vh) scale(.93);
  opacity: 0;
  perspective: 1550px;
  filter: drop-shadow(0 34px 42px rgba(0,0,0,.78));
}

.vault-intro.is-running .vault-intro__portal {
  animation: vault-portal-in .72s cubic-bezier(.2,.82,.2,1) .22s forwards,
             vault-portal-away .72s ease 4.04s forwards;
}

@keyframes vault-portal-in {
  to { opacity: 1; transform: translateY(2.4vh) scale(1); }
}

@keyframes vault-portal-away {
  to { opacity: .1; transform: translateY(2.4vh) scale(1.08); filter: blur(3px) drop-shadow(0 34px 42px rgba(0,0,0,.3)); }
}

.vault-intro__frame {
  position: absolute;
  inset: 0;
  border-radius: 47% 47% 4% 4% / 15% 15% 3% 3%;
  background:
    linear-gradient(90deg, #6b3c14, #f6d478 13%, #94601f 30%, #fff0a5 50%, #8b561c 70%, #e5b84c 87%, #5a300f),
    #9b6726;
  box-shadow:
    0 0 0 2px rgba(255,240,170,.58),
    0 0 0 10px rgba(77,43,13,.92),
    0 0 0 12px rgba(237,191,81,.4),
    0 0 70px rgba(240,190,71,.2),
    inset 0 0 28px rgba(255,241,173,.45);
}

.vault-intro__frame::before,
.vault-intro__frame::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 15%;
  bottom: 3%;
  width: 7%;
  border: 1px solid rgba(255,239,172,.7);
  background:
    linear-gradient(90deg, #55300f, #d69e39 35%, #fff0a0 54%, #8b561c 78%, #3b1d08);
  box-shadow: inset 0 0 10px rgba(255,255,255,.22), 0 0 12px rgba(0,0,0,.65);
}

.vault-intro__frame::before { left: -4.2%; border-radius: 45% 0 0 12px; }
.vault-intro__frame::after { right: -4.2%; border-radius: 0 45% 12px 0; }

.vault-intro__arch-lines {
  position: absolute;
  z-index: 7;
  inset: 3.2% 4% auto;
  height: 26%;
  border: 2px solid rgba(255,240,169,.72);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 85% 85% 0 0;
  box-shadow: 0 0 0 5px rgba(64,35,10,.42), 0 0 0 7px rgba(232,183,71,.3);
}

.vault-intro__doorway {
  position: absolute;
  z-index: 10;
  inset: 7.4% 7.5% 4.8%;
  overflow: visible;
  border-radius: 46% 46% 1.5% 1.5% / 14% 14% 1.5% 1.5%;
  perspective: 1450px;
  background: radial-gradient(circle at 50% 38%, #fff9d7 0 2%, #f5c95d 9%, #266a91 25%, #071828 54%, #01070d 100%);
  box-shadow: inset 0 0 55px rgba(0,0,0,.78), 0 0 0 3px rgba(35,17,4,.85);
}

.vault-intro__portal-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .08;
  transform: scale(.55);
  background:
    radial-gradient(ellipse at center, rgba(255,255,235,1) 0 8%, rgba(255,210,87,.95) 18%, rgba(66,155,195,.55) 38%, transparent 69%);
  filter: blur(14px);
}

.vault-intro.is-running .vault-intro__portal-light {
  animation: vault-light-bloom 2.15s cubic-bezier(.18,.85,.2,1) 2.18s forwards;
}

@keyframes vault-light-bloom {
  0% { opacity: .08; transform: scale(.48); }
  48% { opacity: 1; transform: scale(1.05); }
  100% { opacity: .2; transform: scale(1.72); }
}

.vault-intro__doors {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform-style: preserve-3d;
}

.vault-intro__door {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 13% 83%, rgba(0,0,0,.28)),
    repeating-linear-gradient(86deg, rgba(255,223,157,.045) 0 2px, transparent 2px 18px),
    linear-gradient(115deg, #1c0d05 0%, #6b3616 22%, #35170a 43%, #7d451d 67%, #251006 100%);
  border: 1px solid rgba(245,204,106,.42);
  box-shadow: inset 0 0 30px rgba(0,0,0,.72), inset 0 0 0 5px rgba(29,12,4,.72);
}

.vault-intro__door--left {
  transform-origin: left center;
  border-radius: 43% 0 0 1% / 13% 0 0 1%;
}

.vault-intro__door--right {
  transform-origin: right center;
  border-radius: 0 43% 1% 0 / 0 13% 1% 0;
}

.vault-intro.is-running .vault-intro__door--left {
  animation: vault-left-door 1.58s cubic-bezier(.17,.82,.19,1) 2.44s forwards;
}

.vault-intro.is-running .vault-intro__door--right {
  animation: vault-right-door 1.58s cubic-bezier(.17,.82,.19,1) 2.44s forwards;
}

@keyframes vault-left-door {
  0%, 9% { transform: rotateY(0); }
  38% { transform: rotateY(-32deg); }
  100% { transform: rotateY(-108deg) translateZ(5px); }
}

@keyframes vault-right-door {
  0%, 9% { transform: rotateY(0); }
  38% { transform: rotateY(32deg); }
  100% { transform: rotateY(108deg) translateZ(5px); }
}

.vault-intro__door::before {
  content: '';
  position: absolute;
  inset: 4.5%;
  border: clamp(2px, .45vw, 5px) double rgba(234,185,76,.72);
  border-radius: 42% 42% 2% 2% / 13% 13% 2% 2%;
  box-shadow: inset 0 0 0 5px rgba(24,10,3,.65), 0 0 18px rgba(0,0,0,.5);
}

.vault-intro__panel {
  position: absolute;
  left: 13%;
  right: 13%;
  border: 1px solid rgba(239,194,91,.55);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,222,127,.14), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
  box-shadow: inset 0 0 0 4px rgba(26,10,3,.55), inset 0 0 15px rgba(0,0,0,.55);
}

.vault-intro__panel--top { top: 18%; height: 25%; border-radius: 45% 45% 8% 8% / 36% 36% 8% 8%; }
.vault-intro__panel--mid { top: 48%; height: 18%; border-radius: 8px; }
.vault-intro__panel--bottom { bottom: 8%; height: 20%; border-radius: 8px 8px 16px 16px; }

.vault-intro__door-symbol {
  position: absolute;
  z-index: 3;
  top: 26%;
  width: clamp(32px, 6vw, 64px);
  aspect-ratio: 1;
  opacity: .5;
  background: url('../img/logo-cle.svg') center / contain no-repeat;
  filter: sepia(1) saturate(1.2) drop-shadow(0 0 9px rgba(239,194,91,.35));
}

.vault-intro__door--left .vault-intro__door-symbol { right: 8%; transform: rotate(35deg); }
.vault-intro__door--right .vault-intro__door-symbol { left: 8%; transform: rotate(-55deg) scaleX(-1); }

.vault-intro__seam {
  position: absolute;
  z-index: 18;
  top: 8%;
  bottom: 5%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255,218,111,.68) 18%, rgba(255,244,186,.9) 50%, rgba(255,218,111,.5) 82%, transparent);
  box-shadow: 0 0 10px rgba(255,209,88,.45);
}

.vault-intro.is-running .vault-intro__seam {
  animation: vault-seam 1.3s ease 2.18s forwards;
}

@keyframes vault-seam {
  0% { opacity: .45; box-shadow: 0 0 8px rgba(255,209,88,.35); }
  55% { opacity: 1; box-shadow: 0 0 35px 8px rgba(255,227,132,.78); }
  100% { opacity: 0; box-shadow: 0 0 55px 18px rgba(255,245,199,.85); }
}

.vault-intro__lock {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: 52%;
  width: clamp(76px, 11vw, 118px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: clamp(5px, .7vw, 9px) ridge #dca941;
  background:
    radial-gradient(circle at 38% 32%, #fff2a0 0 3%, #c58b2d 15%, #4b2a0e 48%, #140a03 74%, #d19a37 76% 81%, #3a1c08 83%);
  box-shadow: 0 0 0 6px rgba(31,13,3,.82), 0 0 0 9px rgba(230,182,73,.45), 0 12px 28px rgba(0,0,0,.7);
}

.vault-intro__keyhole {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 18%;
  height: 35%;
  transform: translate(-50%, -50%);
  background: #020303;
  clip-path: polygon(50% 0, 80% 21%, 72% 48%, 95% 100%, 5% 100%, 28% 48%, 20% 21%);
  box-shadow: inset 0 0 5px rgba(255,224,124,.25);
}

.vault-intro.is-running .vault-intro__lock {
  animation: vault-lock-awake .9s ease 1.66s forwards, vault-lock-away .48s ease 3.18s forwards;
}

@keyframes vault-lock-awake {
  0% { filter: brightness(1); }
  46% { filter: brightness(1.45); box-shadow: 0 0 0 6px rgba(31,13,3,.82), 0 0 0 9px rgba(230,182,73,.6), 0 0 34px 10px rgba(255,205,79,.45); }
  100% { filter: brightness(1.1); box-shadow: 0 0 0 6px rgba(31,13,3,.82), 0 0 0 9px rgba(230,182,73,.45), 0 0 20px 4px rgba(255,205,79,.25); }
}

@keyframes vault-lock-away {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
}

.vault-intro__key {
  position: absolute;
  z-index: 42;
  left: 50%;
  top: 52%;
  width: min(55vw, 340px);
  transform-origin: 91% 50%;
  transform: translate(-91%, -50%) translate(66vw, 29vh) rotate(-18deg) scale(.72);
  opacity: 0;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,.72)) drop-shadow(0 0 8px rgba(244,196,78,.24));
}

.vault-intro.is-running .vault-intro__key {
  animation: vault-key-action 2.7s cubic-bezier(.16,.82,.2,1) .48s forwards;
}

.vault-intro__key svg { display: block; width: 100%; height: auto; overflow: visible; }

.vault-intro__key-label {
  position: absolute;
  left: 35%;
  top: 50%;
  max-width: 48%;
  transform: translateY(-50%);
  overflow: hidden;
  color: #352006;
  font-size: clamp(.38rem, 1.4vw, .67rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

@keyframes vault-key-action {
  0% {
    opacity: 0;
    transform: translate(-91%, -50%) translate(66vw, 29vh) rotate(-18deg) scale(.72);
  }
  13% { opacity: 1; }
  44% {
    opacity: 1;
    transform: translate(-91%, -50%) translate(0, 0) rotate(-5deg) scale(1);
  }
  55% {
    transform: translate(-91%, -50%) translate(0, 0) rotate(-5deg) scale(1);
  }
  72% {
    transform: translate(-91%, -50%) translate(0, 0) rotate(83deg) scale(1);
  }
  83% {
    opacity: 1;
    transform: translate(-91%, -50%) translate(0, 0) rotate(83deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-91%, -50%) translate(-4%, 0) rotate(83deg) scale(.78);
  }
}

.vault-intro__flash {
  position: absolute;
  z-index: 32;
  left: 50%;
  top: 52%;
  width: 14vmin;
  height: 14vmin;
  min-width: 80px;
  min-height: 80px;
  transform: translate(-50%, -50%) scale(.05);
  opacity: 0;
  border-radius: 50%;
  background: #fffbe3;
  box-shadow: 0 0 45px 20px #ffe28a, 0 0 120px 60px rgba(255,211,92,.65);
}

.vault-intro.is-running .vault-intro__flash {
  animation: vault-flash .72s ease 2.18s forwards;
}

@keyframes vault-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
  40% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

.vault-intro__threshold {
  position: absolute;
  z-index: 11;
  left: -6%;
  right: -6%;
  bottom: -3.4%;
  height: 6.5%;
  border-radius: 50%;
  background: linear-gradient(180deg, #f8db80, #80501a 45%, #1a0b03 75%);
  box-shadow: 0 10px 15px rgba(0,0,0,.7), 0 0 22px rgba(241,194,83,.3);
}

.vault-intro__destination {
  position: absolute;
  z-index: 55;
  left: 50%;
  bottom: clamp(1.1rem, 4vh, 3rem);
  width: min(92vw, 740px);
  transform: translate(-50%, 18px);
  opacity: 0;
  text-align: center;
  text-shadow: 0 3px 18px #000;
}

.vault-intro.is-running .vault-intro__destination {
  animation: vault-destination-in .62s ease .6s forwards,
             vault-destination-shine .72s ease 3.16s forwards,
             vault-destination-out .5s ease 4.18s forwards;
}

.vault-intro__destination strong {
  display: block;
  color: var(--vault-gold-1);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 2.6vw, 1.65rem);
  letter-spacing: .035em;
}

.vault-intro__destination span {
  display: block;
  margin-top: .28rem;
  color: rgba(255,247,219,.72);
  font-size: clamp(.65rem, 1.4vw, .86rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@keyframes vault-destination-in { to { opacity: .84; transform: translate(-50%, 0); } }
@keyframes vault-destination-shine {
  0% { opacity: .84; }
  50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,222,117,.6)); }
  100% { opacity: .9; }
}
@keyframes vault-destination-out { to { opacity: 0; transform: translate(-50%, 10px); } }

.vault-intro__progress {
  position: absolute;
  z-index: 56;
  left: 50%;
  bottom: clamp(.55rem, 1.65vh, 1.35rem);
  width: min(54vw, 340px);
  height: 2px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.vault-intro__progress::after {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b551b, #f9df89 65%, #fff7c9);
  box-shadow: 0 0 12px rgba(250,218,128,.75);
}

.vault-intro.is-running .vault-intro__progress::after {
  animation: vault-progress 4.3s linear .08s forwards;
}

@keyframes vault-progress { to { width: 100%; } }

.vault-intro__spark {
  position: absolute;
  z-index: 36;
  left: 50%;
  top: 52%;
  width: clamp(3px, .45vw, 6px);
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: #fff6bd;
  box-shadow: 0 0 9px 3px rgba(255,207,78,.7);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.3);
}

.vault-intro.is-running .vault-intro__spark {
  animation: vault-spark 1.25s cubic-bezier(.15,.76,.32,1) calc(2.17s + var(--delay)) forwards;
}

@keyframes vault-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0); }
}

@media (max-width: 700px) {
  .vault-intro__brand {
    top: 2.5vh;
    justify-content: center;
    text-align: center;
  }
  .vault-intro__brand-mark { display: none; }
  .vault-intro__brand-title { font-size: clamp(1.45rem, 7.4vw, 2.2rem); }
  .vault-intro__brand-tag { font-size: .58rem; letter-spacing: .13em; }
  .vault-intro__portal {
    height: min(64vh, 590px);
    height: min(64dvh, 590px);
    max-width: 86vw;
    transform: translateY(2.2vh) scale(.93);
  }
  @keyframes vault-portal-in {
    to { opacity: 1; transform: translateY(2.2vh) scale(1); }
  }
  @keyframes vault-portal-away {
    to { opacity: .1; transform: translateY(2.2vh) scale(1.08); filter: blur(3px); }
  }
  .vault-intro__frame::before { left: -3.4%; }
  .vault-intro__frame::after { right: -3.4%; }
  .vault-intro__key { width: min(70vw, 290px); }
  .vault-intro__destination { bottom: 4.5vh; }
  .vault-intro__destination strong { font-size: clamp(.95rem, 4.7vw, 1.3rem); }
  .vault-intro__destination span { font-size: .56rem; letter-spacing: .1em; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .vault-intro__brand { top: .5rem; }
  .vault-intro__brand-title { font-size: 1.25rem; }
  .vault-intro__brand-tag { display: none; }
  .vault-intro__portal { height: 78vh; height: 78dvh; transform: translateY(2vh) scale(.93); }
  .vault-intro__destination { bottom: .5rem; }
  .vault-intro__destination span { display: none; }
  .vault-intro__progress { bottom: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-intro *,
  .vault-intro *::before,
  .vault-intro *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .vault-intro__mask-hole { transform: scale(4.6); }
  .vault-intro__door--left { transform: rotateY(-108deg); }
  .vault-intro__door--right { transform: rotateY(108deg); }
  .vault-intro__key { display: none; }
}

@media print {
  .vault-intro { display: none !important; }
}

/* Les éléments flottants apparaissent seulement après l'ouverture du portail. */
html.vault-intro-active .site-chatbot,
html.vault-intro-active .whatsapp-float,
html.vault-intro-active .back-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}