@charset "UTF-8";
/* ==========================================================================
   Styles propres à galerie.html — Journée Mondiale du Tourisme 2026
   ========================================================================== */

/* ---------- Hero « mur de galerie » ---------- */
.jmt-gallery-hero{ min-height:auto; padding-top:150px; padding-bottom:70px; }

.jmt-gh-title{ position:relative; z-index:2; text-align:center; margin-bottom:44px; }
.jmt-gh-title h1{ margin:0; }

.jmt-gh-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:.95fr 1.15fr; gap:52px; align-items:center;
}
@media (max-width:991.98px){ .jmt-gh-grid{ grid-template-columns:1fr; gap:40px; } }

.jmt-gh-text{ text-align:left; }
.jmt-gh-text .jmt-hero-badge{ margin-inline:0; }
.jmt-gh-text .jmt-hero-sub{ margin-inline:0; max-width:520px; }
.jmt-gh-text .jmt-hero-presented{ margin-inline:0; justify-content:flex-start; max-width:520px; }
.jmt-gh-text .jmt-hero-meta{ justify-content:flex-start; }
.jmt-gh-text .jmt-hero-ctas{ justify-content:flex-start; margin-top:8px; }
@media (max-width:991.98px){
  .jmt-gh-text{ text-align:center; }
  .jmt-gh-text .jmt-hero-sub, .jmt-gh-text .jmt-hero-presented{ margin-inline:auto; }
  .jmt-gh-text .jmt-hero-meta, .jmt-gh-text .jmt-hero-ctas{ justify-content:center; }
}

.jmt-gh-wall{ display:flex; flex-direction:column; gap:16px; }
.jmt-gwall-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.jmt-gwall-track{ display:flex; gap:14px; width:max-content; animation:gwallLeft 38s linear infinite; }
.jmt-gwall-row.reverse .jmt-gwall-track{ animation-name:gwallRight; animation-duration:44s; }
.jmt-gh-wall:hover .jmt-gwall-track{ animation-play-state:paused; }
.jmt-gwall-frame{
  position:relative; flex:none; width:118px; aspect-ratio:3508/4964; border-radius:8px; overflow:hidden;
  border:3px solid #fff; box-shadow:0 16px 34px -14px rgba(0,0,0,.6); background:#fff;
}
.jmt-gwall-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes gwallLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes gwallRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (max-width:575.98px){ .jmt-gwall-frame{ width:84px; } }

/* Hero — arrière-plan drapeau haïtien */
.jmt-hero-bg-galerie{
  background:linear-gradient(125deg,rgba(5,38,53,.93),rgba(14,70,88,.89) 55%,rgba(10,92,76,.86) 130%),url('../img/gallery/haiti-evolution-du-drapeau-haitien.webp') center/cover fixed;
}
/* background-attachment:fixed est instable sur mobile (Safari iOS notamment) :
   le fond peut ne pas s'afficher du tout. On le désactive sous 992px. */
@media (max-width:991.98px){
  .jmt-hero-bg-galerie{
    background-attachment:scroll;
  }
}

/* ---------- Grille des portraits (blocs de 3) ---------- */
.jmt-portrait-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .jmt-portrait-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .jmt-portrait-grid{ grid-template-columns:1fr; } }

