/* ═══════════════════════════════════════════════════════════
   POPUP STYLES
   Contient trois composants :
   1. Popup overlay générique (.custom-popup) — système JS opérationnel
   2. Popup design variants (.popup, .popup-b) — layouts alternatifs
   3. Popup use case (.uc-popup)              — image + contenu ACF + load more
═══════════════════════════════════════════════════════════ */

/* ── Variables CSS locales aux popups ── */
:root {
  /* Popup overlay générique */
  --popup-bg:      #1a1a1a;
  --popup-text:    #ffffff;
  --popup-muted:   #9090aa;
  --popup-accent:  #5856D6;
  --popup-glow:    rgba(88,86,214,0.28);
  --popup-overlay: rgba(0,0,0,0.78);
  --popup-border:  rgba(255,255,255,0.07);
  --popup-shadow:  0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(88,86,214,0.15);

  /* Popup design variants */
  --accent:       #5856D6;
  --accent-glow:  rgba(88,86,214,0.35);
  --muted:        #888899;
  --border:       #2e2e3a;
  --card-bg:      #1a1a1a;
  --card-surface: #212128;
  --radius:       12px;
  --shadow:       0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(88,86,214,0.12);
}


/* ─────────────────────────────────────────────
   1. POPUP OVERLAY GÉNÉRIQUE
   Système opérationnel lié à popup.js
───────────────────────────────────────────── */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIX LIEN — forcer blanc uniquement
   Sans toucher au reste du style existant
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.open-popup,
a.open-popup:link,
a.open-popup:visited,
a.open-popup:hover,
a.open-popup:active {
  color:           #ffffff !important;
  text-decoration: none    !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CACHER LE CONTENU SOURCE
   — display:none en mode éditeur cause des
     reflows → clignotement.
   — clip + position absolute = hors du flux
     sans déclencher de recalcul de layout.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.popup-data {
  position:       absolute;
  width:          1px;
  height:         1px;
  padding:        0;
  margin:         -1px;
  overflow:       hidden;
  clip:           rect(0,0,0,0);
  white-space:    nowrap;
  border:         0;
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   POPUP GLOBAL
   FIX ÉDITEUR ELEMENTOR :
   — display:none/block géré par le JS
     (plus fiable que opacity/visibility
      dans l'iframe de l'éditeur)
   — Le JS ajoute/retire la classe .active
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.custom-popup {
  display:  none;
  position: fixed;
  inset:    0;
  width:    100vw;
  height:   100vh;
  z-index:  999999;
}

.custom-popup.active {
  display: block;
}

.custom-popup.active .custom-popup-content {
  animation: popupIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes popupIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Overlay ── */
.custom-popup-overlay {
  position:                 absolute;
  inset:                    0;
  background:               var(--popup-overlay);
  backdrop-filter:          blur(8px);
  -webkit-backdrop-filter:  blur(8px);
}

/* ── Panneau contenu ── */
.custom-popup-content {
  position:      relative;
  background:    var(--popup-bg);
  color:         var(--popup-text);
  width:         90%;
  max-width:     900px;
  margin:        7vh auto 0;
  padding:       44px 48px 40px;
  border-radius: 14px;
  border:        1px solid var(--popup-border);
  box-shadow:    var(--popup-shadow);
}

/* ── Bouton fermer ── */
.custom-popup-close,
.custom-popup-close:link,
.custom-popup-close:visited {
  position:        absolute;
  top:             16px;
  right:           20px;
  font-size:       26px;
  line-height:     1;
  color:           var(--popup-muted) !important;
  text-decoration: none !important;
  background:      none !important;
  cursor:          pointer;
  padding:         4px 8px;
  transition:      color 0.2s;
  display:         block;
}
.custom-popup-close:hover,
.custom-popup-close:active { color: #ffffff !important; }

/* ── Typographie interne ── */
#custom-popup-inner h3 {
  font-size:     20px;
  font-weight:   700;
  color:         #ffffff;
  margin-bottom: 8px;
  line-height:   1.3;
}
#custom-popup-inner p {
  font-size:     14px;
  line-height:   1.75;
  color:         #b0b0c0;
  margin-bottom: 16px;
}

/* ── Scroll lock ── */
body.popup-open { overflow: hidden; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .custom-popup-content {
    padding:    32px 24px 28px;
    margin-top: 5vh;
    width:      95%;
  }
}


/* ─────────────────────────────────────────────
   2. POPUP DESIGN VARIANTS
   Layouts alternatifs (.popup version A et B)
───────────────────────────────────────────── */

/* ── Animation partagée ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   VERSION A — Image gauche / Texte droite
════════════════════════════════════════ */
.popup {
  background:    var(--card-bg);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  width:         100%;
  max-width:     780px;
  display:       flex;
  flex-direction: row;
  min-height:    360px;
  border:        1px solid var(--border);
  animation:     fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Image pane (1/4) ── */
.popup__image {
  flex:       0 0 25%;
  position:   relative;
  overflow:   hidden;
  background: #0d0d12;
}

.popup__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.7;
  display:    block;
}

.popup__image-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(88,86,214,0.45) 0%, transparent 70%);
}

