/* ============================================================
   SYSTÈME DE POPUPS UNIFIÉ ET SCALABLE
   ============================================================
   
   Architecture :
   - .popup-overlay : Backdrop (fond gris)
   - .popup-container : Conteneur du popup (flexbox)
   - .popup-content : Contenu du popup
   - Modificateurs : --form, --menu, --template
   
   ============================================================ */

/* Variables CSS pour cohérence */
:root {
  --popup-backdrop-bg: rgba(0, 0, 0, 0.85);
  --popup-content-bg: #0b1f26;
  --popup-content-border: #20323a;
  --popup-content-color: #EAEFF3;
  --popup-border-radius: 20px;
  --popup-z-index: 9999;
  --popup-close-z-index: 10001;
}

/* ============================================================
   BACKDROP (Fond gris)
   ============================================================ */
.popup,
.popup-container,
.popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: var(--popup-z-index) !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: var(--popup-backdrop-bg) !important;
  /* Masqué par défaut */
  display: none;
}

/* Quand le popup est ouvert (via style inline ou classe) */
.popup[style*="display: block"],
.popup-container[style*="display: block"],
.popup-overlay[style*="display: block"],
.popup[style*="display:flex"],
.popup-container[style*="display:flex"],
.popup-overlay[style*="display:flex"] {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* ============================================================
   CONTENU DU POPUP (Base)
   ============================================================ */
.popup-content,
.popup-content2,
.popup-content3 {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 90vh;
  background: var(--popup-content-bg);
  border: 1px solid var(--popup-content-border);
  color: var(--popup-content-color);
  border-radius: var(--popup-border-radius) var(--popup-border-radius) 0 0;
  padding: 20px;
  overflow-y: auto;
  pointer-events: auto;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  margin: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* ============================================================
   MODIFICATEURS
   ============================================================ */

/* Popup template (menu kebab, etc.) */
.popup-content.pop-template {
  /* Hérite de .popup-content */
}

/* Popup formulaire */
.popup-content--form,
.popup-content2.form-pop-cate,
.popup-content2.form-pop-template,
.popup-content2.pop-upplat {
  /* Styles spécifiques aux formulaires si nécessaire */
}

/* Popup catégorie */
.popup-content.pop-categorie {
  /* Styles spécifiques aux catégories si nécessaire */
}

/* ============================================================
   BOUTON DE FERMETURE
   ============================================================ */
.close-icon,
.close-popup2,
#closePop {
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: var(--popup-close-z-index);
  cursor: pointer;
  pointer-events: auto;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  padding: 5px 10px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon:hover,
.close-popup2:hover,
#closePop:hover {
  opacity: 0.8;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .popup,
  .popup-container,
  .popup-overlay {
    height: 100dvh;
  }
  
  .popup-content,
  .popup-content2,
  .popup-content3 {
    max-height: 90vh;
  }
}

/* ============================================================
   COMPATIBILITÉ (Anciennes classes)
   ============================================================ */
/* Pour les popups qui utilisent encore l'ancienne structure */
.popup:not(.popup-container) > .popup-content:not(.pop-template) {
  /* Styles hérités de .popup-content */
}