:root {
  --site-padding-top: 5rem;
  --research-width: 60vw;
  --research-left-margin: calc((100vw - var(--research-width)) / 2);
}

/* Fonts */
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Thin.woff2') format('woff2'), url('../fonts/Lineal-Thin.woff') format('woff'); font-weight:100; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Light.woff2') format('woff2'); font-weight:300; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Regular.woff2') format('woff2'), url('../fonts/Lineal-Regular.woff') format('woff'); font-weight:400; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Medium.woff') format('woff'); font-weight:500; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Bold.woff2') format('woff2'), url('../fonts/Lineal-Bold.woff') format('woff'); font-weight:700; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Heavy.woff2') format('woff2'); font-weight:800; }
@font-face { font-family:'Lineal'; src:url('../fonts/Lineal-Black.woff2') format('woff2'); font-weight:900; }

/* Base */
* {
  box-sizing: border-box;
}
body {
  margin: 0; padding: 0;
  font-family: 'Lineal', sans-serif;
  font-size: 16px; line-height: 1.6;
  background: #fff; color: #000;
  padding-top: var(--site-padding-top);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: normal;
  margin: 2rem 0 1rem;
  color: #66ffcc;
}

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem;
  z-index: 7000;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem 3rem; /* ajout d’un padding en bas */
  z-index: 7000;
}


.social-links a { margin-right: 1rem; }
.social-icon { width: 50px; height: 50px; object-fit: contain; }
.logo-container { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); }
.logo { height: 100px; }

/* Navigation */
.main-nav { position: relative; }
.nav-toggle { background: none; border: none; padding: 0.5rem; cursor: pointer; color: #66ffcc; }
.nav-icon { width: 50px; height: 50px; display: block; fill: currentColor; }
.nav-list {
  position: absolute; top: 3rem; right: 0;
  text-align: right; list-style: none; margin: 0; padding: 0.5rem 1rem;
  background: rgba(255,255,255,0);
  display: none;
  z-index: 7100;
}
.nav-list.open, .main-nav:hover .nav-list { display: block; }
.nav-list li + li { margin-top: 0.5rem; }
.nav-list a {
  font-family: 'Lineal', sans-serif;
  font-size: 1.5rem; text-transform: uppercase;
  text-decoration: none; color: #66ffcc;
}

/* Home Landing */
.home-landing {
  position: relative;
  width: 100vw;
  height: calc(100vh - var(--site-padding-top));
  margin-top: var(--site-padding-top); /* décale sous le header */
  overflow: hidden;
}


#hero-image {                 /* <video id="hero-image"> */
  position: absolute;
  top: 0;                     /* AU LIEU DE 3rem */
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

#hero-image:hover { opacity: 1; } /* optionnel, tu peux supprimer */

.hero-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  padding: 1rem 2rem;
  color: #66ffcc;
  text-align: center;
  background: rgba(255,255,255,0.1);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Projects Page */
.project-grid {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 2rem; /* start lower */
}
.project {
  position: relative; width: 100%; max-width: 600px;
  margin: 4rem 0; transition: transform 0.3s ease;
}
.project:nth-child(odd) { transform: translateX(-200px); }
.project:nth-child(even) { transform: translateX(200px); }
.work .overlay {
  font-size: 4vw; /* double overlay size */
}
.project-grid .project img {
  width: 100%; display: block; margin: 0 auto;
}
/* Overlay for projects */
.overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; background: rgba(0,0,0,0);
  text-transform: uppercase;
  color: #66ffcc; padding: 0.5rem 1rem;
  transition: opacity 0.3s ease; opacity: 0;
}
.project:hover .overlay { opacity: 1; }

/* Research Listing */
.research-list {
  width: var(--research-width);
  margin: 8rem auto 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 4rem;
}
main.research {
  padding-top: var(--site-padding-top);
}
.research-item .image-wrapper {
  position: relative; width: 100%; max-width: 1000px; overflow: visible;
}
.research-list .overlay {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  color: #66ffcc;
  padding: 0.5rem 1rem; white-space: nowrap;
  font-size: 6rem; text-transform: uppercase; z-index: 1; opacity: 1;
}
.research-list .image-wrapper img {
  width: 100%; height: auto; object-fit: cover; border-radius: 4px;
}

/* Research Article */
.research-article {
  width: var(--research-width); max-width: 1000px;
  margin: 8rem auto 2rem;
  padding: 0 2rem;
}
.research-article .hero {
  text-align: center; margin-bottom: 3rem;
}
.research-article .hero h1 {
  font-size: 2.5rem; margin-bottom: 0.5rem;
}
.content-block { margin-bottom: 3rem; }
.content-block h2 {
  font-size: 1.5rem; margin-bottom: 1rem; color: #66ffcc;
}

/* ===========================
   Galerie d’images
   =========================== */
   .image-gallery,
   .project-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     max-width: 1100px;
     margin: 0 auto 2rem;  /* centrage + espace bas */
     gap: 0.3rem;          /* écart réduit entre les images */
   }

   /* Vignettes uniformes + zoom au survol */
   .image-gallery img,
   .project-gallery img {
     width: 100%;
     height: 320px;        /* hauteur harmonisée (ajuste à ton goût) */
     object-fit: cover;    /* remplit le cadre sans déformation */
     border-radius: 0px;
     display: block;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     cursor: pointer;
   }

   .image-gallery img:hover,
   .project-gallery img:hover {
     transform: scale(1.01);
     box-shadow: 0 6px 18px rgba(0,0,0,0.1);
   }

   /* Responsive : réduit encore l’écart sur mobile */
   @media (max-width: 700px) {
     .image-gallery,
     .project-gallery {
       gap: 0.15rem;
     }

     .image-gallery img,
     .project-gallery img {
       height: 220px; /* hauteur plus petite pour mobile */
     }
   }


