/* Importation des polices */
@font-face {
  font-family: Panchang;
  src: url('./font/Panchang-Variable.ttf');
}

@font-face {
  font-family: Nippo;
  src: url('./font/Nippo-Variable.ttf');
}

@font-face {
  font-family: Tabular;
  src: url('./font/Tabular-Variable.ttf');
}

@font-face {
  font-family: Boska;
  src: url('./font/Boska-Variable.ttf');
}


body {

  background-color: #0A0976;
  background-image: url(./images-salwa/Gradient.png);
  background-size: contain;
  background-repeat: repeat;
  color: #F5F5F5;
  font-family: Tabular;
  letter-spacing: 0px;
  font-weight: 200;
  font-size: 18px;
}


.menu-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1001;
  background-color: transparent;
  border: none;
  padding: 0;
}

.burger {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

.menu-toggle.active .burger {
  background-color: white; 
}


.nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  z-index: 2;
}

.nav.active {
  transform: scale(1);
  opacity: 1;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  height: 100%;
}

.nav__item {
  padding: 2rem;
}

.nav__link {
  color: #F5F5F5;
  text-decoration: none;
  font-size: clamp(24px, 5vw, 60px);
}

.nav__link--home {
  color: #f4b915;
  text-decoration: none;
  font-size: clamp(24px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: 5px;
}

.text {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  margin-top: 100px;
  overflow: hidden;
}


.title {
  display: grid;
  grid-template-columns: 1;
  gap: 10px;
  margin-top: 100px;
  padding-left: 10%;
  padding-right: 10%;
}

.title__line {
  font-size: 27px;
  padding-bottom: 10px;
}

.title__hijab {
  font-weight: 900;
}

.title__receuil {
  font-weight: 500;
}

.title__extrait {
  font-weight: 200;
}

.text {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  margin-top: 100px;
  overflow: hidden; 
}

.line {
  overflow: hidden;
}

.line__1,
.line__2,
.line__3,
.line__4,
.line__5,
.line__6,
.line__7,
.line__8,
.line__9,
.line__10,
.line__11,
.line__12,
.line__13,
.line__14,
.line__15,
.line__16,
.line__17,
.line__18,
.line__19,
.line__20,
.line__21,
.line__22,
.line__23,
.line__24,
.line__25,
.line__26,
.line__27,
.line__28,
.line__29,
.line__30,
.line__31,
.line__32,
.line__33,
.line__34,
.line__35,
.line__36,
.line__37,
.line__38,
.line__39,
.line__40,
.line__41,
.line__42,
.line__43,
.line__44,
.line__45,
.line__46 {
  margin-top: 1em; 
  opacity: 0; 
  transform: translateY(50px); 
  transition: opacity 0.2s ease, transform 0.2s ease; 
}
















.line__1 {
  grid-column: 5 / 24;
  font-size: 61px;
  font-weight: 500; }



  
.line__2 { grid-column: 8 / 24; }

.line__3 {
  grid-column: 11 / 24;
  font-size: 27px; }

.line__4 {
  grid-column: 13 / 24;
  font-size: 27px; }

.line__5 {
  grid-column: 16 / 24;
  font-family: Panchang;
 }

.line__6 { grid-column: 18 / 24; }
.line__7 { grid-column: 20 / 24; }
.line__8 {
  grid-column: 21 / 24;
  font-size: 41px;
  text-decoration: rgb(11, 100, 179) wavy underline; }

.line__9 { grid-column: 22 / 24; }
.line__10 { grid-column: 6 / 24; }
.line__11 { grid-column: 9 / 24; }
.line__12 { grid-column: 12 / 24; }
.line__13 { grid-column: 15 / 24; }
.line__14 { grid-column: 17 / 24; }
.line__15 { grid-column: 19 / 24; }
.line__16 { grid-column: 1 / 24; }
.line__17 { grid-column: 2 / 24; }
.line__18 { grid-column: 3 / 24; }
.line__19 {
  grid-column: 4 / 24;
  text-decoration: underline dotted #f4b915; }

.line__20 { grid-column: 7 / 24; }
.line__21 { grid-column: 10 / 24; }
.line__22 {
  grid-column: 3 / 24;
  font-size: 91px;
  transition: color 0.3s, font-weight 0.3s; 
 }

 .line__22:hover {
  font-weight: 800;
  color:  #f4b915; 
 }

.line__23 { grid-column: 15 / 24; }
.line__24 {
  grid-column: 20 / 24;
  letter-spacing: 8px;
  font-weight: 700;
  color: #000000; }

.line__25 { grid-column: 6 / 24; }

.line__26 {
  grid-column: 8 / 24;
  text-decoration: rgb(11, 100, 179) wavy underline; }

.line__27 { grid-column: 11 / 24; }
.line__28 { grid-column: 13 / 24; }
.line__29 { grid-column: 16 / 24; }

.line__30 {
  grid-column: 18 / 24;
  font-weight: 400; }

.line__31 {
  grid-column: 20 / 24;
  font-weight: 600; }

.line__32 {
  grid-column: 21 / 24;
  font-weight: 700; }

.line__33 {
  grid-column: 22 / 24;
  font-weight: 900;
  font-size: 27px;
  color: #f4b915; }

.line__34 { grid-column: 3 / 24; }
.line__35 { grid-column: 5 / 24; }

.line__36 {
  grid-column: 9 / 24;
  font-size: 27px; 
  font-family: Boska;
  font-weight: 800; }

.line__37 {
  grid-column: 12 / 24;
  font-size: 27px;
  font-family: Boska;
  font-weight: 800; }

.line__38 {
  grid-column: 15 / 24;
  font-size: 27px;
  font-family: Boska;
  font-weight: 800; }

.line__39 { grid-column: 17 / 24; }

.line__40 {
  grid-column: 19 / 24;
  text-decoration: underline dotted #f4b915; }

.line__41 { grid-column: 1 / 24; }
.line__42 { grid-column: 3 / 24; }
.line__43 {
  grid-column: 4 / 24;
  transition: font-size 0.3s ease;
}

.line__43:hover {
  grid-column: 4 / 24; 
  font-weight: 900;
  font-size: 41px;

}

.line__44 {
  grid-column: 7 / 24;
  font-size: 27px; }

.line__45 { grid-column: 10 / 24; font-size: 41px; }

.line__46 {
  grid-column: 14 / 24;
  font-size: 61px;
  font-weight: 700;
  color: #f4b915; }



.mia {
  font-family: Boska;
  font-size: 91px;
  color: #f4b915;
  font-weight: 700;
  transition: color 0.3s, font-weight 0.3s; 
}

.mia:hover {
  font-weight: 100;
}

.font61 {
  font-size: 61px;
  transition: color 0.3s, font-weight 0.3s; 
}

.font61:hover {
  color: #f4b915;
  font-weight: bold;
}

small {
  padding-top: 20%;
  padding-bottom: 5%;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 700px) {
  .line__1 {
    font-size: 41px;
  }
  .text {
    padding: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 50px;
  }

  .line__22,
  .font61 { 
    font-size: 41px;
  }

}