/* EOCHE - Modal de devis (source unique, extrait d'overrides.css le 2026-07-26)
   Autonome : aucune dependance a bootstrap/styles.css. Charge sur toutes les pages a modal. */
/* ═══════════════════════════════════
   21. PRICING POPUP MODAL (Glassmorphism & iOS Optimized)
   ═══════════════════════════════════ */
.pack-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(9, 9, 11, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 99999;
  display: flex;
  align-items: flex-start; /* Ancre en haut pour éviter le saut entre les étapes */
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8vh 16px 16px 16px; /* 8vh margin top */
  overflow-y: auto; /* Permet le scroll sur les très petits écrans */
}
.pack-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pack-modal {
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
  max-height: 90vh; /* Sécurité mobile */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Scroll fluide iOS */
  scrollbar-width: none; /* Hide scrollbar Firefox */
  background: linear-gradient(180deg, #18181b 0%, #0f0f11 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 40px;
  position: relative;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pack-modal::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */
.pack-modal-overlay.active .pack-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.pack-modal-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  color: #a1a1aa;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.pack-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: rotate(90deg);
}

.pack-modal-header { text-align: center; margin-bottom: 32px; }
.pack-modal-header h4 { margin-bottom: 8px; color: #fff; letter-spacing: -0.02em; }
.pack-modal-sub { color: #a1a1aa; font-size: 15px; margin: 0; }

/* Visual feedback du pack sélectionné */
.pack-selected {
  background: linear-gradient(90deg, rgba(253, 58, 37, 0.15) 0%, rgba(253, 58, 37, 0.05) 100%);
  border: 1px solid rgba(253, 58, 37, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.pack-selected-label { font-size: 12px; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; display:flex; align-items:center; gap:8px;}
.pack-selected-label::before { content:''; display:block; width:8px; height:8px; background:#FD3A25; border-radius:50%; box-shadow: 0 0 8px #FD3A25;}
.pack-selected-name { font-weight: 700; color: #fff; font-size: 16px; }

/* Champs du formulaire adaptés et sécurisés pour iOS (Haute Spécificité, sans !important) */
#packModal #packForm .pack-field { margin-bottom: 24px; border: none; padding: 0; }
#packModal #packForm .pack-field label { display: block; margin-bottom: 10px; color: #e4e4e7; font-size: 14px; font-weight: 500; text-align: left; }

#packModal #packForm .pack-field input, 
#packModal #packForm .pack-field select, 
#packModal #packForm .pack-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px; /* 16px OBLIGATOIRE sur mobile pour éviter le zoom iOS */
  line-height: 1.5;
  height: auto;
  min-height: 56px;
  transition: all 0.3s ease;
  -webkit-appearance: none; /* Retirer style iOS */
  margin: 0;
  box-shadow: none;
}

#packModal #packForm .pack-field textarea { resize: none; min-height: 100px; }

#packModal #packForm .pack-field input:focus, 
#packModal #packForm .pack-field select:focus, 
#packModal #packForm .pack-field textarea:focus {
  border-color: #FD3A25; 
  outline: none;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 4px rgba(253, 58, 37, 0.1);
}

#packModal #packForm .pack-field input::placeholder, 
#packModal #packForm .pack-field textarea::placeholder { 
  color: #8f8f9d; 
  opacity: 1; 
}

#packModal #packForm .pack-field select { 
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23A1A1AA%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
  background-repeat: no-repeat; 
  background-position: right 20px top 50%; 
  background-size: 12px auto; 
  padding-right: 40px;
}

#packModal #packForm .pack-field select option { 
  background: #18181b; 
  color: #fff; 
  padding: 10px; 
}

/* Navigation multi-étapes avec animation d'entrée */
.pack-form-step { display: none; }
.pack-form-step.active { display: block; animation: packFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes packFadeIn { 
  from { opacity: 0; transform: translateY(15px) scale(0.98); } 
  to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* Indicateurs d'étapes Premium (sans !important) */
.pack-modal-steps {
  display: flex; align-items: center; justify-content: center; margin-bottom: 32px;
  position: relative; width: 100%; padding: 0; margin-left: 0; margin-right: 0;
}
.pack-step-bar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 120px; height: 2px; background: rgba(255,255,255,0.06); z-index: 1;
}
.pack-step-progress {
  height: 100%; background: #FD3A25; width: 0%; transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(253,58,37,0.5);
}
.pack-step {
  width: 34px; height: 34px; border-radius: 50%;
  background: #18181b; color: #71717a;
  border: 2px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: all 0.4s ease;
  z-index: 2; position: relative; margin: 0 20px;
}
.pack-step.active { 
  background: #FD3A25; color: #fff; border-color: #FD3A25;
  box-shadow: 0 0 15px rgba(253,58,37,0.4); 
}

/* Boutons */
.pack-btn-actions { display: flex; gap: 16px; margin-top: 32px; }
.pack-btn-back {
  background: transparent; color: #a1a1aa;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px; padding: 16px 24px;
  font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.2s;
}
.pack-btn-back:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* Écran de succès Premium (Étape 3) - Surcharge du thème */
#packModal .pack-success { text-align: center; padding: 30px 0; }
#packModal .pack-success-icon {
  width: 80px; height: 80px; 
  background: rgba(74, 222, 128, 0.15); 
  color: #4ade80; /* Vert vif Apple/Premium */
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin: 0 auto 24px; 
  box-shadow: 0 0 40px rgba(74, 222, 128, 0.3);
}
#packModal .pack-success h4 { 
  font-size: 24px; margin-bottom: 12px; 
  color: #fff !important; /* Force le titre en blanc (écrasé par le thème sinon) */
}
#packModal .pack-success p { 
  color: #a1a1aa !important; /* Gris clair pour texte secondaire */
  font-size: 16px; margin-bottom: 24px; line-height: 1.6; 
}
#packModal .pack-success p strong { color: #fff !important; }
#packModal .pack-success-info { 
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.05); 
  border-radius: 12px; padding: 16px; margin: 0 0 32px; 
  font-size: 14px; color: #e4e4e7 !important; display: inline-block;
}

@media (max-width: 575px) {
  .pack-modal { padding: 32px 20px; border-radius: 20px; }
  .pack-step { margin: 0 15px; }
  .pack-step-bar { width: 90px; }
  .pack-btn-actions { flex-direction: column-reverse; gap: 10px; }
  .pack-btn-back, .pack-btn-actions .tf-btn { width: 100% !important; }
}

.tf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--white);
  border-radius: 99px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 14px 24px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
  overflow: hidden;
}
.tf-btn:hover {
  box-shadow: 0px -3px 0px 0px rgb(8, 8, 8) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.14), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15), 0px 100px 80px 0px rgba(0, 0, 0, 0.15), 0px 3px 3px 0px rgba(0, 0, 0, 0.14), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12);
  background: radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
}

/* Utilitaires minimaux (remplacent bootstrap sur les pages legeres) */
.pack-modal-overlay .w-100 { width: 100% !important; }
.pack-modal-overlay .w-50 { width: 50% !important; }
.pack-modal-overlay .fw-semibold { font-weight: 600; }
.pack-modal-overlay h4 { font-size: 24px; font-weight: 600; margin: 0 0 6px; color: #fff; }