/* Galerie projets — responsive v4.
   Principe :
   - vue normale = plein cadre (cover) pour eviter les bandes et les photos ecrasees ;
   - vue Agrandir = photo complete (contain) ;
   - mobile = cadre stable, croix toujours accessible dans la safe zone. */

.project-detail-media {
  background:#061a31 !important;
}

/* Plus de faux fond floute dans la vue normale : il accentuait les bandes. */
.project-detail-media::before,
.project-detail-media::after {
  display:none !important;
}

/* Vue normale, tous ecrans : le visuel remplit reellement son panneau. */
.project-detail-dialog:not(.is-gallery-expanded) .project-detail-media {
  position:relative;
  display:block;
  padding:0 !important;
  overflow:hidden;
}

.project-detail-dialog:not(.is-gallery-expanded) .project-detail-media > img,
.project-detail-dialog:not(.is-gallery-expanded) .project-detail-media.has-gallery > img {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:none !important;
}

/* Le mode Agrandir reste la vue de reference pour voir 100 % de la photo. */
.project-detail-dialog.is-gallery-expanded .project-detail-media {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#061a31 !important;
}

.project-detail-dialog.is-gallery-expanded .project-detail-media > img,
.project-detail-dialog.is-gallery-expanded .project-detail-media.has-gallery > img {
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:calc(100% - 24px) !important;
  max-height:calc(100% - 112px) !important;
  padding:0 !important;
  margin:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
}

/* Desktop : la colonne image doit etre remplie bord a bord. */
@media (min-width:921px) {
  .project-detail-dialog:not(.is-gallery-expanded) .project-detail-media {
    height:100% !important;
    min-height:0 !important;
  }

  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-prev { left:18px; }
  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-next { right:18px; }
}

/* Tablette + mobile : cadre stable, lisible et suffisamment haut pour les panoramiques. */
@media (max-width:920px) {
  .project-detail-modal {
    align-items:start;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-right:max(8px,env(safe-area-inset-right));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
    padding-left:max(8px,env(safe-area-inset-left));
  }

  .project-detail-dialog {
    width:100% !important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }

  .project-detail-dialog:not(.is-gallery-expanded) .project-detail-media {
    width:100%;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 3;
    max-height:58dvh;
  }

  /* Croix toujours atteignable, y compris avec encoche / Dynamic Island et apres scroll. */
  .project-detail-close {
    position:fixed !important;
    top:max(14px,calc(env(safe-area-inset-top) + 8px)) !important;
    right:max(14px,calc(env(safe-area-inset-right) + 8px)) !important;
    width:52px !important;
    height:52px !important;
    z-index:7000 !important;
    font-size:1.65rem !important;
    line-height:1 !important;
    background:rgba(255,255,255,.98) !important;
    color:#001a36 !important;
    border:1px solid rgba(0,26,54,.14) !important;
    touch-action:manipulation;
    pointer-events:auto;
    box-shadow:0 10px 34px rgba(0,15,32,.34) !important;
  }

  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-expand {
    top:12px;
    left:12px;
  }

  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-footer {
    left:8px;
    right:8px;
    bottom:8px;
  }

  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-arrow {
    top:50%;
  }
  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-prev { left:10px; }
  .project-detail-dialog:not(.is-gallery-expanded) .project-gallery-next { right:10px; }

  .project-detail-dialog.is-gallery-expanded {
    width:calc(100vw - 8px) !important;
    height:calc(100dvh - 8px) !important;
    max-height:calc(100dvh - 8px) !important;
    overflow:hidden !important;
  }

  .project-detail-dialog.is-gallery-expanded .project-detail-media {
    height:100% !important;
    min-height:0 !important;
  }
}

@media (max-width:560px) {
  .project-detail-dialog { border-radius:14px; }
  .project-detail-dialog:not(.is-gallery-expanded) .project-detail-media {
    aspect-ratio:4 / 3;
    max-height:54dvh;
  }
  .project-gallery-expand-label { display:none; }
  .project-gallery-arrow { width:42px;height:42px; }
  .project-gallery-thumb { width:52px;height:37px; }
}