.formationImg {
    position: relative;
    filter: drop-shadow(3px 4px 0px var(--title-color)) drop-shadow(-5px 4px 0px black);
    margin-top: 30px;
}

.wrapper_liens_formation{
  position: absolute;
  width: 90%;
  left : 5%;
  top : 0;
  height: 100%;
}


.wrapper_liens_formation div{
  position : absolute;
  width: 20%;
  top : 0;
  height: 100%;
  cursor: pointer;
  left : 0;
}

.wrapper_liens_formation div.lien_miel{
  left : 20%;
}

.wrapper_liens_formation div.lien_dw{
  left : 40%;
}

.wrapper_liens_formation div.lien_toto{
  left : 60%;
}

.wrapper_liens_formation div.lien_flo{
  left : 80%;
}

#la_timeline{
  width: 90%;
  margin: auto;
  position: relative;
  max-width: 1200px;
  left: -35px;
}

#la_timeline .instruments{
  position: relative;
  width: 100%;
}

#la_timeline .instru {
  position: absolute;
  width: 13%;
  margin-left: 0.5%;
  height: 70px;
  top: -71px;
  border-top: solid 1px black;
  border-left: solid 1px black;
  border-right: solid 1px black;
  border-radius: 7px 7px 0 0;
  transform: skew(-45deg, 0deg) translate(36px, 0px);
  border-bottom: dotted 1px black;
  z-index: 3;
}

#la_timeline .instru span{
  transform: skew(45deg, 0deg) rotate(-10deg);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  width: fit-content;
  height: fit-content;
  text-align: center;
  font-weight: 900;
}

.wrapper_timeline{
  margin-top : 130px;
  position: relative;
}

.instru.chant{
  left : 9%;
  background: rgba(251, 109, 1, 0.6);
}

.instru.batterie {
  left: 22%;
  background: rgb(51, 189, 51, 0.6);
}

.instru.basse {
  left: 35%;
  background: rgb(206, 40, 209, 0.6);
}

.instru.guitare {
  left: 48%;
  background: rgb(0, 8, 255, 0.6);
}
.instru.guitare_2 {
  left: 61%;
  background: rgb(0, 182, 237, 0.6);
}

.instru.formations {
  left: 74%;
  width: 26%!important;
  background: rgba(255, 255, 255, 0.6);
}

.background_formations{
  height: calc(100% + 2px);
  left: 74.5%;
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  top : 0;
  width: calc(26% + 1px);
  z-index: 0;
  border-right: solid 1px black;
}


#la_timeline .annee{
  height: 35px;
  text-align: left;
  width: 74.5%;
  position: relative;
}


#la_timeline .annee:hover:after{
  content : "";
  position: absolute;
  left : 33px;
  top : 2px;
  width: calc(100% - 32px);
  height: calc(100% - 1px);
	background : rgba(0, 0, 0, 0.4);
  display : block;
  border-radius: 3px 0 0 3px;
}


#la_timeline .annee:before{
  position: absolute;
  width: calc(100% - 35px);
  top: 1px;
  left: 35px;
  height: 1px;
  border-top: dotted 1px rgba(0, 0, 0, 0.3);
  content: "";
}


#la_timeline .annee span{
  position: relative;
  top : -9px;
}

#la_timeline .un_musicien{
  position: absolute;
  width: 13%;
  margin-left: 0.5%;
  border : solid 1px black;
  text-align: center;
  color : white;
  transition: font-weight 0.4s;
  cursor : pointer;
  overflow: hidden;
  z-index: 2;
  line-height: 17px;
}


#la_timeline .un_musicien.radius_top{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top : none;
}

#la_timeline .radius_bottom{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: dashed 1px black;
}

#la_timeline .un_musicien.no_bottom{
  border-bottom : none;
}

#la_timeline .un_musicien.no_top{
  border-top : none;
}

#la_timeline .une_formation{
  position: absolute;
  width: 13%;
  border-radius: 7px;
  text-align: center;
  color : white;
  cursor : pointer;
  left : 74%;
  z-index: 1;
}


#la_timeline .une_formation.big{
  width: 26%;
}

