/* === RESEARCH TEMPLATE - MODE SOMBRE === */

/* Appliquer le mode sombre à tout le template research */
body {
  background-color: #000;
}

.research {
  /* Variables spécifiques */
  --research-max-width: 50rem;
  --research-spacing: 4rem;
  
  /* Mode sombre */
  background-color: #000;
  color: #fff;
}

/* Override des couleurs globales pour research */
.research .main,
.research main {
  background-color: #000;
  color: #fff;
}

.research a {
  color: #fff;
}

/* Hero avec image pleine largeur */
.research-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(-50vw + 50%);
  margin-top: -4.5rem;
  margin-bottom: var(--research-spacing);
  overflow: hidden;
  z-index: 5;
}

.research-hero .img {
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
}

.research-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titre centré sur l'image */
.research-hero-title {
  position: absolute;
  bottom: 6%;
  left: 5%;
  /*transform: translateX(-50%);
  text-align: center;*/
  color: white;
  z-index: 10;
  max-width: 900px;
}

.research-hero-title .title {
  font-size: 4rem;
  line-height: 1.1;
  font-weight: inherit;
  margin-bottom: 0.5rem;
}

.research-hero-title .subtitle {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.research-hero-title .date {
  font-size: 1.8rem;
  opacity: 0.9;
}

/* Métadonnées de recherche */
.research-meta {
  padding: 3rem 0 2rem;
  margin-bottom: var(--research-spacing);
  color: #fff;
}

.research-subtitle {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.research-authors {
  color: #999;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.research-context {
  margin-top: 2rem;
  font-size: 0.7rem;
}

/* Résumé / Abstract */
.research-abstract {
  max-width: var(--research-max-width);
  margin: 0 auto var(--research-spacing);
  padding: 2rem 0;
  padding-left: 2rem;
}

.research-abstract h3 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  color: #0F6019;
}

.research-abstract .text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
}

/* Sections de recherche */
.research-section {
  max-width: var(--research-max-width);
  margin: 0 auto var(--research-spacing);
}

.research-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-top: 1rem;
  color: #fff;
}

.research-section .text {
  line-height: 1.65;
  color: #fff;
}

/* Contenu principal */
.research-content {
  margin-bottom: var(--research-spacing);
}

.research-content figure {
  margin: 3rem auto;
  /*max-width: var(--research-max-width);*/
}

.research-content figure img {
  width: 100%;
  height: auto;
}

.research-content figcaption {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #999;
  margin-top: 1rem;
  padding-left: 1rem;
}

/* Pour les images pleine largeur */
.research-content .full-width figure {
  max-width: 100%;
}

/* Grille pour images côte à côte */
.research-content .image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

/* Références / Bibliographie */
.research-references {
  max-width: var(--research-max-width);
  margin: 0 auto var(--research-spacing);
  padding-top: 3rem;
  margin-bottom: 0px;
  border-top: 2px solid #333;
}

.research-references h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #fff;
}

.research-references .text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #fff;
}

.research-references .text ul {
  list-style: none;
  margin-left: 0;
}

.research-references .text li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.research-references .text li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: #0F6019;
}

/* Partenaires / Soutiens */
.research-partners {
  max-width: var(--research-max-width);
  margin: 0 auto;
  padding: 0 0 4rem 0;
  text-align: left;
  font-size: 0.9rem;
  color: #999;
}

/* Notes de bas de page */
.research .footnote {
  font-size: 0.85rem;
  color: #999;
  border-left: 2px solid #333;
  padding-left: 1rem;
  margin: 2rem 0;
}

/* Encadrés / Callouts */
.research .callout {
  background: #1a1a1a;
  padding: 2rem;
  margin: 3rem 0;
  border-left: 4px solid #0F6019;
}

.research .callout h4 {
  font-weight: 600;
  margin-bottom: 1rem;
  color: #fff;
}

/* Citations longues */
.research blockquote {
  max-width: var(--research-max-width);
  padding-left: 2rem;
  font-size: 5rem;
  line-height: 1.3;
  color: #fff;
}

/* Table des matières */
.research-toc {
  max-width: var(--research-max-width);
  margin: 3rem auto;
  padding: 2rem;
  background: #1a1a1a;
}

.research-toc h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.research-toc ul {
  list-style: none;
  margin: 0;
}

.research-toc li {
  margin-bottom: 0.5rem;
}

.research-toc a {
  text-decoration: none;
  color: #fff;
}

.research-toc a:hover {
  text-decoration: underline;
  color: #0F6019;
}

/* Header en mode sombre pour research */
body:has(.research) .header {
  background-color: black;
  color: #fff;
}

body:has(.research) main, .main  {
  background-color: black;
  color: #fff;
}

body:has(.research) body  {
  background-color: black;
  color: #fff;
}

body:has(.research) .header a {
  color: #fff;
}

/* Footer en mode sombre */
body:has(.research) .footer {
  background-color: #000;
  color: #fff;
}

body:has(.research) .footer h3,
body:has(.research) .footer a {
  color: #fff;
}

.research-section-layout > .column:nth-child(2) {
  margin-left: 3.3%;
}

/* === CENTRAGE DES IMAGES SIMPLES === */

