/* ##########################################################################
   BLOC 10 — MODAL (Vanilla)
   Dernière MàJ : 28/02/2026
   - Backdrop + fenêtre + iframe
   - Scroll lock (html/body)
   - Boutons fermer / ouvrir
   ########################################################################## */

.sep-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .70);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10080;
}

.sep-modal-backdrop.is-open{ display: flex; }

.sep-modal{
  position: relative;
  width: min(980px, 94vw);

  /* Réglage rapide : hauteur de modale */
  height: 80vh;     /* fallback */
  height: 80dvh;    /* mieux sur mobile (barre d’URL) */
  max-height: 92vh; /* garde une marge */
  max-height: 92dvh;

  background: var(--sep-surface);
  border-radius: var(--sep-ui-radius-modal, 14px);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,.70);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
}

.sep-modal-header{
  padding: .6rem 1.2rem .5rem;
  border-bottom: 1px solid rgba(148, 163, 184, .60);
}

.sep-modal-title{
  margin: 0;
  font-size: 1rem;
  text-align: center;
  opacity: .90;
  letter-spacing: .02em;
}

.sep-modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--sep-surface);
}

.sep-modal-body iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.sep-modal-footer{
  padding: .55rem 1.2rem .8rem;
  border-top: 1px solid rgba(148, 163, 184, .60);
  background: var(--sep-surface);
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  align-items: center;
}

.sep-modal-openpage{
  text-decoration: none;
  font-weight: 600;
}

.sep-modal-close{
  border: none;
  cursor: pointer;
  z-index: 2;
}

.sep-modal-close-top{
  position: absolute;
  top: .45rem;
  right: .8rem;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: #111827;
}

.sep-modal-close-top:hover,
.sep-modal-close-top:focus-visible{
  color: var(--sep-accent);
  outline: 2px solid rgba(109,40,217,.25);
  outline-offset: 2px;
}

.sep-modal-close-btn{
  padding: .38rem 1.3rem;
  border-radius: var(--sep-ui-radius-btn-pill, 999px);
  border: 1px solid rgba(17, 24, 39, .15);
  background: #111827;
  color: #f9fafb;
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.sep-modal-close-btn:hover,
.sep-modal-close-btn:focus-visible{
  background: var(--sep-accent);
  border-color: var(--sep-accent);
  outline: none;
}

/* Bloquer le scroll de la page quand la modale est ouverte */
html.sep-modal-open,
body.sep-modal-open{ overflow: hidden; }

@media (max-width: 768px){
  .sep-modal{
    width: 96vw;
    height: 80vh;
    height: 80dvh;
    max-height: 96vh;
    max-height: 96dvh;
    border-radius: 10px;
  }
}

/* ##########################################################################
   BLOC XX — IMAGES DES ARTICLES CHARGÉS EN MODALE
   Scope : uniquement dans l’iframe de la modale
   Objectif :
   - garder portraits et paysages visibles
   - éviter les images géantes
   - neutraliser les flottants hérités du contenu
   ########################################################################## */

:where(html.sep-in-modal, body.sep-in-modal){
  --sep-modal-media-max-w: 760px;
  --sep-modal-media-max-h: clamp(220px, 46vh, 420px);
  --sep-modal-media-gap-y: 1rem;
}

/* Images d’article */
:where(body.sep-in-modal) :is(
  article,
  .item-page,
  .com-content-article,
  .com-content-article__body
) img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, var(--sep-modal-media-max-w)) !important;
  max-height: var(--sep-modal-media-max-h) !important;
  margin: var(--sep-modal-media-gap-y) auto;
  object-fit: contain;
}

/* Figures / wrappers images Joomla */
:where(body.sep-in-modal) :is(
  article,
  .item-page,
  .com-content-article,
  .com-content-article__body
) :is(
  figure,
  .image,
  .img-fulltext-left,
  .img-fulltext-right,
  .pull-left,
  .pull-right,
  .float-start,
  .float-end
){
  float: none !important;
  display: block;
  width: auto !important;
  max-width: 100% !important;
  margin: 1rem auto !important;
  text-align: center;
}

:where(body.sep-in-modal) figure img{
  margin-inline: auto;
}

:where(body.sep-in-modal) figcaption{
  max-width: min(100%, var(--sep-modal-media-max-w));
  margin: .45rem auto 0;
  font-size: .92rem;
  line-height: 1.45;
  opacity: .78;
}

/* Petits écrans */
@media (max-width: 768px){
  :where(html.sep-in-modal, body.sep-in-modal){
    --sep-modal-media-max-w: 100%;
    --sep-modal-media-max-h: clamp(180px, 34vh, 300px);
  }
}