/* ===========================================
   RDV Téléphonique — Popup Styles
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');

/* Body lock */
body.rdv-body-lock { overflow: hidden !important; }

/* ============================================================
   OVERLAY
   État FERMÉ  : display:none  (le thème ne peut pas l'écraser
                  car c'est le comportement par défaut des éléments cachés)
   État OUVERT : display:flex  via classe .rdv-open ajoutée par JS
============================================================ */
#rdv-popup-overlay {
  display: none !important;         /* FERMÉ par défaut, priorité absolue */
}

#rdv-popup-overlay.rdv-open {
  display: flex !important;         /* OUVERT uniquement via JS */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  background: rgba(5, 5, 15, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  animation: rdvOverlayIn 0.3s ease forwards;
}

@keyframes rdvOverlayIn {
  from { background: rgba(5,5,15,0); }
  to   { background: rgba(5,5,15,0.78); }
}

/* ---- Backdrop cliquable ---- */
#rdv-popup-overlay .rdv-popup-backdrop {
  position: fixed !important;
  inset: 0 !important;
  cursor: pointer;
  z-index: 0;
}

/* ---- Modale ---- */
#rdv-popup-overlay .rdv-popup-modal {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  max-width: 980px !important;
  max-height: 90vh !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55) !important;
  animation: rdvModalIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  --rdv-accent: #1a1a2e;
}

@keyframes rdvModalIn {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* ---- Bouton déclencheur ---- */
.rdv-popup-trigger-wrap { display: inline-block; }

.rdv-popup-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.rdv-popup-trigger-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.14);
  transform: translateX(-110%);
  transition: transform 0.4s ease;
  pointer-events: none;
}
.rdv-popup-trigger-btn:hover::before { transform: translateX(110%); }
.rdv-popup-trigger-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.28) !important;
}
.rdv-trigger-icon { font-size: 1.1em; }
.rdv-trigger-arrow { margin-left: 2px; transition: transform 0.2s ease; }
.rdv-popup-trigger-btn:hover .rdv-trigger-arrow { transform: translateX(4px); }

/* ---- Bouton fermeture ---- */
#rdv-popup-overlay .rdv-popup-close {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  z-index: 10 !important;
  width: 36px !important; height: 36px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s, transform 0.2s !important;
}
#rdv-popup-overlay .rdv-popup-close:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: rotate(90deg) !important;
}
#rdv-popup-overlay .rdv-popup-close svg { display: block; }

/* ---- Panneau Hero (gauche) ---- */
#rdv-popup-overlay .rdv-popup-hero {
  position: relative !important;
  width: 42% !important;
  flex-shrink: 0 !important;
  background: #0d0d18 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 480px;
}
#rdv-popup-overlay .rdv-popup-hero-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: rdvHeroZoom 10s ease forwards;
}
@keyframes rdvHeroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

#rdv-popup-overlay .rdv-popup-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(5,5,20,0.25) 0%, rgba(5,5,20,0.6) 50%, rgba(5,5,20,0.92) 100%);
}
#rdv-popup-overlay .rdv-popup-hero-pattern {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(138,100,255,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,150,80,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #0d0d1e 0%, #1a1028 100%);
}
#rdv-popup-overlay .rdv-popup-hero-pattern::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
#rdv-popup-overlay .rdv-popup-hero-content {
  position: relative; z-index: 2;
  padding: 48px 36px 36px;
  display: flex; flex-direction: column; justify-content: flex-end; flex: 1;
}
#rdv-popup-overlay .rdv-popup-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9); font-family: 'DM Sans',sans-serif;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px;
  padding: 6px 14px; border-radius: 30px; width: fit-content; margin-bottom: 20px;
}
#rdv-popup-overlay .rdv-popup-hero-badge::before {
  content: ''; width: 6px; height: 6px; background: #4ade80;
  border-radius: 50%; flex-shrink: 0; animation: rdvPulse 2s infinite;
}
@keyframes rdvPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

#rdv-popup-overlay .rdv-popup-hero-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem) !important;
  font-weight: 600 !important; line-height: 1.18 !important;
  color: #fff !important; margin: 0 0 16px !important;
}
#rdv-popup-overlay .rdv-popup-hero-title em { font-style: italic; color: rgba(255,255,255,0.65); }
#rdv-popup-overlay .rdv-popup-hero-sub {
  font-size: 14px; font-weight: 300; line-height: 1.65;
  color: rgba(255,255,255,0.6); margin: 0 0 28px;
}
#rdv-popup-overlay .rdv-popup-hero-features { display: flex; flex-direction: column; gap: 10px; }
#rdv-popup-overlay .rdv-popup-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.78);
}
#rdv-popup-overlay .rdv-popup-feature-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(74,222,128,0.18); border: 1px solid rgba(74,222,128,0.4);
  color: #4ade80; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#rdv-popup-overlay .rdv-hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#rdv-popup-overlay .rdv-hero-deco span {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35);
  animation: rdvFloat linear infinite;
}
#rdv-popup-overlay .rdv-hero-deco span:nth-child(1){left:20%;top:10%;width:2px;height:2px;animation-duration:12s}
#rdv-popup-overlay .rdv-hero-deco span:nth-child(2){left:60%;top:5%;width:4px;height:4px;animation-duration:9s;animation-delay:2s;opacity:.3}
#rdv-popup-overlay .rdv-hero-deco span:nth-child(3){left:80%;top:20%;width:3px;height:3px;animation-duration:14s;animation-delay:1s}
#rdv-popup-overlay .rdv-hero-deco span:nth-child(4){left:35%;top:15%;width:2px;height:2px;animation-duration:11s;animation-delay:3s;opacity:.5}
#rdv-popup-overlay .rdv-hero-deco span:nth-child(5){left:90%;top:8%;width:3px;height:3px;animation-duration:8s;animation-delay:.5s;opacity:.25}
@keyframes rdvFloat{0%{transform:translateY(0) rotate(0);opacity:.4}50%{opacity:.1}100%{transform:translateY(600px) rotate(180deg);opacity:0}}