#la_timeline .une_formation.line_0{
  left : 61%;
  width: 13%;
  z-index: 0;
}

#la_timeline .une_formation.line_2{
  left : 87%;
  width: 13%;
  z-index: 0;
}


#la_timeline .une_formation:before{
  position : absolute;
  width : 10px;
  height : 10px;
  left: calc(-500% - 27%);
  background-color: rgba(55, 138, 239, 1);
  border-radius: 10px;
  content : "";
  top : -4px;
}


#la_timeline .une_formation:after{
  position: absolute;
  width: 0;
  left: calc(-521%);
  border-top: dotted 2px rgba(55, 138, 239, 1);
  content: "";
  top: 0;
  transition: width 0.4s;
}


#la_timeline .une_formation:hover:after{
  width: calc(532%);
}


#la_timeline .une_formation.line_2:before{
  left: calc(-600% - 27%);
  background : rgba(0, 0, 0, 1)
}

#la_timeline .une_formation.line_2:after{
  width: 0;
  left: calc(-621%);
  border-top: dotted 2px rgb(0, 0, 0);
}

#la_timeline .une_formation.line_2:hover:after{
  width: calc(632%);
}

#la_timeline .une_formation.line_0:before{
  left: calc(-400% - 43px);
  background : rgba(0, 0, 0, 1)
}

#la_timeline .une_formation.line_0:after{
  width: calc(400% + 55px);
  left: calc(-400% - 35px);
  border-top: dotted 2px rgba(0, 0, 0, 1);
}


#la_timeline .une_formation img{
  width: calc(100% - 15px);
  border: solid 2px rgba(55, 138, 239);
  border: none!important;
  border-radius: 7px;
  margin-left : 15px;
  opacity: 1;
  transition: all 0.4s;
  z-index: 3;
  position: relative;
  transform-origin: center center;
  transform: scale(1);
}

#la_timeline .une_formation:hover img{
  transform: scale(1);
  padding : 5px;
  width: calc(100% - 25px);
  border: dotted 2px rgba(55, 138, 239)!important;
}

#la_timeline .une_formation.line_2:hover img{
  border: dotted 2px rgba(0, 0, 0)!important;
}

#la_timeline .une_formation:hover{
  z-index: 5!important;
}


#la_timeline .une_formation.line_0 img{
  border: solid 2px black;
}

#la_timeline .une_formation.line_2 img{
  border: solid 2px rgb(0, 0, 0);
}


#la_timeline .un_musicien:hover{
  font-weight: 900;
}


#la_timeline .un_musicien span{
  top: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  bottom: 0;
  height: fit-content;
  margin: auto;
  z-index: 1;
}


#la_timeline .un_musicien.small{
  font-size: 12px;
  overflow: visible;
  border-top : black 1px dashed;
  border-bottom : black 1px dashed;
}

#la_timeline .un_musicien div{
  top: 0;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 100%;
  opacity: 0.8;
  z-index: 0;
  transition: opacity 0.4s;
}

#la_timeline .un_musicien:hover div{
  opacity: 1;
}

#la_timeline .un_musicien.chant{
  position: absolute;
  left: 9%;
}


#la_timeline .un_musicien.chant div{
  background: #fb6d01;
}


#la_timeline .un_musicien.batterie{
  position: absolute;
  left: 22%;
}

#la_timeline .un_musicien.batterie div{
  background: #33bd33;
}

#la_timeline .un_musicien.basse{
  position: absolute;
  left: 35%;
}

#la_timeline .un_musicien.basse div{
  background: #ce28d1;
}

#la_timeline .un_musicien.guitare{
  position: absolute;
  left: 48%;
}

#la_timeline .un_musicien.guitare div{
  background: #0008ff;
}

#la_timeline .un_musicien.guitare_2{
  position: absolute;
  left: 61%;
}

#la_timeline .un_musicien.guitare_2 div{
  background: #00b6ed;
}

#la_timeline #annee1983{
  height: 44px;
}

#la_timeline .un_musicien.basse.hachure div{
}

