/* Variables de base pour la palette de couleurs */
:root {
    --sidebar-width: 70px;
    --primary-color: #2f4f4f;
    --accent-color: #8fbc8f;
    --background-color: #f9f9f9;
    --link-color: #ffffff;
    --link-hover-color: #ffd700;
  }
  
  /* Style global */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--primary-color);
    line-height: 1.6;
    display: flex;
    background-image: url('./photoculture/culture3.jpg'); /* Remplace 'ton-image.jpg' par le chemin de ta photo */
    background-size: cover; /* Fait en sorte que l'image couvre tout l'écran */
    background-position: center; /* Centre l'image */
    background-attachment: fixed; /* Rend l'image fixe pendant le scroll */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    
  }
  
  /* ----- BARRE LATERALE GAUCHE ----- */
  .sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    /* background-color: var(--accent-color);  */
    background-color: rgba(32, 150, 32, 0.808);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    box-sizing: border-box;
    z-index: 1000;
    padding: 0;
    border: 1px solid;
  }
  
  .sidebar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
  }
  
  /* Titre centré verticalement (colonne gauche) */
  .sidebar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-shadow: 2px 2px 5px;
    font-size: 1.2rem;
    color: darkmagenta;
    font-style: italic;
    text-align: center;
    letter-spacing: 10px;
    font-weight: bold;
    text-decoration: underline;
  }
   
  /* ----- CONTENU PRINCIPAL ----- */
  .content-area {
    margin-left: var(--sidebar-width);
    padding: 20px;
    flex: 1;
  }
  
  .content {
    margin-bottom: 40px;
    border: 3px double black;
    border-radius: 5px;
    background-color: rgba(128, 128, 128, 0.418);
  }
  
  .content h2 {
    text-align: center;
    font-size: 2rem;
    text-shadow: 2px 2px 5px;
    color: black;
    font-style: italic;
  }
  .content h3 {
    text-align: center;
    color: black;
    font-style: italic;
  }
  
  .content p {
    text-align: center;
    font-style: italic;
    color: black;
  }
   
  /* ----- GALLERY 1----- */
.gallery1 {
  position: absolute;
  top: 250px;
  left: calc(50% + 35px); /* Centre en prenant en compte les 70px de la sidebar */
  transform: translateX(-50%);
  margin-bottom: 0px;
  margin-top: 10px;
  text-align: center;
  width: 50%; /* Ajouté pour définir la largeur de la galerie */
  height: 200px;
}

/* Container de l'image */
.image-container1 {
  display: inline-block;
  position: relative;
  width: 100%; /* Ajouté pour que la largeur soit relative à .gallery1 */
  height: 200px;
  top: 10px;
  transition: transform 0.3s ease;
}

.image-container1:hover {
  transform: scale(1.05) ; 
}



/* Image dans la galerie */
.image1 {
  width: 100%; /* L'image prend toute la largeur du container */
  height: 200px;
  border-radius: 155px 155px 0px 0px;
  border: 1px solid black;
}

/* Description sous l'image */
.image-description1 {
  border: 1px solid black;
  border-radius: 0px 0px 5px 5px;
  background-color: gray;
  width: 100%; /* S'adapte à la largeur du parent (l'image-container) */
  height: 30px;
  display: flex;                /* Ajoute Flexbox ici */
  align-items: center;          /* Centre verticalement */
  justify-content: center;      /* Centre horizontalement */
  
}

.image-description1 p {
  margin: 0;
  font-size: 0.7rem;
  color: black;
  font-style: italic;
}
/* -------- gallery11 (inversée) -------- */
.gallery11 {
  position: absolute;
  top: 520px; /* Ajuste cette valeur selon l'espace sous gallery1 */
  left: calc(50% + 35px); /* Même centrage */
  transform: translateX(-50%);
  /* left: 91px;  */
  width: 50%;
  text-align: center;
}