/* ---- Panneau Formulaire (droite) ---- */
#rdv-popup-overlay .rdv-popup-form-panel {
  flex: 1 !important;
  background: #fff !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  scrollbar-width: thin; scrollbar-color: #e8eaf0 transparent;
  display: flex !important; flex-direction: column !important;
}
#rdv-popup-overlay .rdv-popup-form-panel::-webkit-scrollbar { width: 4px; }
#rdv-popup-overlay .rdv-popup-form-panel::-webkit-scrollbar-thumb { background: #e8eaf0; border-radius: 4px; }

#rdv-popup-overlay .rdv-popup-form-scroll { flex: 1; display: flex; flex-direction: column; }

#rdv-popup-overlay .rdv-popup-form-header {
  background: var(--rdv-accent, #1a1a2e) !important;
  padding: 28px 28px 22px !important; text-align: center !important; flex-shrink: 0;
}
#rdv-popup-overlay .rdv-popup-form-logo { font-size: 1.8rem; margin-bottom: 6px; }
#rdv-popup-overlay .rdv-popup-form-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.45rem !important; font-weight: 600 !important;
  color: #fff !important; margin: 0 0 4px !important;
}
#rdv-popup-overlay .rdv-popup-form-subtitle {
  font-size: 13px !important; color: rgba(255,255,255,0.5) !important;
  margin: 0 0 20px !important; font-weight: 300 !important;
}

/* Steps dans le popup */
#rdv-popup-overlay .rdv-steps { justify-content: center; }
#rdv-popup-overlay .rdv-step { opacity: 0.4; transition: opacity 0.2s; }
#rdv-popup-overlay .rdv-step.active { opacity: 1; }
#rdv-popup-overlay .rdv-step.done  { opacity: 0.7; }
#rdv-popup-overlay .rdv-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
#rdv-popup-overlay .rdv-step.active .rdv-step-num {
  background: #fff !important; color: var(--rdv-accent, #1a1a2e) !important; border-color: #fff !important;
}
#rdv-popup-overlay .rdv-step-label { font-size: 10px; color: rgba(255,255,255,0.75); white-space: nowrap; }
#rdv-popup-overlay .rdv-step-line  { width: 30px; height: 1px; background: rgba(255,255,255,0.25); margin: 0 4px 16px; }

/* Formulaire dans popup */
#rdv-popup-overlay #rdv-booking-form { flex: 1; display: flex; flex-direction: column; }
#rdv-popup-overlay .rdv-panel { flex: 1; background: #fff; }
#rdv-popup-overlay .rdv-panel-inner { padding: 20px 24px !important; }
#rdv-popup-overlay .rdv-panel-footer { padding: 14px 24px 22px !important; }
#rdv-popup-overlay .rdv-success-screen { padding: 32px 24px !important; }

/* Layout 2 colonnes calendrier + créneaux */
#rdv-popup-overlay .rdv-popup-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 800px) {
  #rdv-popup-overlay .rdv-popup-modal { flex-direction: column !important; border-radius: 14px !important; }
  #rdv-popup-overlay .rdv-popup-hero  { width: 100% !important; min-height: 160px !important; }
  #rdv-popup-overlay .rdv-popup-hero-content { padding: 20px !important; }
  #rdv-popup-overlay .rdv-popup-hero-title { font-size: 1.4rem !important; }
  #rdv-popup-overlay .rdv-popup-hero-features,
  #rdv-popup-overlay .rdv-hero-deco { display: none !important; }
  #rdv-popup-overlay .rdv-popup-layout { grid-template-columns: 1fr !important; }
  #rdv-popup-overlay .rdv-panel-inner { padding: 14px !important; }
}
@media (max-width: 480px) {
  #rdv-popup-overlay.rdv-open { padding: 6px !important; }
  #rdv-popup-overlay .rdv-popup-modal { border-radius: 10px !important; max-height: 98vh !important; }
  #rdv-popup-overlay .rdv-popup-hero  { min-height: 120px !important; }
  #rdv-popup-overlay .rdv-popup-hero-badge { display: none !important; }
}