/* ── Text pane (3/4) ── */
.popup__body {
  flex:            1;
  padding:         36px 40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             0;
}

.popup__eyebrow {
  font-size:      10.5px;
  font-weight:    500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  10px;
}

.popup__title {
  font-family:   'Playfair Display', Georgia, serif;
  font-size:     22px;
  font-weight:   700;
  color:         #ffffff;
  line-height:   1.25;
  margin-bottom: 6px;
}

.popup__subtitle {
  font-size:      13px;
  font-weight:    500;
  color:          var(--muted);
  margin-bottom:  18px;
  letter-spacing: 0.01em;
}

.popup__divider {
  width:         32px;
  height:        2px;
  background:    var(--accent);
  border-radius: 2px;
  margin-bottom: 18px;
}

.popup__content {
  font-size:  13.5px;
  line-height: 1.75;
  color:      #b0b0c0;
  max-width:  480px;
}

.popup__footer {
  margin-top: 28px;
  display:    flex;
  align-items: center;
  gap:        12px;
}

.btn-primary {
  font-family:    'DM Sans', sans-serif;
  font-size:      12.5px;
  font-weight:    500;
  letter-spacing: 0.04em;
  padding:        10px 22px;
  background:     var(--accent);
  color:          #fff;
  border:         none;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow:     0 4px 18px var(--accent-glow);
}
.btn-primary:hover { background: #7270e0; transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }

.btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size:   12.5px;
  font-weight: 400;
  color:       var(--muted);
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     10px 4px;
  transition:  color 0.2s;
}
.btn-ghost:hover { color: #ffffff; }

/* ── Bouton fermeture ── */
.popup__close {
  position:    absolute;
  top:         14px;
  right:       16px;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       #555566;
  font-size:   18px;
  line-height: 1;
  transition:  color 0.2s;
}
.popup__close:hover { color: #ffffff; }
.popup--rel { position: relative; }

/* ════════════════════════════════════════
   VERSION B — Titre haut / 3 images / Contenu
════════════════════════════════════════ */
.popup-b {
  background:    var(--card-bg);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  overflow:      hidden;
  width:         100%;
  max-width:     780px;
  border:        1px solid var(--border);
  animation:     fadeUp 0.5s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}

.popup-b__header {
  padding:        32px 40px 24px;
  border-bottom:  1px solid var(--border);
  position:       relative;
}

.popup-b__eyebrow {
  font-size:      10.5px;
  font-weight:    500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  8px;
}

.popup-b__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size:   24px;
  font-weight: 700;
  color:       #ffffff;
  line-height: 1.2;
}

.popup-b__gallery {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0;
}

.popup-b__gallery-item {
  position:   relative;
  height:     140px;
  overflow:   hidden;
  background: #0d0d12;
}

.popup-b__gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.7;
  display:    block;
  transition: transform 0.4s ease, opacity 0.3s;
}
.popup-b__gallery-item:hover img { transform: scale(1.04); opacity: 0.9; }

.popup-b__gallery-item + .popup-b__gallery-item {
  border-left: 2px solid var(--card-bg);
}

.popup-b__gallery-caption {
  position:        absolute;
  bottom:          10px;
  left:            12px;
  font-size:       10px;
  font-weight:     500;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.85);
  background:      rgba(15,14,12,0.45);
  padding:         3px 8px;
  border-radius:   3px;
  backdrop-filter: blur(4px);
}

.popup-b__content {
  padding:        28px 40px 32px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
  position:       relative;
}

.popup-b__text {
  font-size:   13.5px;
  line-height: 1.75;
  color:       #b0b0c0;
}

.popup-b__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.tag {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.06em;
  padding:        4px 12px;
  border-radius:  100px;
  border:         1px solid var(--border);
  color:          #8888aa;
  background:     rgba(88,86,214,0.08);
}

.popup-b__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-top:     8px;
  border-top:      1px solid var(--border);
}

.popup-b__footer .btn-primary       { background: var(--accent); box-shadow: 0 4px 18px var(--accent-glow); }
.popup-b__footer .btn-primary:hover { background: #7270e0; }

.accent-bar {
  height:     3px;
  background: linear-gradient(90deg, var(--accent), #8b89f0);
}


/* ─────────────────────────────────────────────
   3. POPUP USE CASE
   Données ACF + image + load more
───────────────────────────────────────────── */

.uc-popup {
  display:        flex;
  flex-direction: row;
  min-height:     300px;
  overflow:       hidden;
  border-radius:  8px;
  margin:         -44px -48px -40px;
}

.uc-popup__image {
  flex:       0 0 35%;
  position:   relative;
  overflow:   hidden;
  background: #0d0d12;
}
.uc-popup__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.7;
  display:    block;
}
.uc-popup__image-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(88,86,214,0.45) 0%, transparent 70%);
}

