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

/* == Background == */
body {
  background-image: url("Background-image-3.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* == Menu du haut == */
header {
  position: fixed;                    
  top: 0;
  left: 0;
  width: 100%;                   
  background-color: rgba(235, 237, 237, 0.301); 
  backdrop-filter: blur(8px);        
  padding: 15px 0;                  
  box-shadow: 0 4px 10px rgba(8, 13, 67, 0.1); 
  z-index: 1000;                
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;                    
  text-align: center;              
}

/* Style du titre */
.header-container h1 {
  font-family: "Fredericka", sans-serif; 
  font-size: 2.5rem;
  color: rgb(21, 21, 70);             
  margin: 0;
  letter-spacing: 2px;            
}

 /* == Section principale == */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;      
  text-align: center;
  min-height: 100vh;         
  font-family: "Unna", serif;
  gap: 10px;               
  background: transparent;   
}

/* 1️⃣ Première ligne :  Nom */
.hero h2 {
  font-size: clamp(32px, 5vw, 56px);  
  color: #0a3d62;                    
  margin: 0;
  font-weight: 700;
}

/* 2️⃣ Deuxième ligne : Volet Freya */
.hero h3 {
  font-size: clamp(30px, 5vw, 40px); 
  color: #255585;                     
  margin: 0;
  font-weight: 600;
}

/* 3️⃣ Troisième ligne : Année scolaire */
.hero .annee {
  font-size: clamp(20px, 3.5vw, 32px); 
  color: #173049;                     
  margin: 0;
  font-weight: 400;
}

/* == MENU PRINCIPAL == */
.menu-principal {
  margin-top: 24px; 
  padding: 16px;
}

.menu-grid {
  max-width: 900px;          
  margin: 0 auto;            
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  justify-items: stretch;     
}

/* Styles des boxes */
.menu-grid .box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;           
  text-align: center;
  text-decoration: none;     
  border-radius: 12px;
  background: #0A3D62;       
  color: #E6F0FA;          
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
  padding: 12px;
}

/* Titre dans la box */
.menu-grid .box h3 {
  margin: 0;
  font-size: 1.25rem;        
  font-weight: 600;      
}

.menu-grid .box:hover,
.menu-grid .box:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  background: linear-gradient(180deg, #0A3D62 0%, #1666A8 100%);
  outline: none;
}

.menu-grid .box:focus-visible {
  box-shadow: 0 0 0 3px #99C7FF, 0 6px 16px rgba(0,0,0,0.08);
}

@media (max-width: 900px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: 1fr; }
}