@font-face {
  font-family: 'Apercu';
  src: url(fonts/apercu_regular_pro.otf);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Apercu', sans-serif;
}

html {
  /* always reserve vertical scrollbar so layout doesn't shift between pages */
  overflow-y: scroll;
}

/* main prend l'espace restant et démarre sous le header */
main {
  flex: 1;
  padding-top: 100px; /* même valeur que header height */
}

/* make body the flex container so footer sticks to bottom */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* padding-top: 100px;  <-- retirer */
}

footer {
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  font-weight: lighter;
  text-align: center;
  margin-top: 40px; /* space above footer */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px; /* ajuster selon la hauteur réelle */
  z-index: 1000;
  background: white;
  display: flex;             /* ✅ active flexbox */
  align-items: center;       /* centre verticalement */

}

.header-nav {
  display: flex;
  align-items: center;   /* vertical center */
  gap: 40px;             /* space between right-side links */
  margin-left: 66px;
  margin-right: 75px;
  width: 100%;
  font-weight: lighter;
}

.header-nav a:hover {
  color: gray;
  font-weight: lighter;
  cursor: pointer;
}

.header-nav a {
  text-decoration: none;
  color: black;
  flex: none;            /* ensure links don't expand */
}

.header-nav a#brand {
  margin-right: auto;    /* push other links to the right */
  text-align: left;
}

/* override any old #h1 rule that made anchors flex:1 */
#h1 {
  flex: initial;
  text-align: left;
  font-family: Apercu;
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 16px;
  color: black;
  text-decoration: none;
  font-weight: lighter;
}

.image-grid {
  column-count: 1;
  column-gap: 66px;
  margin-left: 66px;
  margin-right: 75px;
  margin-bottom: 70px;

}

@media (min-width: 600px) {
  .image-grid {
    column-count: 2;
  }
  .photographie-grid {
    column-count: 2;
  }
}

@media (min-width: 1200px) {
  .image-grid {
    column-count: 3;
  }
  .photographie-grid {
    column-count: 3;
  }
}

.image-grid img {
  width: 100%;
  margin-bottom: 66px;
  display: block;
}

/* in index image grid, portrait/square images occupy less visual space */
.image-grid .image-item.small-scale img {
  width: 70%;
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-row {
  display: grid;
  margin-left: 60px;
  margin-right: 60px;
  grid-template-columns: 1.5fr 0.4fr 0.5fr 0.3fr 0.111fr;
  font-size: 14px;
  font-weight: lighter;
  text-decoration: none;
  color: black;
  background: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.project-row > div {
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-row:hover {
  color: gray;
  font-weight: lighter;
  cursor: pointer;
}

#title {
  font-family: Apercu;
  text-align: left;
  font-size: 24px;
  color: black;
  text-decoration: none;
  font-weight: bolder;
  line-height: 30px;
  margin-bottom: 10px;
}

#subtitle {
  font-family: Apercu;
  text-align: left;
  font-size: 16px;
  color: black;
  text-decoration: none;
  font-weight: lighter;
  line-height: 20px;
  margin-bottom: 5px;
}

#text {
  font-family: Apercu;
  text-align: left;
  font-size: 12px;
  color: black;
  text-decoration: none;
  font-weight: lighter;
  line-height: 1.2;
}

/* layout: left column fixed/min, right columns flexible */
.layout {
  display: grid;
  text-align: left;
  grid-template-columns: 1fr; /* mobile: single column */
  column-gap: 50px;
  /* use the same horizontal margins & bottom spacing as .image-grid */
  margin-left: 66px;
  margin-right: 75px;
  margin-bottom: 70px;
  align-items: start; /* allow children to keep their own height (needed for sticky) */
}

/* two-column layout — same breakpoint as .image-grid (600px) */
@media (min-width: 600px) {
  .layout {
    grid-template-columns: minmax(280px, 380px) 1fr;
  }
}

/* wide screens — same breakpoint as .image-grid (1200px) */
@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 360px 1fr 1fr;
  }
}

/* keep the left info column fixed while allowing right columns to scroll */
.project-info {
  position: sticky;
  top: calc(100px); /* header height (100px) + optional gap — adjust if needed */
  z-index: 5;
  align-self: start;
  /* don't stretch vertically */
  justify-self: start;   /* align to left inside its cell */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* hanging indent: keep first line in place, indent subsequent lines */
  padding-left: 20px;   /* space for continuation lines */
  text-indent: -20px;   /* pulls first line back to the left edge */
}

.project-info img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  object-fit: contain;
  margin: 0;
}

.project-text {
  grid-column: 1 / -1; /* stacked on small screens */
  max-height: calc(100vh - 100px - 16px); /* same height limit as images */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 50px;
  padding-right: 50px;
  line-height: 1.2;
  font-size: 12px;
  color: black;;
}

.project-text-eng {
  grid-column: 1 / -1; /* stacked on small screens */
  max-height: calc(100vh - 100px - 16px); /* same height limit as images */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 50px;
  padding-right: 50px;
  line-height: 1.2;
  font-size: 12px;
  color: gray;
}