.jmt-portrait-card{
  background:#fff; border:1px solid var(--jmt-line); border-radius:20px; overflow:hidden;
  box-shadow:var(--jmt-shadow-sm); transition:.3s; display:flex; flex-direction:column; height:100%;
}
.jmt-portrait-card:hover{ transform:translateY(-8px); box-shadow:var(--jmt-shadow); }
.jmt-portrait-card .photo{
  position:relative; display:block; width:100%; aspect-ratio:3508/4964; overflow:hidden;
  background:#fff; border:0; border-bottom:4px solid var(--jmt-red-dark); padding:0; margin:0;
  font:inherit; text-align:inherit; cursor:zoom-in;
}
.jmt-portrait-card .photo img{ width:100%; height:100%; object-fit:contain; display:block; transition:.5s; }
.jmt-portrait-card:hover .photo img{ transform:scale(1.015); }
.jmt-portrait-card .expand{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(142,15,34,.82); backdrop-filter:blur(4px); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
  opacity:.9; transition:.25s;
}
.jmt-portrait-card .photo:hover .expand, .jmt-portrait-card .photo:focus-visible .expand{ opacity:1; background:var(--jmt-red); }
.jmt-portrait-card .body{ padding:16px 20px 20px; flex:1; display:flex; flex-direction:column; }
.jmt-portrait-card .period{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jmt-red); margin-bottom:6px; }
.jmt-portrait-card .pname{ font-size:1.04rem; font-weight:800; color:var(--jmt-navy); margin:0 0 2px; line-height:1.25; }
.jmt-portrait-card .prole{ font-size:.8rem; color:var(--jmt-muted); margin:0 0 14px; }
.jmt-portrait-card .bio-btn{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background:var(--jmt-cream); border:1px solid var(--jmt-line); color:var(--jmt-navy-2);
  font-weight:700; font-size:.82rem; padding:9px 16px; border-radius:999px; cursor:pointer; transition:.25s;
}
.jmt-portrait-card .bio-btn:hover{ background:var(--jmt-red-dark); border-color:var(--jmt-red-dark); color:#fff; }
.jmt-portrait-card .bio-btn i{ font-size:.8rem; }

/* ---------- Lightbox portraits (photo plein écran + zoom) ---------- */
body.lb-open, body.modal-open{ overflow:hidden; }
.jmt-lightbox{
  position:fixed; inset:0; z-index:2000;
  background:linear-gradient(135deg,rgba(10,24,42,.96),rgba(94,12,28,.92));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease; padding:20px;
}
.jmt-lightbox.open{ opacity:1; visibility:visible; }
.jmt-lightbox .lb-stage{
  width:min(92vw,880px); height:min(80vh,1100px); overflow:auto;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in; touch-action:none;
}
.jmt-lightbox .lb-stage.zoomed{ cursor:grab; align-items:flex-start; justify-content:flex-start; }
.jmt-lightbox .lb-stage.zoomed.dragging{ cursor:grabbing; }
.jmt-lightbox .lb-stage img{
  max-width:100%; max-height:100%; display:block; border-radius:4px; user-select:none;
  -webkit-user-drag:none; border:4px solid var(--jmt-red-dark);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55); transition:transform .25s ease; background:#fff;
}
.jmt-lightbox .lb-stage.zoomed img{ max-width:none; max-height:none; width:auto; height:auto; transition:none; }
.jmt-lightbox .lb-close, .jmt-lightbox .lb-nav{
  position:absolute; width:46px; height:46px; border-radius:50%; z-index:2;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer; transition:.25s;
}
.jmt-lightbox .lb-close:hover, .jmt-lightbox .lb-nav:hover{ background:var(--jmt-red); border-color:var(--jmt-red); }
.jmt-lightbox .lb-close{ top:18px; right:18px; }
.jmt-lightbox .lb-nav.prev{ left:18px; top:50%; transform:translateY(-50%); }
.jmt-lightbox .lb-nav.next{ right:18px; top:50%; transform:translateY(-50%); }
.jmt-lightbox .lb-caption{ color:#fff; text-align:center; margin-top:14px; padding:0 60px; }
.jmt-lightbox .lb-caption strong{ display:block; font-size:1.05rem; font-weight:800; }
.jmt-lightbox .lb-caption span{ font-size:.78rem; opacity:.75; margin:0 6px; }
.jmt-lightbox .lb-hint{ color:rgba(255,255,255,.55); font-size:.72rem; margin-top:8px; display:flex; align-items:center; gap:6px; }
@media (max-width:650px){
  .jmt-lightbox .lb-nav, .jmt-lightbox .lb-close{ width:38px; height:38px; font-size:.9rem; }
  .jmt-lightbox .lb-caption{ padding:0 46px; }
}

/* ---------- Modal biographie ---------- */
.jmt-modal{
  position:fixed; inset:0; z-index:2100; background:rgba(10,20,35,.74); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.jmt-modal.open{ opacity:1; visibility:visible; }
.jmt-modal-dialog{
  background:#fff; border-radius:22px; max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
  padding:36px 34px 30px; position:relative; box-shadow:0 40px 90px -20px rgba(0,0,0,.5);
  border-top:5px solid var(--jmt-red-dark);
  transform:translateY(16px); transition:transform .3s ease;
}
.jmt-modal.open .jmt-modal-dialog{ transform:translateY(0); }
.jmt-modal-close{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--jmt-cream); color:var(--jmt-navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.jmt-modal-close:hover{ background:var(--jmt-red-dark); color:#fff; }
.jmt-modal-period{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--jmt-red); margin-bottom:6px; }
.jmt-modal-name{ font-size:1.5rem; font-weight:800; color:var(--jmt-navy); margin:0 0 4px; padding-right:34px; }
.jmt-modal-role{ font-size:.92rem; color:var(--jmt-muted); margin:0 0 20px; }
.jmt-modal-body{ font-size:.95rem; color:var(--jmt-ink); line-height:1.7; }
.jmt-modal-body ul{ margin:0; padding-left:20px; display:grid; gap:10px; }
.jmt-modal-body p.tbd{ font-style:italic; color:var(--jmt-muted); margin:0; }
.jmt-modal-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--jmt-line); }
.jmt-modal-nav button{
  display:inline-flex; align-items:center; gap:8px; background:var(--jmt-cream); border:1px solid var(--jmt-line);
  color:var(--jmt-navy); font-weight:700; font-size:.84rem; padding:10px 16px; border-radius:999px; cursor:pointer; transition:.2s;
}
.jmt-modal-nav button:hover{ background:var(--jmt-red-dark); color:#fff; border-color:var(--jmt-red-dark); }
@media (max-width:575.98px){ .jmt-modal-dialog{ padding:30px 22px 24px; } }