@charset "UTF-8";

@font-face {
  font-family: "EmeritusTrialDisplay";
  src: url("/fonts/Emeritus-Trial-Display.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: RosalieItalicTrial;
  src: url("../fonts/rosalie-italictrial-webfont.woff2") format("woff2"),
    url("../fonts/rosalie-italictrial-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: GTAlpinaCondensedThinItalicTrial;
  src: url("../fonts/gt-alpina-condensed-thin-italic-trial-webfont.woff2")
      format("woff2"),
    url("../fonts/gt-alpina-condensed-thin-italic-trial-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: GTAlpinaFineCondensedMediumItalicTrial;
  src: url("../fonts/gt-alpina-fine-condensed-medium-italic-trial-webfont.woff2")
      format("woff2"),
    url("../fonts/gt-alpina-fine-condensed-medium-italic-trial-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

/* New body styles */
body {
  margin: 0; /* Remove default margin */
  /* overflow: hidden; Removed to allow scrolling */
  font-family: sans-serif; /* Basic fallback font for body */
  overflow-x: hidden; /* Empêche le scroll horizontal */
}

#bg-svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Changé de 100vw à 100% */
  height: 100vh; /* Fill viewport height */
  object-fit: contain; /* Show entire SVG, no cropping */
  object-position: left; /* Align to left side */
  z-index: 4; /* Keep it on top */
}

#bg-svg-right {
  position: fixed;
  top: 0;
  right: 0;
  width: auto; /* Use natural width */
  height: 100vh; /* Full viewport height */
  object-fit: none; /* Don't resize the SVG */
  object-position: right; /* Align to right */
  z-index: 4; /* Keep it on top */
  transform: scaleX(-1); /* Horizontal flip */
}

/* Split Screen Styles */
.split-screen {
  display: flex;
  width: 100%; /* Changé de 100vw à 100% */
  height: 100vh; /* Keep height to fill initial viewport */
  position: relative; /* Needed for absolute positioning of h1 */
  overflow: hidden; /* Hide overflow *within* the split screen */
}

.panel {
  height: 100%;
  width: 50%;
  /* Removed flex centering properties */
  overflow: hidden; /* Hide overflow */
  box-sizing: border-box; /* Include padding in width */
  z-index: 1; /* Panels behind the title */
}

/* Centered and Blended H1 styles */
h1 {
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 25vw; /* Maintenu, car déjà très grand et relatif au viewport */
  line-height: 0.8;
  margin: 0;
  color: #000000; /* Make title white for difference blend */

  /* Absolute positioning for centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Span full width */
  text-align: center;

  /* Blending */
  mix-blend-mode: normal;

  /* Interaction */
  pointer-events: none; /* Allow clicks/drags to pass through */
  z-index: 2; /* Title above panels, below handle */
}

/* Styles for placeholder content */
.right-panel h2,
.right-panel p {
  color: rgb(205, 205, 205); /* Make text visible on dark background */
}

/* Styles for the new Scroll Section */
.scroll-section {
  padding: 30px 5% 100px 2%; /* Reduced top padding */
  min-height: 50vh; /* Give it some minimum height */
  position: relative; /* Needed for z-index */
  z-index: 5; /* To ensure it's above fixed background SVGs */
}

.scroll-text {
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 3.6em; /* Rétabli depuis 4.5em */
  line-height: 1;
  color: #000000;
  text-align: left;
  max-width: 2400px; /* Limit text width for readability */
  /* margin: 0 auto; Removed centering margin */
  /* opacity: 0; Removed for default visibility */
  transition: font-family 0.3s ease-in-out; /* Smooth transition for font only */
}

/* Styles for word-by-word reveal */
.scroll-text .word-to-reveal {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* Apply GT Alpina font to specific words in .scroll-text */
.scroll-text .gt-alpina-font {
  font-family: GTAlpinaFineCondensedMediumItalicTrial, cursive, serif !important;
}

/* 
.scroll-text:hover {
  font-family: GTAlpinaCondensedThinItalicTrial, cursive, serif; 
  color: grey; 
}
*/

#title-bg-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* Reduced size */
  height: auto;
  z-index: 3; /* Increased to be above panels but below handle */
  pointer-events: none; /* Allow clicks to pass through */
}

/* Media queries pour centrer parfaitement le titre et l'image vague en responsive */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 25vw; /* Taille réduite pour garder sur 2 lignes */
    top: 45%; /* Remonté légèrement pour centrage optique */
    line-height: 0.8; /* Maintient les lignes serrées */
  }

  #title-bg-svg {
    width: 70%; /* Légèrement plus grand sur tablette */
    top: 45%; /* Aligné avec le titre */
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 25vw; /* Taille pour assurer 2 lignes sur mobile */
    top: 43%; /* Remonté encore plus pour centrage optique */
    line-height: 0.8; /* Lignes bien serrées */
  }

  #title-bg-svg {
    width: 80%; /* Plus grand sur mobile pour une meilleure visibilité */
    top: 43%; /* Aligné avec le titre */
  }
}

