/* Container page projets */
.container{
  width:100%; max-width:1000px; height:100%;
  display:flex; align-items:center; justify-content:center;
  z-index:10; position:relative; padding-top:80px;
}
@media (max-width: 900px){
  .container{ height:auto; align-items:flex-start; }
}

/* Image de fond (hover) */
#background-image-container{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden; }
#background-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.2); transition:transform .8s cubic-bezier(.25,.46,.45,.94); opacity:0;
}

/* Liste */
.projects-container{
  width:100%; position:relative; z-index:10;
  max-height:80vh; overflow-y:auto; padding:20px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.projects-container::-webkit-scrollbar{ display:none; }

.project-item{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  gap:400px; padding:.7rem 0; border-bottom:1px solid rgba(248,245,242,.1); cursor:pointer;
}
.project-title,.project-year{
  font-size:1.8rem; position:relative; z-index:2; mix-blend-mode:exclusion; padding:10px;
}

/* Fond clair qui monte */
.project-item::before{
  content:""; position:absolute; bottom:0; left:0; width:100%; height:0;
  background-color:var(--warm-off-white); z-index:1; pointer-events:none;
  transition:height .2s cubic-bezier(.445,.05,.55,.95) 0s;
}
.project-item:hover::before{ height:100%; }
.project-item:not(:hover)::before{ transition-duration:.8s; }

/* Typo responsive */
@media (max-width:768px){ .project-title,.project-year{ font-size:1.4rem; } }
@media (max-width:480px){ .project-item{ flex-direction:column; gap:.5rem; } }

/* Gap fluide */
@media (max-width:1280px){ .project-item{ gap:220px; } }
@media (max-width:1024px){ .project-item{ gap:140px; } }
@media (max-width:820px){  .project-item{ gap:80px;  } }
@media (max-width:560px){
  .project-item{ gap:.6rem; }
  .project-title,.project-year{ padding:8px 6px; }
}

/* Évite double scroll sur mobile + safe area en bas */
@media (max-width:768px){
  .projects-container{
    max-height:none; overflow-y:visible;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Overlay + Modal ===== */
.project-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(10,10,10,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:3000;
}
.project-overlay.is-open{ display:flex; animation:overlayIn 180ms ease; }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }

.project-modal{
  width:min(900px,92vw); max-height:min(84vh,900px);
  background:#111218; color:var(--warm-off-white);
  border:1px solid rgba(248,245,242,.1);
  overflow:hidden; display:grid; grid-template-columns:1.2fr 1fr; gap:0;
  box-shadow:0 20px 90px rgba(0,0,0,.5);
  transform:translateY(6px) scale(.98); opacity:0;
  animation:modalIn 220ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes modalIn{ to{ transform:translateY(0) scale(1); opacity:1; } }

.pm-media{
  background:#0e0f16; border-right:1px solid rgba(248,245,242,.06);
  display:flex; align-items:center; justify-content:center; min-height:240px;
}

/* ===== Carrousel ===== */
.carousel{ position:relative; width:100%; height:100%; overflow:hidden; }
.carousel-track{ display:flex; width:100%; height:100%; transition:transform 380ms cubic-bezier(.2,.7,.2,1); }
.carousel-slide{ min-width:100%; height:100%; position:relative; }
.carousel-slide img,
.carousel-slide video{ width:100%; height:100%; object-fit:contain; background:#000; display:block; }

/* Flèches (sans radius) */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:1px solid rgba(248,245,242,.18);
  background:rgba(248,245,242,.08); color:var(--warm-off-white);
  cursor:pointer; line-height:1; font-size:26px; display:grid; place-items:center;
  transition:transform 140ms ease, background 140ms ease; z-index:2;
}
.carousel-btn:hover{ background:rgba(248,245,242,.16); transform:translateY(-50%) scale(1.04); }
.carousel-btn.prev{ left:10px; } .carousel-btn.next{ right:10px; }

@media (max-width:420px){ .carousel-btn{ width:36px; height:36px; font-size:22px; } }

/* Dots (carrés) */
.carousel-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center; align-items:center; z-index:2;
}
.carousel-dot{
  width:10px; height:10px;
  border:1px solid rgba(248,245,242,.35);
  background:rgba(248,245,242,.1); cursor:pointer;
}
.carousel-dot.is-active{ background:rgba(248,245,242,.9); border-color:rgba(248,245,242,.9); }

/* Contenu modal */
.pm-content{
  padding:calc(36px + 20px) 22px 22px 22px; overflow:auto;
  text-transform:none; letter-spacing:0;
}
.pm-close{
  position:absolute; top:10px; right:12px; width:36px; height:36px;
  border:none; background:rgba(248,245,242,.08);
  color:var(--warm-off-white); font-size:22px; line-height:1; cursor:pointer;
  transition:background 160ms ease, transform 160ms ease; z-index:3;
}
.pm-close:hover{ background:rgba(248,245,242,.16); transform:translateY(-1px); }
#pm-title{ font-size:1.8rem; margin:2px 0 6px 0; letter-spacing:-.02em; text-transform:uppercase; }
.pm-meta{ opacity:.8; margin-bottom:12px; text-transform:uppercase; }
.pm-desc{ line-height:1.45; opacity:.95; }

/* Responsive modal */
@media (max-width:900px){
  .project-modal{ grid-template-columns:1fr; max-height:88vh; }
  .pm-media{ height:34vh; }
}
@media (max-height:680px) and (max-width:900px){
  .pm-media{ height:40vh; }
}