.image-container11 {
  display: flex;
  flex-direction: column; /* Inversion texte au-dessus, image en-dessous */
  align-items: center;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.image-container11:hover {
  transform: scale(1.05);
}

.image11 {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  border-radius: 0 0 155px 155px;
  object-fit: cover;
}

.image-description11 {
  background-color: gray;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 5px 5px 0 0;
  margin-bottom: 10px;
}

.image-description11 p {
  margin: 0;
  font-size: 0.7rem;
  color: black;
  font-style: italic;
}

/* ------- zone de texte 0 ---------  */
.text-window0{
  position: absolute;
  top: 800px;       /* ajuste ici */
  left: 140px;      /* ajuste ici en fonction de la sidebar */
  z-index: 10;
}

.resizable-box0 {
  width: calc(90vw - 220px); /* 80% largeur - ~sidebar (~220px) */
  /* min-width: 300px;  */
  min-height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  /* resize: both;  */
  overflow: auto;
  overflow-y: auto;     /* permet de scroller verticalement */
  max-height: 150px; 
}
.resizable-box0 h4 {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 10px;
  font-size: 1.2rem;
  color: black;
  font-style: italic;
  text-decoration: underline;
}
.resizable-box0 h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.2rem;
  color: black;
  font-style: italic;
  text-decoration: underline;
  text-align: right;
}
.resizable-box0 p {
  font-size: 1rem;
  color: black;
}
.resizable-box0::-webkit-scrollbar {
  width: 10px;
}
.resizable-box0::-webkit-scrollbar-track {
  background: white;           /* couleur de fond de la piste */
}
.resizable-box0::-webkit-scrollbar-thumb {
  background-color: gray;        /* couleur du curseur */
  border-radius: 4px;
  border: 1px solid black;     /* bord du curseur pour l'intégrer au fond */
}


/* ------- zone de texte---------  */
.text-window {
  position: absolute;
  top: 1000px;       /* ajuste ici */
  left: 140px;      /* ajuste ici en fonction de la sidebar */
  z-index: 10;
}

.resizable-box {
  width: calc(90vw - 220px); /* 80% largeur - ~sidebar (~220px) */
  /* min-width: 300px;  */
  min-height: 150px;
  background-color: rgba(1, 126, 1, 0.973);
  border: 1px solid black;
  padding: 20px;
  /* resize: both;  */
  overflow: auto;
  overflow-y: auto;     /* permet de scroller verticalement */
  max-height: 300px; 
}
.resizable-box h4 {
  margin-top: 0;
  font-size: 1.2rem;
  color: black;
  font-style: italic;
  text-decoration: underline;
}
.resizable-box p {
  font-size: 1rem;
  color: black;
}
.resizable-box::-webkit-scrollbar {
  width: 10px;
}
.resizable-box::-webkit-scrollbar-track {
  background: green;           /* couleur de fond de la piste */
}
.resizable-box::-webkit-scrollbar-thumb {
  background-color: gray;        /* couleur du curseur */
  border-radius: 4px;
  border: 1px solid black;     /* bord du curseur pour l'intégrer au fond */
}
/* --------gallery 3--------------------  */
.gallery3 {
  display: flex;
  position: absolute;
  justify-content: center;
  top: 1400px;
  left: 80px;
  width: calc(95vw - 70px); /* 80% de la largeur viewport - 70px sidebar */
}

.image-text-container3 {
  display: flex;
  align-items: center; /* Centre verticalement image + description */
}
.image-text-container3:hover {
  transform: scale(1.05);
  z-index: 1000;
}
.image-container3 {
  width: 50%;
  height: 300px;
  font-size: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  
}



.image3 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  border: 1px solid black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-description3 {
  width: 50%;
  height: 300px;
  background-color: gray;
  border: 1px solid black;
  
  padding: 10px;
  display: flex;
  flex-direction: column; /* Ajouté : aligne les enfants verticalement */
  align-items: flex-start; /* Optionnel : aligne le texte à gauche */
  justify-content: flex-start; /* Ajouté : positionne le contenu en haut */
  box-sizing: border-box;
  margin-right: 10px;
  overflow: auto;
}