@media screen and (max-width: 360px) {
  h1 {
    font-size: 18vw; /* Taille optimisée pour très petits écrans, 2 lignes garanties */
    top: 40%; /* Centrage optique optimal */
    line-height: 0.8;
  }

  #title-bg-svg {
    width: 85%; /* Maximise la visibilité sur très petits écrans */
    top: 40%; /* Aligné avec le titre */
  }
}

/* Add more styles as needed */

.small-vent-image {
  width: 160px; /* Adjust as needed */
  height: auto; /* Maintain aspect ratio */
  display: block; /* To allow margin auto to work for horizontal centering */
  margin-top: 20px; /* Add some space above the image */
  margin-left: auto;
  margin-right: auto;
}

.ix-decorative-text {
  position: fixed;
  left: 20px; /* Adjust as needed */
  top: 50%; /* Vertically centered on the left */
  transform: translateY(-50%);
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 2em; /* Adjust for desired smallness */
  color: #000000; /* Or your preferred color */
  z-index: 10; /* Above scroll-section and background SVGs */
}

.ix-decorative-text-right {
  position: fixed;
  right: 20px; /* Positioned on the right */
  top: 50%; /* Vertically centered */
  transform: translateY(-50%);
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 2em; /* Adjust for desired smallness */
  color: #000000; /* Or your preferred color */
  z-index: 10; /* Above scroll-section and background SVGs */
}

/* Styles pour la section des signatures interactive */
.signatures-container {
  width: 100%; /* Changé de 100vw à 100% */
  height: 100vh;
  border: 1px solid #e0e0e000; /* Peut être supprimé si vous ne voulez pas de bordure */
  margin: 0; /* Supprime les marges pour occuper tout l'espace */
  position: relative;
  overflow: hidden;
}

/* Padding supplémentaire pour la copie des signatures après la section sticky */
.signatures-container-copy {
  /* Styles normaux restaurés */
}

/* Section d'espacement entre sticky et signatures copy */
.spacing-section {
  width: 100%;
  height: 400px; /* Hauteur de l'espace souhaité */
  background-color: transparent; /* Transparent pour laisser voir la ligne centrale */
}

.text-compare-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  overflow-y: auto;
}

.cervantes-text {
  clip-path: inset(0 50% 0 0);
  background-color: #ffffff;
}

.cervantes-text .text-content {
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 2.3em;
  line-height: 1.3;
}

.menard-text {
  clip-path: inset(0 0 0 50%);
  background-color: #ffffff;
  user-select: none;
}

.menard-text .text-content {
  font-family: GTAlpinaFineCondensedMediumItalicTrial, cursive, serif;
  font-size: 2.2em;
  line-height: 1.36;
}

.author-signature {
  font-family: RosalieItalicTrial, cursive, serif;
  margin-bottom: 30px;
  font-size: 9em;
  line-height: 0.8;
  text-align: center;
  width: 100%;
}

.menard-text .author-signature {
  font-family: GTAlpinaFineCondensedMediumItalicTrial, cursive, serif;
}

.text-content {
  font-size: 1.5em;
  line-height: 1.4;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  background: linear-gradient(to bottom, #000000, #000000);
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 10;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7);
}

/* Supprimer le pseudo-élément before et utiliser la nouvelle classe */
.slider-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Section pour les dates */
.dates-section {
  width: 100%; /* Changé de 100vw à 100% */
  height: 200px; /* Hauteur fixe pour la section des dates */
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  box-sizing: border-box;
}

/* Date styles for Cervantes and Menard sections */
.date-1605 {
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 8em;
  color: #000000;
}

.date-1930 {
  font-family: GTAlpinaFineCondensedMediumItalicTrial, cursive, serif;
  font-size: 6em;
  color: #000000;
}

