/* == Font téléchargé ==*/
@font-face {
    font-family: "Frederick";
    src: url("Frederick.ttf");
    }
@font-face {
    font-family: "Dancing";
    src: url("Dancing.ttf");
}

/* == POLICE GLOBALE == */
body {
  font-family: "Playwrite DE Grund Guides", cursive;
  font-weight: 400;
  font-style: normal;
}
 
/* == BACKGROUND == */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;

  background-image: url("Background-image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  filter: brightness(1.15) saturate(0.9);

  position: relative;
}

/* == MENU HAUT == */
.menu-toggle,
.menu-icon {
  display: none;
}

.nav {
  background-color: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(5px);            
  position: fixed;                       
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 40px;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;            
  align-items: center;
  box-sizing: border-box;
}

.nav ul {
  list-style: none;      
  display: flex;          
  gap: 40px;              
  margin: 0;
  padding: 0;
}

.nav a {
  font-family: "Frederick", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;  
  color: rgb(235, 229, 229);               
  transition: color 0.3s, transform 0.2s; 
}

.nav a:hover {
  color: #ffd700;        
  transform: scale(1.1);  
}

/* == CONTENU PRINCIPAL == */
.content {
  text-align: center;
  padding-top: 80px;   
} 

.qa {
  text-align: center;
  margin-top: 16px;
  text-shadow: 11px -4px 6px rgb(8 44 20 / 47%);
  font-size: 5rem;
  color: #62c530;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "Unna", serif;   
  font-weight: 400;
}

.qb {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-style: normal;  
  font-size: 3rem;           
  color: rgb(9, 53, 16);      
  text-align: center;                  
  margin-top: 10px;                     
  letter-spacing: 2px;                  
}

.qc {
  font-size: 1.25rem;  
  color: #166c32;
  margin-top: 8px;
}

.qd {
  font-family: "Dancing Script", cursive;
  font-weight: 400;
  font-style: normal;  
  font-size: 1.2rem;                      
  color: rgb(197, 94, 136);    
  text-align: center;                
  margin-top: 10px;            
  letter-spacing: 1px;      
  border: 2px solid rgba(230, 160, 180, 0.8);
  background-color: rgba(243, 180, 195, 0.2);
  border-radius: 15px;
  padding: 20px 30px;
  color: rgb(80, 40, 60);
  max-width: 800px;
  margin: 40px 0;
  box-shadow: 0 0 10px rgba(230, 160, 180, 0.3);
  display: block;                   
  margin: 40px auto 0 auto;   
}

/* == MUSIC == */
.music-button {
  width: 35px;    
  height: 35px;
  object-fit: contain;     
  position: fixed;      
  bottom: 20px;         
  left: 20px;         
  cursor: pointer;    
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;         
  opacity: 0.9; 
   background: none; 
  border: none;   
  padding: 0;   
}

.music-button:hover {
  transform: scale(1.2);  
  opacity: 1;         
}