/* Wedding Elementor Widget v2.0 — Fluent Forms + Video Overlay + Viewport Animations */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

.wew-wrapper {
  --wew-bg: #0a0703; --wew-accent: #c9a84c; --wew-text: #d4b896; --wew-anim-duration: 900ms;
  background-color: var(--wew-bg); width: 100%; overflow: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif; position: relative;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS VIEWPORT
═══════════════════════════════════════════════════════ */
.wew-pre-anim { will-change: transform, opacity; }

/* 1. Cinématique */
.wew-anim-cinematic.wew-pre-anim {
  opacity: 0; clip-path: inset(8% 4% 8% 4%); transform: scale(0.97);
  transition: opacity var(--wew-anim-duration) cubic-bezier(0.16,1,0.3,1),
              clip-path var(--wew-anim-duration) cubic-bezier(0.16,1,0.3,1),
              transform var(--wew-anim-duration) cubic-bezier(0.16,1,0.3,1);
}
.wew-anim-cinematic.wew-pre-anim .wew-portrait-img {
  transform: scale(1.08);
  transition: transform calc(var(--wew-anim-duration) * 1.4) cubic-bezier(0.16,1,0.3,1);
}
.wew-anim-cinematic.wew-is-visible { opacity: 1; clip-path: inset(0% 0% 0% 0%); transform: scale(1); }
.wew-anim-cinematic.wew-is-visible .wew-portrait-img { transform: scale(1); }

/* 2. Fade Rise */
.wew-anim-fade-rise.wew-pre-anim {
  opacity: 0; transform: translateY(48px);
  transition: opacity var(--wew-anim-duration) ease, transform var(--wew-anim-duration) cubic-bezier(0.22,1,0.36,1);
}
.wew-anim-fade-rise.wew-is-visible { opacity: 1; transform: translateY(0); }
.wew-anim-fade-rise.wew-pre-anim .wew-form-area {
  opacity: 0; transform: translateY(32px);
  transition: opacity var(--wew-anim-duration) ease 180ms, transform var(--wew-anim-duration) cubic-bezier(0.22,1,0.36,1) 180ms;
}
.wew-anim-fade-rise.wew-is-visible .wew-form-area { opacity: 1; transform: translateY(0); }

/* 3. Split Reveal */
.wew-anim-split.wew-pre-anim .wew-split-left {
  opacity: 0; transform: translateX(-60px);
  transition: opacity var(--wew-anim-duration) ease, transform var(--wew-anim-duration) cubic-bezier(0.22,1,0.36,1);
}
.wew-anim-split.wew-pre-anim .wew-split-right {
  opacity: 0; transform: translateX(60px);
  transition: opacity var(--wew-anim-duration) ease 100ms, transform var(--wew-anim-duration) cubic-bezier(0.22,1,0.36,1) 100ms;
}
.wew-anim-split.wew-is-visible .wew-split-left,
.wew-anim-split.wew-is-visible .wew-split-right { opacity: 1; transform: translateX(0); }

/* 4. Curtain */
.wew-curtain {
  position: absolute; inset: 0; background: var(--wew-bg); transform-origin: top;
  pointer-events: none; z-index: 5;
  transition: transform var(--wew-anim-duration) cubic-bezier(0.76,0,0.24,1);
}
.wew-anim-curtain.wew-pre-anim .wew-curtain { transform: scaleY(1); }
.wew-anim-curtain.wew-is-visible .wew-curtain { transform: scaleY(0); }
.wew-anim-curtain.wew-pre-anim .wew-form-area {
  opacity: 0;
  transition: opacity calc(var(--wew-anim-duration) * 0.5) ease calc(var(--wew-anim-duration) * 0.6);
}
.wew-anim-curtain.wew-is-visible .wew-form-area { opacity: 1; }

/* Stagger champs */
.wew-is-visible .wew-field-wrap { animation: wewFieldIn 0.4s ease both; }
.wew-is-visible .wew-field-wrap:nth-child(1) { animation-delay: calc(var(--wew-anim-duration) * 0.55); }
.wew-is-visible .wew-field-wrap:nth-child(2) { animation-delay: calc(var(--wew-anim-duration) * 0.65); }
.wew-is-visible .wew-field-wrap:nth-child(3) { animation-delay: calc(var(--wew-anim-duration) * 0.73); }
.wew-is-visible .wew-field-wrap:nth-child(4) { animation-delay: calc(var(--wew-anim-duration) * 0.80); }
.wew-is-visible .wew-field-wrap:nth-child(n+5) { animation-delay: calc(var(--wew-anim-duration) * 0.86); }
@keyframes wewFieldIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════
   PORTRAIT
═══════════════════════════════════════════════════════ */
.wew-portrait { position: relative; width: 100%; overflow: hidden; }
.wew-portrait-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wew-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wew-portrait-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26,18,8,0.45) 0%, rgba(0,0,0,1) 100%);
}