#la_timeline .un_musicien.guitare.hachure div{
  background: linear-gradient(-45deg, rgba(0, 8, 255,1) 0 5%, 
                            rgba(0, 8, 255,0.8) 5% 10%, 
                            rgba(0, 8, 255,1) 10% 15%, 
                            rgba(0, 8, 255,0.8) 15% 20%,
                            rgba(0, 8, 255,1) 20% 25%, 
                            rgba(0, 8, 255,0.8) 25% 30%,
                            rgba(0, 8, 255,1) 30% 35%, 
                            rgba(0, 8, 255,0.8) 35% 40%,
                            rgba(0, 8, 255,1) 40% 45%, 
                            rgba(0, 8, 255,0.8) 45% 50%,
                            rgba(0, 8, 255,1) 50% 55%, 
                            rgba(0, 8, 255,0.8) 55% 60%,
                            rgba(0, 8, 255,1) 60% 65%, 
                            rgba(0, 8, 255,0.8) 65% 70%,
                            rgba(0, 8, 255,1) 70% 75%, 
                            rgba(0, 8, 255,0.8) 75% 80%,
                            rgba(0, 8, 255,1) 80% 85%, 
                            rgba(0, 8, 255,0.8) 85% 90%,
                            rgba(0, 8, 255,1) 90% 95%, 
                            rgba(0, 8, 255,0.8) 95% 100%);
                            cursor: initial!important;
                            opacity: 1!important;
}


#la_timeline .un_musicien.guitare_2.hachure div{
  background: linear-gradient(-45deg, rgba(0, 182, 237,0.6) 0 5%, 
  rgba(0, 182, 237,0.4) 5% 10%, 
  rgba(0, 182, 237,0.6) 10% 15%, 
  rgba(0, 182, 237,0.4) 15% 20%,
  rgba(0, 182, 237,0.6) 20% 25%, 
  rgba(0, 182, 237,0.4) 25% 30%,
  rgba(0, 182, 237,0.6) 30% 35%, 
  rgba(0, 182, 237,0.4) 35% 40%,
  rgba(0, 182, 237,0.6) 40% 45%, 
  rgba(0, 182, 237,0.4) 45% 50%,
  rgba(0, 182, 237,0.6) 50% 55%, 
  rgba(0, 182, 237,0.4) 55% 60%,
  rgba(0, 182, 237,0.6) 60% 65%, 
  rgba(0, 182, 237,0.4) 65% 70%,
  rgba(0, 182, 237,0.6) 70% 75%, 
  rgba(0, 182, 237,0.4) 75% 80%,
  rgba(0, 182, 237,0.6) 80% 85%, 
  rgba(0, 182, 237,0.4) 85% 90%,
  rgba(0, 182, 237,0.6) 90% 95%, 
  rgba(0, 182, 237,0.4) 95% 100%);
                    opacity: 1!important;
                    cursor: initial!important;
}


#les_gars{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top : 0;
  left : 0;
  z-index: 10003;
  display: none;
}

.un_gars{
  width:87%;
  margin: auto;
    background-color: #1f1b51;
  border-radius: 15px;
  padding: 15px;
  max-width: 730px;
  color: white;
  position: fixed;
  top: 0;
  bottom: 0;
  height: fit-content;
  left: 0;
  right: 0;
  max-height: calc(100vh - 200px);
  display: none;
}

.un_gars.yep{
  display: flex;
}

.un_gars .photo_gars{
  width: 45%;
  margin-right: 5%;
  text-align: center;
}

.un_gars .photo_gars p{
opacity: 0.3;
    font-style: italic;
    font-size: 12px;
    margin-top: 7px;
    margin-bottom: -4px;
}

.infos_gars{
  width: 45%;
}

.infos_gars a{
  color : #378aef;
}

.un_gars .photo_gars img{
  max-width: 100%;
  max-height: 500px;
  border-radius: 7px;
  transform: rotate(-2deg);
}

.un_gars h2{
    color: white;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 25px;
    font-family: 'TT Trailers Trial';
    font-weight: bold;
    font-size: 50px;
    font-style: italic;
    filter: drop-shadow(3px 3px 0px var(--title-color));
    transform: rotate(-2deg);
    line-height: 47px;
}

