body, body > * {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}

/** { transition: all .3s ease 0s; }*/

/* Background colours */

 article:nth-child(1) {
  /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
  }

 article:nth-child(2) {
  background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
  }

article:nth-child(3) { 
  background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
 }



/* Main layout */



.accordion {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction:row;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  margin-top: 50px;
  background-image: url(../img/background-hexagone02.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Articles */

.accordion article {
  flex: initial;
  width: 280px;
  height: 585px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  box-sizing: border-box;
  padding: 2vh 1vw;
  position: relative;
}

.accordion article.clickable {
    flex: initial;
    width: 20%;
    cursor: pointer;
    margin: 10px;
    border-radius: 10px;
    height: 350px;
  }

  .accordion article.clickable:hover{
 transition:all .4s cubic-bezier(.5,1,.89,1);
 flex-basis:auto;
 width: 22%;
  }
  .accordion article.clickable:not(:hover){
    transition:all .4s cubic-bezier(.5,1,.89,1);
    flex-basis:auto;
    height: 340px;
     }
  
  .accordion article.clickable.clicked {
    width: 50%;
    height: auto;
    border-radius: 20px;;
  }
  

  .accordion-button{
    width: 140px;
    height: 35px;
    background-color: #222;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 20px;
  }
  .accordion-button a{
    color: #fff;

  }

  .accordion-button-02{
    width: 230px;
    height: 35px;
    background-color: #222;
    line-height: 35px;
    margin: 10px auto;
}

.accordion-button-02 a{
  color: #fff;
}
/* Big Headings */

.gradient-opacity {
  
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Crée un dégradé d'opacité de 1 (pleinement visible) à 0 (complètement transparent) */
  background-clip: text; /* Permet d'appliquer le dégradé aux couleurs de texte */
  -webkit-background-clip: text; /* Prise en charge pour certains navigateurs WebKit */
  color: transparent; /* Rend le texte transparent */
}

.accordion article .suite{
  text-align: center;
  margin-top: 275px;

}
/* Hover interaction */

.accordion:hover article {
 
}

.accordion article:hover {  }

article > div {
  opacity: 0;
  transition: opacity .2s ease 0;
}

.accordion article.clicked > div {
    opacity: 1;
    transition: opacity .3s ease .3s;
    margin-top: 80px;
  }

/* navigation */

/* Big Headings */
.accordion article > h2 {
  position: absolute;
  text-align: left;
  width: 90%;
  margin: 0;
  font-size: 3vh;
  transition: all .3s ease 0s; 
}

.accordion article > p{
  position: absolute;
  text-align: left;
  width: 90%;
  margin-top: 100px;
  transition: all .3s ease 0s; 
}

.accordion article.clicked > p{
  opacity: 0;
}

.accordion article.clicked > i{
  display: none;
}


.accordion h3{
  color: #fff;
}

.accordion p{
}

.accordion article.clicked > h2 {
  transform: rotate(0deg); /* Rotation de retour à 0deg lorsqu'il est ouvert */
  font-size: 4vh; /* Augmentation de la taille de la police lorsqu'il est ouvert*/
  margin-top: 0;
  color: #ffffff;
}

/* Article layouts */

article div {
  text-align: left;
  width: 58vw;
}

article div p, article div div h2, article div h3 { margin: 0 0 1em 0; }

h1, h2, h3, h4, h5, h6 { text-transform: uppercase; }

article div p { width: 40vw; }

@media (max-width: 900px) {

    .accordion article { padding: 2vh 3vw; }

    .accordion article > h2 {
  transform: rotate(90deg);
  bottom: 23vh;
  min-width: 12em;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: 0 0 0;
  opacity: 1;
}

.accordion article:hover > h2 { opacity: 0; }

article .accordion p { width: 50vw; }

article .accordion {
  max-height: calc(72%);
  overflow-y: auto;
}
}
@media (min-width: 900px) {
.mob-accordion{
    display: none;
}
}
@media (max-width: 900px) {
        .accordion{
          display: none;
        }
        .mob-accordion {
          width: 95vw;
          margin: auto;
          margin-top: 50px;
          background-image: url(../img/background-hexagone02.webp);
          background-position: center;
        }
        
        .tab {
          background: #fff;
          border-radius: 10px;;
        }
        
        .tab-title {
          display: flex;
          align-items: center;
          font-size: 1rem;
          font-weight: 500;
          padding: 0.9rem 1.8rem;
          color: #fff;
          cursor: pointer;
          position: relative;
          margin: 10px;
        }
        
        .tab-title::after {
          content: "\f107"; /* Code de l'icône d'angle vers le bas */
          font-family: FontAwesome;
          font-size: 0.8rem;
          margin-left: auto;
          transition: transform 0.3s ease;
          transform-origin: center; /* Définit le point de rotation au centre */
        }
        
        .tab-title.active::after {
          transform: rotate(180deg);
        }
        
        .tab-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
        }
        
        .tab-content h3 {
          margin-bottom: 15px;
          color: #ffffff;
        }

        .tab-content p{
          color: #ffffff;
          text-align: left;
          margin: 10px;
        }
        
        .tab.active .tab-content {
          max-height: 15em;
        }
        .tab:nth-child(1){
          background: rgba(255, 255, 255, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(7px);
          -webkit-backdrop-filter: blur(5px);
          border: 2px solid rgba(255, 255, 255, 0.37);
          margin: 5px 0 5px 0;
        }
        .tab:nth-child(2){
          background: rgba(255, 255, 255, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(7px);
          -webkit-backdrop-filter: blur(5px);
          border: 2px solid rgba(255, 255, 255, 0.37);
          margin: 5px 0 5px 0;
        }
        .tab:nth-child(3){
          background: rgba(255, 255, 255, 0.2);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(7px);
          -webkit-backdrop-filter: blur(5px);
          border: 2px solid rgba(255, 255, 255, 0.37);
          margin: 5px 0 5px 0;
        }
      }