@font-face {
  font-family: 'logo';
  src: url('../logo10.ttf') format('truetype'); /* Format TrueType */
}

@font-face {
  font-family: 'logo12';
  src: url('../logo12.ttf') format('truetype'); /* Format TrueType */
}

@font-face {
  font-family: 'algerian';
  src: url('../ALGERIA.TTF') format('truetype'); /* Format TrueType */
}

@import url('https://fonts.googleapis.com/css?family=Mukta:700');

@import url('https://fonts.googleapis.com/css?family=Baloo');

@import url('https://fonts.googleapis.com/css?family=Montserrat');

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');




.conteneur {
  position: absolute;
}

.video-container {
  position: fixed;
  width: 100vw; /* ou la taille que vous souhaitez */
  height: 100vh; /* doit être égal à la largeur pour un cercle parfait */
  clip-path: url(#clipPathSVG); /* Utilise le clip-path du SVG */
  -webkit-clip-path: url(#clipPathSVG); /* Préfixe pour Safari */
  overflow: hidden; /* assure que rien ne dépasse du cercle */
  z-index: 2;
}

.video-circulaire {
  width: 100%;
  height: 100%;
}

.svg-halchimistes {
 
  font-family: logo12;
  position: fixed;
  text-transform: uppercase;
  transform-origin: center center;

}

.rectangle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  clip-path: url(#clipPathSVG);
  -webkit-clip-path: url(#clipPathSVG); /* Préfixe pour Safari */
  background-color: rgb(221, 178, 137); 
  opacity: 0;
  z-index: 2; 
}





#logot {
  transform: scale(1);
  transform-origin: center center;
}

.para {
  font-family: algerian;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 10vh;
  right: 5vw;
  z-index: 2;
  font-size: calc(0.15em + 1vw);
  margin-top: 5%;
  margin-left: 60%;
  -webkit-text-stroke: 0px;
  background-color: rgba(255, 234, 212, 0.5); /* Fond sombre avec opacité de 50 % */
  border-radius: 15px; /* Bords arrondis */
  padding: 10px; /* Espacement interne pour rendre le fond plus visible */
  opacity: 0;
}

.par2 {
  font-family: algerian;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 10vh;
  left: 5vw;
  z-index: 2;
  font-size: calc(0.15em + 1vw);
  margin-top: 5%;
  margin-right: 40%;
  -webkit-text-stroke: 0px;
  background-color: rgba(255, 234, 212, 0.5); /* Fond sombre avec opacité de 50 % */
  border-radius: 15px; /* Bords arrondis */
  padding: 10px; /* Espacement interne pour rendre le fond plus visible */
  opacity: 0;
}


.par3 {
  font-family: algerian;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 10vh;
  right: 5vw;
  z-index: 2;
  font-size: calc(0.15em + 1vw);
  margin-top: 5%;
  margin-left: 35%;
  -webkit-text-stroke: 0px;
  background-color: rgba(255, 234, 212, 0.5); /* Fond sombre avec opacité de 50 % */
  border-radius: 15px; /* Bords arrondis */
  padding: 10px; /* Espacement interne pour rendre le fond plus visible */
  opacity: 0;
}

.par4 {
  font-family: algerian;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 10vh;
  left: 5vw;
  z-index: 2;
  font-size: calc(0.15em + 1vw);
  margin-top: 5%;
  margin-right: 40%;
  -webkit-text-stroke: 0px;
  background-color: rgba(255, 234, 212, 0.5); /* Fond sombre avec opacité de 50 % */
  border-radius: 15px; /* Bords arrondis */
  padding: 10px; /* Espacement interne pour rendre le fond plus visible */
  opacity: 0;
}


.par5 {
  font-family: algerian;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 10vh;
  left: 5vw;
  z-index: 2;
  font-size: calc(0.15em + 1vw);
  margin-top: 5%;
  margin-right: 60%;
  -webkit-text-stroke: 0px;
  background-color: rgba(255, 234, 212, 0.5); /* Fond sombre avec opacité de 50 % */
  border-radius: 15px; /* Bords arrondis */
  padding: 10px; /* Espacement interne pour rendre le fond plus visible */
  opacity: 0;
}

#titr1, #titr2, #titr3, #titr4, #titr5 {
  text-align: center;
}


/*////////////////////////////*/

.boutcont {
  position: fixed;
  top: 20px;
  left: 5%;
  z-index: 2;
  transform: scale(0.8);
  transition: all 0.2s;
}

.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(221, 178, 137);
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: .3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: .3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}

/*/////////////////////////////////////////////*/
a {
  color: #523620; /* Rouge */
  text-decoration: none; /* Supprimer le soulignement */
}

/* CSS pour changer la couleur des liens au survol */
a:hover {
  color: #ffbd6c; /* Vert */
}

/*//////////////progression////////////////////////////*/