/* Media queries pour les dates en responsive */
@media screen and (max-width: 1200px) {
  .dates-section {
    height: 180px;
  }

  .date-1605 {
    font-size: 10.5em; /* Augmenté de 7em à 7.5em */
  }
  .date-1930 {
    font-size: 8.5em; /* Augmenté de 5em à 5.5em */
  }
}

@media screen and (max-width: 992px) {
  .dates-section {
    height: 160px;
  }

  .date-1605 {
    font-size: 9em; /* Ajusté pour être cohérent avec 10.5em */
  }

  .date-1930 {
    font-size: 7em; /* Ajusté pour être cohérent avec 8.5em */
  }
}

@media screen and (max-width: 768px) {
  .dates-section {
    height: 140px;
  }

  .date-1605 {
    font-size: 8em; /* Ajusté pour être cohérent */
  }

  .date-1930 {
    font-size: 6.5em; /* Ajusté pour être cohérent */
  }
}

@media screen and (max-width: 576px) {
  .dates-section {
    height: 120px;
  }

  .date-1605 {
    font-size: 7em; /* Ajusté pour être cohérent */
  }

  .date-1930 {
    font-size: 5.5em; /* Ajusté pour être cohérent */
  }
}

@media screen and (max-width: 480px) {
  .dates-section {
    height: 100px;
  }

  .date-1605 {
    font-size: 6em; /* Ajusté pour être cohérent */
  }

  .date-1930 {
    font-size: 4.8em; /* Ajusté pour être cohérent */
  }
}

/* Styles pour les éléments de la grille (maintenant items flottants) */
.clickable-grid-item {
  position: absolute;
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 6em !important; /* Taille réduite de 7.8em à 6em */
  cursor: pointer;
  color: black;
  background-color: transparent;
  padding: 8px 8px 0px 8px; /* Padding réduit en bas */
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, font-family 0.3s ease-in-out,
    color 0.3s ease-in-out;
  line-height: 0.8; /* Ajustement de la hauteur de ligne pour équilibrer le texte */
  margin-bottom: 80px !important; /* Ajout d'une grande marge inférieure */
}

.clickable-grid-item:hover {
  background-color: yellow;
  font-family: GTAlpinaCondensedThinItalicTrial, cursive, serif;
  color: grey;
}

/* Media queries pour le responsive avec une transition plus fluide */
@media screen and (max-width: 1400px) {
  .clickable-grid-item {
    font-size: 8em; /* Augmenté de 6.5em à 8em */
  }
}

@media screen and (max-width: 1200px) {
  .clickable-grid-item {
    font-size: 7.5em; /* Augmenté de 6em à 7.5em */
  }
}

@media screen and (max-width: 992px) {
  .clickable-grid-item {
    font-size: 7em; /* Augmenté de 5.5em à 7em */
  }
}

@media screen and (max-width: 880px) {
  .clickable-grid-item {
    font-size: 6.5em; /* Augmenté de 5em à 6.5em */
  }
}

@media screen and (max-width: 768px) {
  .clickable-grid-item {
    font-size: 8em; /* Augmenté de 6em à 8em */
  }
}

@media screen and (max-width: 680px) {
  .clickable-grid-item {
    font-size: 11em; /* Augmenté de 9em à 11em */
  }
}

@media screen and (max-width: 576px) {
  .clickable-grid-item {
    font-size: 12em; /* Augmenté de 10em à 12em */
    max-width: 90vw;
    word-break: break-word;
    hyphens: auto;
  }
}

@media screen and (max-width: 480px) {
  .clickable-grid-item {
    font-size: 5em; /* Augmenté de 3.5em à 5em */
  }
}

@media screen and (max-width: 400px) {
  .clickable-grid-item {
    font-size: 4.5em; /* Augmenté de 3em à 4.5em */
  }
}

.handle {
  width: 1.5px;
  height: 100vh;
  background: linear-gradient(to bottom, #000000, #000000);
  cursor: default;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1; /* Modifié pour passer derrière les autres éléments */
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7);
}

