/* 
Page Bio - édition gutenberg + accordion en full code dans gutenberg 
*/


/* fond de page */
.page-bio{
    background-image: url("../../images/fond-bio.png");
    background-position-y: -200px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* contenu + h2 "line-up" */
.page-bio-container{
    width:65%;
    margin: 0 auto;
    padding-bottom:100px;
    & h2{
        text-align:left;width:100%;
        font-family:'AmaranthBold' !important;
        font-size:2.5rem !important;
        margin:80px 0 20px 0;
    }
}


.copyright-p{
  font-size:0.8rem;
  margin:50px 0 0 0;
}

/* background lightbox gutenberg */
.scrim{
  background-color: #0F0F0FBD !important;
}

.bio-image-container{
  & figure{
    height:100%;
    & img{
      height: 100%;
      object-fit: cover;
    }
  }
}

/* ---------------------------
tabs bio français - anglais 
--------------------------- */

/* contenneur */
.eb-tabs-contents .eb-tab-wrapper{
    border:none !important;
    padding:15px 0 !important;
    & p{
        text-align: left;
        font-size:0.9rem;
        text-transform: none;
    }
}

/* tabs */
.tabTitles {
    display:flex;
    gap:20px;
      & li.active{
      background:none !important;
      padding:12px 0;
      width:100px;
      text-align:left;
      border-bottom:2px solid var(--white);
      transition:all 0.3s ease;
      width: fit-content;
    }
    & li{
    background:none !important;
    padding:15px 0 !important;
    text-align:left;
      & .tab-title-wrap{
        text-align: left !important;
        width: 100% !important;
      }
      & .tab-title-text{
        color: var(--white) !important;
        line-height: 1;
        font-size: 1.4rem !important;
        text-transform: uppercase;
        font-family: 'AmaranthBold' !important;
      }
    }
}


.eb-tabs-contents .eb-tab-wrapper.active{
    transition: height 0.3s cubic-bezier(.25,.46,.45,.94),opacity 1s cubic-bezier(.25,.46,.45,.94) 0.2s,transform 0.5s cubic-bezier(.25,.46,.45,.94) .1s;
}



/* -----------------------------
----------- accordion ----------
----------------------------- */
.accordion {
  display: flex;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.panel {
  position: relative;
  flex: 1;
  transition: flex 0.5s ease;
  overflow: hidden;
}

.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Zoom image */
.panel:hover img {
  transform: scale(1.1);
}

/* Réduction globale */
.accordion:hover .panel {
  flex: 0.8;
}

/* Agrandissement panel actif */
.accordion .panel:hover {
  flex: 1.75;
}

/* Overlay caption */
.caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  color: var(--white);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.panel:hover .caption {
  opacity: 1;
  transform: translateY(0);
}

.caption h3 {
  margin: 0;
  font-size: 1rem;
  font-family:'AmaranthBold';
  text-transform: uppercase;
}

.caption p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  font-family:'Rambla';
  opacity: 0.85;
}


/* ---------------------------------
------------- reponsive ------------
--------------------------------- */

@media screen and (max-width:1200px){
  .bio-container{
    flex-direction: column-reverse;
    gap: 10px;
  }

  .page-bio{
    background-position-y: -100px;
}

  .bio-image-container {
    & figure {
      padding: 0;
      & img {
        height: 100%;
        object-fit: cover;
        width: 100%;
        aspect-ratio: 3/2;
        object-position: 0 -100px;
      }
    }
  }
}

@media screen and (max-width:1024px){
  .page-bio-container{
    width:70%;
  }
}


@media (max-width: 768px) {
  .page-bio{
    background-attachment:scroll;
  }
  .page-bio-container{
    width:85%;
      & h2{
        font-size:2rem !important;
    }
  }

  .bio-container{
    margin: 30px 0 0 0;
  }

  .accordion {
    overflow-x: auto;
    display: flex;
    height:500px;
  }

  .panel {
    width: 70%;
    flex: none;
  }

  .accordion:hover .panel,
  .accordion .panel:hover {
    flex: none;
  }

  .copyright-p{
    font-size:0.7rem;
  }


  .tabTitles {
    gap:10px;
    & li.active{
      padding:8px 0 !important;
    }
    & li{
      padding:8px 0 !important;
      & .tab-title-text{
        font-size: 1rem !important;
      }
    }
  }

  .eb-tabs-contents .eb-tab-wrapper{
    & p{
        font-size:0.8rem;
    }
  }
}

@media screen and (max-width:576px){
  .page-bio{
    background-position-y: 0px;
    background-position-x: center;
  }

    .bio-image-container {
    & figure {
      & img {
        object-position: 0 -50px;
      }
    }
  }

  .page-bio-container {
    & h2 {
      font-size: 1.8rem !important;
      margin: 50px 0 10px 0;
    }
  }
}