.image-description3 h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: black;
}

.image-description3 p {
  margin: 0;
  font-size: 0.7rem;
  color: black;
}

/* --------gallery 4--------------------  */
.gallery4 {
  display: flex;
  position: absolute;
  justify-content: center;
  top: 1800px;
  left: 80px;
  width: calc(95vw - 70px); /* 80% de la largeur viewport - 70px sidebar */
}

.image-text-container4 {
  display: flex;
  align-items: center; /* Centre verticalement image + description */
  width: 100%;
}
.image-text-container4:hover {
  transform: scale(1.05);
  z-index: 1000;
}
.image-container4 {
  width: 50%;
  height: 300px;
  font-size: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  margin-right: 10px;
  border: 1px solid black;
  
}

.image4 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  border: 1px solid black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-description4 {
  width: 50%;
  height: 300px;
  background-color: gray;
  border: 1px solid black;
  
  padding: 10px;
  display: flex;
  flex-direction: column; /* Ajouté : aligne les enfants verticalement */
  align-items: flex-start; /* Optionnel : aligne le texte à gauche */
  justify-content: flex-start; /* Ajouté : positionne le contenu en haut */
  box-sizing: border-box;
  overflow: auto;
}

.image-description4 h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: black;
}

.image-description4 p {
  margin: 0;
  font-size: 0.7rem;
  color: black;
}


/* ----- Logo agriculture raisonnée ----- */
.logo-container1 {
  position: absolute;
  top: 2950px;
  right: 10%;
}
.logo1 {
  width: 50px;
  height: auto;
}

   
  /* ----- RESPONSIVE ----- */
  @media screen and (max-width: 800px), screen and (max-height: 500px) {
    :root {
      --sidebar-width: 70px;
    }
  
    .sidebar-title {
      font-size: 1rem;
      letter-spacing: 1px;
    }
  
    .content-area {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    /* Harmonisation galeries */
    .gallery1,
    .gallery11 {
      position: relative !important; /* Neutralise les positions absolues */
      width: 90%;
      max-width: 400px;
      margin: 20px auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .gallery1 {
      top: 10px;
      left: 30%;
    }
    .gallery11 {
      top:50px;
      left: 30%;
    }
    .text-window0 {
      top: 1000px;
    }
    .text-window {
      top: 1200px;
    }
    .gallery3 {
      top: 1700px;
    }
    .gallery4 {
      top: 2100px;
    }
    .image3 {
      width: 95%;
    }
    
    /* Gallery1 */
    .image-container1,
    .image-container11 {
      width: 100%;
      height: auto;
    }
    .image1,
    .image11 {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    .image1 {
      height: 200px;
    }
  
    .image-description1,
    .image-description11 {
      width: 100%;
      height: auto;
      font-size: 0.9rem;
      /* padding: 10px;  */
      box-sizing: border-box;
    }
   }
  @media screen and (max-width: 748px) {
    .gallery1 {
      top: 10px;
      left: 45%;
    }
    .gallery11 {
      top:50px;
      left: 45%;
    }
    .resizable-box0 h4 {
      font-size: 0.8rem;
    }
    .resizable-box0 h3 {
      font-size: 0.8rem;
    }
    .resizable-box h4 {
      font-size: 0.8rem;
    }
  }
  @media screen and (max-width: 869px) {
    .content h3 {
      font-size: 0.9rem;
    }
  }
  @media screen and (max-width: 680px) {
    .content h3 {
      font-size: 0.7rem;
    }
    .content p {
      font-size: 0.7rem;
    }
  }
  @media screen and (max-width: 550px) {
    .content h2 {
      font-size: 1rem;
    }
    .content h3 {
      font-size: 0.6rem;
    }
    .content p {
      font-size: 0.6rem;
    }
  }