/* Styles pour la nouvelle section de l'image TEXTE */
.image-texte-section {
  position: relative;
  width: 100%; /* Changé de 100vw à 100% */
  height: 200vh; /* Augmenté de 100vh à 200vh pour doubler la hauteur */
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Style de base pour tous les mots-clés */
.clickable-grid-item {
  position: absolute;
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 6em;
  cursor: pointer;
  color: black;
  background-color: transparent;
  padding: 8px 8px 0px 8px;
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, font-family 0.3s ease-in-out,
    color 0.3s ease-in-out;
  line-height: 0.8;
  margin-bottom: 80px !important; /* Ajout d'une grande marge inférieure */
  /* Les positions seront définies dynamiquement par JavaScript */
}

.clickable-grid-item:hover {
  background-color: yellow;
  font-family: GTAlpinaCondensedThinItalicTrial, cursive, serif;
  color: grey;
}

/* Media queries pour adapter la taille des mots en responsive */
@media screen and (max-width: 1400px) {
  .clickable-grid-item {
    font-size: 8em; /* Augmenté de 6.5em à 8em */
  }
}

@media screen and (max-width: 1200px) {
  .clickable-grid-item {
    font-size: 7.5em; /* Augmenté de 6em à 7.5em */
  }
}

@media screen and (max-width: 992px) {
  .clickable-grid-item {
    font-size: 7em; /* Augmenté de 5.5em à 7em */
  }
}

@media screen and (max-width: 880px) {
  .clickable-grid-item {
    font-size: 6.5em; /* Augmenté de 5em à 6.5em */
  }
}

@media screen and (max-width: 768px) {
  .clickable-grid-item {
    font-size: 8em; /* Augmenté de 6em à 8em */
  }
}

@media screen and (max-width: 680px) {
  .clickable-grid-item {
    font-size: 11em; /* Augmenté de 9em à 11em */
  }
}

@media screen and (max-width: 576px) {
  .clickable-grid-item {
    font-size: 12em; /* Augmenté de 10em à 12em */
    max-width: 90vw;
    word-break: break-word;
    hyphens: auto;
  }
}

@media screen and (max-width: 480px) {
  .clickable-grid-item {
    font-size: 5em; /* Augmenté de 3.5em à 5em */
  }
}

@media screen and (max-width: 400px) {
  .clickable-grid-item {
    font-size: 4.5em; /* Augmenté de 3em à 4.5em */
  }
}

/* New full-viewport black section */
.full-black-section {
  background-color: black;
  width: 100%; /* Changé de 100vw à 100% */
  height: 100vh;
  position: relative; /* Added for potential z-index stacking if needed later */
  z-index: 5; /* Same as other content sections to ensure it's above fixed backgrounds */
}

.full-black-section .centered-double-image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%; /* Optional: to prevent image from being too large */
  max-height: 90%; /* Optional: to prevent image from being too large */
}

/* Conteneur pour le titre copyright animé */
.copyright-container {
  position: relative;
  width: 100%;
  height: 600px; /* Augmenté de 300px à 600px pour contenir l'animation sans couper les mots */
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; Supprimé pour éviter la coupure des mots */
}

.copyright-container-copy {
  margin-top: 160px; /* Espace supplémentaire au-dessus de la section copyright copiée */
}

/* Media queries pour copyright-container */
@media screen and (max-width: 992px) {
  .copyright-container {
    height: 500px; /* Hauteur réduite pour tablette */
  }
}

@media screen and (max-width: 768px) {
  .copyright-container {
    height: 400px; /* Hauteur réduite pour mobile */
  }
}

@media screen and (max-width: 480px) {
  .copyright-container {
    height: 300px; /* Hauteur réduite pour petit mobile */
  }
}

/* Animated Copyright Title - Positioned after full-black-section */
.animated-copyright-title {
  font-family: GTAlpinaFineCondensedMediumItalicTrial, cursive, serif;
  color: yellow;
  text-align: center;
  width: 100%;
  -webkit-text-stroke: 0.01em #000; /* Changé de 2px à 0.02em pour s'adapter à la taille */

  /* Position absolue pour sortir du flux normal */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  line-height: 0.9; /* Réduit l'espace entre les lignes */

  /* Initial state for scroll-triggered appearance */
  opacity: 0;
  transition: opacity 0.5s ease-out;

  /* Animation properties - will be controlled by JS-added class */
  animation-name: approach;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}

.animated-copyright-title.start-copyright-animation {
  opacity: 1;
  animation-play-state: running; /* Start animation when this class is added */
}

/* Keyframes for the font size animation - Simplified */
@-webkit-keyframes approach {
  0% {
    font-size: 100px;
  }
  /* 50% step removed for simpler, more direct animation */
  100% {
    font-size: 260px;
  }
}

