/* CSS for plugin quentin images liste */



/* CSS for special templates */

/* p-tempaltes.php  et autres (pas dans un plugin mais dans la template theme) */

/* ajouter le plugin pour pouvoir s'en servir et ajouter le code aux pages ou autre
voir mon notion avec la documentation */



/* Styles communs */
    .container-quentin-images-list,
.container-quentin-images-list_display-cover {
    border: 4px solid black;
    padding: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
    justify-content: center;
    flex-direction: row;
    margin-top: -4px;

    position: relative;
}

.child-info {
    border: 4px solid #000;
    padding: 10px 20px 10px 10px;
    width: calc(25% - 10px);
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 calc(25% - 10px);
}

.quentin-images-liste,
.quentin-images-liste_display-cover {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: calc(75% - 0px);
    box-sizing: border-box;
}

.quentin-images-liste .image-entry,
.quentin-images-liste_display-cover .image-entry {
    border: 4px solid black;
    padding: 10px;
    box-sizing: border-box;
}

/* Slider avec 3 images visibles */
.quentin-images-liste .image-entry {
    flex: 1 1 calc(33.33% - 10px);
}

/* Slider avec une image en grand */
.quentin-images-liste_display-cover .image-entry {
    flex: 1 1 100%; /* Une image en grand */
}

/* Styles pour Slick */
.slick-slide {
    margin: 0 10px;
}
.slick-list {
    margin-left: -10px;
    margin-right: -10px;
}

.slick-arrow {
    font-size: 20px;
    z-index: 1;
    border: 4px solid black;
    height: 50px;
    width: 80px;
    padding: 7px;
    background: #fff;
    top: 0;
    transform: none;
    display: flex;
    color: red;
    font-size: 0;
    align-items: center;
    justify-content: center;
}

.slick-prev, .slick-next {
    z-index: 1;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

.slick-prev:before, .slick-next:before {
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1;
    opacity: 1.0;
    color: #000;
}

.slick-prev:before {
    content: '◀︎';
}

.slick-next:before {
    content: '▶︎';
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: #000;
    color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
    opacity: 1;
    color: #fff;
}



/* Styles communs pour le troisième carousel */
.container-quentin-images-list_display-withinfo {
  border: 4px solid black;
  /*padding: 10px;*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*gap: 10px;*/
  box-sizing: border-box;
  justify-content: center;
  flex-direction: row;
  margin-top: -4px;
  position: relative;

  overflow-x: hidden; /* cache description */
}

.quentin-images-liste_display-withinfo {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  max-height: 100vh;
  height: 90vh;
  height: calc(100vh - var(--menu_hauteur) - var(--border_grosseur));
}

.quentin-images-liste_display-withinfo .image-entry {
  flex: 1 1 100%;
  /*border: 4px solid black;*/
  /* padding: 10px; */
  box-sizing: border-box;
  height: 100%; /* ----- Cover ----- */
}

.quentin-images-liste_display-withinfo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ----- Cover ----- */
}

.quentin-images-liste_display-withinfo p {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: 4px solid black;
  background: #fff;
  padding: 10px;
}

.container-quentin-images-list_display-withinfo .slick-arrow {
  margin: 10px;
}

/* Style pour le bouton ">" en bas à droite */
.toggle-info-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 4px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  color: #000;

  transition: transform 0.3s ease;
}

/* Quand le bouton est actif, on le fait pivoter de 180° */
.toggle-info-button.active {
    transform: rotate(180deg);
}

.toggle-info-button img {
  max-width: 100%;
  /* border: 1px solid red; */
  padding: 7px;
  transition: filter 0.3s ease; /* Ajout d'une transition fluide */
}

.toggle-info-button:hover {
  background-color: #000;
  color: #fff;
}

/* Inverser les couleurs au survol */
.toggle-info-button img:hover {
  filter: invert(1);
}

/* Zone d'information qui s'affiche */
.child-info-panel {
  position: absolute;
  right: -100%;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-left: 4px solid black;
  padding: 20px;
  box-sizing: border-box;

  transition: right 0.7s ease-in-out;
  overflow-y: auto;
}

.child-info-panel.active {
  right: 0;
}

.child-info-panel h3 {
  margin-top: 0;
}

.draggable {
    border: 0px solid transparent;
}



/* version mobile*/

@media screen and (max-width: 768px) {
  /* Styles communs */
  .container-quentin-images-list,
  .container-quentin-images-list_display-cover {
    flex-direction: column;
  }

  .child-info {
    padding: 10px;
    width: calc(100% - 0px);
    flex: 0 0 calc(100% - 0px);
  }

  .quentin-images-liste, .quentin-images-liste_display-cover {
    width: calc(100% - 0px);
  }

}





/* version speciale pour LUNE */
.toggle-info-button {
    top: 10px;
    border-radius: 50%;
    border: transparent;
    background: transparent;
    width: 40px;
    height: 40px;
}