.uc-popup__body {
  flex:           1;
  padding:        32px 36px;
  display:        flex;
  flex-direction: column;
  background:     #1a1a1a;
  overflow-y:     auto;
  max-height:     80vh;
}

.uc-popup__title {
  font-size:   34px !important;
  font-weight: 700;
  color:       #ffffff;
  line-height: 1.3;
  margin:      0 0 6px;
}

.uc-popup__subtitle {
  font-size:   18px !important;
  font-weight: 500;
  color:       #8888aa;
  margin:      0 0 16px;
}

.uc-popup__divider {
  width:         32px;
  height:        2px;
  background:    #5856D6;
  border-radius: 2px;
  margin:        0 0 20px;
}

.uc-popup__section-title {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #5856D6;
  margin:         0 0 6px;
}

.uc-popup__content {
  font-size:   13px;
  line-height: 1.75;
  color:       #b0b0c0;
  margin:      0 0 20px;
}
.uc-popup__content:last-child { margin-bottom: 0; }

/* WYSIWYG — styles du contenu riche généré par ACF */
.uc-popup__content h2,
.uc-popup__content h3,
.uc-popup__content h4 {
  font-size:      16px;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #5856D6;
  margin:         20px 0 6px;
}
.uc-popup__content h2:first-child,
.uc-popup__content h3:first-child,
.uc-popup__content h4:first-child { margin-top: 0; }

.uc-popup__content p {
  font-size:   13px;
  line-height: 1.75;
  color:       #b0b0c0;
  margin:      0 0 16px;
}
.uc-popup__content ul,
.uc-popup__content ol {
  font-size:    13px;
  line-height:  1.75;
  color:        #b0b0c0;
  margin:       0 0 16px;
  padding-left: 18px;
}
.uc-popup__content strong { color: #ffffff; font-weight: 600; }
.uc-popup__content a      { color: #5856D6 !important; text-decoration: underline !important; }

/* Tags */
.uc-popup__tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin-top: 20px;
}
.uc-tag {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.06em;
  padding:        4px 12px;
  border-radius:  100px;
  border:         1px solid rgba(255,255,255,0.07);
  color:          #8888aa;
  background:     rgba(88,86,214,0.08);
  margin-bottom:  8px;
}

/* Boutons d'action */
.uc-popup__actions {
  display:    flex;
  gap:        12px;
  margin-top: 24px;
}

.uc-btn-readmore,
.uc-btn-readmore:link,
.uc-btn-readmore:visited {
  font-size:       13px;
  font-weight:     500;
  color:           #ffffff !important;
  background:      #5856D6;
  padding:         4px 22px;
  border-radius:   8px;
  text-decoration: none !important;
  transition:      background 0.2s, transform 0.15s;
}
.uc-btn-readmore:hover { background: #7270e0 !important; transform: translateY(-1px); }

.uc-btn-download,
.uc-btn-download:link,
.uc-btn-download:visited {
  font-size:       13px;
  font-weight:     500;
  color:           #ffffff !important;
  background:      transparent;
  padding:         4px 22px;
  border-radius:   8px;
  border:          1px solid #ffffff;
  text-decoration: none !important;
  transition:      background 0.2s, transform 0.15s;
}
.uc-btn-download:hover { background: rgba(255,255,255,0.08) !important; transform: translateY(-1px); }

/* Load more */
.uc-hidden-card { display: none !important; }

.uc-loadmore-wrap {
  display:         flex;
  justify-content: center;
  margin-top:      40px;
}

.uc-loadmore-btn {
  all:            unset;
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.06em;
  color:          #ffffff;
  background:     transparent;
  border:         1px solid rgba(88,86,214,0.5);
  padding:        12px 32px;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background 0.2s, border-color 0.2s, transform 0.15s;
}
.uc-loadmore-btn:hover {
  background:   rgba(88,86,214,0.15);
  border-color: #5856D6;
  transform:    translateY(-1px);
}
.uc-loadmore-btn:disabled,
.uc-loadmore-btn.hidden { display: none; }

/* Responsive */
@media (max-width: 600px) {
  .uc-popup {
    flex-direction: column;
    margin:         -32px -24px -28px;
  }
  .uc-popup__image {
    flex:   none;
    height: 160px;
    width:  100%;
  }
  .uc-popup__body { padding: 28px 24px; }
}