.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;   /* ⬅️ IMPORTANT : plus de fond blanc ici */
  animation: overlayFadeOut 2.8s ease-in-out forwards;
}

/* ------------ LES DEUX MOITIÉS DE L'ÉCRAN ------------ */
.intro-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #ffffff;
}

.intro-screen-left {
  left: 0;
  transform: translateX(0);
  animation: screenLeftOpen 1.3s ease-in-out 1s forwards;
}

.intro-screen-right {
  right: 0;
  transform: translateX(0);
  animation: screenRightOpen 1.3s ease-in-out 1s forwards;
}

/* ------------ LOGO AU CENTRE ------------ */
.intro-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  color: #b89b5c;
  opacity: 0;
  transform: scale(0.4);
  animation: logoZoomIn 1.2s ease-out 0.2s forwards,
             logoFadeOut 0.7s ease-in 1.9s forwards;
}

.logo-mark {
  font-family: "Times New Roman", serif;
  font-size: 3.2rem;
  letter-spacing: 0.15em;
}

.logo-text {
  font-family: "Playfair Display", serif;
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* ------------ ANIMATIONS ------------ */

@keyframes logoZoomIn {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes logoFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes screenLeftOpen {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes screenRightOpen {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes overlayFadeOut {
  0% { opacity: 1; visibility: visible; }
  85% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}