* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

body {
  background-color: #fff;
  color: #111;
  line-height: 1.6;
}

/* Assurer une police avec les caractères japonais */
body, .hiragana-table, .japanese-block {
  font-family: 'Noto Sans JP', 'Meiryo', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* NAVBAR */
/* 1. Le conteneur principal : alignement gauche/droite */
.navbar {
  display: flex;
  justify-content: space-between; /* <--- Pousse le logo (à gauche) et le nav-container (à droite) */
  align-items: center; 
  padding: 10px 20px;
  background: #e60012;
  /* ... le reste des styles ... */
}

/* Assure l'alignement des éléments à l'intérieur du conteneur de navigation */
.nav-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 2. Le conteneur des liens : alignement horizontal des liens ! */
.menu-options {
  display: flex;       /* Pour aligner les enfants (les liens <a>) côte à côte */
  flex-direction: row; /* Pour s'assurer qu'ils sont bien en ligne */
  gap: 15px;            /* Espacement entre les liens */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 3. Cache le burger menu sur grand écran */
.burger {
  display: none; 
}
.menu-options a {
  /* Style pour que les liens ressemblent à des boutons */
  padding: 8px 15px;
  border: 1px solid white; /* Bordure blanche pour l'effet bouton */
  background: #e60012;
  color: white;
  text-decoration: none; /* Enlève le soulignement */
  border-radius: 5px;
  transition: background 0.3s, opacity 0.3s;
  font-weight: bold;
}

.menu-options a:hover {
  background: white; /* Inverse les couleurs au survol */
  color: #e60012;
  opacity: 1; /* Remplace ton ancienne opacity: 0.7; sur le a:hover global */
}

/* État actif du lien de navigation : couleur différente tant que la page est affichée */
.menu-options a.active {
  background: white;
  color: #e60012;
}

/* RESPONSIVE (Mettre à jour la partie responsive) */
@media (max-width: 768px) {
  /* Le bloc de liens s'appelle maintenant .menu-options */
  .menu-options { 
    flex-direction: column;
    display: none;
    background: #e60012;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 10px;
  }
  
  /* Ajout du style pour l'état actif du burger (basé sur ton code JS) */
  .menu-options.active { 
    display: flex;
  }
  
  .burger {
    display: block;
  }
}


/* HERO */
.hero {
  background: url('https://i.postimg.cc/Vkn02XhC/Imagetete.png') center/cover;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

.hero h1 {
  font-size: 2.5rem;
}

.hero p {
  margin-top: 10px;
  font-size: 1.2rem;
}

/* BLOCS */
.block {
  padding: 60px 20px;
  max-width: 900px;
  margin: auto;
  border-bottom: 1px solid #eee;
}

/* Style des tableaux Hiragana / Katakana */
.hiragana-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin: 20px 0;
}
.hiragana-table th, .hiragana-table td {
  padding: 12px 8px;
  border: 1px solid #eee;
}
.hiragana-table th {
  font-size: 2.2rem; /* grands caractères pour les kana */
  background: #fafafa;
}
.hiragana-table td {
  font-size: 1rem;
  color: #333;
}
/* Garantir la font correcte pour les tables de kana */
.hiragana-table {
  font-family: 'Noto Sans JP', 'Meiryo', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif;
}

.block h2 {
  margin-bottom: 15px;
  color: #e60012;
}

/* JAPANESE SECTION */
.japanese-block p {
  margin: 8px 0;
  font-size: 1.1rem;
}

/* CARTE */
.map {
  position: relative;
  width: 100%;
  height: 300px;
  background: url('data:image/png;base64,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') center/contain no-repeat;
  margin-top: 20px;
}

.map-point {
  position: absolute;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.map-point:hover {
  transform: scale(1.5);
}

/* PERIODE */
.periode-options button {
  margin: 5px;
  padding: 8px 15px;
  border: 1px solid #e60012;
  background: white;
  color: #e60012;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
  font-weight: bold;
}

.periode-options button.active {
  background: #e60012; /* Utilise les mêmes styles que le :hover */
  color: white;
  font-weight: bold;
}

.periode-options button:hover {
  background: #e60012;
  color: white;
}

.periode-info {
  margin-top: 15px;
  font-style: italic;
}

table {
    width: 100%;
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    margin-top: 25px;
    margin: 1000;
    padding: 0;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

table th {
    background-color: #f2f2f2;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  font-size: 0.9rem;
  border-top: 2px solid #e60012;
}