/* ═══════════════════════════════════════════════════════
   BOUTON VIDÉO PREMIUM
═══════════════════════════════════════════════════════ */
.wew-play-wrap {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wew-play-pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wew-play-pos-top-left     { top: 20px; left: 20px; }
.wew-play-pos-top-right    { top: 20px; right: 20px; }
.wew-play-pos-bottom-left  { bottom: 20px; left: 20px; }
.wew-play-pos-bottom-right { bottom: 20px; right: 20px; }

.wew-play-btn {
  position: relative; width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid var(--wew-accent); background: rgba(0,0,0,0.35);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wew-play-btn::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--wew-btn-hover, var(--wew-accent)); opacity: 0; transition: opacity 0.35s ease, background 0.3s; filter: blur(10px);
}
.wew-play-btn:hover::before { opacity: 0.3; }
.wew-play-btn:hover { transform: scale(1.12); border-color: var(--wew-btn-hover, var(--wew-accent)); }
.wew-play-btn:hover .wew-play-icon { border-left-color: var(--wew-btn-hover, var(--wew-accent)); }
.wew-play-btn:hover + .wew-play-label { color: var(--wew-btn-hover, var(--wew-accent)); }

.wew-play-icon {
  width: 0; height: 0; border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--wew-accent);
  margin-left: 4px; pointer-events: none; transition: border-left-color 0.3s;
}

.wew-play-ripple {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--wew-accent); opacity: 0;
  animation: wewRipple 2.4s ease-out infinite;
}
.wew-play-btn:hover .wew-play-ripple { animation-play-state: paused; }
@keyframes wewRipple { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.2); opacity: 0; } }

.wew-play-label {
  color: var(--wew-accent); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88rem; font-style: italic; letter-spacing: 0.12em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7); text-transform: uppercase; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   VIDEO OVERLAY LIGHTBOX
═══════════════════════════════════════════════════════ */
.wew-video-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; opacity: 0;
  transition: opacity 0.5s ease; pointer-events: none;
}
.wew-video-overlay[hidden] { display: flex !important; visibility: hidden; }
.wew-video-overlay:not([hidden]) { opacity: 1; pointer-events: all; visibility: visible; }

.wew-video-bars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wew-video-bar  { position: absolute; left: 0; right: 0; background: #000; transition: height 0.6s cubic-bezier(0.76,0,0.24,1); }
.wew-video-bar-top    { top: 0;    height: 0; }
.wew-video-bar-bottom { bottom: 0; height: 0; }
.wew-video-overlay:not([hidden]) .wew-video-bar-top,
.wew-video-overlay:not([hidden]) .wew-video-bar-bottom { height: 6vh; }

.wew-video-close {
  position: absolute; top: 18px; right: 22px; z-index: 10;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.55); transition: color 0.2s, transform 0.25s;
}
.wew-video-close:hover { color: var(--wew-accent); transform: rotate(90deg); }
.wew-video-close svg { width: 22px; height: 22px; }