/* Vidéo centrée et avec la même largeur que les images */
.project-article .video-wrapper,
.research-article .video-wrapper {
  width: 100%;
  max-width: 1000px;   /* même limite que tes images */
  margin: 0 auto 2rem; /* centrée */
}

.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9; /* hauteur toujours proportionnelle */
  height: auto;
  overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover; /* optionnel : remplit le cadre */
}

/* Images isolées dans les pages (About, Work, Experimentations, etc.) */
.content-block img {
  display: block;
  margin: 0 auto 2rem;   /* centre l’image + espace bas */
  max-width: 1100px;     /* largeur max alignée avec les galeries */
  width: 100%;           /* occupe toute la largeur dispo */
}


/* ===========================
   Lightbox
   =========================== */
.lightbox {
  display: none; /* cachée par défaut */
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: opacity 0.4s ease;
}

/* Boutons de contrôle */
.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s;
}

.lightbox .close { top: 20px; right: 40px; }
.lightbox .prev  { top: 50%; left: 40px; transform: translateY(-50%); }
.lightbox .next  { top: 50%; right: 40px; transform: translateY(-50%); }

.lightbox .prev:hover,
.lightbox .next:hover,
.lightbox .close:hover {
  color: #ddd;
}

/* === Layout “colonne centrée” pour les pages projets === */

main.project-article {
  width: var(--research-width);
  max-width: 1000px;
  margin: var(--site-padding-top) auto 2rem;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* Centre l’image hero dans la colonne projet */
main.project-article .image-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 2rem;
}
main.project-article .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
   Colonne centrée pour la page About (comme Research)
   ================================================== */
main.about {
  width: var(--research-width);
  max-width: 1000px;
  margin: var(--site-padding-top) auto 2rem;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* Communication, Community use base styles */

/* Grille de vidéos (page Communication) */
.video-grid {
  width: 100%;
  max-width: 1000px;           /* même largeur que tes images */
  margin: 5.5rem auto 3rem;    /* centrée + décalage vertical */
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes comme ta capture */
}

/* 1 colonne sur mobile */
@media (max-width: 800px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* (optionnel) 3 colonnes sur très large écran */
/*
@media (min-width: 1400px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}
*/

/* Carte vidéo responsive 16:9 */
.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  /* border-radius: 6px;  // si tu veux des coins arrondis */
}

.video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Bandeau de page */
.page-header {
  position: relative;
  z-index: 3000;
  text-align: center;
  padding: 4rem 1rem 2rem;
}

.page-header h1 {
  font-size: 2.2rem;
  color: #66ffcc;
  margin-bottom: 0.5rem;
}

.page-intro {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
  color: #555;
}


/* Experimentations */
.experimentations-page {
  position: relative;
  display: block;
  padding: 0;
  min-height: calc(100vh - 120px);
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 240px;
  left: 20px;
  width: 180px;
  z-index: 2000;
  border-right: none;
  padding-right: 1rem;
}

.sidebar h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #66ffcc; /* turquoise */
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

.sidebar li.active,
.sidebar li:hover {
  color: #66ffcc;
  font-weight: bold;
}

/* Grille des expérimentations */
.grid {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 100%;
  min-height: calc(100vh + 420px);
  margin: 0 auto 3rem;
  padding: 0.5rem;
  overflow: hidden;
}

/* Cartes */
.experimentation-card {
  position: absolute;
  width: clamp(220px, 24vw, 320px);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.experimentation-card a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.experimentation-card img {
  display: block;
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  object-fit: cover;
}

.experimentation-card:active {
  cursor: grabbing;
}


.experimentation-card:hover .overlay {
  opacity: 1;
}

/* Ligne séparateur */

.small-separator {
  width: 600px;          /* longueur de la ligne */
  height: 1.5px;          /* épaisseur */
  background: #66ffcc;  /* turquoise */
  margin: 1.5rem auto;  /* espace autour + centrage */
}

/* Community graph */
.community-page {
  width: min(1440px, 96vw);
  margin: 1rem auto 3rem;
  padding: 0 0.75rem;
}

.community-graph-wrap {
  border: 0;
  background: transparent;
}

.community-graph {
  width: 100%;
  height: auto;
  display: block;
}

.community-link {
  stroke: #66ffcc;
  stroke-opacity: 0.9;
}

.community-node-person circle {
  fill: #66ffcc;
  stroke: #66ffcc;
  stroke-width: 2;
}

.community-node-tag circle {
  fill: none;
  stroke: #66ffcc;
  stroke-width: 1.5;
}

.community-node-person text {
  fill: #24364a;
  font-size: 22px;
  text-transform: none;
}

.community-node-tag text {
  fill: #66ffcc;
  font-size: 22px;
  text-transform: none;
  font-weight: 400;
}

.community-empty {
  fill: #6b7280;
  font-size: 18px;
}