/* --- ÉTAT MASQUÉ --- */
.card-modal[hidden] { display: none !important; }

/* --- OVERLAY PLEIN ÉCRAN --- */
.card-modal {
  position: fixed;
  inset: 0;                      /* top/right/bottom/left = 0 */
  display: flex;
  align-items: center;           /* centrage vertical */
  justify-content: center;       /* centrage horizontal */
  padding: 16px;                 /* respirations bords petits écrans */
  background: rgba(0, 0, 0, 0.6);
  z-index: 1056;                 /* > Bootstrap modal (1055) */
}

/* --- BOÎTE DU MODAL --- */
.card-dialog {
  width: 100%;
  max-width: 720px;              /* largeur max */
  background: #111;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  position: relative;
  transform: translateZ(0);      /* évite effets de rendu bizarres */
}

/* --- BOUTON FERMER --- */
.card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 10px;
  z-index: 2;
}

/* --- IFRAME PAIEMENT --- */
#cardFrame {
  display: block;
  width: 100%;
  height: min(80vh, 860px);      /* confortable sur desktop & mobile */
  border: 0;
  background: #0b0b0b;
}

/* --- PETITS ÉCRANS --- */
@media (max-width: 480px) {
  #cardFrame { height: 85vh; }
}

/* (optionnel) lock du scroll arrière-plan quand modal ouvert */
body.scroll-lock { overflow: hidden; }