/* =========================
   410 Popin — CSS complet
   ========================= */

/* Overlay plein écran */
.fourten-popin-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;    /* centre vertical */
  justify-content: center;/* centre horizontal */
  z-index: 999999;
}
.fourten-popin-overlay[hidden]{
  display: none !important;
}

/* Fenêtre popin (desktop baseline)
   - largeur fixe 400px (max 95vw)
   - max-height 90vh (desktop)
   - padding-top augmenté pour laisser la place de la croix
   - flex interne pour centrer le contenu quand il est plus petit
*/
.fourten-popin{
  background: #fff;
  border-radius: 12px;
  position: relative;
  width: 400px;
  max-width: 95vw;
  max-height: 90vh;
  padding: 48px 24px 24px; /* réserve la croix en haut à droite */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden; /* évite le débordement des ombres pendant le scroll interne */
}

/* Zone contenu
   - centrée si contenu petit (margin:auto)
   - scroll interne si contenu grand
*/
.fourten-popin-content{
  margin: auto;          /* centre vertical/horizontal si espace dispo */
  width: 100%;
  max-height: 100%;      /* ne dépasse pas la popin */
  overflow: auto;        /* scroll interne si nécessaire */
}

/* Bouton de fermeture (croix) */
.fourten-popin-close{
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.fourten-popin-close:hover,
.fourten-popin-close:focus{
  color: #000;
  outline: none;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 782px){

  /* Tient compte des encoches / barres système */
  .fourten-popin-overlay{
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* La popin n’occupe AU MAX 80% de la hauteur visible,
     et reste centrée. La hauteur réelle s’ajuste au contenu
     si celui-ci est plus petit (grâce au flex + margin:auto). */
  .fourten-popin{
    width: 95vw;
    max-height: 80vh;   /* fallback standard */
    border-radius: 12px;
    overflow: hidden;   /* conserve les bords nets pendant le scroll interne */
  }

  /* Progressive enhancement : unités viewport visibles/dynamiques
     (corrigent le bug des barres d’adresse mobiles) */
  @supports (height: 1svh){
    .fourten-popin{ max-height: 80svh; }
  }
  @supports (height: 1dvh){
    .fourten-popin{ max-height: 80dvh; }
  }

  /* Le padding du contenu est géré par la popin */
  .fourten-popin-content{ padding: 0; }
}