@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&display=swap');

.bruno-ace-regular {
  font-family: "Bruno Ace", serif;
  font-weight: 400;
  font-style: normal;
}
.bruno-ace-sc-regular {
  font-family: "Bruno Ace SC", serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Agraham";
  src: url('Agraham.otf');
}

@font-face {
  font-family: "Healthergreen";
  src: url('Heathergreen.otf');
}

@font-face {
  font-family: "Arkhip";
  src: url('Arkhip_font.otf');
}

@font-face {
  font-family: "Orkney-Bold";
  src: url(Orkney-Bold.otf);
}

@font-face {
  font-family: "Orkney-Medium";
  src: url(Orkney-Medium.otf);
}

@font-face {
  font-family: "Orkney-Regular";
  src: url(Orkney-Regular.otf);
}

@font-face {
  font-family: "Orkney-Light";
  src: url(Orkney-Light.otf);
}

.petit-formal-script-regular {
    font-family: "Petit Formal Script", cursive;
    font-weight: 400;
    font-style: normal;
  }

.syne {
    font-family: "Syne", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

/*.logo img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin-top: 20px;
    margin: auto;
    border-radius: 30px;
}*/

html, body{
  background: #111111;
  padding:0;
  margin:0;
}



.Barre_de_navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  background:#444444;
  overflow: hidden;
  padding: 5px;
  margin-bottom: 0px;
  border-bottom-right-radius: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

  
.Barre_de_navigation  a{ /* tous les liens a à l'intérieur de la balise nav */
align-content: center;
float: left; /* effet flottant */
text-decoration: none; /* pas d'héritage avec effet souligné */
color: #ffffff; /* couleur du texte */
background:#444444; /* couleur de fond */
height: 100px; /* hauteur */
line-height: 1.5; /* interligne */
padding: 0 20px; /* marges intérieur */
font-family: "Orkney-Regular";/* police d'écriture */
font-size: 1.4rem; /* taille du texte */
transition: .4s ease-in-out; /* temps de transition lors du hover : une demi seconde */
margin: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.Barre_de_navigation  a:hover, .Barre_de_navigation .active{ /* tous liens lors du survol dans la balise nav */
animation:normal;
cursor: pointer;
border-radius: 15px;

border-radius: 30px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.Barre_de_navigation img{
  height: 100px;
  width: 100px;
  padding-right: 0;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 1);
}

a{
    text-decoration: none;
}

h1{
  font-weight: normal;
  font-family: "Orkney-Bold";
  font-size: 3.5rem;
  text-align: center;
  margin-top: 0px;
  margin-bottom: -10px;
  color:#FFFFFF;
}

.Simon_Moiroux{
  /*background-color: #ffffff; /* Couleur de fond */
  padding: 10px; /* Espace autour du texte */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  margin-left: 0px;
  margin-right: 0px;
  /*box-shadow: 10px 8px 32px 0 rgba(0, 0, 0, 0.37);*/
}


.Titre{
    padding: 10px; /* Espace autour du texte */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    margin-left: 0px;
    margin-right: 0px;
    border-bottom-right-radius: 30px;
}

.container{
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 20px;
}




.item{
  width: 80%;
  height: 400px;
  display: flex;
  align-items: center;
  background-color: #000000;
  border-radius: 30px;
  color: #ffffff;
  align-content: center;
  flex-grow: 0;
  flex-shrink: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}




#cadre_1{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(Piano-eau.jpg);
}

#cadre_2{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(MAO_0.jpg);
}

#cadre_3{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(Lune.jpg);
}


#cadre_3 h1{
    color: #111111;
}

#cadre_4{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(Dessin_0.jpg);
}

#cadre_4 h1{
color: #111111;
}

#cadre_5{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(Athle_0.jpg);
}

#cadre_6{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(velo_0.jpg);
}

#cadre_7{
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: .4s ease-in-out;
    background-image: url(Alpes_0.jpg);
}

#cadre_8{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(velo_0.jpg);
}

#cadre_9{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(velo_1.jpg);
}

.video{
    width: 50%;
    max-height: 350px;
}

.video iframe{
  border-radius: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

iframe{
    border-radius: 10px;
}

#cadre_10{
  width: 20%;
}

#cadre_11{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_0.jpg);
}

#cadre_12{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_1.jpg);
}

#cadre_13{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_2.jpg);
}

#cadre_14{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_3.jpg);
}

#cadre_15{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_4.jpg);
}

#cadre_16{
    width: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Athle_5.jpg);
}


#cadre_17{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_0.jpg);
}


#cadre_19{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_1.jpg);
}

#cadre_20{
width: 20%;
}

#cadre_21{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_2.jpg);
}

#cadre_22{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_3.jpg);
}

#dernier{
    margin-top: 140px;
}

