body {
  margin: 0;
  padding: 0;
  font-family: "Noto Serif JP", serif;
  background: linear-gradient(135deg, #faf8f3 0%, #f0ebe5 100%);
  padding-top: 40px; /* ajuste selon la hauteur de ta barre */
  display: flex;
  flex-direction: column; /* Les éléments enfants (header, main, footer) sont empilés verticalement */
  min-height: 100vh; /* Le corps prend au moins toute la hauteur de la fenêtre visible */
}

main {
  max-width: 980px;
  margin: 0 auto;
}
main, .container, .blog-container, .quiz-container {
    flex-grow: 1; /* Le contenu principal prend tout l'espace disponible, poussant le pied de page vers le bas */

* {
    box-sizing: border-box;}

h1 { text-align: center; color: #333; }
}



  /* Barre du haut */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #8c1c13;
    padding: 0.5em 1.5em;
    position: relative;
  }
  .navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

  .navbar img, footer img {
    height: 50px;
  }




  /* Très petits écrans */
  @media (max-width: 480px) {
    .navbar {
      padding: 0.5em 1em;
    }

    .navbar img {
      height: 40px;
    }

    .menu {
      top: 60px;
      height: calc(100vh - 60px);
    }
  }

  body::before {
  content: "";
  background-image: url('kanjiyomou_fond.jpg'); /* adapte le chemin si besoin */
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
  }
  .japanese-text, .japanese-name{
  font-size: 1.1em;
  margin-left: 1em;
  position: relative;
  cursor: pointer;
  user-select: none;
  }
  .japanese-name{
    color: black;
    text-align: center;
  }
  .japanese-text{
    color: white;
  }



  .translation {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #b33c2c;
  color: white;
  padding: 0.5em 0.8em;
  border-radius: 5px;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  .japanese-text:hover .translation ,
  .japanese-name:hover .translation
 {
  opacity: 1;
  visibility: visible;
  }

  .translation.show {
  opacity: 1;
  visibility: visible;
  }

/* Css de la présentation  du site en page d'accueil */


  .btn-en-savoir-plus {
  display: inline-flex;
  align-items: center;
  background-color: #8c1c13;
  color: white;
  padding: 0.5em 1em;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 2px 2px 6px #ccc;
  transition: background-color 0.3s;
  float: right;            /* aligne le bouton à droite */
  margin-right: 1.5em;     /* marge à droite */
  margin-top: 1em;
}

.btn-en-savoir-plus:hover {
  background-color: #a73626;
}

.btn-logo {
  height: 20px;           /* taille contrôlée */
  width: auto;
  margin-right: 0.6em;
  object-fit: contain;
}


.btn-retour {
  display: inline-block;
  /* margin-top: 3em; */
  text-decoration: none;
  padding: 0.5em 1em;
  background-color: #8c1c13;
  color: white;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-retour:hover {
  background-color: #a73626;
}

.section-separator {
  margin: 3em 0 1em;
  text-align: center;
  font-size: 1.2em;
  color: #666;
  border-top: 2px solid #ccc;
  padding-top: 0.5em;
}

@media screen and (max-width: 600px) {
  .blog-article {
    padding: 0 1em;
    font-size: 1em;
    padding-bottom: 20px; /* Modification Eric */
  }

  .blog-article h1 {
    font-size: 1.5em;
  }
}
.toggle-furigana-container {
  text-align: center;
  margin: 1em 0;
}

.toggle-furigana-container button,
.toggle-translation-container button {
  font-size: 1em;
  padding: 0.5em 1.2em;
  border: none;
  border-radius: 8px;
  background-color: #0074c7;
  color: white;
  cursor: pointer;
  margin-bottom: 15px; /* Modif Eric */

}
.proverbe {
  font-style: italic;
  margin-top: 1.5em;
  font-size: 1.2em;
  text-align: center;
}

.tooltip {
  cursor: help;
  margin-left: 0.5em;
  font-size: 0.9em;
  color: #555;
}

.trad-btn {
  margin-left: 0.5em;
  font-size: 0.9em;
  cursor: pointer;
  background: none;
  border: none;
}



.trad-hidden {
  display: none;
}
.proverbe {
  font-style: italic;
  margin-top: 1.5em;
  font-size: 1.2em;
  text-align: center;
}

.tooltip {
  cursor: help;
  margin-left: 0.5em;
  font-size: 0.9em;
  color: #555;
}

.trad-btn {
  margin-left: 0.5em;
  font-size: 0.9em;
  cursor: pointer;
  background: none;
  border: none;
}


.trad-hidden {
  display: none;
}

/* ========================================= */
/* === Styles du pour le blog (blog.php) === */
/* ========================================= */

/* Vos styles page accueil du blog  */
.blog-container {
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.article-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.article-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.article-card:hover {
    transform: translateY(-5px);
}
.article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.article-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.article-content h2 {
    margin-top: 0;
    color: #0056b3;
    font-size: 1.3em;
}
.article-content p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    flex-grow: 1;
}
.article-content a.read-more {
    display: inline-block;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    align-self: flex-start;
    transition: background-color 0.2s;
}
.article-content a.read-more:hover {
    background-color: #0056b3;
}
.no-articles {
    text-align: center;
    color: #888;
}
.blog-article {
  max-width: 800px;
  margin: 3em auto;
  padding: 0 1.5em;
  font-family: "Noto Serif JP", serif;
  line-height: 1.8;
  font-size: 1.1em;
  color: #222;
  background-color: #fff;
}

.blog-article h1 {
  font-size: 2em;
  color: #8c1c13;
  text-align: center;
  margin-bottom: 0.2em;
}

.blog-article .meta {
  text-align: center;
  color: #666;
  font-size: 0.95em;
  margin-bottom: 2em;
}

.blog-article .article-jp, .blog-article .article-fr {
  margin-bottom: 3em;
  padding: 0;
/*  margin: 0 auto; */
}

.blog-article .article-jp p,
.blog-article .article-fr p {
  margin-bottom: 1.5em;

}

.blog-article h2 {
  font-size: 1.4em;
  color: #8c1c13;
  margin-bottom: 1em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3em;
}


.translation-notes, .culture-point {
    /* Marge pour séparer les notes du reste du texte */
    margin: 3em 0;
    padding: 2em;

    /* Styles de fond et bordure pour les encadrer */
    background-color: #f7f7f7; /* Un fond gris très clair */
    border-left: 4px solid #8c1c13; /* Une ligne colorée sur le côté gauche */
    border-radius: 0 8px 8px 0; /* Arrondit les coins pour adoucir le design */

    /* Styles de texte */
    font-family: Arial, sans-serif;
    font-size: 0.95em; /* Un peu plus petit que le texte principal */
    color: #555;
    line-height: 1.6;
}
.culture-point {
background-color: #f0f6fb;
}

.translation-notes p {
    margin-top: 0;
    margin-bottom: 1em;
}

.translation-notes strong {
    color: #333;
}

.translation-notes ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc; /* Pour utiliser des puces rondes */
}

.translation-notes li {
    margin-bottom: 0.5em;
}

/* Styles pour le titre des notes si vous en avez un */
.translation-notes .notes-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #8c1c13;
    margin-bottom: 1em;
}
    /* Styles CSS spécifiques au blog pour la mise en page des cartes d'articles */
/*    .blog-container { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
      */
    .article-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
    .article-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: transform 0.2s ease-in-out;
        display: flex;
        flex-direction: column;
    }
    section {
        max-width: 900px;
        margin: 3em auto;
        padding: 0 1em;
        padding-bottom: 10px;

    }
    /* Styles pour le menu déroulant des catégories */
    .blog-categories {
      margin: 1em 0;
      text-align: center; /* Pour centrer le bloc entier */
    }

    .blog-categories label {
      font-size: 1.1em;
      margin-right: 0.5em;
      color: #333; /* Rendre la couleur du label un peu plus neutre ou plus foncée */
      font-weight: bold; /* S'assurer qu'il est bien visible */
    }

    #categorie-select {
      /* Design actuel */
      font-size: 1em;
      padding: 0.6em 1em; /* Augmenter un peu le padding pour plus d'espace */
      border-radius: 8px; /* Adoucir les coins */
      border: 1px solid #8c1c13; /* Bordure assortie à la couleur de votre marque */