/* on two-column layout (>=800px) the middle/right area is column 2 */
@media (min-width: 800px) {
  .project-text {
    grid-column: 2 / -1; /* occupy the right area when only two columns exist */
  }

  .project-text-eng {
    grid-column: 2 / -1; /* follow project-text in the right area when only two columns exist */
  }
}

/* on wide screens (>=1200px) place it in the middle column only */
@media (min-width: 1200px) {
  .project-text {
    grid-column: 2 / 3; /* middle column */
  }

  .project-text-eng {
    grid-column: 3 / -1; /* on wide screens put project-text-eng in the rightmost column */
  }
}

/* project images: occupy the right column(s) */
/* no scrollbars here — each image determines its cell height from its width (natural aspect ratio) */
.project-image {
  grid-column: 1 / -1;    /* default: full width (mobile) */
  display: grid;
  gap: 30px;
  align-items: start;     /* let each item size itself */
  grid-auto-rows: auto;   /* row height follows content (image) */
  /* removed max-height / overflow so no scrollbar appears */
}

/* occupy right area (columns 2..end) when layout becomes two+ columns */
@media (min-width: 800px) {
  .project-image {
    grid-column: 2 / -1;  /* place images in the right column(s) */
  }
}

/* on wide screens create two internal columns for images;
   landscape images can span both internal columns, portrait/square stay single-column */
@media (min-width: 1200px) {
  .project-image {
    grid-column: 2 / -1;                /* ensure container stays in right area */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* landscape images span both internal columns */
  .project-image .image-item.landscape {
    grid-column: 1 / -1;
  }

  /* portrait / square images occupy a single internal column */
  .project-image .image-item.portrait {
    grid-column: auto;
  }

  /* project-image-large: always span both internal columns like a horizontal image */
  .project-image .image-item.project-image-large {
    grid-column: 1 / -1 !important;
  }
}

/* wrapper for each image — no fixed height, do not clip */
.project-image .image-item {
  /* center content vertically & horizontally inside the image cell */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center; /* center the wrapper inside the grid cell */

  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  display: block;
}

/* images keep their aspect ratio, width never exceeds cell width */
.project-image .image-item img,
.project-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* ensure full image is visible and centered */
}

/* force small-marked items to never span multiple internal columns */
@media (min-width: 1200px) {
  .project-image .image-item.project-image-small,
  .project-image .image-item.project-image-small.landscape {
    grid-column: auto !important;
  }
}

/* responsive YouTube embed */
/* make video-embed act like a horizontal image inside .project-image
   and provide a clickable thumbnail that loads the iframe inline */
.video-embed {
  position: relative;
  cursor: pointer;
  width: 100%;
  max-width: 1100px;
  margin: 24px auto;
  background: #000;
  overflow: hidden;
  display: inline-block;
}

/* video embed: 16:9 box, thumbnail covers, no pseudo-element fallback */
.project-image .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  display: block;
}

/* thumbnail covers the box */
.project-image .video-embed .video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* play icon above thumbnail */
.project-image .video-embed .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  font-size: 40px;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* le curseur devient une main sur le bouton */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Effet au survol du bouton */
.video-embed:hover .video-play {
  transform: translate(-50%, -50%) scale(1.15);
}

/* when iframe is injected, it fills the container */
.project-image .video-embed.playing iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  aspect-ratio: inherit;
}

/* ensure the video cell behaves like a horizontal image and spans the two right columns */
@media (min-width: 1200px) {
  .project-image .video-embed {
    grid-column: 1 / -1; /* inside .project-image this makes it span both internal columns */
  }
}

/* fixed image in left column (visible on wide screens) */
.left-fixed-image {
  position: fixed;
  top: calc(var(--header-height, 100px) + 16px); /* below header */
  left: 66px; /* same left margin as .layout/.image-grid */
  width: 280px;            /* adjust as needed */
  max-width: calc(22vw);   /* relative cap */
  z-index: 4;              /* below header (header z-index is 1000 in navbar example) */
  box-sizing: border-box;
  pointer-events: auto;
}

/* image sizing: never exceed box, keep aspect ratio, centered */
.left-fixed-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* hide on small screens so it doesn't overlap content */
@media (max-width: 799px) {
  .left-fixed-image { display: none; }
}

/* bloc qui occupe la zone droite de ta grille */
.info-rows {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* une ligne FR | EN */
.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  align-items: start;
}

.info-row p {
  margin: 0;
  font-family: Apercu;
  font-size: 14px;
}

.info-row .fr {
  text-align: left;
  font-weight: bold;
}

.info-row .en {
  text-align: left;
  color: gray;
}

/* reduce vertical spacing between info rows */
.info-rows .info-row {
  margin: -4px 0;        /* small gap between rows */
}
.info-rows .info-row p {
  margin: 0;            /* remove default paragraph margins */
  padding: 0;
  line-height: 1.15;    /* slightly tighter leading */
}
/* optional: even smaller gap between a FR/EN pair */
.info-rows .info-row + .info-row { margin-top: 1px; }

/* make inline email look clickable */
.contact-email {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.contact-email:hover { text-decoration: underline; }

.contact-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.contact-link:hover {
  text-decoration: underline;
}

.info-row {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
}

@media (min-width: 1200px) {
  .info-row {
    grid-template-columns: 1fr 1fr;
  }
}