: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);
}

main a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 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 { visibility: hidden; }
.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: 4.5rem 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: 4.5rem 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: 2.5rem 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: 2.5rem auto 2rem;
  padding: 0 2rem;
  box-sizing: border-box;
}

.status-options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-options li {
  margin: 0.08rem 0;
  line-height: 1.15;
}

/* 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: 2.8rem auto 3rem;    /* centrée + décalage vertical */
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr); /* 2 colonnes comme ta capture */
}

.communication > .content-block {
  margin-bottom: 0;
}

/* 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-featured {
  grid-column: 1 / -1;
}

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

.radio-block {
  width: 100%;
  max-width: 1000px;
  margin: 1.5rem auto;
}

.radio-block iframe {
  width: 100%;
  border: 0;
  display: block;
}

.radio-caption {
  margin: 0 0 0.35rem;
  color: #24364a;
  font-size: 1rem;
  line-height: 1.2;
}

.press-grid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.press-card {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f1f1f1;
}

.press-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.communication-partners {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 3rem;
}

.partner-block + .partner-block {
  margin-top: 2rem;
}

.partner-block h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  text-transform: none;
  text-align: center;
  color: #000;
}

.partner-block img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .press-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
}

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

.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(1320px, 94vw);
  margin: 1rem auto 3.2rem;
  padding: 0 1rem;
  position: relative;
}

.community-side-panel {
  position: absolute;
  top: 7rem;
  right: 0;
  width: 300px;
  background: #ffffff;
  border: 1px solid #66ffcc;
  border-radius: 12px;
  padding: 0.95rem;
}

.community-member-name {
  margin: 0 0 0.5rem;
  font-size: 24px;
  color: #24364a;
  text-transform: none;
}

.community-member-description {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: #24364a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.community-member-link {
  display: inline-block;
  margin-top: 0.65rem;
  color: #24364a;
  text-decoration: underline;
  font-size: 16px;
}

.community-graph-wrap {
  border: 0;
  background: transparent;
  min-width: 0;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
}

.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 .community-node-label {
  fill: #24364a;
  font-size: 26px;
  text-transform: none;
}

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

@media (max-width: 1000px) {
  .community-side-panel {
    width: 100%;
    position: static;
    margin-top: 0;
    margin-bottom: 0.7rem;
  }
}

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

.community-admin-page {
  width: min(1120px, 94vw);
  margin: 1rem auto 3rem;
  padding: 0 1rem;
}

.community-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.community-admin-toolbar button,
.community-admin-file {
  border: 1px solid #66ffcc;
  background: #fff;
  color: #24364a;
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font: inherit;
}

.community-admin-toolbar button,
.community-admin-file span {
  cursor: pointer;
}

.community-admin-toolbar .secondary {
  border-color: #c9d7db;
}

.community-admin-file {
  position: relative;
  overflow: hidden;
}

.community-admin-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.community-admin-status {
  margin: 0 0 1rem;
  min-height: 1.4rem;
  color: #24364a;
}

.community-admin-status[data-kind="error"] {
  color: #a11a1a;
}

.community-admin-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.community-admin-panel {
  border: 1px solid #d9e6e0;
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
}

.community-admin-panel h2 {
  margin-top: 0;
  text-transform: none;
}

.community-admin-form {
  display: grid;
  gap: 0.85rem;
}

.community-admin-form label {
  display: grid;
  gap: 0.35rem;
}

.community-admin-form input,
.community-admin-form textarea {
  width: 100%;
  border: 1px solid #d1dbde;
  border-radius: 10px;
  padding: 0.75rem;
  font: inherit;
  color: #24364a;
  background: #fff;
}

.community-admin-form textarea {
  resize: vertical;
}

.community-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: -0.2rem;
}

.community-tag-chip {
  border: 1px solid #d9e6e0;
  background: #fff;
  color: #24364a;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.community-admin-actions {
  display: flex;
  gap: 0.75rem;
}

.community-admin-actions button {
  border: 1px solid #66ffcc;
  background: #fff;
  color: #24364a;
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  cursor: pointer;
}

.community-admin-actions .secondary {
  border-color: #c9d7db;
}

.community-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.community-admin-item {
  border: 1px solid #d9e6e0;
  border-radius: 12px;
  padding: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.community-admin-item-meta {
  min-width: 0;
}

.community-admin-item-meta strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #24364a;
}

.community-admin-item-meta p {
  margin: 0.2rem 0 0;
}

.community-admin-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.community-admin-item-actions button {
  border: 1px solid #c9d7db;
  background: #fff;
  color: #24364a;
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font: inherit;
  cursor: pointer;
}

/* Responsive hardening: tablette + smartphone */
@media (max-width: 1024px) {
  :root {
    --research-width: 92vw;
  }

  .site-header {
    padding: 0.65rem 1rem 1.2rem;
  }

  .logo {
    height: 72px;
  }

  .social-icon,
  .nav-icon {
    width: 40px;
    height: 40px;
  }

  .nav-list a {
    font-size: 1.15rem;
  }

  .research-list,
  main.about,
  main.project-article,
  .research-article {
    width: 92vw;
    max-width: 92vw;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .research-list .overlay {
    font-size: clamp(2rem, 8vw, 3.6rem);
  }

  .project:nth-child(odd),
  .project:nth-child(even) {
    transform: none;
  }

  .small-separator {
    width: min(600px, 88vw);
  }

  .sidebar {
    position: static;
    width: auto;
    padding-right: 0;
    margin: 0 1rem 1rem;
  }

  .community-admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 4.2rem;
  }

  .page-header {
    padding: 2.8rem 1rem 1.2rem;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .hero-text {
    width: 90vw;
    font-size: 1rem;
    padding: 0.8rem 1rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 0.45rem 0.75rem 0.9rem;
  }

  .logo-container {
    top: 0.45rem;
  }

  .logo {
    height: 56px;
    max-width: calc(100vw - 130px);
  }

  .nav-toggle {
    padding: 0.25rem;
  }

  .nav-icon {
    width: 34px;
    height: 34px;
  }

  .community-graph-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .community-graph {
    min-width: 640px;
    width: 640px;
    max-width: none;
  }

  .community-admin-page {
    width: 96vw;
    padding: 0 0.5rem;
  }

  .community-admin-toolbar,
  .community-admin-actions,
  .community-admin-item,
  .community-admin-item-actions {
    flex-direction: column;
    align-items: stretch;
  }
}