#cadre_23{
    min-height: 350px;
    width: 22%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Surf.jpg);
}

.texte{
    padding-left: 0px;
    width: 100%;
    text-align: center;
    font-family: "Orkney-Medium";
    font-size: 2rem;
}

.banniere_texte{
    width: 100%;
    text-align: center;
    font-family: "Orkney-Medium";
    font-size: 3rem;
    padding: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    background: linear-gradient(225deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
}

#txt{
    width: 100%;
    font-size: 3rem;
    padding: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    background: linear-gradient(225deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
}

.texte_g{
  padding-left: 20px;
  width: 50%;
  text-align: left;
  font-family: "Orkney-Medium";
  font-size: 2rem;
}

.texte_d{
  padding-right: 20px;
  text-align: left;
  width: 50%;
  font-family: "Orkney-Light";
  font-size: 1.1rem;
}

#p{
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #000000;
  border-radius: 30px;
  color: #ffffff;
  align-content: center;
  flex-grow: 0;
  flex-shrink: 1;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

#r{
  padding-right: 20px;
  text-align: center;
  width: 100%;
  font-family: "Orkney-Light";
  font-size: 1rem;
}

.col{
    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;
    flex-wrap:nowrap;
    gap: 20px 20px;
    padding:20px;
    width: 50%;
}

.videos{
    display: flex;
    flex-direction: row;
    width: 100%;
    filter: none;
}

#tiers{
    width: 33.33%;
}

#intro{
    width: 100%;
}

.video{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.txt_d{
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
    width: 50%;
    font-family: "Orkney-Light";
    font-size: 1.5rem;
}

#intro{
    font-size: 1.5rem;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.item_mao{
    width: 80%;
    height: auto;
  display: flex;
    align-items: top;
  background-color: #000000;
  border-radius: 30px;
  color: #ffffff;
  align-content: center;
  flex-grow: 0;
  flex-shrink: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.explications{
    padding: 20px;
    text-align: left;
}

.explications img{
    border-radius: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

#item_piano{
    flex-direction: column;
    align-items: top;
}

#cadre_24{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 400px;
    height: 350px;
    background-image: url(Dessin_0.jpg);
}

#cadre_25{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 440px;
  background-image: url(Dessin_1.jpg);
}

#cadre_26{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 530px;
  background-image: url(Dessin_3.jpg);
}

#cadre_27{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 530px;
  background-image: url(Dessin_4.jpg);
}

#cadre_28{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 575px;
    height: 575px;
  background-image: url(Dessin_5.jpg);
}

#cadre_29{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 580px;
  background-image: url(Plan_0.jpg);
}

#cadre_30{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 580px;
  background-image: url(Plan_1.jpg);
}

#cadre_31{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 580px;
  background-image: url(Plan_2.jpg);
}

#cadre_32{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 580px;
  background-image: url(Plan_3.jpg);
}

#cadre_33{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 580px;
  background-image: url(Plan_4.jpg);
}

#cadre_34{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_3435_resultat.jpg);
}

#cadre_35{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_3276_resultat.jpg);
}

#cadre_36{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_4614_resultat.jpg);
}

#cadre_37{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_1662_resultat.jpg);
}

#cadre_38{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_4798_resultat.jpg);
}

#cadre_39{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_3268_resultat.jpg);
}

#cadre_40{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(IMG_1430_resultat.jpg);
}

#cadre_41{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Bilbao_0.jpg);
}

#cadre_42{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Bilbao_1.jpg);
}

#cadre_43{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Bilbao_2.jpg);
}

#cadre_44{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_0.jpg);
}

#cadre_45{
    width: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(Alpes_1.jpg);
}

#cadre_46{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 400px;
    height: 300px;
    background-image: url(Alpes_2.jpg);
}

#cadre_47{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    width: 800px;
    height: 183.5px;
    background-image: url(Alpes_3.jpg);
}

#b_texte{
    font-size: 1.5rem;
}
#maq{
    font-size: 1.5rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 0px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}

#c{
    font-size: 1.5rem;
    border-radius: 0px;
    border-top: 0px solid rgba(255, 255, 255, 0.6);
    border-bottom: 0px solid rgba(255, 255, 255, 0.6);
}

#cadre_48{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_0.png);
}

#cadre_49{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_1.png);
}

#cadre_50{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_2.png);
}

#cadre_51{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_3.png);
}

#cadre_52{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_4.png);
}

#cadre_53{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(proj_5.png);
}


#cadre_54{
    width: 800px;
    height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(gal_0.png);
}

#cadre_55{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(s_home_0.png);
}

#cadre_56{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(s_home_1.png);
}

#cadre_57{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(s_home_2.png);
}

#cadre_58{
    width: 400px;
    height: 225px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: 1s ease-in-out;
    background-image: url(s_home_3.png);
}

p{
    color: #ffffff;
}