/* ============================================================
   ANIM PORTE — door intro overlay
   All scoped under .adp-root so it never leaks into the theme.
   Tunable values come through CSS custom properties set inline
   by the widget (colours + door swing duration).
============================================================ */

.adp-root {
  --adp-bg:        #070402;
  --adp-gold:      #9a7830;
  --adp-gold-soft: #c4a458;
  --adp-gold-lite: #ead6a4;
  --adp-swing:     1.5s;   /* door swing duration */
  --adp-open-deg:  106deg; /* how far each door swings */
}

.adp-root *, .adp-root *::before, .adp-root *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ─────────────────────────────────────────
   HEADER pendant l'intro (et le popup)
   Le header Elementor peut apparaître au-dessus du contenu/popup. On le rend
   invisible via visibility (et NON display:none) tant que l'intro est en cours
   (classe .adp-intro-open) : visibility conserve la place du header dans le
   flux, donc rien n'est décalé quand il redevient visible. La classe
   .adp-popup-open (posée par le widget popup Elementor-06) prolonge le masquage
   tant qu'un popup est ouvert. Le header ne réapparaît qu'une fois l'intro ET
   le popup disparus.
───────────────────────────────────────── */
html.adp-intro-open [data-elementor-type="header"],
html.adp-intro-open .elementor-location-header,
html.adp-intro-open .ehf-header,
html.adp-popup-open [data-elementor-type="header"],
html.adp-popup-open .elementor-location-header,
html.adp-popup-open .ehf-header {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Réapparition du header en fondu une fois l'intro ET le popup partis.
   La transition porte sur opacity ; visibility n'est PAS dans la liste donc
   repasse à « visible » instantanément (l'opacité, elle, monte de 0→1 sur la
   durée). On garde aussi transform pour ne pas casser l'anim du header sticky
   / hide-on-scroll (menu-widget pose transition: transform 0.3s). !important
   pour battre ces règles plus spécifiques ([data-elementor-type].sticky-header). */
[data-elementor-type="header"],
.elementor-location-header,
.ehf-header {
  transition: opacity 0.5s ease, transform 0.3s ease-in-out !important;
}

/* ─────────────────────────────────────────
   PRELOAD MASK
   Solid layer painted on the very first frame so the page never
   flashes through before the overlay / doors have faded in.
   Sits above the page but below the overlay (40) and scene (20).
   Removed by JS once the front layer is visible; the CSS animation
   is a safety net that reveals the page if JS never runs.
───────────────────────────────────────── */
/* Écran noir plein viewport dès le parsing : la classe .adp-intro-open est
   posée en inline par le widget (door-widget.php) AVANT tout paint, donc ce
   ::before couvre l'écran immédiatement. Contrairement à .adp-preload (fixed
   piégé dans .adp-root, qu'un container Elementor transformé peut confiner à
   sa propre zone), il est attaché à <html> (jamais transformé) → couvre bien
   tout le viewport, pas de flash du fond du site. Sous la scène (z 630) et
   l'overlay (z 645) : masqué par les portes une fois affichées. Retiré avec
   .adp-intro-open à l'ouverture des portes. */
html.adp-intro-open::before {
  content: '';
  position: fixed; inset: 0;
  background: var(--adp-preload-bg, #000);
  z-index: 2147483599;
  pointer-events: none;
}

.adp-preload {
  position: fixed; inset: 0; z-index: 2147483600;
  background: var(--adp-preload-bg, #000);
  pointer-events: none;
  animation: adp-preload-safety 0.01s linear 10s forwards;
}
/* Écran noir plein pendant le chargement, retiré par JS (dropPreload) dès que
   les portes / l'overlay sont affichés. On force le noir même quand une image
   de fond est fournie : l'utilisateur veut un écran noir de chargement. */
.adp-preload.adp-has-behind {
  background-image: none;
}
.adp-preload.adp-hide {
  opacity: 0;
  transition: opacity 0.4s ease;
}
@keyframes adp-preload-safety { to { opacity: 0; visibility: hidden; } }

/* ─────────────────────────────────────────
   OVERLAY  (dark title screen, z:40)
───────────────────────────────────────── */
.adp-overlay {
  position: fixed; inset: 0; z-index: 2147483645;
  background: var(--adp-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.adp-overlay.active   { opacity: 1; pointer-events: auto; }
.adp-overlay.fade-out { opacity: 0; pointer-events: none; }

.adp-rule {
  width: 80px; height: 1px;
  background: linear-gradient(to right, transparent, var(--adp-gold), transparent);
  margin-bottom: 2.2rem;
  opacity: 0; transform: scaleX(0);
  transition: opacity 0.9s ease 0.4s, transform 0.9s ease 0.4s;
}
.adp-overlay.active .adp-rule { opacity: 1; transform: scaleX(1); }

.adp-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.9rem, 5.5vw, 3.8rem);
  font-weight: 300;
  color: var(--adp-gold-lite);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s ease 0.25s, transform 1s ease 0.25s;
}
.adp-overlay.active .adp-title { opacity: 1; transform: translateY(0); }

.adp-dots {
  display: flex; gap: 10px; margin: 1.3rem 0;
  opacity: 0;
  transition: opacity 0.7s ease 0.75s;
}
.adp-overlay.active .adp-dots { opacity: 1; }
.adp-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--adp-gold);
}

.adp-date {
  font-family: 'Georgia', serif;
  font-size: clamp(0.65rem, 1.2vw, 0.82rem);
  color: var(--adp-gold);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s ease 0.85s;
}
.adp-overlay.active .adp-date { opacity: 1; }

.adp-enter-btn {
  margin-top: 3rem;
  padding: var(--adp-btn-py, 12px) var(--adp-btn-px, 48px);
  background: var(--adp-btn-bg, transparent);
  border: var(--adp-btn-bw, 1px) solid var(--adp-btn-border-color, rgba(154, 120, 48, 0.55));
  border-radius: var(--adp-btn-radius, 0px);
  color: var(--adp-btn-color, var(--adp-gold-soft));
  font-family: 'Georgia', serif;
  font-size: var(--adp-btn-fs, 12px);
  letter-spacing: var(--adp-btn-ls, 7px);
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.9s ease 1.1s,
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.adp-overlay.active .adp-enter-btn { opacity: 1; }
.adp-enter-btn:hover {
  background-color: var(--adp-btn-bg-h, rgba(154, 120, 48, 0.14));
  border-color: var(--adp-btn-border-color-h, var(--adp-gold));
  color: var(--adp-btn-color-h, var(--adp-gold-lite));
}

/* Launch button shown over the doors (doors-direct + button trigger). */
.adp-door-btns {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 2147483635;
}
.adp-door-btns .adp-enter-btn {
  margin-top: 0;
  opacity: 1;
}

/* ─────────────────────────────────────────
   DOOR SCENE  (z:20)
───────────────────────────────────────── */
.adp-scene {
  position: fixed; inset: 0; z-index: 2147483630;
  background-color: var(--adp-scene-bg, transparent);
  perspective: 1800px;
  perspective-origin: 50% 48%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background-color var(--adp-swing) linear;
}
.adp-scene.active { opacity: 1; pointer-events: auto; }
/* Doors-direct: doors are visible instantly at load (no fade-in).
   Opacity is already 1, so adding .active changes nothing; the fade-out
   on .done still animates normally. */
.adp-root.adp-mode-doors .adp-scene:not(.done) { opacity: 1; }
/* No black backdrop when a background image is supplied. */
.adp-scene.adp-has-behind { background-color: transparent; }
/* Black backdrop removed instantly at the start of the opening, so the page
   is revealed through the parting doors and no black overlay lingers after
   the animation ends (the scene element itself still fades out on .done). */
.adp-scene.opening {
  background-color: transparent;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0s linear;
}
.adp-scene.done   {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Background image behind the doors / GIF. Fully visible while the
   doors are closed; fades out over the swing duration so it is gone
   exactly when the doors finish opening. */
.adp-behind {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--adp-behind) center / var(--adp-behind-fit, cover) no-repeat;
  opacity: 1;
  transition: opacity var(--adp-behind-fade, var(--adp-swing)) linear;
}
.adp-scene.opening .adp-behind { opacity: 0; }

/* Golden light crack at centre join.
   Tunable via CSS custom properties set inline by the widget:
     --adp-crack-color      : light colour
     --adp-crack-width      : bar width (px)
     --adp-crack-opacity    : brightness (0–1)
     --adp-crack-diffusion  : glow spread multiplier (1 = default) */
.adp-crack {
  position: absolute;
  bottom: 0;
  width: var(--adp-crack-width, 4px);
  left: calc(50% - (var(--adp-crack-width, 4px) / 2));
  height: var(--adp-door-h, 100%);
  z-index: 2147483632; pointer-events: none;
  opacity: var(--adp-crack-opacity, 1);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--adp-crack-color, #fff5af) 0%,  transparent)   0%,
    color-mix(in srgb, var(--adp-crack-color, #fff5af) 85%, transparent)   7%,
    var(--adp-crack-color, #fff5af)                                        30%,
    var(--adp-crack-color, #fff5af)                                        70%,
    color-mix(in srgb, var(--adp-crack-color, #fff5af) 85%, transparent)  93%,
    color-mix(in srgb, var(--adp-crack-color, #fff5af) 0%,  transparent) 100%
  );
  box-shadow:
    0 0 calc(10px * var(--adp-crack-diffusion, 1)) calc(4px  * var(--adp-crack-diffusion, 1)) color-mix(in srgb, var(--adp-crack-color, #fff5af) 75%, transparent),
    0 0 calc(30px * var(--adp-crack-diffusion, 1)) calc(10px * var(--adp-crack-diffusion, 1)) color-mix(in srgb, var(--adp-crack-color, #fff5af) 35%, transparent),
    0 0 calc(70px * var(--adp-crack-diffusion, 1)) calc(20px * var(--adp-crack-diffusion, 1)) color-mix(in srgb, var(--adp-crack-color, #fff5af) 15%, transparent);
  transition: opacity 0.5s ease;
}
.adp-crack.gone { opacity: 0; }

/* ─── door shared ─── */
/* Doors are bottom-anchored; their height is a % of the viewport. */
.adp-door {
  position: absolute; bottom: 0;
  width: 50%; height: var(--adp-door-h, 100%);
  backface-visibility: hidden;
  transition: transform var(--adp-swing) cubic-bezier(0.42, 0, 0.18, 1);
  will-change: transform;
}

/* wood base — layered gradients simulate grain */
.adp-door-wood {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      172deg,
      transparent         0px,  transparent 8px,
      rgba(0,0,0,.045)    8px,  rgba(0,0,0,.045) 9px,
      transparent         9px,  transparent 22px,
      rgba(255,255,255,.012) 22px, rgba(255,255,255,.012) 23px
    ),
    repeating-linear-gradient(
      176deg,
      transparent      0px, transparent 28px,
      rgba(0,0,0,.06)  28px, rgba(0,0,0,.06) 30px
    ),
    linear-gradient(
      162deg,
      #1b0d04  0%,
      #2d1609  12%,
      #1d0f05  26%,
      #391c0c  40%,
      #1b0d04  53%,
      #2c1508  66%,
      #1f1006  80%,
      #120803  92%,
      #1d0e05  100%
    );
}

.adp-door::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
}

/* ─── left door ─── */
.adp-door-left {
  left: 0;
  transform-origin: left center;
  border-right: 3px solid #5c4012;
}
.adp-door-left::after {
  box-shadow:
    inset -8px  0  24px rgba(0,0,0,.65),
    inset  0    0  70px rgba(0,0,0,.22);
}
.adp-door-left.open { transform: rotateY(calc(-1 * var(--adp-open-deg))); }

/* ─── right door ─── */
.adp-door-right {
  right: 0;
  transform-origin: right center;
  border-left: 3px solid #5c4012;
}
.adp-door-right::after {
  box-shadow:
    inset  8px  0  24px rgba(0,0,0,.65),
    inset  0    0  70px rgba(0,0,0,.22);
}
.adp-door-right.open { transform: rotateY(var(--adp-open-deg)); }

/* ─── decorative inset panels ─── */
.adp-panels {
  position: absolute;
  inset: 6% 11%;
  display: grid;
  grid-template-rows: 0.85fr 1.7fr 0.85fr;
  gap: 6%;
}
.adp-dp {
  position: relative;
  border: 1px solid rgba(110,80,22,.5);
  box-shadow:
    inset  1px  1px  5px rgba(170,120,30,.07),
    inset -1px -1px  5px rgba(0,0,0,.55),
    inset  0    0    0 3px rgba(0,0,0,.4),
    inset  0    0    0 5px rgba(80,55,14,.25);
}
.adp-dp::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(80,56,14,.35);
}

/* ─── brass doorknob ─── */
.adp-knob {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 30%,
    #fff9b8   0%,
    #f2c018  14%,
    #c8900c  34%,
    #8b6200  55%,
    #5c4008  76%,
    #3a2a04  100%
  );
  box-shadow:
    2px  4px 10px rgba(0,0,0,.9),
    inset -2px -2px  5px rgba(0,0,0,.6),
    inset  1px  1px  3px rgba(255,230,80,.38);
  z-index: 2;
}

.adp-knob-plate {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 11px; height: 52px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #5a3e0a,
    #c49010 28%,
    #f0c030 50%,
    #c49010 72%,
    #5a3e0a
  );
  box-shadow: 1px 2px 6px rgba(0,0,0,.85);
}

/* ─── custom image doors ─── */
/* When a door image is supplied, drop the drawn wood + decorations
   so only the uploaded image shows. */
.adp-door.adp-has-img { border: none; }
.adp-door.adp-has-img::after { box-shadow: none; }
.adp-door.adp-has-img .adp-panels,
.adp-door.adp-has-img .adp-knob,
.adp-door.adp-has-img .adp-knob-plate { display: none; }
.adp-door.adp-has-img .adp-door-wood {
  background-color: transparent;
  background-image: var(--adp-img);
  /* Chaque porte occupe 50vw × 100vh : on étire l'image pour la remplir
     entièrement, quitte à la déformer si son ratio diffère. */
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─────────────────────────────────────────
   PORTES AVEC PILIER
   L'image fournie contient la porte (x%) ET son pilier (y%). On la
   découpe en deux tranches : .adp-door-pillar reste fixe, seule
   .adp-door-panel pivote. Chaque tranche affiche la même image,
   étirée à la largeur de la porte entière (--adp-*-bg-w) puis
   recadrée par la position (--adp-*-bg-x posée par le widget).
───────────────────────────────────────── */
.adp-anim-pillar .adp-door {
  border: none;
  transform: none;
  transform-style: preserve-3d;
}
.adp-anim-pillar .adp-door::after { box-shadow: none; }

.adp-door-pillar,
.adp-door-panel {
  position: absolute; top: 0; height: 100%;
  overflow: hidden;
}
.adp-door-pillar { width: var(--adp-pillar-w, 25%); }
.adp-door-panel  {
  width: var(--adp-panel-w, 75%);
  backface-visibility: hidden;
  transition: transform var(--adp-swing) cubic-bezier(0.42, 0, 0.18, 1);
  will-change: transform;
}

/* Pilier côté extérieur (défaut) : la porte pivote vers le centre. */
.adp-pillar-outer .adp-door-left  .adp-door-pillar { left: 0; }
.adp-pillar-outer .adp-door-left  .adp-door-panel  { left: var(--adp-pillar-w, 25%); transform-origin: left center; }
.adp-pillar-outer .adp-door-right .adp-door-pillar { right: 0; }
.adp-pillar-outer .adp-door-right .adp-door-panel  { right: var(--adp-pillar-w, 25%); transform-origin: right center; }

/* Pilier côté intérieur : la porte pivote vers le bord de l'écran. */
.adp-pillar-inner .adp-door-left  .adp-door-pillar { right: 0; }
.adp-pillar-inner .adp-door-left  .adp-door-panel  { left: 0; transform-origin: right center; }
.adp-pillar-inner .adp-door-right .adp-door-pillar { left: 0; }
.adp-pillar-inner .adp-door-right .adp-door-panel  { right: 0; transform-origin: left center; }

.adp-anim-pillar .adp-door-left.open  .adp-door-panel { transform: rotateY(calc(-1 * var(--adp-open-deg))); }
.adp-anim-pillar .adp-door-right.open .adp-door-panel { transform: rotateY(var(--adp-open-deg)); }
/* La porte entière ne bouge plus : seul le battant tourne. */
.adp-anim-pillar .adp-door-left.open,
.adp-anim-pillar .adp-door-right.open { transform: none; }

/* Recadrage de l'image dans chaque tranche. */
.adp-door.adp-has-img .adp-door-pillar .adp-door-wood {
  background-size: var(--adp-pillar-bg-w, 100%) 100%;
  background-position: var(--adp-pillar-bg-x, 0%) center;
}
.adp-door.adp-has-img .adp-door-panel .adp-door-wood {
  background-size: var(--adp-panel-bg-w, 100%) 100%;
  background-position: var(--adp-panel-bg-x, 100%) center;
}

/* ─────────────────────────────────────────
   GIF opening type — full-screen GIF that
   plays then fades the scene out. Doors and
   decorations are hidden.
───────────────────────────────────────── */
.adp-anim-gif .adp-gif {
  position: absolute; inset: 0; z-index: 1;
  background: var(--adp-gif) center / var(--adp-gif-fit, cover) no-repeat;
}
.adp-anim-gif .adp-door,
.adp-anim-gif .adp-crack { display: none; }

/* ─────────────────────────────────────────
   VIDEO opening type
   Étape 1 : image de fond (JPG) + PNG posé dessus (position réglable,
   flottement optionnel). Étape 2 (au clic) : JPG + PNG disparaissent en
   fondu et la vidéo joue. Étape 3 : quelques secondes avant la fin, la
   scène entière disparaît en fondu et révèle la page.
───────────────────────────────────────── */
.adp-anim-video .adp-door,
.adp-anim-video .adp-crack { display: none; }

.adp-video-wrap {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  /* Fond réglable dans Elementor : comble les bandes laissées par « contain ». */
  background: var(--adp-vwrap-bg, transparent);
}

.adp-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--adp-video-fit, cover);
  opacity: 0;
  transition: opacity var(--adp-vintro-fade, 600ms) ease;
}
/* La vidéo n'apparaît qu'au lancement (sinon la première frame flasherait
   par-dessous le JPG pendant son fondu). */
.adp-scene.adp-video-started .adp-video { opacity: 1; }

/* Image de fond (JPG) + PNG : visibles au départ, retirés au clic. */
.adp-vposter {
  position: absolute; inset: 0; z-index: 2;
  background: var(--adp-vposter) center / var(--adp-vposter-fit, cover) no-repeat;
  transition: opacity var(--adp-vposter-fade, 600ms) ease var(--adp-vposter-fade-delay, 0ms);
}

.adp-vpng {
  position: absolute; z-index: 3;
  left: var(--adp-vpng-x, 50%);
  top:  var(--adp-vpng-y, 50%);
  width: var(--adp-vpng-w, 45%);
  transform: translate(-50%, -50%);
  transition: opacity var(--adp-vpng-fade, 600ms) ease var(--adp-vpng-fade-delay, 0ms);
}
.adp-vpng img { display: block; width: 100%; height: auto; }
/* Animation portée par l'image interne : le wrapper garde son transform de
   centrage, l'animation ne le casse donc pas. Au choix : flottement
   (haut / bas) ou battement (respiration). */
.adp-vpng.adp-float img,
.adp-vpng.adp-pulse img {
  will-change: transform;
}
.adp-vpng.adp-float img {
  animation: adp-float var(--adp-vfloat-dur, 4000ms) ease-in-out infinite;
}
.adp-vpng.adp-pulse img {
  animation: adp-pulse var(--adp-vfloat-dur, 2600ms) ease-in-out infinite;
}
@keyframes adp-float {
  0%, 100% { transform: translateY(calc(-1 * var(--adp-vfloat-amp, 12px))); }
  50%      { transform: translateY(var(--adp-vfloat-amp, 12px)); }
}
@keyframes adp-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--adp-vpulse, 1.05)); }
}

.adp-scene.adp-video-started .adp-vposter,
.adp-scene.adp-video-started .adp-vpng {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .adp-vpng.adp-float img,
  .adp-vpng.adp-pulse img { animation: none; }
}

.adp-door-left  .adp-knob-plate { right: 7.5%; }
.adp-door-left  .adp-knob       { right: calc(7.5% - 7px); }
.adp-door-right .adp-knob-plate { left: 7.5%; }
.adp-door-right .adp-knob       { left: calc(7.5% - 7px); }

/* In the Elementor editor: keep the overlay statically visible so
   the user can style it without the animation running. */
.adp-root.adp-edit .adp-overlay { opacity: 1; position: relative; min-height: 60vh; }
.adp-root.adp-edit .adp-scene   { display: none; }

/* Mode vidéo dans l'éditeur : on affiche la scène (JPG + PNG) en statique
   pour pouvoir placer le PNG sans lancer l'animation. */
.adp-root.adp-edit.adp-anim-video .adp-scene {
  display: block; opacity: 1; position: relative; min-height: 70vh;
}
.adp-root.adp-edit.adp-anim-video .adp-video { display: none; }

/* Doors-direct mode in the editor: no overlay, show the closed doors. */
.adp-root.adp-edit.adp-mode-doors .adp-overlay { display: none; }
.adp-root.adp-edit.adp-mode-doors .adp-scene   {
  display: block; opacity: 1; position: relative; min-height: 70vh;
}