.wew-video-stage { position: relative; z-index: 2; width: 90vw; max-width: 960px; }
.wew-video-frame-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 4px; box-shadow: 0 0 80px rgba(0,0,0,0.9);
}
.wew-video-frame-wrap .wew-video-el { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ═══════════════════════════════════════════════════════
   FORM AREA
═══════════════════════════════════════════════════════ */
.wew-form-area { padding: 36px 32px 48px; background: var(--wew-bg); }
.wew-title {
  font-family: 'Great Vibes', cursive !important;
  font-size: clamp(2rem, 6vw, 3rem) !important;
  font-weight: 400 !important; color: var(--wew-accent) !important;
  text-align: center; margin: 0 0 32px !important; line-height: 1.2 !important; letter-spacing: 0.01em;
}
.wew-field-wrap { margin-bottom: 14px; }
.wew-field {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(201,168,76,0.4) !important;
  border-radius: 6px !important; color: var(--wew-text) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1rem !important;
  padding: 14px 18px !important; outline: none !important;
  transition: border-color .25s, background .25s, box-shadow .25s; appearance: none; -webkit-appearance: none;
}
.wew-field::placeholder { color: rgba(212,184,150,0.55); font-style: italic; }
.wew-field:focus { border-color: var(--wew-accent) !important; background: rgba(201,168,76,0.06) !important; box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important; }
textarea.wew-field { resize: vertical; min-height: 100px; }
select.wew-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; padding-right: 40px !important;
}
select.wew-field option { background: #1a1208; color: var(--wew-text); }

.wew-btn {
  display: block; width: 100%; margin-top: 24px; padding: 15px 24px;
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.05rem !important;
  font-weight: 400; letter-spacing: 0.08em; color: var(--wew-accent) !important;
  background: transparent !important; border: 1px solid var(--wew-accent) !important;
  border-radius: 6px !important; cursor: pointer; position: relative; overflow: hidden;
  transition: background .3s, color .3s, box-shadow .3s, transform .15s;
}
.wew-btn::before { content: ''; position: absolute; inset: 0; background: var(--wew-accent); opacity: 0; transition: opacity .3s; }
.wew-btn:hover::before { opacity: 0.12; }
.wew-btn:hover { box-shadow: 0 0 18px rgba(201,168,76,0.25) !important; transform: translateY(-1px); }
.wew-btn:active { transform: translateY(0); }
.wew-btn:disabled { opacity: .5; cursor: not-allowed; }

.wew-success { text-align: center; padding: 32px 16px; animation: wewFadeIn .6s ease; }
.wew-success-icon { font-size: 3rem; color: var(--wew-accent); margin-bottom: 16px; animation: wewPulse 1.5s ease infinite; }
.wew-success p { color: var(--wew-text); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; font-style: italic; }
.wew-notice { color: var(--wew-text); text-align: center; font-style: italic; opacity: .6; margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════
   FLUENT FORMS OVERRIDE
   Les valeurs par défaut sont définies ici comme fallback.
   Les contrôles Elementor (style_fields) injectent leurs
   selectors directement et prennent la priorité.
═══════════════════════════════════════════════════════ */

/* ── Labels ── */
.wew-fluent-styled .ff-el-input--label,
.wew-fluent-styled .ff-el-input--label label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--wew-text) !important;
  font-size: 0.9rem !important;
  font-style: italic !important;
}
.wew-fluent-styled .ff-el-input--label { margin-bottom: 6px !important; }

/* ── Champs de saisie ── */
.wew-fluent-styled input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.wew-fluent-styled select,
.wew-fluent-styled textarea,
.wew-fluent-styled .ff-el-form-control {
  background: rgba(255,255,255,0.05) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(201,168,76,0.4) !important;
  border-radius: 6px !important;
  color: var(--wew-text) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1rem !important;
  padding: 13px 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .25s, box-shadow .25s !important;
}

