/* ====================================================================== */
/* TITRAGES GLOBAUX */
/* ====================================================================== */
.h2 {
  font-size: clamp(16px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10px;
}

/* ====================================================================== */
/* RESET & GLOBAL */
/* ====================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

body {
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

/* ====================================================================== */
/* HEADER */
/* ====================================================================== */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: #000;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-main .left a,
.header-main .right a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(13px, 1vw, 24px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.header-main a:hover { opacity: 0.8; }

/* ====================================================================== */
/* HEADER EXTRA (INDEX UNIQUEMENT) */
/* ====================================================================== */
.header-extra {
  z-index: 500;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px 20px 20px;
  background: #FFF;
  width: 100%;
  color: #000;
}

.header-extra p {
  font-size: clamp(39px, 3vw, 72px);
  line-height: 1.1;
  font-weight: 100;
  margin: 0;
}

header.scrolled .header-extra { 
  max-height: 0; 
  padding-top: 0; 
  padding-bottom: 0; 
}

/* ====================================================================== */
/* ESPACEMENTS DYNAMIQUES */
/* ====================================================================== */
body.page-index main {
  margin-top: 250px;
  transition: margin-top 0.4s ease;
}

body.page-index main.compact {
  margin-top: 40px;
}

@media (max-width: 900px) {
  body.page-index main {
    margin-top: 120px;
  }
  body.page-index main.compact {
    margin-top: 0;
  }
}

/* ====================================================================== */
/* GALERIE INDEX */
/* ====================================================================== */
.gallery-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

/* Par défaut (mobile) : 1 colonne */
.photo-card {
  flex: 1 1 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.thumb {
  width: 100%;
  height: calc(100vh / 3);
  min-height: 200px;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

/* Image hover (couvre bien toute la vignette) */
.thumb img.hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.photo-card:hover .thumb img.base { display: none; }
.photo-card:hover .thumb img.hover { display: block; }

/* Moyenne largeur : 2 colonnes */
@media (min-width: 650px) {
  .photo-card {
    flex: 1 1 50%;
    max-width: 50%;
  }
  .thumb {
    height: calc(100vh / 2.5);
    min-height: 240px;
  }
}

/* Large écrans : 3 colonnes */
@media (min-width: 1200px) {
  .photo-card {
    flex: 1 1 33.333%;
    max-width: 33.333%;
  }
  .thumb {
    height: calc(100vh / 2.2);
    min-height: 280px;
  }
}

/* Mode full-span cohérent */
@media (min-width: 1200px) {
  .photo-card.full-span {
    flex-basis: 100%;
    max-width: 100%;
  }
  .photo-card.full-span .thumb {
    width: 100%;
    height: calc(100vh * 0.6);
  }
}

/* ====================================================================== */
/* TITRES EN OVERLAY SUR HOVER */
/* ====================================================================== */
.photo-card {
  position: relative;
}

.photo-title {
  position: absolute;
  bottom: 10px;
  left: 18px;
  right: 0;
  text-align: left;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 5;
  pointer-events: none;
}

.photo-card:hover .photo-title {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================================================== */
/* FILTRES (désactivés) */
/* ====================================================================== */
.filter-bar {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ====================================================================== */
/* OVERLAY CONTACT */
/* ====================================================================== */
#contactOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  color: #000;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 0px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  height: auto;
  max-height: 90svh;
  overflow-y: auto;
  transform: translateY(-110%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#contactOverlay.show { transform: translateY(0); }

#contactClose {
  position: sticky;
  top: 0;
  align-self: flex-end;
  font-size: 24px;
  font-weight: 400;
  cursor: pointer;
  color: #000;
  background: #fff;
  padding: 10px;
}

#contactOverlay * {
  font-size: clamp(39px, 3vw, 72px);
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  color: #000000 !important;
}

#contactOverlay a { 
  text-decoration: underline; 
}

/* ====================================================================== */
/* PAGE PROJET */
/* ====================================================================== */
body.page-projet,
body.page-projet html { 
  overflow: hidden; 
  height: 100%; 
}

body.page-projet,
body.page-projet .media-container { 
  transition: background-color 0.2s ease; 
}

/* Conteneur principal média */
.media-container {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000;
  transform-origin: top center;
}

/* Couche média animée */
.media-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* Médias */
.media-item { 
  width: 100%; 
  height: 100%; 
  object-position: center; 
}

/* ---------------- CONTAIN ---------------- */
.media-layer img,
.media-layer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(0.96) translateY(-1%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mode compress */
body.page-projet.compress .media-layer img:not(.full-image),
body.page-projet.compress .media-layer video:not(.full-video) {
  transform: scale(0.88) translateY(-10%);
}

/* ---------------- COVER ---------------- */
.media-layer img.full-image,
.media-layer video.full-video {
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* En mode compress : cover inchangé */
body.page-projet.compress .media-layer img.full-image,
body.page-projet.compress .media-layer video.full-video {
  transform: scale(1.02);
}

/* Zones clic navigation */
.nav-zone {
  position: fixed;
  top: 50px;
  width: 50%;
  height: calc(100% - 100px);
  z-index: 0;
}
.nav-zone.left { left: 0; }
.nav-zone.right { right: 0; }

body.page-projet .nav-zone,
body.page-projet .nav-zone * { cursor: none !important; }
body.page-projet .media-container img,
body.page-projet .media-container video { cursor: none !important; }

/* ====================================================================== */
/* BANDEAU BAS */
/* ====================================================================== */
.project-description {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 1500;
  overflow: hidden;
  height: 50px;
  transition:
    height 0.9s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Ligne titre */
.project-description .info-line {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 50px;
  font-weight: 400;
  padding: 0 20px;
  cursor: none !important;
  background: inherit;
  color: inherit;
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Texte description */
.project-description .desc-content {
  padding: 6px 20px 18px;
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  transform: translateY(20px);
  overflow: hidden;
  transition:
    opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.9s cubic-bezier(0.25, 1, 0.5, 1),
    max-height 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  background: inherit;
  color: inherit;
}

/* État ouvert */
.project-description.show { height: auto; }

.project-description.show .info-line { transform: translateY(-4px); }

.project-description.show .desc-content {
  opacity: 1;
  transform: translateY(0);
  max-height: 70vh;
}

/* CALL TO ACTION : petits points à droite */
.project-description .cta-dots {
  float: right;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.35;
  margin-left: 8px;
  transform: translateY(-1px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  user-select: none;
}
.project-description:hover .cta-dots {
  opacity: 0.65;
  transform: translateY(-2px);
}

/* DESCRIPTION en colonnes sur desktop */
@media (min-width: 900px) {
  .project-description .desc-content {
    column-count: 2;
    column-gap: 40px;
  }
  .project-description .desc-content p {
    margin-bottom: 1em;
    break-inside: avoid;
  }
}