.infos_gars b{
    font-weight: bold;
    font-family: 'TT Trailers Trial';
    font-size: 22px;
    filter: drop-shadow(2px 2px 1px var(--title-color));
    display: inline-block;
}

.infos_gars p{
  margin: 0;
}

.espacement{
  margin-top : 10px;
}

.fermer_gars{
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  right : -15px;
  top : -15px;
  background: url(../../images/close.png) no-repeat black center;
  background-size : 18px;
  border: solid 2px white;
  cursor : pointer;
}



@media all and (max-width: 900px) {
  .instru.formations,
  .background_formations,
  #la_timeline .une_formation img{
    display : none;
  }

  #la_timeline .un_musicien,
  #la_timeline .instru{
    width: 17%;
  }

  #la_timeline .un_musicien.chant,
  .instru.chant {
    left: 11%;
  }

  #la_timeline .un_musicien.batterie,
  .instru.batterie {
    left: 28%;
  }
  
  #la_timeline .un_musicien.basse,
  .instru.basse {
    left: 45%;
  }
  
  #la_timeline .un_musicien.guitare,
  .instru.guitare {
    left: 62%;
  }
  
  #la_timeline .un_musicien.guitare_2,
  .instru.guitare_2 {
    left: 79%;
  }

  .wrapper_liens_formation{
    position: absolute;
    width: 90%;
    left : 5%;
    top : 0;
    height: 100%;
  }

  .wrapper_liens_formation_2{
    position: absolute;
    width: 90%;
    left : 5%;
    top : 0;
    height: 100%;
  }
  
  
  .wrapper_liens_formation div,
  .wrapper_liens_formation_2 div{
    position : absolute;
    width: 33.33%;
    top : 0;
    height: 100%;
    cursor: pointer;
    left : 0;
  }
  
  .wrapper_liens_formation div.lien_miel{
    left : 33.33%;
  }
  
  .wrapper_liens_formation div.lien_dw{
    left : 66.66%;
  }
  
  .wrapper_liens_formation div.lien_toto{
    left : 60%;
    display: none;
  }
  
  .wrapper_liens_formation div.lien_flo{
    left : 80%;
    display: none;
  }

  
  .wrapper_liens_formation_2 div.lien_toto{
    right : 50%;
    left : initial;
  }
  
  .wrapper_liens_formation_2 div.lien_flo{
    left : 50%;
  }
  #la_timeline .une_formation:after{
    display: none!important;
  }

  #la_timeline .une_formation:before {
    left: calc(-500% - 15%);
}

  #la_timeline .une_formation.line_2:before {
    left: calc(-600% - 15%);
}

}


@media all and (max-width: 700px) {
  #la_timeline .un_musicien, #la_timeline .instru {
    width: 17%;
    font-size: 14px;
}

#la_timeline .annee span {
  position: relative;
  top: -5px;
  left: 3%;
  font-size: 12px;
}
  #la_timeline .instru {
    height: 30px;
    top: -31px;
    transform: skew(0deg, 0deg) translate(0px, 0px);
  }

  #la_timeline {
    width: 100%;
      margin: auto;
      position: relative;
      max-width: 1200px;
      left: 0; 
  }

  .wrapper_timeline {
    margin-top: 60px;
}

  #la_timeline .instru span {
    transform: skew(0, 0deg) rotate(0deg);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    text-align: center;
    font-weight: 900;
    font-style: italic;
    font-size: 12px;
    line-height: 12px;
  }
  
  .infos_gars{
	font-size : 12px;
}

}


@media all and (max-width: 400px) {
  #la_timeline .instru span {
    font-size: 10px;
  }
  
  #la_timeline .un_musicien, #la_timeline .instru {
    font-size: 11px;
  }
  
}

@media all and (max-width: 600px) {
	
.un_gars.yep {
    display: block;
}

.un_gars .photo_gars {
    width: 40%;
    float: right;
    padding-left: 10px;
    padding-bottom: 15px;
        margin-right: 0;
}

.infos_gars {
   width: 100%;
	font-size : 12px;
}

.un_gars h2{
        font-size: 35px;
        line-height: 33px;
        margin-bottom: 16px;
}

.infos_gars b {
    font-size: 19px;
}

}