/* ── Focus ── */
.wew-fluent-styled input:focus,
.wew-fluent-styled select:focus,
.wew-fluent-styled textarea:focus {
  border-color: var(--wew-accent) !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
  outline: none !important;
}

/* ── Placeholder ── */
.wew-fluent-styled input::placeholder,
.wew-fluent-styled textarea::placeholder {
  color: rgba(212,184,150,0.55) !important;
  font-style: italic !important;
}

/* ── Bouton submit ── */
.wew-fluent-styled .ff-btn-submit,
.wew-fluent-styled .ff-btn,
.wew-fluent-styled button[type="submit"],
.wew-fluent-styled input[type="submit"] {
  background: transparent !important;
  border: 1px solid var(--wew-accent) !important;
  border-radius: 6px !important;
  color: var(--wew-accent) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.08em !important;
  padding: 14px 24px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: box-shadow .3s, transform .15s !important;
  box-shadow: none !important;
}
.wew-fluent-styled .ff-btn-submit:hover,
.wew-fluent-styled button[type="submit"]:hover {
  box-shadow: 0 0 18px rgba(201,168,76,0.25) !important;
  transform: translateY(-1px) !important;
}

/* ── Messages & divers ── */
.wew-fluent-styled .error { color: #e06060 !important; font-size: 0.82rem !important; margin-top: 4px; }
.wew-fluent-styled .ff-message-success {
  background: rgba(201,168,76,0.08) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 6px !important;
  color: var(--wew-accent) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  padding: 20px !important;
  text-align: center !important;
}
.wew-fluent-styled .ff-el-form-check-input { accent-color: var(--wew-accent) !important; }

/* ═══════════════════════════════════════════════════════
   EXTERNAL FORMS (CF7 · GF)
═══════════════════════════════════════════════════════ */
.wew-external-form .wpcf7-form input,.wew-external-form .wpcf7-form textarea,.wew-external-form .wpcf7-form select,
.wew-external-form .gform_wrapper input,.wew-external-form .gform_wrapper textarea,.wew-external-form .gform_wrapper select {
  background:rgba(255,255,255,0.05) !important; border:1px solid rgba(201,168,76,0.4) !important;
  border-radius:6px !important; color:var(--wew-text) !important;
  font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1rem !important;
  padding:14px 18px !important; width:100% !important; box-sizing:border-box !important;
}
.wew-external-form .wpcf7-submit,.wew-external-form .gform_button,
.wew-external-form input[type="submit"],.wew-external-form button[type="submit"] {
  background:transparent !important; border:1px solid var(--wew-accent) !important;
  border-radius:6px !important; color:var(--wew-accent) !important;
  font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.05rem !important;
  letter-spacing:0.08em; padding:14px 24px !important; width:100% !important;
  cursor:pointer !important; transition:box-shadow .3s !important;
}
.wew-external-form .wpcf7-submit:hover,.wew-external-form .gform_button:hover,
.wew-external-form input[type="submit"]:hover,.wew-external-form button[type="submit"]:hover {
  box-shadow:0 0 18px rgba(201,168,76,0.25) !important;
}

/* ═══════════════════════════════════════════════════════
   KEYFRAMES & RESPONSIVE
═══════════════════════════════════════════════════════ */
@keyframes wewFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes wewPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }

@media (max-width: 480px) {
  .wew-form-area { padding:28px 20px 40px; }
  .wew-play-btn  { width:58px !important; height:58px !important; }
  .wew-play-icon { border-width:9px 0 9px 14px; }
  .wew-video-stage { width:96vw; }
}

@media (prefers-reduced-motion: reduce) {
  .wew-pre-anim,.wew-pre-anim *,.wew-play-ripple,.wew-video-bar,.wew-video-overlay {
    transition:none !important; animation:none !important;
  }
  .wew-anim-cinematic.wew-pre-anim,.wew-anim-fade-rise.wew-pre-anim,
  .wew-anim-split.wew-pre-anim .wew-split-left,.wew-anim-split.wew-pre-anim .wew-split-right {
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}