/* A supprimer les styles redondants au dessus *******************


      /* Nouveaux styles pour un aspect plus "bouton" ou "entête" */
      background-color: #8c1c13; /* Couleur de fond principale de votre site */
      color: white; /* Texte blanc pour contraster */
      cursor: pointer; /* Indiquer que c'est cliquable */
      appearance: none; /* Masque la flèche native du navigateur pour la customisation */
      -webkit-appearance: none; /* Pour Safari/Chrome */
      -moz-appearance: none; /* Pour Firefox */
      background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Icône flèche SVG blanche */
      background-repeat: no-repeat;
      background-position: right 0.7em top 50%, 0 0; /* Positionne la flèche */
      background-size: 1em auto; /* Taille de la flèche */
      box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Légère ombre pour la profondeur */
      transition: all 0.3s ease; /* Transition douce pour les changements au survol */
    }

    #categorie-select:hover {
      background-color: #a73626; /* Un rouge légèrement plus clair au survol */
      border-color: #a73626;
    }

    #categorie-select:focus {
      outline: none; /* Supprime le contour bleu/noir par défaut au focus */
      box-shadow: 0 0 0 3px rgba(140, 28, 19, 0.4); /* Ajoute une ombre de focus personnalisée */
    }

    /* Style des options individuelles (peut varier selon les navigateurs) */
    #categorie-select option {
      background-color: white; /* Fond blanc pour les options */
      color: #333; /* Texte sombre pour les options */
      padding: 0.5em 0.8em; /* Padding pour les options */
    }

    /* Quand une option est sélectionnée dans la liste déroulante (non l'en-tête) */
    #categorie-select option:checked {
      background-color: #f0f0f0; /* Légère couleur de fond pour l'option sélectionnée */
    }

    /* Nouveau conteneur pour aligner Catégories et Tri */
.blog-filters-sort-container {
    display: flex; /* Active Flexbox */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l'écran est trop petit */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    gap: 20px; /* Espace entre les deux blocs (catégorie et tri) */
    margin-bottom: 20px; /* Espace sous ce conteneur */
}

/* Styles pour le menu déroulant des catégories */
.blog-categories {
  /* margin: 1em 0; <-- REMOVED : Géré par le parent gap/margin */
  text-align: center; /* Pour centrer le contenu interne si flex-wrap s'active */
}

.blog-categories label {
  font-size: 1.1em;
  margin-right: 0.5em;
  color: #333; /* Rendre la couleur du label un peu plus neutre ou plus foncée */
  font-weight: bold; /* S'assurer qu'il est bien visible */
}

#categorie-select {
  font-size: 1em;
  padding: 0.6em 1em;
  border-radius: 8px;
  border: 1px solid #8c1c13;
  background-color: #8c1c13;
  color: white;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 1em auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

#categorie-select:hover {
  background-color: #a73626;
  border-color: #a73626;
}

#categorie-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 28, 19, 0.4);
}

#categorie-select option {
  background-color: white;
  color: #333;
  padding: 0.5em 0.8em;
}

#categorie-select option:checked {
  background-color: #f0f0f0;
}

/* Styles pour les options de tri (blog-sort-options) */
.blog-sort-options {
    /* text-align: center; <-- REMOVED: Géré par le parent flexbox */
    /* margin-bottom: 20px; <-- REMOVED: Géré par le parent gap */
    font-size: 1em;
    color: #333;
    display: flex; /* Fait du conteneur de tri un flexbox pour aligner son contenu */
    align-items: center; /* Centre verticalement "Trier par :" et les liens */
    gap: 10px; /* Espace entre "Trier par :" et les liens, et entre les liens */
}

.blog-sort-options span {
    /* margin-right: 10px; <-- REMOVED: Géré par le parent gap */
    font-weight: bold;
    white-space: nowrap; /* Empêche "Trier par :" de passer à la ligne */
}

.blog-sort-options a {
    text-decoration: none;
    color: #007bff;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    /* margin: 0 5px; <-- REMOVED: Géré par le parent gap */
    white-space: nowrap; /* Empêche les liens "Plus récent/ancien" de passer à la ligne */
}

.blog-sort-options a:hover {
    background-color: #f0f0f0;
    border-color: #007bff;
}

.blog-sort-options a.active-sort {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Styles pour les icônes de tri (flèches) */
.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.desc-icon { /* Flèche vers le bas (plus récent d'abord) */
    border-top: 5px solid white;
}

.asc-icon { /* Flèche vers le haut (plus ancien d'abord) */
    border-bottom: 5px solid white;
}

/* Media query pour les très petits écrans si nécessaire */
/* Gardons une version simple pour mobile, où ils peuvent passer à la ligne si besoin */
@media (max-width: 600px) { /* Ajusté de 480px à 600px pour une meilleure gestion sur mobiles */
    .blog-filters-sort-container {
        flex-direction: column; /* Force les deux blocs (catégorie et tri) à s'empiler */
        align-items: center; /* Centre les blocs empilés */
        gap: 10px; /* Réduit l'espace entre les blocs empilés */
    }
    .blog-sort-options {
        flex-wrap: wrap; /* Permet aux liens de tri de s'enrouler s'il n'y a pas assez de place */
        justify-content: center; /* Centre les liens de tri s'ils s'enroulent */
    }
    .blog-categories,
    .blog-sort-options {
        width: 100%; /* S'assurent qu'ils prennent toute la largeur quand empilés */
    }
}
        .article-card:hover {
        transform: translateY(-5px);
    }
    .article-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }
    .article-content {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .article-content h2 {
        margin-top: 0;
        color: #0056b3;
        font-size: 1.3em;
    }
    .article-content p {
        font-size: 0.9em;
        color: #666;
        line-height: 1.5;
        flex-grow: 1;
    }
    .article-content a.read-more, section a.read-more {
        display: inline-block;
        margin-top: 10px;
        background-color: #007bff;
        color: white;
        padding: 8px 15px;
        text-decoration: none;
        border-radius: 5px;
        align-self: flex-start;
        transition: background-color 0.2s;
    }
    .article-content a.read-more:hover {
        background-color: #0056b3;
    }
    .no-articles {
        text-align: center;
        color: #888;
        grid-column: 1 / -1; /* Permet au message de s'étendre sur toutes les colonnes */
    }

    figure.illustration {
  margin: 2em 0;
  text-align: center;
}

figure.illustration img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

figure.illustration figcaption {
  margin-top: 0.6em;
  font-size: 0.9em;
  color: #333;
  font-style: italic;
}

/* ========================================= */
/* === Styles du Pied de Page (Footer) === */
/* ========================================= */

.footer-bar {
  display: flex;
  flex-direction: column; /* Empile les enfants (footer-content et footer-proverbe) */
  justify-content: center; /* Centre le contenu global du footer verticalement */
/*   align-items: center; Garde ceci pour les éléments qui ne s'étirent pas par défaut, comme le proverbe */
  background-color: #8c1c13;
  color: white;
  padding: 0.8em 1.5em;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pour espacer le logo, texte, bouton */
  flex-grow: 1; /* Prend l'espace disponible */
/*  max-width: 1200px;  Limite la largeur sur grands écrans */
  width: 100%; /* IMPORTANT : S'assure qu'il prend toute la largeur du footer-bar */
  margin: 0 auto; /* Centre le contenu du footer-content si sa max-width est atteinte */
  gap: 1em;
  flex-wrap: nowrap; /* Maintient logo, texte, bouton sur une ligne */
  align-self: stretch; /* NOUVEAU : Force .footer-content à s'étirer sur toute la largeur */
}

/* Assurer que le conteneur du logo est aussi un flex item pour centrer l'image */
.footer-content > a:first-child { /* Cible le premier lien enfant de footer-content (le logo) */
    display: flex;
    align-items: center; /* Centre l'image verticalement dans son propre conteneur */
}

.footer-bar img {
  height: 45px;
  flex-shrink: 0;
}

/* Rendre le texte japonais un conteneur flex pour son propre contenu */
.footer-bar .japanese-text {
  color: white;
  font-size: 1.1em;
  position: relative;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex; /* Le rend flex pour centrer son contenu */
  align-items: center; /* Centre le texte japonais verticalement dans sa boîte */
}

.footer-bar .translation {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #b33c2c;
  color: white;
  padding: 0.4em 0.8em;
  border-radius: 5px;
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.footer-bar .japanese-text:hover .translation,
.footer-bar .japanese-text.show .translation {
  opacity: 1;
  visibility: visible;
}

/* Rendre le bouton un conteneur flex pour son propre contenu */
.footer-bar .btn-retour {
  background-color: #fff;
  color: #8c1c13;
  padding: 0.5em 1em;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex; /* Le rend flex pour centrer son contenu */
  align-items: center; /* Centre le texte du bouton verticalement dans sa boîte */
  justify-content: center; /* Centre le texte du bouton horizontalement */
  margin-top: 0; /* Important : Annule tout margin-top indésirable */
}

.footer-bar .btn-retour:hover {
  background-color: #ffd700;
  color: #8c1c13;
}

.footer-proverbe {
  margin-top: 1em; /* Espace entre la ligne principale et le proverbe */
  text-align: center;
  width: 100%; /* S'assure qu'il prend toute la largeur disponible pour le centrage */
  max-width: 1200px; /* Aligné avec la max-width du footer-content */
}

.footer-proverbe .proverbe {
  font-style: italic;
  font-size: 1em;
  color: white;
  margin: 0;
  padding: 0 1em;
}

.footer-proverbe .tooltip {
  cursor: help;
  margin-left: 0.5em;
  font-size: 0.9em;
  color: #ffd700;
}

.footer-proverbe .trad-btn {
  margin-left: 0.5em;
  font-size: 0.9em;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

.footer-proverbe #trad-proverbe {
  margin-left: 0.5em;
  font-style: normal;
  color: #fff;


}

.footer-proverbe .trad-hidden {
  display: none;
}
/* ---- Styles rajoutés  -- */

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  justify-content: center;
  gap: 1.5em;
}

.footer-nav a {
  text-decoration: none;
  color: #0074c7;
}

.footer-description {
  margin-bottom: 1em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.site-footer {
  background-color: #8a0303;
  color: #ffffff;
  padding: 0.1em 1em;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  width: 100%;
}

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

.footer-logo-slogan {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1.5em;
}

.footer-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background-color: white;
  padding: 0.3em;
}

.footer-proverbe .japanese-text {
  font-size: 1.2em;
  cursor: pointer;
  color: #fff;
}

.footer-proverbe .translation {
  display: none;
  font-size: 0.9em;
  margin-top: 0.5em;
  color: #ffd;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 1.5em 0 1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em;
  padding-top: 2em;
  padding-bottom: 0.01em;
}

.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}