@keyframes approach {
  0% {
    font-size: 100px;
  }
  /* 50% step removed for simpler, more direct animation */
  100% {
    font-size: 260px;
  }
}

/* Responsive keyframes for copyright animation */
@media screen and (max-width: 992px) {
  @keyframes approach {
    0% {
      font-size: 80px;
    }
    100% {
      font-size: 160px; /* Réduit de 200px à 160px */
    }
  }
}

@media screen and (max-width: 768px) {
  @keyframes approach {
    0% {
      font-size: 60px;
    }
    100% {
      font-size: 120px; /* Réduit de 150px à 120px */
    }
  }
}

@media screen and (max-width: 480px) {
  @keyframes approach {
    0% {
      font-size: 40px;
    }
    100% {
      font-size: 80px; /* Réduit de 100px à 80px */
    }
  }
}

@media screen and (max-width: 360px) {
  @keyframes approach {
    0% {
      font-size: 30px;
    }
    100% {
      font-size: 60px; /* Taille encore plus petite pour très petits écrans */
    }
  }
}

.container-sticky {
  margin-top: 50vh;
}
.container-sticky .section {
  position: sticky;
  bottom: 0;
  overflow: hidden;

  box-sizing: border-box;
  height: 100dvh;
  font-size: 52em;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  /* background-image: linear-gradient(45deg, #ff0000, #00ff00); */
}
.container-sticky .section img {
}
.container-sticky .section:nth-child(1) img {
  width: 100%;
}
.container-sticky .section:nth-child(2) img {
  width: 110%;
}
.container-sticky .section:nth-child(3) img {
  width: 120%;
}
.container-sticky .section:nth-child(4) img {
  width: 130%;
}
.container-sticky .section:nth-child(5) img {
  width: 140%;
}
.container-sticky .section:nth-child(1) {
  z-index: 1000;
  /* padding: 30%; */
  /* background-color: #000000; */
  /* background-image: linear-gradient(45deg, #ff0000, #00ff00); */
}
.container-sticky .section:nth-child(2) {
  z-index: 999;
  /* background-image: linear-gradient(45deg, #00ff00, #0000ff); */
}
.container-sticky .section:nth-child(3) {
  z-index: 998;
  /* background-image: linear-gradient(45deg, #0000ff, #ff0000); */
}
.container-sticky .section:nth-child(4) {
  z-index: 997;
  /* background-image: linear-gradient(45deg, #ff0000, #00ff00); */
}
.container-sticky .section:nth-child(5) {
  z-index: 996;
  /* background-image: linear-gradient(45deg, #00ff00, #0000ff); */
}

/* Styles pour s'assurer que les images DON et 1930 sont toujours au premier plan */
#image-container-left,
#image-container-right,
.image-container,
.image-container img {
  position: fixed !important;
  z-index: 10000 !important; /* Une valeur plus élevée que tout autre élément */
  transform: translateZ(0); /* Force un nouveau contexte d'empilement */
  will-change: transform; /* Optimisation de performance */
  pointer-events: none;
}