/* Centrer les figures (images simples) dans research */
.research .text figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0;
}

/* L'image elle-même */
.research .text figure img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Le lien autour de l'image */
.research .text figure a {
  display: inline-block;
  max-width: 100%;
}

/* Le wrapper de dégradation */
.research .text figure .degradation-wrapper {
  display: inline-block;
  width: auto !important;
  max-width: 800px;
}

/* Canvas de dégradation */
.research .text figure .degradation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Contenir au lieu de cover */
}

/* Légende centrée */
.research .text figure figcaption {
  text-align: center;
  margin-top: 1rem;
  max-width: 800px;
}

/* === GALERIE HORIZONTALE SCROLLABLE === */

/* Wrapper pour casser le padding de la section parente */
.research .research-gallery-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: #000;
}

.research .research-gallery {
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 3.5rem;
  padding: 0 2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.research .research-gallery .research-gallery-item:first-child {
  padding-left: 39.1%;
}


/* Scrollbar styling */
.research .research-gallery::-webkit-scrollbar {
  height: 20px;
  padding: 80px;
}

.research .research-gallery::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.research .research-gallery::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.research .research-gallery::-webkit-scrollbar-thumb:hover {
  background: #0d4a14;
}

section .text figure {
  padding-bottom: 0rem;
}

/* Items de la galerie */
.research .research-gallery-item {
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.research .research-gallery-item a {
  height: auto;
  display: flex;
  align-items: center;
}

.research .research-gallery-item img {
  height: 50vh !important;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.research .research-gallery-item figcaption {
  position: absolute;
  bottom: -2rem;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  max-width: 600px;
}

/* Supprimer les marges de la section parente */
.research-section-layout:has(.research-gallery-wrapper) {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* === GALERIE MOSAÏQUE : 3 COLONNES === */

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
/*  margin-left: calc(-50vw + 50%);
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0 2rem;*/
}

.gallery-mosaic-item {
  margin: 0;
  position: relative;
}

.gallery-mosaic-item a {
  display: block;
  width: 100%;
}

.gallery-mosaic-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.gallery-mosaic-item figcaption {
  font-size: 0.85rem;
  color: #999;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
}

.gallery-mosaic .gallery-caption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.9rem;
  color: #999;
  margin-top: 1rem;
}

/* === GALERIE GRILLE : RESPONSIVE === */

.gallery-grid-wrapper {
  margin: 2rem 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-grid li {
  position: relative;
  aspect-ratio: 1;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-grid-wrapper .gallery-caption {
  text-align: center;
  font-size: 0.9rem;
  color: #999;
  margin-top: 1.5rem;
}

/* Dégradation de texte */
.degradable-char,
.degradable-word {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.degradable-char {
  display: inline;
}

.degradable-word {
  display: inline;
  white-space: pre;
}

/* Mobile */
@media screen and (max-width: 50em) {
  .research .research-gallery {
    height: 70vh;
    padding: 0 1rem;
    gap: 1rem;
  }

  .research .research-gallery-item img {
    height: 50vh;
  }

  .research .research-gallery-item figcaption {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    bottom: 1rem;
  }

  /* Mosaïque mobile : 2 colonnes */
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Grille mobile : plus petites images */
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
  }
}

/* === RESPONSIVE === */

@media screen and (max-width: 50em) {
  .research .text figure {
    margin: 1rem 0;
  }

  .text figure :first-child {
    margin-top: 0px;
  }
  
  .research {
    --research-spacing: 2.5rem;
  }

  .research-section-layout > .column:nth-child(2) {
    margin-left: inherit;
  } 

  .text p, .text ul, .text ol{
    margin-top: 1.5rem !important;
  }

  .research-hero {
    height: 100vh;
    margin-left: calc(-50vw + 50%);
    margin-top: -6.5rem;
  }
  
  .research-hero-title {
    bottom: 10%;
    width: 85%;
  }
  
  .research-hero-title .title {
    font-size: 2rem;
  }
  
  .research-hero-title .subtitle {
    font-size: 1.2rem;
  }
  
  .research-hero-title .date {
    font-size: 1rem;
  }
  
  .research-meta {
    padding: 2rem 0 1.5rem;
  }
  
  .research-subtitle {
    font-size: 1.25rem;
  }
  
  .research-abstract {
    padding-left: 1rem;
    border-left-width: 2px;
  }
  
  .research-section h3 {
    font-size: 1.25rem;
  }
  
  .research-content .image-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .research blockquote {
    font-size: 3rem;
    line-height: 1.1;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: inherit !important;
  }
  
  .research-references,
  .research-partners {
    font-size: 0.85rem;
  }

  .burger-btn {
    z-index: 3;
  }
  .burger-btn span {
    background-color: white;
  }
  .burger-btn.active {
    z-index: 9999;
  }
  .burger-btn.active span {
    background-color: black;
  }
}

/* Impression */
@media print {
  .research {
    background: white;
    color: black;
  }
  
  .research-meta,
  .research-abstract,
  .research-section {
    max-width: 100%;
  }
  
  .research-content figure {
    page-break-inside: avoid;
  }
  
  .header,
  .footer,
  .research-hero-title {
    display: none;
  }
}