.footer-nav a:hover {
  color: #ffc107;
}

.footer-copy {
  margin-top: 1em;
  font-size: 0.9em;
  color: #dddddd;
}



.ikimashou-line {
  position: relative;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

.ikimashou-line::before,
.ikimashou-line::after {
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  background-color: #fff;
  vertical-align: middle;
  margin: 0 1em;
}

.ikimashou-kanji {
  font-size: 1.3em;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.ikimashou-line a:hover .ikimashou-kanji {
  color: #ffc107;
}
.copyright-bar {
  width: 100%;
  background-color: #c62828; /* plus sombre que #e53935 */
  color: #fff;
  text-align: center;
  font-size: 0.9em;
  padding: 0.8em 1em;
  border-top: 1px solid #b71c1c;
}
/* --- Media Queries pour les écrans plus petits --- */
@media (max-width: 768px) {
  .footer-bar {
    width:100%; /* important avec margin et padding body à 0 pour que le footer occuppe tte la largeur */
    padding: 0.8em 1em;
    /* Modif Eric */
    margin: 20px 0;
  }

  .footer-content {
    justify-content: space-between; /* Aligne gauche/droite sur smartphone */
    gap: 0.5em;
    overflow-x: auto; /* Permet le défilement horizontal si le contenu déborde */
    padding-bottom: 5px; /* Pour laisser de la place au scrollbar */
  }

  .footer-bar .japanese-text {
    font-size: 1em;
  }

  .footer-bar .btn-retour {
    font-size: 0.9em;
    padding: 0.4em 0.8em;
  }

  .footer-bar .translation {
    font-size: 0.75em;
    padding: 0.3em 0.6em;
  }
}

/* Media query pour les très petits écrans si ça ne tient toujours pas sur une ligne */
@media (max-width: 480px) {
    .footer-content {
        flex-wrap: wrap; /* Réactive le wrap si vraiment trop petit, pour éviter le débordement et permettre l'empilement */
        justify-content: space-between;; /* Modification Eric */
        overflow-x: hidden;
    }
    .footer-bar .japanese-text,
    .footer-bar .btn-retour {
        flex-basis: auto;
        margin: 0.2em;
    }
    .footer-proverbe {
        font-size: 0.9em;
    }
}
.blog-article {
  box-sizing: border-box;
  padding: 1em;
  margin: 0 auto;
  max-width: 800px;
}

/* Corrige le bloc texte japonais */
.article-jp {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Style pour quiz Kanjiyomou */




.quiz-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(140, 28, 19, 0.1);
    overflow: hidden;
}

.quiz-header {
    background: linear-gradient(135deg, #8c1c13 0%, #b33c2c 100%);
    color: white;
    padding: 2em;
    text-align: center;
}

.quiz-title {
    font-size: 2.5em;
    margin: 0 0 0.5em 0;
    font-weight: bold;
}

.quiz-subtitle {
    font-size: 1.2em;
    opacity: 0.9;
    margin: 0;
}

.progress-bar {
    background: rgba(255,255,255,0.2);
    height: 8px;
    border-radius: 4px;
    margin-top: 1.5em;
    overflow: hidden;
}

.progress-fill {
    background: #ffd700;
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

.quiz-content {
    padding: 2em;
}

.question-card {
    display: none;
    animation: fadeIn 0.5s ease;
}

.question-card.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.question-number {
    color: #8c1c13;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.question-text {
    font-size: 1.1em;
    margin-bottom: 1.2em;
    color: #333;
    line-height: 1;
}

.kanji-display {
    font-size: 3em;
    text-align: center;
    color: #8c1c13;
    margin: 1em 0;
    padding: 0.5em;
    background: #faf8f3;
    border-radius: 10px;
    border: 2px solid #8c1c13;
}

.answers-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 2em;
}

.answer-btn {
    background: white;
    border: 2px solid #ddd;
    padding: 1em 1.5em;
    border-radius: 10px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.answer-btn:hover {
    border-color: #8c1c13;
    background: #faf8f3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(140, 28, 19, 0.1);
}

.answer-btn.correct {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

.answer-btn.incorrect {
    background: #f44336;
    border-color: #f44336;
    color: white;
}

.answer-btn.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.next-btn {
    background: #8c1c13;
    color: white;
    border: none;
    padding: 1em 2em;
    border-radius: 10px;
    font-size: 1.1em;
    cursor: pointer;
    float: right;
    transition: background 0.3s ease;
    display: none;
}

.next-btn:hover {
    background: #b33c2c;
}

.next-btn.show {
    display: inline-block;
}

.results-screen {
    display: none;
    text-align: center;
    padding: 2em 0;
}

.results-screen.show {
    display: block;
}

.score-display {
    font-size: 3em;
    color: #8c1c13;
    margin: 1em 0;
    font-weight: bold;
}

.score-message {
    font-size: 1.3em;
    margin-bottom: 2em;
    color: #666;
}

.restart-btn {
    background: #8c1c13;
    color: white;
    border: none;
    padding: 1em 2em;
    border-radius: 10px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.3s ease;
}

.restart-btn:hover {
    background: #b33c2c;
}

.explanation {
    background: #f0f8ff;
    border-left: 4px solid #8c1c13;
    padding: 1em;
    margin: 1em 0;
    border-radius: 5px;
    display: none;
}

.explanation.show {
    display: block;
    animation: fadeIn 0.5s ease;
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .quiz-header {
        padding: 1.5em;
    }

    .quiz-title {
        font-size: 2em;
    }

    .quiz-content {
        padding: 1.5em;
    }

    .kanji-display {
        font-size: 2.5em;
    }

    .answer-btn {
        padding: 0.8em 1em;
        font-size: 1em;
    }
}
/* ========================================= */
/* === Styles pour la galerie des personnages === */
/* ========================================= */

.galerie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espace entre les cartes */
    max-width: 900px; /* Largeur maximale pour la galerie (ajustez si besoin) */
    margin: 3em auto;
    padding: 0 1em; /* Marge intérieure sur les côtés pour les petits écrans */
}

/* Style de chaque carte de personnage */
.carte {
    /* flex-basis: 50% pour 2 cartes par ligne, mais on déduit le gap */
    flex-basis: calc(50% - 10px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
/*    overflow: hidden; */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.carte:hover {
    transform: translateY(-5px); /* Effet au survol */
}

.carte img {
    width: 100%;
    height: auto;
    display: block;
}


/* Règle de style pour la responsivité */
@media (max-width: 768px) {
    .galerie {
        gap: 15px;
    }
    .carte {
        flex-basis: 100%; /* Une carte par ligne sur les petits écrans */
    }
}
/*
    Le problème était ici :
    overflow: hidden;
    Cette ligne coupe tout contenu qui dépasse.
    Nous la retirons pour que la traduction soit visible.

.carte {
    flex-basis: calc(50% - 10px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    position: relative; /* S'assurer que la carte a une position relative
}
*/
/* Votre style d'origine pour la traduction */
.translation {
    position: absolute;
    top: 100%; /* Le positionnement commence à 100% de la hauteur du parent */
    left: 50%;
    transform: translateX(-50%);
    background-color: #b33c2c;
    color: white;
    padding: 0.5em 0.8em;
    border-radius: 5px;
    font-size: 0.85em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* menu mobile supprimés */

  main {
    padding: 35px 15px;
  }


/* Styles pour menu des blocs grade */

.grade-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  max-width: 600px;
  margin: 2em auto;
}

@media screen and (min-width: 768px) {
  .grade-stack {
    grid-template-columns: 1fr 1fr;
  }
}

.grade-book,.grade-livre {
  display: block;
  padding: 1em 1.2em;
  background-color: white;
  border-left: 12px solid;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  transition: transform 0.2s, box-shadow 0.2s;
}

.grade-book:hover {
  transform: translateX(4px);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
}

.grade-book::before {
  content: "📗"; /* On le stylise via couleur */
  font-size: 1.3em;
  margin-right: 0.6em;
  vertical-align: middle;
}


/* Couleurs de bloc et de l’icône */

.book1 {
  border-color: #ccc;
  background-color: #ffffff;
}
.book1::before {
  content: "📖"; /* Livre blanc ou neutre */
}

.book2 {
  border-color: #f1c40f;
  background-color: #fff9cc;
}
.book2::before {
  content: "📒"; /* Livre jaune */
}

.book3 {
  border-color: #e67e22;
  background-color: #ffe5cc;
}
.book3::before {
  content: "📙"; /* Livre orange */
}

.book4 {
  border-color: #27ae60;
  background-color: #e6f4e9;
}
.book4::before {
  content: "📗"; /* Livre vert */
}

.book5 {
  border-color: #2980b9;
  background-color: #e0f0fc;
}
.book5::before {
  content: "📘"; /* Livre bleu */
}

.book6 {
  border-color: #8b572a;
  background-color: #f3e8dc;
}


/* pour l'image du livre 6 */
.grade-icon {
  width: 18px; /* Définit la largeur de l'icône */
  height: 24px; /* Définit la hauteur de l'icône */
  vertical-align: middle; /* Aligne l'icône verticalement avec le texte */
  margin-right: 1em; /* Ajoute un petit espace à droite de l'icône */
  margin-left:6px;
}
/* Style pour les pages individuelles de kanji */
.kanji-lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  max-width: 700px;
  margin: 2em auto;
}

@media screen and (min-width: 768px) {
  .kanji-lesson-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.kanji-lesson {
  display: block;
  padding: 1em 1.2em;
  background-color: #fdfdfd;
  border-left: 10px solid #0074c7;
  border-radius: 8px;
  text-decoration: none;
  color: #222;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.kanji-lesson:hover {
  transform: translateX(4px);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

.lesson-header {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.kanji-list {
  font-size: 1.4em;
  letter-spacing: 0.2em;
}
/* Style pour les cours individuels */
.kanji-separator {
  margin: 1em 0;
  border: none;
  border-top: 1px solid #ccc;
}
/*  ----------------------- Modif --------------------- */
.phrase-block {
  display: flex;
 flex-wrap: wrap;
  align-items: flex-start; /* Aligne les éléments sur le haut si plusieurs lignes */
  gap: 0.5em; /* Ajoute un petit espace entre les éléments (les boutons et le texte) */
  margin-bottom: 1.5em;
}
.phrase-block .phrase-content {
    /* Le 'flex-grow: 1' permet au texte de prendre l'espace restant */
    flex-grow: 1;
    flex-grow: 1;
    margin-left: -0.5em;
    margin-right: -2.5em;
    flex-basis: 0;
    flex-shrink: 1;
    min-width: 0;
    /* modif eric on aggradit un peu la place du texte */
    margin-left: -0.5em;
    margin-right: -2.5em;
}
span.phrase-content.text {
  max-width: 100%;
  white-space: normal;
}
/* Ces règles pour les boutons et le kanji de référence */
.btn-furigana, .btn-hiragana, .btn-translate, .kanji-ref {
    flex-shrink: 0; /* Empêche les boutons et le kanji de se réduire */
}
/* Le 'span' contenant le kanji-ref peut être stylisé aussi */
.kanji-ref {
    white-space: nowrap; /* Empêche le kanji de se diviser sur deux lignes */
}
/*  ----------------------- Modif --------------------- */

.kanji-ref {
  display: inline-block;
  margin-right: 0.6em;
  font-weight: bold;
  font-size: 1.1em;
}

  .phrase-line {
    margin: 0.6em 0;
    font-size: 1.2em;
  }

  .phrase-line button {
    font-size: 0.95em;
    margin-right: 0.3em;
    padding: 0.1em 0.4em;
    border: none;
    background: none;
    cursor: pointer;
  }



  .traduction-fr {
    margin-left: 1.5em;
    color: #444;
    font-size: 0.95em;
    width: 100%;
    line-height: 0.5em;
  }

rt.hidden {
  display: none;
}
/* css control gemini */
.global-controls {
  display: flex; 
  text-align: center;
  gap: 6px;
  justify-content:center; /* centre le groupe */
  width:100%;
  margin-bottom: 20px;
/*  padding: 10px; */
/*  background-color: #f0f0f0; */
  border-radius: 8px;
}
.global-controls button {
  display: inline-flex;
  margin: 0 5px;
  padding: 5px 17px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  align-items: center;   /* centrage vertical */
  justify-content: center; /* centrage horizontal */
  
}
.global-controls button img, .phrase-controls button img {
  height: 22px;
  margin-bottom: 3px;
  margin-right: 1px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: linear-gradient(#ffffff, #f3f4f6);
    padding: 3px;
    box-shadow: 0 1px 0 #ffffff inset, 0 2px 3px rgba(0, 0, 0, .12);
}
button.btn-advanced img, button.btn-hiragana img {
  margin-bottom: 0px;
  vertical-align: bottom;
}
.btn-advanced, .btn-hiragana {
    border: none;
    background: transparent;
}    
button.toggle-all-advanced {
  font-size: 1.15em;
}
  /* ------------------------------------------------------------- */
/* Styles spécifiques pour les petits écrans (smartphones, etc.) */
/* ------------------------------------------------------------- */
@media (max-width: 600px) { /* Appliqué si la largeur de l'écran est de 600px ou moins */
  .global-controls button {
        padding: 8px 12px; /* Réduisons un peu le padding pour économiser de l'espace */
    }
    .global-controls .btn-text {
        display: none; /* C'est la ligne magique : elle cache le texte ! */
    }
    span.btn-text  {
        display: none; /* C'est la ligne magique : elle cache le texte ! */
    }
    .global-controls {
      gap:4px;  
      padding: 1px; /* Réduisons un peu le padding pour économiser de l'espace */
    }

}

 /* NOUVEAUX STYLES POUR LA COULEUR ET L'EFFET AU SURVOL */
/*  background-color: #f0f0f0; /* Couleur de fond par défaut 
  color: #333;  Couleur du texte 
  border: 1px solid #ddd;
  transition: all 0.3s ease; 
} */

/* Effet au survol de la souris */
.global-controls button:hover {
  background-color: #e0e0e0; /* Couleur de fond plus foncée au survol */
  border-color: #bbb;
}

/* ✅ Responsive break uniquement sur petits écrans */
@media screen and (max-width: 600px) {
  .title-break-mobile::after {
    content: "\A";   /* saut de ligne */
    white-space: pre;
  }
}

.traduction-fr {
  margin-left: 1.5em;
  color: #444;
  font-size: 0.95em;
  line-height: 1.6;
}
/* Container de l'en-tête */
/* On utilise le sélecteur ci-dessous pour rapprocher le titre du bouton Speaker */

/* cas avec audion on justifie à gauche Audio + titre */
.title-group {
  display: flex;
  align-items: center;
  gap: 1em;

}
.header-audio-btn + .section-title {
    margin-left: 0;
}
.header-controls, .section-header {

      display: flex;
      align-items: center; /* Aligne les éléments verticalement au centre */
      justify-content: space-between; /* Pousse les éléments aux extrémités */
      flex-wrap: nowrap; /* Empêche les éléments de passer à la ligne */
      padding: 10px;
    background-color:none; /* Exemple de fond pour visualiser le conteneur */
    border-radius: 8px;
}

/* Le bouton audio à gauche */
.header-audio-btn {
    font-size: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0; /* Empêche l'élément de se réduire */
}

/* Le titre au milieu, prend l'espace restant */
.section-title {
    font-size: 2em;
    font-weight: bold;
    margin: 0 1em; /* Ajoute de l'espace à gauche et à droite du titre */
    flex-grow: 0; /* Permet au titre de prendre l'espace disponible */
    text-align: center; /* Centre le texte à l'intérieur du h2 */
    line-height: 1.2;
}

/* Le bouton de bascule à droite */
button.toggle-btn-section {
    border: none;
    background: none;
    color:black;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0; /* Empêche l'élément de se réduire */
}

.toggle-btn-section.collapsed {
    transform: rotate(-90deg);
}

/* Le reste de votre CSS reste le même */
.section-content.collapsed {
    display: none;
}
/* Menu des lessons */
/* --- Styles généraux et pour les ordinateurs de bureau --- */

.lesson-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: beige;
    padding: 0.5em 1.5em;

    /* Les deux lignes magiques pour un menu "collant" */
    position: sticky;
    top: 0;

    width: 100%;
    z-index: 1000;
}

/* Le reste du CSS que nous avions conçu reste inchangé */
/* Il gère les sous-menus, le hamburger, les couleurs, etc. */

.logo img {
    height: 40px;
}

.lesson-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lesson-nav-item {
    position: relative;
    padding: 0 1em;
}

.lesson-nav-item a {
    color: grey;
    text-decoration: none;
    padding: 0.8em 0;
    display: block;
    font-weight: bold;
    font-size: 1em;
    transition: color 0.3s;
}

.lesson-nav-item a:hover {
    color:royalblue;
}

.lesson-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: beige;
    min-width: 150px;
    list-style: none;
    padding: 0.5em 0;
    margin: 0;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.lesson-submenu a {
    padding: 0.8em 1em;
    font-weight: normal;
    font-size: 0.9em;
}

.lesson-nav-item:hover > .lesson-submenu {
    display: block;
}

/*
.lesson-hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.lesson-hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}
*//* --- Styles pour les mobiles --- */

/* Pour cacher la scrollbar sur mobile (optionnel) */
.lesson-navbar::-webkit-scrollbar {
  display: none;
}





/*

    .lesson-navbar {
        flex-wrap: wrap;
    }

    .lesson-hamburger {
        display: flex;
    }

    .lesson-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #8c1c13;
        border-top: 1px solid #b33c2c;
    }

    .lesson-nav-links.active {
        display: flex;
    }

    .lesson-nav-item {
        padding: 0;
    }

    .lesson-nav-item a {
        padding: 1em 1.5em;
        border-bottom: 1px solid #b33c2c;
    }

    .lesson-submenu {
        position: static;
        display: none;
        background-color: beige;
        box-shadow: none;
        border-bottom: 1px solid #b33c2c;
    }

    .lesson-submenu.active {
      display: block;
    }

    .lesson-nav-item a.lesson-has-submenu::after {
        content: '+';
        position: absolute;
        right: 1.5em;
        color: white;
        font-size: 1.2em;
    }
} */
/* Règle principale pour votre menu de leçon */
.lesson-navbar {
    display: flex;
    justify-content: center; /* IMPORTANT : Assure que le contenu est à gauche */
    align-items: center;
    background-color: beige; /* ou votre couleur de fond */
    padding: 0.5em 1.5em;
    width: 100%; /* S'assure qu'il prend toute la largeur disponible */
    z-index: 950;
    overflow-x: auto; /* scroll horizontal */
    white-space: nowrap; /* pas de retour à la ligne */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* 🔧 Ce padding ne doit PAS cacher les premiers éléments */
    padding-left: 0;
}

/* Classe pour le menu "collant" */
.lesson-navbar.sticky {
    position: fixed;
    top: 60px; /* REMPLACEZ PAR LA HAUTEUR DE VOTRE MENU PRINCIPAL */
/*    left: 0;  AJOUTEZ CETTE LIGNE : pour l'ancrer au bord gauche de l'écran */
    width: 100%;
    z-index: 950;
    left:0;
    display: flex;
border-bottom: solid 2px grey;
}
nav.sticky ul.lesson-nav-links {
    height: 100%; /* Prend toute la hauteur du nav */
    margin: 0;   /* Supprime la marge par défaut */
    padding: 0;  /* Supprime le padding par défaut */

    /* Rendre le ul horizontal */
    display: flex;
    align-items: center; /* Aligne les éléments du ul verticalement au centre */
    border-bottom: solid 4px grey;

}
@media (max-width: 768px) {

ul.lesson-nav-links {
  width:100%;
  font-size:0.90em;
}
nav.sticky ul.lesson-nav-links {
  border-bottom:none;
}
}
/* class pour les carte kanji flip */
.container-kanji {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* si 1 seule carte */
  .card-container-kanji:only-child {
    /* Utilise la variable ou la valeur par défaut de 300px pour les grands écrans */
    min-width: var(--min-width-desktop, 300px);
    margin: 0 auto;
  }

  h1 {
    text-align: center;
    color: white;
    font-size: 2.5em;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .cards-grid {

    display: grid;
    font-family: 'Kiwi Maru', serif; /* La police est appliquée ici */
    grid-template-columns: repeat(auto-fit, minmax(228px, 228px));
    gap: 20px; /* Ajoute un espace entre les cartes */
    column-gap: 15px;
    justify-content: center; /* Centre les cartes horizontalement à l'intérieur de la grille */
    width: 100%; /* S'assure que la grille prend toute la largeur disponible */
    max-width: 1200px; /* Limite la largeur du conteneur pour éviter un étirement excessif sur de grands écrans */
    margin: 0 auto;
  }
  .cards-grid.two-card-grid {
/*  grid-template-columns: repeat(2, 1fr); */
 /*  max-width: 600px; Taille maximale pour les grands écrans */
  margin: 0 auto;
}



  .card-container-kanji {
    perspective: 1000px;
  }

  .kanji-card {
    width: 100%;
    /* La hauteur est maintenant gérée par le ratio pour les grands écrans */
    aspect-ratio: 280 / 380;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    cursor: pointer;
  }

  .kanji-card.is-flipped {
    transform: rotateY(180deg);
  }

  .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 3px solid #0074c7;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
  }

  .card-front {
    justify-content: center;
  }

  .card-back {
    justify-content: flex-start;
    transform: rotateY(180deg);
  }

  .kanji-front {
    font-size: 140px;
    color: #333;
  }

  .top-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }

  .card-back .kanji {
    font-size: 40px;
    color: #333;
    margin-bottom: 0.05em;
  }

  .reading {
    font-size: 20px;
    color: #0074c7;
    margin-bottom: -0.2em
  }

  .meaning {
    font-size: 18px;
    color: #444;
    margin-bottom: -0.6em;
  }

  .kanji-divider {
    width: 90%;
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.3em 0;
  }

  .bottom-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .examples {
    font-size: 14px;
    color: #222;
    text-align: left;
    width: 100%;
    line-height: 1.4;
    padding-left: 0em;
    margin-bottom: 1em;
    flex: 1;
    overflow-y: auto;
  }

  .audio-button {
    font-size: 16px;
    background-color: #0074c7;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.2em 0.5em;
    cursor: pointer;
    margin-top: auto;
  }
  /* Rajout pour le blink pendant le chargement */

  /* Le nom de la classe qui active l'animation */
.audio-button.is-blinking {
  animation: blink-effect 1.5s infinite alternate;
}

/* La définition de l'animation */
@keyframes blink-effect {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

  .audio-button:hover {
    background-color: #005fa3;
  }

  .flip-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 116, 199, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    opacity: 0.7;
  }

  @media (max-width: 768px) {
    /* Minimise le padding du body sur mobile pour maximiser la largeur des cartes */
    body {
      padding: 10px;
    }

    .cards-grid {
      /* Force 2 cartes par ligne et réduit le gap */
    /*  grid-template-columns: repeat(2, 1fr); */
      gap: 10px;
      margin-left: -1.3em;
      margin-right: -1.3em;
      column-gap: 4px;
      width:100%;
      margin: 0 auto;
     }

.card-container-kanji:only-child {
 /* Utilise la variable ou la valeur par défaut de 250px sur mobile */
 min-width: var(--min-width-mobile, 250px);
 margin: 0 auto;
}
     .card-face {
        padding: 0.2em;
    }

    .kanji-front {
      font-size: 80px;
    }
    .top-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 4px;
      margin-top: -10px;
    }
    .card-back .kanji {
      font-size: 35px;
      margin-bottom: -0.2em
    }

    .reading {
      font-size: 16px;
      margin-bottom: -0.2em
    }

    .meaning {
      font-size: 12px;
      margin-bottom: -0.6em;
    }

    .examples {
      font-size: 12px;
      margin-bottom: 0em;
    }

    .audio-button {
      font-size: 12px;
      padding: 0.3em 0.5em;
    }
  }

@media (max-width: 768px) {
  main, .container, section {
    margin: 1.5em auto; /* Réduit la marge verticale */
    padding: 0 0.5em; /* Réduit la marge horizontale */
  }

  .container, .blog-container, .quiz-container {
      margin: 1.5em auto; /* Réduit la marge verticale spécifique à ces conteneurs */
  }
  .cards-grid.two-card-grid {
    grid-template-columns: repeat(2, 1fr);
    min-width: 100%; /* S'adapte à 100% de la largeur du mobile */
  }
}
@media screen and (max-width: 600px) {
  /* ... vos autres styles pour mobile ... */

  body, main {
      padding-left: 0;
      padding-right: 0;
      margin-left: 0;
      margin-right: 0;
  }
  body {
    padding: 0 0.4em; /* Ajoute un padding de 0.8em sur les côtés */
  }

  .container {
      padding-left: 0.5em;
      padding-right: 0.5em;
      margin-left: auto;
      margin-right: auto;
      padding: 0 0.1em;
  }
  main {
      max-width: 100%;
      box-sizing: border-box; /* Pour que le padding ne s'ajoute pas à la largeur */
      overflow-x: hidden; /* Empêche le défilement horizontal causé par des éléments internes */
  }

  .container, .blog-container, .quiz-container {
      max-width: 100%;
  }
  .presentation.container {
  padding: 1em 0.8em; /* Un padding ajusté pour mobile */
}

/* Vous pouvez aussi cibler d'autres conteneurs de la même manière */
.blog-container, .quiz-container, section {
  padding: 1em 0.8em;
}

  footer, .copyright-bar {
    padding: 0 0.5em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}
/* Controles du lecture audio (Global) pour les leçons */
.audio-headerGlobal {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 1em;
}

.audio-icon {
  font-size: 1.6em;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}

.audio-icon:hover {
  transform: scale(1.2);
}

.audio-playerGlobal {
  display: none;
}

.audio-playerGlobal.visible {
  display: inline-block;
}

audio {
  width: 200px;
  vertical-align: middle;
}

/* Rajout pour la présentation du texte */
/* Surcharge uniquement pour le texte global */
/* --------------------------------------------------- */
/*       Css pour le texte lesson                */
/* --------------------------------------------------- */
.phrase-block.texte-global{
  max-width: 760px;
  margin: 0 auto 2rem;
  padding: 1.25rem 1.4rem;
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.phrase-block.texte-global .phrase-content[lang="ja"]{
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","Serif";
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222;
}

.phrase-block.texte-global ruby{
  ruby-position: over;
  ruby-align: center;
}

.phrase-block.texte-global rt{
  font-size: .58em;
  line-height: 1;
  color: #606a78;
}

.phrase-block.texte-global .with-furigana br,
.phrase-block.texte-global .no-furigana br,
.phrase-block.texte-global .hiragana br{
  display: block;
  margin: .2em 0;
}

.phrase-block.texte-global .traduction-fr{
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid #e6e6e6;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.9;
  color: #333;
}

.phrase-block.texte-global .traduction-fr hr{
  display: none;
}

@media (max-width: 520px){
  .phrase-block.texte-global{
    padding: 1rem 1.1rem;
    border-radius: 12px;
  }
  .phrase-block.texte-global .phrase-content[lang="ja"]{
    font-size: 16px;
    line-height: 1.80;
  }
  .phrase-block.texte-global rt{ font-size: .62em; }
}


/* --------------------------------------------------- */
/*       Css pour le vocabulaire lesson                */
/* --------------------------------------------------- */

.vocabulaire-block {
  display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0.5em;
      margin-bottom: 1.5em;
    }

.vocab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vocab-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;  /* Empêche la césure entre caractères japonais */
  font-size: 1.2em;
  font-weight: 500;
}
.vocab-window {
  max-height: 320px;   /* limite de hauteur */
  overflow-y: auto;    /* scroll vertical interne */
  padding-right: 6px;
  padding: 8px;
  margin-top: 8px;
  border: 1px solid #ddd;   /* petit cadre */
  border-radius: 6px;       /* coins arrondis */
  background: #f4ecda;     /* léger fond gris */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); /* effet creusé */
}
div.vocab-window div.phrase-block {
  /* encore plus spécifique */
  margin-bottom: 0.95em;
}

.phrase-block .phrase-content {

    display: inline-block;      /* garde le bloc sur une ligne */
    white-space: nowrap;        /* interdit le retour à la ligne */
    word-break: keep-all;       /* évite les coupures dans le CJK */
    margin-left: 1rem;
  }

  /* (optionnel) s'assurer que les variantes héritent du nowrap */
  .phrase-content .no-furigana,
  .phrase-content .hiragana,
  .phrase-content .with-furigana {
    white-space: inherit;
  }

.traduction-fr.translation-block {
  font-style: italic;
  color: #444;
  margin-top: 0.3em;
  font-size: 1em;
}

.no-furigana {
  font-weight: 500;
  font-size: inherit;
}
.lesson-audio-button {
  font-size: 1em;
}
.vocab-content.row-align {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2em;
  flex-wrap: wrap;
}

.vocab-content .phrase-japanese {
  font-size: 1.3em;
}

.vocab-content .traduction-fr {
  font-size: 1em;
  white-space: nowrap;
}
.vocab-content.row-align .phrase-contentcwrap-text {
  white-space: nowrap;
}
/* --------------------------------------------------- */
/*       Css pour le vocabulaire lesson mobile               */
/* --------------------------------------------------- */
@media screen and (max-width: 600px) {

.vocabulaire-block {
  display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0.5em;
      margin-bottom: 1.5em;
    }

.vocab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vocab-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;  /* Empêche la césure entre caractères japonais */
  font-size: 1.2em;
  font-weight: 500;
}
.phrase-block .phrase-content {

    display: inline-block;      /* garde le bloc sur une ligne */
    white-space: nowrap;        /* interdit le retour à la ligne */
    word-break: keep-all;       /* évite les coupures dans le CJK */
    margin-left: -0.3rem;
   }

  /* (optionnel) s'assurer que les variantes héritent du nowrap */
  .phrase-content .no-furigana,
  .phrase-content .hiragana,
  .phrase-content .with-furigana {
    white-space: inherit;
  }

.traduction-fr.translation-block {
  font-style: italic;
  color: #444;
  margin-top: 0.3em;
  font-size: 1em;
}
.vocab-content .traduction-fr {
  margin-left: 0.3em;
    color: #444;
    font-size: 0.85em;
    line-height: 1.1em;
}
.vocab-window .vocab-content{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;              /* autorise le retour à la ligne */
}

.vocab-window .vocab-content .phrase-content{
  white-space: nowrap;          /* le japonais reste sur sa ligne */
}

.vocab-window .vocab-content .traduction-fr{
  display: none;                /* par défaut */
  flex-basis: 100%;             /* occupe la ligne suivante quand visible */
  margin: 2px 0 0;
}
/* Uniquement dans la fenêtre vocabulaire */
.vocab-window .phrase-block{
  display: grid;
  grid-template-columns: auto 1fr; /* colonne boutons | colonne contenu */
  column-gap: 10px;
  align-items: start;
}

/* Colonne gauche = boutons */
.vocab-window .phrase-block .phrase-controls{
  grid-column: 1;
}

/* Colonne droite = contenu (japonais + trad en colonne) */
.vocab-window .phrase-block .vocab-content{
  grid-column: 2;
  display: flex;
  flex-direction: column;  /* japonais au-dessus, traduction dessous */
}

/* Traduction cachée par défaut, s’empile sous le japonais quand visible */
.vocab-window .vocab-content .traduction-fr{
  display: none;           /* ton JS togglera display:block */
  margin-top: 4px;
}

/* Le japonais ne “casse” pas sa ligne */
.vocab-window .vocab-content .phrase-content{
  white-space: nowrap;
}

.no-furigana {
  font-weight: normal;
  font-size: 0.9em;
}
.lesson-audio-button {
  font-size: 0.9em;
}
}
/* ------------------------------------------------------------- */
.t160p {
  margin-bottom: 170px;
}
/* ------------------------------------------------------------- */
/* ===== Dialogue – Surcharge douce, activée par .kaiwa-skin ===== */
.dialogue-table.kaiwa-skin{
  max-width: 900px;
  margin: 1rem auto 2rem;
  background: rgba(255,255,255,.55);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  overflow: hidden;
}
/* Desktop toggles dans un dialogue uniquement */
.dialogue-table.kaiwa-skin .desktop-toggles{
  padding-left: .5rem; /* ~8px */
}

/* Lignes : rythme visuel sans changer ta mécanique JS */
.dialogue-table.kaiwa-skin .line{
  padding: .65rem .9rem;
  border-bottom: 1px solid #ececec;
}
.dialogue-table.kaiwa-skin .line:nth-child(odd){ background: rgba(0,0,0,.02); }
.dialogue-table.kaiwa-skin .line:hover{ background: rgba(0,116,199,.06); }

/* Locuteur & texte – lisibilité */
.dialogue-table.kaiwa-skin .speaker{
  font-weight: 700; color:#243243; white-space: nowrap;
  display: inline-block; min-width: 4.5em;
}
.dialogue-table.kaiwa-skin .speech{
  font-size: clamp(17px,1.9vw,19px);
  line-height: 2.0; color:#222;
}

/* Furigana propres */
.dialogue-table.kaiwa-skin .speech ruby{ ruby-position: over; ruby-align: center; }
.dialogue-table.kaiwa-skin .speech rt{ font-size:.58em; line-height:1; color:#606a78; }

/* Icônes/boutons éventuels (œil, FR, audio…) — sans toucher aux classes exactes */
.dialogue-table.kaiwa-skin .line .controls,
.dialogue-table.kaiwa-skin .line .icons,
.dialogue-table.kaiwa-skin .line .tools{
  display: inline-flex; gap:.45rem; vertical-align: middle;
}
.dialogue-table.kaiwa-skin .line .controls > *,
.dialogue-table.kaiwa-skin .line .icons > *,
.dialogue-table.kaiwa-skin .line .tools > *{
  width: 28px; height: 28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f4f7fb; border:1px solid #e1e6ef;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.dialogue-table.kaiwa-skin .line .controls > *:hover,
.dialogue-table.kaiwa-skin .line .icons > *:hover,
.dialogue-table.kaiwa-skin .line .tools > *:hover{
  background:#eaf2fa; transform: translateY(-1px);
}
.dialogue-table.kaiwa-skin .line .controls img,
.dialogue-table.kaiwa-skin .line .icons img,
.dialogue-table.kaiwa-skin .line .tools img{ max-width:18px; max-height:18px; }

/* Mobile : on ne touche pas à ta flèche/menu (présentation inchangée).
   On ajuste juste la respiration du texte. */
@media (max-width: 600px){
  .dialogue-table.kaiwa-skin .line{ padding:.6rem .75rem; }
  .dialogue-table.kaiwa-skin .speech{ line-height: 2.05; }
  .dialogue-table.kaiwa-skin .speaker{ min-width: auto; margin-right:.35rem; }
}
/* fin modfi présentation dialogue */


/* Css pour le tableau des kanji dans lesson */
.kanji-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.kanji-table th, .kanji-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
}

.kanji-table th {
    background-color: #eee;
    font-weight: bold;
}

.kanji-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.kanji-examples-toggle {
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.kanji-examples-toggle.rotated {
    transform: rotate(180deg);
}

.kanji-examples-list {
    display: none;
    margin-top: 10px;
    text-align: left;
}

.kanji-examples-list.visible {
    display: block;
}
/* Styles pour les écrans de petite taille */
@media (max-width: 768px) {
  /* Réduit le padding et la taille de la police */
  .kanji-table th, .kanji-table td {
    padding: 8px;
    font-size: 14px;
    white-space: nowrap; /* Empêche le texte de s'enrouler à la ligne */
  }

  /* Rend le tableau scrollable horizontalement */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }
}
/* Desktop par défaut */
.desktop-toggles { display: inline-block; }
.toggle-menu-container { display: none; }

/* Mobile : on inverse les wrappers, et on laisse visibles les boutons DANS le dropdown */
@media (max-width: 768px) {
  .desktop-toggles { display: none; }
  .toggle-menu-container { display: inline-block; }

  /* Style du dropdown */
  .toggle-menu-container { position: relative; }
  .toggle-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.4em;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    z-index: 1000;
    min-width: 140px; /* optionnel: évite le “petit rond” */
  }
  .toggle-menu-container.open .toggle-dropdown { display: block; }

  /* Très important : on n’applique PAS display:none aux boutons du dropdown */
  .toggle-dropdown .btn-furigana,
  .toggle-dropdown .btn-hiragana,
  .toggle-dropdown .btn-translate {
    display: inline-block;   /* annule l’ancienne règle globale */
    margin: 0.2em 0.2em;
  }



      /* Masqué par défaut */
      .toggle-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 0.3em;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
      }

      /* Affiché quand .open */
      .toggle-menu-container.open .toggle-dropdown {
        display: block;
      }
    }
      .audio-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-left: 2em;
}
.audio-line {
  cursor: pointer;
  font-size: 1.2em;
  color: #0074c7;
}
.audio-icon {
  cursor: pointer;
  font-size: 1.4em;
  color: #0074c7;
  margin-right: 0.5em;
}
.line .audio-icon {
  font-size:1.2em;
}

  section[id] {
    scroll-margin-top: 100px; /* Adaptez cette valeur ! */
  }
  .reading-block {
  background: #fff;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  box-sizing: border-box;
}

@media (max-width: 768px){
  .reading-block {
    padding: 0.6rem 0.7rem;
    margin: 0.3rem -1rem;
    border-radius: 8px;
    font-size:0.95em;
  }
}
/* ========================================================= */
/* --- Styles sommaire lesson  --- */
/* ========================================================= */
  :root {
    --lesson-head-bg: rgba(255,255,255,.55);
    /* hauteur du header global du site */
    --site-header-offset: 60px;
    --lesson-head-text: #222;
    --lesson-head-radius: 12px;
    --lesson-head-shadow: 0 2px 10px rgba(0,0,0,.06);
    --lesson-gap: 12px;
    --menu-bg: rgba(255,255,255,.55);
    --menu-text: #222;
    --menu-radius: 12px;
    --menu-shadow: 0 6px 20px rgba(0,0,0,.08);
    --menu-gap: 10px;
  }

  .lesson-head {
    margin-top: var(--site-header-offset, 60px);
    display: flex;
    align-items: center;
    gap: var(--lesson-gap);
    background: var(--lesson-head-bg);
    color: var(--lesson-head-text);
    padding: 10px 12px;
    border-radius: var(--lesson-head-radius);
    box-shadow: var(--lesson-head-shadow);
  }

  .head-left {
    font-size: 1.4em;
    flex: 0 0 auto;
  }

  .head-title {
    font-size: clamp(16px, 2.3vw, 20px);
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .title-break-mobile {
    font-weight: 700;
  }

  /* Bouton sommaire */
  .lesson-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: rgba(0,0,0,0.06);
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .lesson-summary .row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .lesson-summary .dot {
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
  }

  .lesson-summary .line {
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  /* Bandeau 10 kanji – version compacte pour l'entête */
.lesson-head .lesson-kanji-strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.lesson-head .lesson-kanji-strip .k{
  display: grid;
  place-items: center;
  padding: 4px 0;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1;
  letter-spacing: .02em;
  border-radius: 8px;
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  user-select: none;
}

.lesson-subtitle {
  font-size: 1.6em;          /* plus petit que le titre principal mais bien visible */
  font-weight: bold;         /* gras */
  color: #004c99;            /* bleu profond déjà utilisé dans tes kanji blocs */
  text-align: center;        /* centré comme les titres de section */
  margin: 1.2em 0 0.8em;     /* espace autour */
  border-bottom: 2px solid #cce0f5;  /* fine barre colorée pour séparer */
  padding-bottom: 0.3em;     /* petit espace avec la bordure */
}
.series-separator {
  border: 0;
  height: 2.5px;
  background: linear-gradient(to right, #004c99, #66a3ff);
  margin: 2em 0;
}

  @media (max-width: 640px) {

  }
 

.lesson-menu{
  display: none;
  position: fixed;
  top: calc(var(--site-header-offset, 60px) + 90px); /* header global + header leçon */
  right: 10px;
  width: 290px;                /* largeur du panneau */
  max-height: 70vh;
  overflow: auto;
  background: rgba(255,255,255,.95);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 8px 10px;
  z-index: 999;   
}

.lesson-menu.open {
  display: grid; /* réutilise ton display d’origine */
    animation: fadeIn .18s ease-out;
  max-height: 70vh;                       /* évite de “prendre tout l’écran” */
  overflow: auto;
}

/* Animation simple d’apparition */
.lesson-menu {
  animation: fadeIn .2s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.menu-section{
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  padding: 6px 8px; /* réduit */
  margin: 0.7em 0;
}

/* Titre de section avec petite flèche */
.menu-toggle, .menu-link{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  font-weight: 700;
  font-size: 15px; /* réduit */
  padding: 6px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  position: relative;
  line-height: 1.2;
}
.menu-toggle::before{
  content: "";
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* ↓ ouvert */
  transition: transform .2s ease;
  margin-right: 2px;
}
.menu-link {
  text-decoration: none;
  color:inherit;
  cursor: pointer;
}
.menu-link:hover {
  background-color: #f0f0f0; /* Adaptez la couleur de survol */
  text-decoration: underline;
}
/* État fermé (pour plus tard) */
.menu-section:not(.open) .menu-toggle::before{
  transform: rotate(-45deg); /* → fermé */
}

.submenu{
  list-style: none;
  margin: 4px 0 2px;
  padding-left: 16px; /* réduit */
  display: grid;
  gap: 2px; /* réduit */
}
.menu-section:not(.open) .submenu{
  display: none;
}

.submenu li{
  line-height: 1.2; /* réduit */
}
.submenu a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  font-size: 14px; /* réduit */
}
.submenu a:hover{
  text-decoration: underline;
}

.kanji-list{
  font-size: 0.88em; /* plus petit */
  letter-spacing: 0.02em;
  opacity: .9;
}
.title{
  font-style: italic;
  opacity: .9;
}


@media (max-width: 640px) {
  /* --- Sommaire (menu) --- */
  .menu-toggle{ font-size: 14px; }
  .submenu{ padding-left: 2px; gap: 1px; }
  .submenu a{ font-size: 13.5px; }
  .kanji-list{ font-size: 0.82em; }
  .menu-section { margin: 0.3em 1em; }
  .lesson-menu{
    top: calc(var(--site-header-offset, 60px) + 50px);
    width: 300px;
  }

  /* --- Header de leçon --- */
  .lesson-head{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Positionnement des éléments dans la grille */
  .head-left{ grid-column: 1; grid-row: 1; }
  .lesson-summary{ grid-column: 3; grid-row: 1; align-self: start; }

  /* Le bloc .head-title prend la deuxième colonne */
  .head-title{
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.3;
  }
  .title-break-mobile{
    display: block;
    font-weight: 700;
  }

  /*
   * Règle pour le nouveau conteneur de kanjis.
   * Il est placé sur une nouvelle ligne (grid-row: 2) et prend toute la largeur.
   * La mise en page en grille avec `repeat(5, 1fr)` garantit 2 rangées de 5.
   */
  .lesson-head .lesson-kanji-strip {
    grid-column: 1 / -1; /* S'étend sur toutes les colonnes */
    grid-row: 2;         /* Se place sur la deuxième rangée */
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    column-count: 1;
    column-gap: 0;
    gap: 4px;
  }
  
  /* Règle pour les kanjis individuels */
  .lesson-head .lesson-kanji-strip .k {
    padding: 2px 0;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1;
  }
}

/* style par gemini */
/* ========================================================= */
/* --- Styles de base et Mobile-First (pour tous les écrans) --- */
/* ========================================================= */

/* Grille principale : Mobile (2 icônes empilées | nom | texte) */
.dialogue-line {
  display: grid;
  grid-template-columns: 2.6rem 4em 1fr;
  align-items: center; /* Centre tous les éléments verticalement par défaut */
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #d9d9d9;
}
/* pour positionner la traduction */
.dialogue-line .traduction-fr {
  font-size: 0.9em;
  margin-left: auto;
}
/* Conteneur des icônes : Mobile (en colonne) */
.phrase-controls.controls-vert {
  display: flex;
  flex-direction: column; /* Les icônes s'empilent */
  justify-content: center; /* Centre les icônes verticalement dans leur colonne */
  align-items: center;
  gap: 0.35rem;
}
/* Style pour l'icône audio active */
.audio-icon {
  cursor: pointer;
  opacity: 1;
}

/* Style pour l'icône audio désactivée */
.audio-icon.disabled-audio-icon {
  opacity: 0.5; /* Rends l'icône semi-transparente pour un effet grisé */
  cursor: not-allowed; /* Change le curseur en "non autorisé" */
  pointer-events: none; /* Désactive les clics */
}


/* Les icônes desktop sont cachées par défaut sur mobile */
.desktop-toggles {
  display: none;
}

/* Le menu dropdown pour mobile est géré ici */
.toggle-menu-container {
  position: relative;
}
.toggle-dropdown {
  position: absolute;
  top: 3.5rem;
  left: 0;
  z-index: 10000;
  display: none;
}

.toggle-menu-container.open .toggle-dropdown {
  display: inline-flex;
}

/* Styles pour le nom et le texte (centrés par la grille) */
.dialogue-speaker {
  font-weight: 700;
  margin-left:-8px;
}
.dialogue-text {
  line-height: 1.65;
}
button.toggle-menu-icon {
 width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}  


@media (min-width: 769px) {
  /* La ligne de dialogue est une grille */
  .dialogue-line {
    grid-template-columns: auto 4.5rem 1fr;
    gap: 0.5rem;
    align-items: center; /* <<< C'est la ligne qui centre tout verticalement ! */
  }
  .dialogue-line .traduction-fr {
    font-size: 1.05em;
  }
.dialogue-speaker {
  font-weight: 700;
  margin-left: auto;
}

  /* Rendre les contrôles desktop visibles et alignés */
  .phrase-controls.controls-vert {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .desktop-toggles {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* Cacher les éléments mobiles */
  .toggle-menu-container {
    display: none;
  }
/* Boutons d'icône (ronds) */
.phrase-controls.controls-vert .audio-button,
.phrase-controls.controls-vert .toggle-menu-icon,
.phrase-controls.controls-vert .desktop-toggles button {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

}
/* Variables utiles */
:root{
  --site-header-offset: var(--site-header-offset, 60px); /* hauteur du header global si tu en as un */
  --summary-size: 44px;   /* taille du bouton (tap target >=44px) */
  --summary-gap: 10px;    /* marge au bord */
}

/* Desktop : le bouton reste dans le header, pas de position spéciale */
@media (min-width: 769px){
  .lesson-summary{
    position: static;
  }
}
/* ======== Menu sommaire des lesson  ======================== */
/* Titre fixe en haut */
.menu-header {
  flex: 0 0 auto;
  background: #f2f2f2;
  padding: 8px;
  border-bottom: 1px solid #ccc;
  position: fixed;
  width: inherit;
  z-index: 1000;
}

.menu-title {
  font-size: 0.9em;
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
}
/* Partie qui défile */
.menu-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 5px;
}
/* bouton */
#toggleMenu{
  position: relative;              /* nécessaire pour placer la flèche */
  display: inline-flex;
  flex-direction: column;          /* empile les 3 lignes */
  justify-content: center;
  gap: 3px;
  padding: 0 16px 0 5px;           /* espace à droite pour la flèche */
  line-height: 0;
  font-size: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  width: 60px;
  height: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  box-sizing: border-box;
}

/* état flottant inchangé */
#toggleMenu.is-sticky{
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 1001;
  opacity: 1;
  transform: scale(1);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

/* flèche à droite, centrée verticalement */
#toggleMenu::after{
  content: "▸";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  line-height: 1;
  color: #111;
  pointer-events: none;            /* clics non bloqués */
}
/* rotation de la flèche quand on clique */
#toggleMenu.open::after {
  transform: translateY(-1px) rotate(90deg);
}

/* option : rotation quand menu ouvert (ajoute .open en JS) */
#toggleMenu.open::after{
  transform: translateY(-50%) rotate(90deg);
}

/* pictogramme */
#toggleMenu .row{
  display: flex;
  align-items: center;
  gap: 4px;
  height: 3px;
}
#toggleMenu .dot{ width: 4px; height: 4px; border-radius: 50%; background: #111; }
#toggleMenu .line{ width: 18px; height: 3px; border-radius: 1px; background: #111; }

 

/* On s'assure que par défaut (quand il n'est pas sticky), le bouton
   est prêt pour l'animation d'apparition, mais invisible. */
.lesson-summary {
  opacity: 0;
  transform: scale(0);
}

/* Quand le bouton est dans son parent initial (le header), ON LE MONTRE. 
   Ceci annule la règle précédente pour le cas normal. */
.lesson-head .lesson-summary {
    opacity: 1;
    transform: scale(1);
    /* Ici, vous pouvez remettre les styles d'origine du bouton s'ils sont écrasés */
    position: static; /* Important pour qu'il reste dans le header */
    width: auto;      /* Remettre les dimensions d'origine */
    height: auto;     /* Remettre les dimensions d'origine */
    border-radius: 0; /* Remettre la forme d'origine */
    background-color: transparent;
    box-shadow: none;
}
/* Assure la même ligne Sommaire | Grade… */
nav.lesson-menu .menu-header{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  background:#f7f7f7; padding:8px 10px; border-bottom:1px solid #ddd;
}
nav.lesson-menu .menu-title{ font-weight:400; }

/* Le sélecteur à droite */
nav.lesson-menu .grade-drop{ margin-left:auto; position:relative; }

/* Summary comme bouton, sans chevron natif */
nav.lesson-menu .grade-btn{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:0; border:none;
  background:transparent; font-weight:450;
  font-size:0.95em;
}
nav.lesson-menu .grade-btn::before{
  content:"▸"; display:inline-block; transform:translateY(-1px);
  transition:transform .15s ease;
}
/* cache le marker natif des navigateurs */
nav.lesson-menu .grade-btn::-webkit-details-marker{ display:none; }
nav.lesson-menu .grade-btn::marker{ content:""; }

/* La liste déroulante */
nav.lesson-menu .grade-list{
  position:absolute; right:0; 
  top: calc(100% - 5px);
  min-width: 140px;
  max-height:50vh; overflow:auto;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  padding:6px 0; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:1000;
}
nav.lesson-menu .grade-list li{ list-style:none; }
nav.lesson-menu .grade-list a{ display:block; padding:6px 12px; text-decoration:none; color:inherit; }
nav.lesson-menu .grade-list a:hover{ background:#f0f4ff; }

/* État ouvert (rotate chevron) */
nav.lesson-menu .grade-drop[open] .grade-btn::before{ transform:rotate(90deg); }
/* Toggle Kanji avancé */
.toggle-btn.kanji-advanced-btn {
  font-size: 1.5em;     /* grossir le symbole */
  line-height: 1;       /* bien centré */
  vertical-align: middle;
   padding: 7px 4px;     /* petit espace autour */
}

/* Mobile : bouton fixé en haut à droite, au-dessus du contenu */
@media (max-width: 768px){
  .lesson-summary{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--site-header-offset) + var(--summary-gap));
    right: calc(env(safe-area-inset-right, 0px) + var(--summary-gap));
    width: var(--summary-size);
    height: var(--summary-size);
    z-index: 3000;              /* au-dessus du header et du contenu */
    /* Optionnel, pour contraste : */
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }

  /* Laisse de la place dans le header pour ne pas qu'il passe dessous visuellement */
  .lesson-head{
    padding-right: calc(var(--summary-size) + 2*var(--summary-gap));
  }
  #toggleMenu.is-sticky {
  /* On remet ici toutes les propriétés de l'état flottant */
  
  top: 60px;
  }
}
/* Densité par défaut ailleurs (on ne change rien) */
/* .phrase-block { margin-bottom: 1.5em; } */

/* --- Blog : section dialogue compacte --- */
.blog-article .dialogue-jp {
  --phrase-gap: 0.65em; /* ajuste ici (0.5–0.9) */
  padding: 0;
  font-size: 0.88em;
}
.blog-article .dialogue-jp .phrase-block {
  margin: 0 0 var(--phrase-gap);
}
.blog-article .dialogue-jp .phrase-block:last-child {
  margin-bottom: 0;
}
/* Blog → réduire l'écart entre les lignes du dialogue */
.blog-article .dialogue-jp .phrase-block {
  margin-bottom: 0.05em;  /* ajuste la valeur à ton goût */
}
.blog-article .dialogue-jp .phrase-block:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px){
.blog-article .dialogue-jp {
  font-size: 0.95em;

} 
}
.vocab-table {
  border-collapse: collapse;
  width: auto;
  margin-left: 1em;
}

.vocab-table td {
  padding: 0.2em 1em;
  vertical-align: middle;
}

.japanese-block {
  font-size: 1.3em;
  white-space: nowrap;
}

.traduction-fr {
  font-size: 1em;
  font-style: italic;
  color: #444;
  white-space: nowrap;
}