/* Nouvelle section pleine écran pour les mots-clés */
.keywords-fullscreen-section {
  position: relative;
  width: 100%; /* Changé de 100vw à 100% */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Style pour les mots-clés dans la nouvelle section */
.keywords-fullscreen-section .clickable-grid-item {
  position: absolute;
  font-family: RosalieItalicTrial, cursive, serif;
  font-size: 7.8em;
  cursor: pointer;
  color: black;
  background-color: transparent;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, font-family 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.keywords-fullscreen-section .clickable-grid-item:hover {
  background-color: yellow;
  font-family: GTAlpinaCondensedThinItalicTrial, cursive, serif;
  color: grey;
}

/* Media queries pour adapter la hauteur de la section sur mobile */
@media screen and (max-width: 768px) {
  .image-texte-section {
    height: 150vh; /* Plus de hauteur sur mobile pour éviter les chevauchements */
    padding: 0 5vw; /* Réduire le padding horizontal sur mobile */
  }
}

@media screen and (max-width: 576px) {
  .image-texte-section {
    height: 200vh; /* Augmenté de 180vh à 200vh pour plus d'espacement vertical */
    padding: 0 4vw;
    margin-bottom: 30px; /* Ajouter un espace en bas */
  }

  /* S'assurer que tous les mots sont visibles */
  .clickable-grid-item {
    font-size: 1.6em !important;
    padding: 3px 3px 0px 3px;
    max-width: 90vw; /* Éviter les débordements horizontaux */
    word-break: break-word; /* Permettre aux mots longs de se couper si nécessaire */
    hyphens: auto; /* Activer la césure si nécessaire */
  }
}

/* Media queries pour les signatures d'auteurs en responsive */
@media screen and (max-width: 1200px) {
  .author-signature {
    font-size: 8em; /* Réduit de 9em à 8em */
  }
}

@media screen and (max-width: 992px) {
  .author-signature {
    font-size: 7em; /* Réduit de 8em à 7em */
  }
}

@media screen and (max-width: 768px) {
  .author-signature {
    font-size: 6em; /* Réduit de 7.5em à 6em */
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 576px) {
  .author-signature {
    font-size: 5.5em; /* Réduit de 7.2em à 5.5em */
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 480px) {
  .author-signature {
    font-size: 5em; /* Réduit de 7em à 5em */
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 400px) {
  .author-signature {
    font-size: 4.5em; /* Réduit de 6.8em à 4.5em */
    margin-bottom: 10px;
  }
}

/* Grille d'images remplaçant l'image vent */
.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour avoir 2 lignes */
  grid-template-rows: repeat(2, 1fr); /* 2 lignes explicites */
  gap: 0; /* Pas d'espace entre les images */
  width: 100%; /* Changé de 100vw à 100% */
  margin: 0; /* Supprime les marges pour utiliser le padding */
  padding: 520px 50px 50px 50px; /* Padding égalisé à gauche et à droite */
  box-sizing: border-box;

  /* Ajout de l'image MAP en arrière-plan */
  background-image: url("../images/MAP.png");
  background-size: 70%; /* Réduit de cover à 60% pour une taille plus petite */
  background-position: center 735px; /* Remontée de la position pour être au centre de la grille */
  background-repeat: no-repeat; /* Pas de répétition */
}

.grid-image {
  width: 100%; /* Prend toute la largeur de sa colonne */
  height: auto; /* Maintient les proportions */
  display: block;
  object-fit: cover; /* Assure un bon remplissage */
  cursor: pointer; /* Indique que l'image est cliquable */
  transition: transform 0.3s ease-in-out; /* Animation fluide */
}

.grid-image:hover {
  transform: scale(1.05); /* Légère augmentation au survol */
}

.grid-image.shrunk {
  transform: scale(0.3); /* Rétrécit à 30% de la taille originale */
  opacity: 0.7; /* Légèrement transparent pour indiquer l'état */
}

/* Media queries pour la grille d'images en responsive */
@media screen and (max-width: 768px) {
  .images-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    grid-template-rows: repeat(3, 1fr); /* 3 lignes sur tablette */
    gap: 50px; /* Augmenté de 2px à 20px pour plus d'espace entre les colonnes */
    padding: 60px 3px 20px 20px; /* Padding horizontal réduit pour des images plus grandes */

    /* Adaptation de l'image MAP en responsive tablette */
    background-size: 120%; /* Augmenté de 80% à 120% pour tablette */
    background-position: center 280px; /* Position baissée de 120px à 200px pour tablette */
  }
}

@media screen and (max-width: 480px) {
  .images-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur mobile */
    grid-template-rows: repeat(3, 1fr); /* 3 lignes sur mobile */
    gap: 15px; /* Augmenté de 1px à 15px pour plus d'espace entre les colonnes */
    padding: 50px 15px 20px 15px; /* Padding horizontal réduit pour des images plus grandes */

    /* Adaptation de l'image MAP en responsive mobile */
    background-size: 140%; /* Augmenté de 90% à 140% pour mobile */
    background-position: center 180px; /* Position baissée de 100px à 180px pour mobile */
  }
}

/* Section pleine page pour l'image Groupe */
.groupe-fullpage-section {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 500px; /* Remplacé padding par margin pour préserver la taille de l'image */
  padding: 0;
  box-sizing: border-box;
}

.groupe-fullpage-image {
  width: 105%; /* Augmenté de 100% à 120% */
  height: 105%; /* Augmenté de 100% à 120% */
  object-fit: contain; /* Changé de cover à contain pour montrer l'image entière */
  object-position: center; /* Centré */
}

.scroll-section-copy {
  padding-top: 300px; /* Espace supplémentaire au-dessus de la section de texte copiée */
}