/* =================================================================== */
/* == 1. STYLES DE BASE (DESKTOP ET COMMUNS À TOUS)                 == */
/* =================================================================== */

/* --- Général --- */
body { font-family: Arial, sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4; }
p { margin: 0 5px 0 5px;}
main:not(.homepage-main)  { flex-grow: 1; background-image: url('../images/pp3.webp'); background-size: cover; background-position: center; background-attachment: fixed; }
main.homepage-main {flex-grow: 1;background: transparent; /* On s'assure qu'il est bien transparent */}
/* .content { max-width: 1200px; margin: 40px auto; background-color: rgba(255, 255, 255, 0.92); padding: 20px 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } */
span.spancolor { color:#0056b3;font-weight: 600;}
.jp-char { font-size: 1.5em; }

/* --- Header --- */
header { background-color: black; color: white; padding: 10px 0; text-align: center; box-shadow: 0 2px 5px black; position: relative; z-index: 10; border: 3px solid white; }
.header-main { padding: 0 20px; }
.title-container { display: flex; justify-content: center; align-items: center; gap: 20px; }
.title-container h1 { margin: 0; font-size: 2.5em; }
.flag { height: 40px; }

/* --- API Container --- */
.api-container { display: flex; justify-content: center; gap: 20px; margin: 15px 0; flex-wrap: wrap; padding: 0 10px; }
.weather-box, .currency-box { background-color: #345a93; color: white; padding: 10px 15px; border-radius: 8px; text-align: left; min-width: 200px; font-size: 0.7em; }
.weather-box h3, .currency-box h3 { margin: 0 0 10px 0; font-size: 1em; border-bottom: 1px solid #5d7fb9; padding-bottom: 5px; }
.weather-box p, .currency-box p { margin: 5px 0; }

/* --- Navigation (Grand écran) --- */
nav { background-color: black; }
#nav-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; }
#nav-links > li > a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; transition: background-color 0.3s; }
#nav-links li a:hover, .dropdown:hover { background-color: #074107; }
.dropdown-content { display: none; position: absolute; background-color: black; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: white; padding: 12px 20px; text-decoration: none; display: block; text-align: left; transition: background-color 0.2s; }
.dropdown-content a:hover { text-decoration: underline; text-decoration-color: white; background-color: transparent; }
.dropdown:hover .dropdown-content { display: block; }
.hamburger-menu { display: none; }
#nav-links > li > a.menu-active { background-color: #074107; }

/* --- Carrousel Swiper --- */
.my-swiper { width: 100%; max-width: 1200px; margin: 30px auto; border-radius: 8px; overflow: hidden; }
.swiper-slide { background: transparent; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; max-height: 250px; }
.swiper-button-next, .swiper-button-prev, .swiper-pagination { display: none !important; }

/* --- Styles spécifiques aux pages sur fond noir --- */
.content-black { background-color: black; box-shadow: none; color: white; }
h2 {  padding: 10px 20px 7px ; background-color: #074107; width:700px; border-radius: 15px;}

/* Formulaire de recherche sur fond noir */
.content-black .search-form input,
.content-black .search-form button { border: 2px solid transparent; border-radius: 25px; font-size: 18px; padding: 10px 20px; margin: 0 5px; vertical-align: middle; transition: all 0.2s ease-in-out; }
.content-black .search-form input { background-color: white; color: black; }
.content-black .search-form input:focus { outline: none; border-color: #0c800c; }
.content-black .search-form button { background-color: #074107; color: white; cursor: pointer; }
.content-black .search-form button:hover { background-color: #0c800c; }

/* Tableau de résultats sur fond noir */
.results-table-container { background-color: black; color: white; border-radius: 8px; margin-top: 30px; overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.results-table th, .results-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #444; }
.results-table thead th { background-color: #074107; color: white; font-weight: bold; text-transform: uppercase; }
.results-table tbody tr:nth-child(odd) { background-color: #1e1e1e; }
.results-table tbody tr:hover { background-color: #3a3a3a; }

/* --- Footer --- */
footer { background-color: black; color: white; text-align: center; padding: 20px; position: relative; z-index: 10; border: 3px solid white; }

.gram-regles-h2 { background-color: #074107; padding: 7px ; border-radius: 8px; }
.gram-regle h4 { background-color: #345a93; padding: 7px ; border-radius: 8px; }
.gram-regle p { white-space: pre-wrap; padding: 7px ; border-radius: 8px; }
.gram-nom-select { font-size: 1rem; padding: 5px; border-radius: 8px; margin-right: 20px;
    width: 80%; /* occupe toute la largeur dispo */ max-width: 700px; box-sizing: border-box;  /* évite débordement avec padding */ }
.gram-nom-select option { font-size: 0.9rem; white-space: normal; }
ul.gramUl { margin-left: 100px;}

/* =================================================================== */
/* == STYLES POUR LA PAGE CARTE DES RÉGIONS                         == */
/* =================================================================== */

h2 { font-size: 1.2em ; }

.cartes-flex-container {
    display: flex; /* Les cartes sont côte à côte par défaut */ justify-content: center;   /* Elles sont centrées */
    align-items: flex-start; /* Alignées en haut */ gap: 30px; margin-top: 30px; flex-wrap: wrap; /* TRÈS IMPORTANT : Permet de passer à la ligne */ }

.carte-item { text-align: center; background-color: #1e1e1e; padding: 15px; border-radius: 8px; border: 1px solid #444; }

/* On définit la largeur relative des cartes */
.carte-position { flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */ }
.carte-departements { flex: 6 1 400px; /* flex-grow: 4, flex-shrink: 1, flex-basis: 400px */ }
.carte-item h4 { margin-top: 0; background-color: #074107; color: white; padding:3px; padding-left: 25px; padding-right: 25px; }
.carte-item img { max-width: 100%; height: auto; border: 2px solid #555; border-radius: 4px; }

/* =================================================================== */
/* == Bouton de kanji_tracer_form.ejs                               == */
/* =================================================================== */

.tracer-btn {
    background-color: #074107; color: white; border: none; padding: 10px 20px; border-radius: 25px; font-size: 16px; cursor: pointer; margin: 0 10px; 
        transition: background-color 0.2s; }
.tracer-btn:hover { background-color: #0c800c; }

/* == STYLES DE BASE POUR LA PAGE DE CONJUGAISON (VUE DESKTOP)      == */

/* Style général des tableaux importés du Wiktionnaire */
#container-wrapper .wikitable { background-color: #2c2c2c; color: #f1f1f1; border: 1px solid #555; width: 100%; margin-bottom: 20px; font-size: 1.2em; }

#container-wrapper .wikitable th,
#container-wrapper .wikitable td { border: 1px solid #555; padding: 8px; }

/* Style des en-têtes principaux (verts) */
#container-wrapper .wikitable th { background-color: #074107;  color: white; }

/* Style des en-têtes secondaires (ceux qui étaient jaunes) */
#container-wrapper .wikitable tr[style*="background-color"] th { background-color: #4d4d4d !important; }

/* Style et désactivation de TOUS les liens dans la zone de conjugaison */
#container-wrapper a, 
#container-wrapper a:link, 
#container-wrapper a:visited, 
#container-wrapper a:hover { color: white !important; text-decoration: none !important; cursor: default !important; }

#imageStandard > img { display: block; margin: auto; width: 95% ; max-width : 800px; overflow :hidden; background-color: white;}

/********************************************************/
/* NOUVELLE CLASSE POUR LES BOUTONS DE RÉPONSE DU QUIZ  */
/********************************************************/

.quiz-txt-question {
    background-color:  #074107; color: white; margin: 5px 0; font-size: 1em; text-align: left; font-weight: 100; width: 85%; padding: 8px 20px;       
    border: none; border-radius: 8px; transition: background-color 0.2s ease; /* Ajoute une transition douce */ }
.quiz-btn-question { background-color: #5d7fb9; color: white; margin: 5px 0;  font-size: 1em;  text-align: left; font-weight: 100; border-radius: 8px; 
    width: 100%; padding: 8px 20px; border: none; cursor: pointer; /* Affiche une main au survol */ transition: background-color 0.2s ease; /* Ajoute une transition douce */}
/* BONUS : Ajouter un effet au survol de la souris */
.quiz-btn-question:hover { background-color: #7592cf; /* Une couleur légèrement plus claire */    }
.quiz-btn-question { background-color: #5d7fb9; color: white; margin: 5px 0; font-size: 1em; text-align: left; width: 100%;
    padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }

.quiz-btn-question:hover:not(:disabled) { background-color: #09235a; transform: scale(1.02); /* Effet de zoom léger */ }
/* Style pour la bonne réponse */
.quiz-btn-question.correct { background-color: #28a745; /* Vert */ color: white; }
/* Style pour la mauvaise réponse */
.quiz-btn-question.incorrect { background-color: #dc3545; /* Rouge */   color: white; }
/* Style pour les boutons désactivés après une réponse */
.quiz-btn-question:disabled { cursor: not-allowed; opacity: 0.7; }
/* Style pour les boutons de contrôle */
#quiz-controls button { padding: 10px 20px; font-size: 1.1em; margin-top: 20px; cursor: pointer; }
#continue-btn { background-color: #013138; /* Cyan */ border-radius: 8px; color: white; border: none; }
#end-btn { background-color: #f09f34af; /* Gris */ border-radius: 8px; color: white; border: none; }
.quiz-txt-question { background-color: #333; padding: 15px; border-radius: 5px; margin: 10px 0; }

/***************************************************************/
/* Pour la video en page d'acceuil!
/***************************************************************/
.content { position: relative; width: 50%; max-width: 1200px; height: auto; margin: 40px auto; padding: 20px 30px; overflow: hidden; }

.background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* pour que la vidéo remplisse bien la zone */ z-index: 1; }

.text-overlay { position: relative; color: white; font-size: 2em; padding: 20px; text-align: center; z-index: 2;  /* au-dessus de la vidéo */
    /* éventuellement ajouter un fond partiellement transparent pour lisibilité */
    background-color: rgba(0, 0, 0, 0.3); }

/***************************************************************/
/* Pour Japon Region ( honshu ... )
/***************************************************************/

#nav-submenu-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; }
#nav-submenu-links > li > a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; transition: background-color 0.3s; }
#nav-submenu-links li a:hover, .dropdown:hover { background-color: #074107; }

#japon-ile-titre { margin-top: 10px; margin-bottom: 10px; }
#japon-ile-titre > h2 { color: white; padding: 10px; background-color: #074107;  width: 400px; margin: auto;
    border-radius: 5px; text-align: center; /* Pour le centrage horizontal */ padding-top: 10px; padding-bottom: 10px; }
#japon-ile-carte > img { display: block; margin: auto; width: 50% ; max-width : 700px; overflow :hidden; }

/***************************************************************/
/* Pour le dico KANJI FREE
/***************************************************************/

.kanji-results-container { margin-top: 30px; padding: 20px; background-color: #1e1e1e; border-radius: 8px; }
.kanji-main-char { font-size: 100px; text-align: center; margin-bottom: 20px; color: #e0e0e0; }
.kanji-section { margin-bottom: 25px; }
.kanji-section h3 { background-color: #074107;  color: white; border-radius: 2px solid #0c800c;padding: 5px 10px 5px; margin-bottom: 10px; font-size: 1.2em;}
.kanji-section p { font-size: 1.1em;  }
.kanji-trace-img { background-color: white; padding: 3px; border-radius: 4px; width: 300px; }
.kanji-examples-list { list-style-type: none; padding: 0; }
.kanji-examples-list li { background-color: #2a2a2a; padding: 10px; border-radius: 4px; margin-bottom: 5px; font-size: 1.1em; }
.kanji-approches-list { font-size: 2.5rem !important; /* On force la taille en pixels ET on ajoute !important */ text-align: left; letter-spacing: 15px; /* espace entre eux */ }

/***************************************************************/
/* Pour la route /departement 
/***************************************************************/

.form-container-double{display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.departement-table-container { margin-top: 10px; }
.dep-select { padding: 5px; font-size: 0.9em; border-radius: 8px; min-width: 250px;} 
.dep-select { padding: 5px; font-size: 0.9em; border-radius: 8px; min-width: 150px;}
#dep-nom-select { display: block; margin-bottom: 10px; }
#dep-num-select { display: block; margin-bottom: 10px; } 
#dep-pref-select { display: block; margin-bottom: 10px; } 
/* Style pour les labels associés aux selects */
label[for="dep-nom-select"],
label[for="dep-num-select"],
label[for="dep-pref-select"] {display: block; margin-top: 10px; margin-bottom: 10px; }

/***************************************************************/
/* Pour le blog 
/***************************************************************/

/* Styles pour les icônes d'action */
.blog_actions { display: flex; /* Aligner les icônes horizontalement */ gap: 10px; align-items: center; 
    margin-left: auto; /* Pousser les icônes vers la droite si elles sont dans le même flex-container que le titre/date */ }

.action-icon { font-size: 1.2em; color: #007bff;  text-decoration: none; transition: color 0.2s ease-in-out; /* Transition douce pour le hover */ }
.action-icon:hover { color: #0056b3; /* Couleur au survol */ }

.update-icon { color: #28a745; /* Vert pour l'icône d'édition */ }
.update-icon:hover { color: #218838; }

.delete-icon { color: #dc3545; background: none;  border: none; cursor: pointer; padding: 0; }
.delete-icon:hover { color: #c82333; }

.blog_article { margin-top: 10px }
.blog_article_entete { display: flex;  justify-content: space-between; flex-direction: row; background-color: white; color: black; 
    font-size: 0.9em;  border-radius: 5px; margin-left: 5px; margin-right: 5px;}
.blog_date { display: flex; flex-direction: column; text-align: end; margin-right: 5px; white-space: nowrap; font-size: 1em;padding-top: 10px;}
.blog_date p { font-size: 0.5em;}

.blog_h2 { font-size: 1.3em ; font-weight: 400;}
.blog_h3 { font-size:1.2em; font-weight: 600; margin-left: 5px;}
.blog_article_entete p { font-size:0.9em; font-weight: 400; margin-bottom: 2px;}
.blog_contenu { margin-left: 10px; margin-right: 10px; white-space: pre-line;}

.blog_add_mod_titre { display: flex;  flex-direction: column; margin: 10px; }
.blog_add_mod_contenu { display: flex;  flex-direction: column;  margin: 10px; }
.blog_add_mod_titre_input { margin: 10px 0px 10px 0px; padding: 10px; }
.blog_add_mod_contenu_text { margin: 10px 0px 10px 0px; padding: 10px;}

.blog_button { background-color: #074107; color: white; padding: 5px; font-size: 1em; margin-right: 10px; margin-bottom: 10px; text-decoration: none}

/***************************************************************/
/* Page vocabulaire 
/***************************************************************/
.vocab_href { color: white;text-decoration: none;padding: 10px;background-color:  #345a93; max-width: 250px;border-radius: 15px;margin: 10px; cursor: pointer; }
.vocab_href:hover { background-color: #074107; }
.vocab_titre { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.vocab_h3 { background-color: #074107; }

/***************************************************************/
/* Pour la route vocab onomatopée détail
/***************************************************************/

.form-container-double{display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
.departement-table-container { margin-top: 10px; }
.ono-detail-form { padding: 5px; font-size: 0.9em; border-radius: 8px; min-width: 250px;} 
.ono-detail { padding: 5px; font-size: 0.9em; border-radius: 8px; max-width: 250px;}
#ono-katana-select { display: block; margin-bottom: 10px; }
#ono-signification-select { display: block; margin-bottom: 10px; } 
#ono-romanji-select { display: block; margin-bottom: 10px; } 

.ono-results-table {border-spacing: 15px; }
.ono-results-table thead th { background-color: #074107; color: white; font-weight: bold; text-transform: uppercase; border-radius: 5px; padding: 3px 15px 3px 15px;}
.ono-detail-result h4 {  background-color: #345a93; padding: 7px ; border-radius: 8px; font-size: 1em;}
.ono-detail-result p {  padding: 7px ; border-radius: 8px; font-size: 1em;white-space: pre-wrap;}

/* Style pour les labels associés aux selects */
label[for="ono-katana-select"],
label[for="ono-signification-select"],
label[for="ono-romanji-select"] {display: block; margin-top: 10px; margin-bottom: 10px;  margin-right: 5px;}

/* .ono-results-table { width: 100%; border-collapse: collapse; border-spacing: 0; } */
.ono-results-table th, .ono-results-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #444; }
.ono-results-table tbody tr:nth-child(even) { background-color: rgb(63, 62, 62); }
.ono-results-table tbody tr:nth-child(odd) { background-color: black; }

/* Style pour la ligne de données principale */
.main-row { cursor: pointer; transition: background-color 0.2s; }
.main-row:hover { background-color: #e6f7e6; }
/* Style pour la ligne active (détail ouvert) */
.main-row.active { background-color: #d1e7d1; border-bottom: 1px solid #4CAF50; }

/* Style pour le conteneur de détail */
.detail-row { background-color: black; color: #f9f9f9; }
.detail-content { padding: 15px 20px; border-top: 1px dashed #ccc; }

/* CSS pour gérer les retours à la ligne des champs TEXT de la BDD */
.pre-wrap { white-space: pre-wrap; font-size: 0.9em; line-height: 1.4; margin-top: 5px;
    margin-bottom: 15px; padding-left: 10px; border-left: 3px solid #ccc; }

/* Classe pour masquer l'élément (C'est la clé du fonctionnement) */
.hidden { display: none !important; /* Utiliser !important pour s'assurer que le style CSS prend le dessus */  }

.detail-title { font-weight: bold; background-color: #074107; color: white; 
    width: 200px; margin-top: 10px; border-radius: 5px; padding: 5px 5px 5px 20px; text-transform: uppercase; letter-spacing: 0.5px; }

/*********************************************************************************************************************************/
/* =================================================================== */
/* == 2. AJUSTEMENTS RESPONSIVES (MOBILES ET TABLETTES) 1200        == */
/* =================================================================== */

@media (max-width: 1200px) {
    /* --- Ajustements généraux --- */
    .content { padding: 10px; margin: 20px auto; width: 90%;     /* ou largeur souhaitée */ }
    .text-overlay { font-size: 1.2em;}
    h2 {  padding: 5px 20px 5px ; background-color: #074107; width:500px; border-radius: 15px; font-size: 1em}
    
    /* --- Header & API --- */
    .header-main { display: flex; justify-content: space-between; align-items: center; }
    .title-container h1 { font-size: 1.8em; }
    .flag { height: 30px; }
    .api-container { gap: 5px; }
    .weather-box, .currency-box { padding: 8px; min-width: auto; flex-grow: 0; font-size: 0.7em; }
    .weather-box h3, .currency-box h3 { margin-bottom: 5px; }

    /* --- Logique du menu Hamburger --- */
    nav { background-color: transparent; }
    .hamburger-menu { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; }
    .hamburger-menu .line { width: 100%; height: 3px; background-color: white; border-radius: 5px; transition: all 0.3s ease-in-out; }
    .hamburger-menu.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.active .line:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    #nav-links { display: none; flex-direction: column; width: 100%; background-color: rgb(20, 20, 20); }
    #nav-links.active { display: flex; }
    #nav-links > li > a { text-align: left; padding: 12px 20px; border-bottom: 1px solid #555; }
    .dropdown-content { position: static; background-color: #3f3f3f; box-shadow: none; }
    .dropdown-content.open { display: block; }
    .dropdown-content a { padding-left: 40px; }

    /* --- Ajustements spécifiques page Kanji --- */
    .content-black .search-form input,
    .content-black .search-form button { font-size: 16px; padding: 10px; }

    .jp-char { font-size: 1.1em; }
    
    .results-table thead th,
    .results-table tbody tr { font-size: 1.1em; }

    /* 4. On s'assure que le Kanji reste visible */
    .results-table td.kanji-cell { font-size: 1.1em; /* Un peu plus grand que le reste du texte de la ligne */ }
    .results-table thead tr { font-size: 0.9em; }

    .content { padding: 5px; }
    
    /*  L'AJUSTEMENT CLÉ POUR LE TABLEAU */
    .results-table th,
    .results-table td {
        font-size: 0.7em; /* On garde une taille lisible */       
        /* LA LIGNE LA PLUS IMPORTANTE : on réduit l'espacement intérieur */
        padding: 8px 4px; /* 8px en haut/bas, 4px sur les côtés */
    }

    /*  On s'assure que le Kanji reste visible */
    .results-table td.kanji-cell { font-size: 0.7em; /* Un peu plus grand que le reste du texte de la ligne */ }

    .gram-nom-select { font-size: 0.9em; max-width: 500px; }
    .gram-nom-select option { font-size: 0.9rem; /* souvent ignoré par les navigateurs, mais inoffensif */ white-space: normal;      /* permet parfois d’éviter la coupure */ }
    .gram-regles-h2 { background-color: #074107; padding: 7px ; border-radius: 8px; font-size: 0.8em;}
    .gram-regle h4 { background-color: #345a93; padding: 7px ; border-radius: 8px; font-size: 0.8em;}

    
    #japon-ile-titre > h2 { width: 250px;  padding-top: 5px; padding-bottom: 5px;}
    #japon-ile-carte > img { width: 90%; max-width : 500px; margin-top: 10px;}

    #nav-submenu-links { flex-direction: row ; flex-wrap: wrap; }
    #nav-submenu-links > li > a { font-size: 0.6em; padding: 10px 10px; }
    .vocab_h3 { background-color: #074107; font-size: 0.9em; }
}

/*********************************************************************************************************************************/
/* =================================================================== */
/* == 2. AJUSTEMENTS RESPONSIVES (MOBILES ET TABLETTES) 768       　== */
/* =================================================================== */

@media (max-width: 768px) {
    /* --- Ajustements généraux --- */
    .content { padding: 10px; margin: 10px auto; width: 85%; }
    .text-overlay { font-size: 1.0em; }
    h2 {  padding: 5px 20px 5px ; background-color: #074107; width:450px; border-radius: 15px; font-size: 0.9em;}
    .blog_h2 { font-size: 1em; font-weight: 400; }
    
    /* --- Header & API --- */
    .header-main { display: flex; justify-content: space-between; align-items: center; }
    .title-container h1 { font-size: 1.8em; }
    .flag { height: 30px; }
    .api-container { gap: 5px; }
    .weather-box, .currency-box { padding: 8px; min-width: auto; flex-grow: 0; font-size: 0.6em; }
    .weather-box h3, .currency-box h3 { margin-bottom: 5px; }

    /* --- Logique du menu Hamburger --- */
    nav { background-color: transparent; }
    .hamburger-menu { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; }
    .hamburger-menu .line { width: 100%; height: 3px; background-color: white; border-radius: 5px; transition: all 0.3s ease-in-out; }
    .hamburger-menu.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.active .line:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    #nav-links { display: none; flex-direction: column; width: 100%; background-color: rgb(20, 20, 20); }
    #nav-links.active { display: flex; }
    #nav-links > li > a { text-align: left; padding: 12px 20px; border-bottom: 1px solid #555; }
    .dropdown-content { position: static; background-color: #3f3f3f; box-shadow: none; }
    .dropdown-content.open { display: block; }
    .dropdown-content a { padding-left: 40px; }

    /* --- Ajustements spécifiques page Kanji --- */
    .content-black .search-form input,
    .content-black .search-form button { font-size: 16px; padding: 10px; }

    .jp-char { font-size: 1.1em; }
    
    .results-table thead th,
    .results-table tbody tr { font-size: 2.5em; }

    /* 4. On s'assure que le Kanji reste visible */
    .results-table td.kanji-cell { font-size: 1.0em; /* Un peu plus grand que le reste du texte de la ligne */ }
    
    .results-table thead th { font-size: 2.0em; }
    .results-table tbody tr { font-size: 1.3em; }
        
    /* LA CORRECTION CLÉ : Gérer le débordement des tableaux. On cible le conteneur qui est juste autour des tableaux. */
    #container-wrapper .results-container { overflow-x: auto; /* Affiche une barre de scroll si le tableau est trop large */ }
    /* * On peut aussi légèrement réduire la police dans les tableaux pour améliorer la lisibilité sur les petits écrans.*/
    #container-wrapper .wikitable { font-size: 1em; }

}

/************************************************************************************************************************/
/* =================================================================== */
/* ==  AJUSTEMENTS RESPONSIVES    max-width: 758                    == */
/* =================================================================== */

@media (max-width: 758px) {

    /* On cache l'en-tête du tableau des départements */
    .departement-table-container .results-table thead { display: none; }

    /* Chaque ligne <tr> devient une "carte" */
    .departement-table-container .results-table tr { display: block; border: 1px solid #444; border-radius: 8px; margin-bottom: 20px;overflow: hidden;}
    
    /* Chaque cellule <td> prend toute la largeur de la carte */
    .departement-table-container .results-table td { display: block; text-align: right; padding: 12px 15px; padding-left: 50%; position: relative;
        border: none; /* On enlève les bordures par défaut */
        border-bottom: 1px dashed #333; /* On met un séparateur personnalisé */
        font-size: 14px;
    }

    .departement-table-container .results-table td:last-child { border-bottom: 0; }

    /* On crée les labels avec le data-label */
    .departement-table-container .results-table td:before { content: attr(data-label); position: absolute; left: 15px; width: 30%; padding: 12px; 
        text-align: left; font-weight: bold; color:#f4f4f4; background-color: #345a93; }
    
    /* On met en valeur la ligne du numéro pour servir de titre à la carte */
    .departement-table-container .results-table td[data-label="N°"] { background-color: #074107; font-size: 1.5em; font-weight: bold; color: white; 
        text-align: center; padding-left: 15px; }

    .departement-table-container .results-table td[data-label="N°"]:before {
        display: none;
    }

    .results-table thead th,
    .results-table tbody tr { font-size: 1.3em; }
    .gram-nom-select { font-size: 0.8rem; max-width: 100%; padding: 2px;  margin: 5px 0 10px 0; }
}
/* =================================================================== */
/* =================================================================== */
/* == GESTION DU RESPONSIVE POUR LA PAGE DE CONJUGAISON  620        == */
/* =================================================================== */

@media (max-width: 620px) {

    #container-wrapper .wikitable { font-size: 0.6em; }
    
    .results-table thead th { font-size: 0.9em; }
    .results-table tbody tr { font-size: 1.3em; }
     h2 {  padding: 10px 20px 7px ; background-color: #074107; width:325px; border-radius: 15px; font-size: 0.9em;}

    .blog_h3 { font-size:1.0em; font-weight: 600; margin-left: 5px;}
    .blog_date { display: flex; flex-direction: column; text-align: end; margin-right: 5px; white-space: nowrap; font-size: 0.9em;}
    .blog_contenu p { margin-left: 10px; margin-right: 10px; white-space: pre-line; font-size: 0.9em;}

    .vocab_href { color: white;text-decoration: none;padding: 10px;background-color:  #345a93; max-width: 250px;border-radius: 15px;margin: 10px; cursor: pointer;font-size: 0.7em; }

    .ono-detail-result h4 {  background-color: #345a93; padding: 7px ; border-radius: 8px; font-size: 0.9em;}
    .ono-detail-result p {  padding: 7px ; border-radius: 8px; font-size: 0.9em;}

    .results-table thead th { font-size: 0.9em; }
    .results-table tbody tr { font-size: 1.3em; }
     h2 {  padding: 10px 20px 7px ; background-color: #074107; width:325px; border-radius: 15px; font-size: 0.9em;}

    .ono-results-table th,
    .ono-results-table td {
        font-size: 0.7em; /* On garde une taille lisible */       
        /* LA LIGNE LA PLUS IMPORTANTE : on réduit l'espacement intérieur */
        padding: 8px 4px; /* 8px en haut/bas, 4px sur les côtés */
    }
    }

/* =================================================================== */
/* == 2. AJUSTEMENTS RESPONSIVES (MOBILES ET TABLETTES) 450       　== */
/* =================================================================== */
@media (max-width: 450px) {
    h2 {  padding: 10px 20px 7px ; background-color: #074107; width:250px; border-radius: 15px; font-size: 0.8em; margin:auto}
    .jp-char { font-size: 1.0em; }
    /* Pour les très petits écrans, on réduit encore un peu la police */
    .content-black .search-form input,
    .content-black .search-form button { font-size: 1.0em; }

    .results-table thead th,
    .results-table tbody tr { font-size: 0.8em; }

    /* 4. On s'assure que le Kanji reste visible */
    .results-table td.kanji-cell { font-size: 1.2em; /* Un peu plus grand que le reste du texte de la ligne */ }
    .results-table thead tr { font-size: 0.7em; }

    .blog_h3 { font-size:0.9em; font-weight: 600; margin-left: 5px;}
    .blog_date { display: flex; flex-direction: column; text-align: end; margin-right: 5px; white-space: nowrap; font-size: 0.9em;}

    ul.gramUl { margin-left: 30px;}

    .ono-results-table {border-spacing: 5px; }
    .ono-results-table thead th { background-color: #074107; color: white; font-weight: bold; text-transform: uppercase; border-radius: 5px; padding: 3px 5px 3px 5px;}
    .ono-detail-result h4 {  background-color: #345a93; padding: 7px ; border-radius: 8px; font-size: 1em;}
    .ono-detail-result p {  padding: 7px ; border-radius: 8px; font-size: 1em;}
}

/* =================================================================== */
/* == 2. AJUSTEMENTS RESPONSIVES (MOBILES ET TABLETTES) 400       　== */
/* =================================================================== */
@media (max-width: 400px) {

    h2 {  padding: 10px 20px 7px ; background-color: #074107; width:260px; border-radius: 15px; font-size: 0.8em;}
    .jp-char { font-size: 1.0em; }
    .api-container { gap: 2px; }

    /* 1. On resserre un peu le conteneur principal */
    .content, .content-black { padding: 10px; /* ne colle pas aux bords */ margin: 10px auto; }
    
    /* 2. On réduit la taille du formulaire de recherche */
    .content-black .search-form { flex-wrap: wrap; /* permet au formulaire de passer sur plusieurs lignes */ justify-content: center; }
    .content-black .search-form input,
    .content-black .search-form button { font-size: 10px; margin-bottom: 10px; }

    /* 3. L'AJUSTEMENT CLÉ POUR LE TABLEAU */
    .results-table th,
    .results-table td { font-size: 0.6em;  padding: 8px 4px;  }

    /* 4. On s'assure que le Kanji reste visible */
    .results-table td.kanji-cell { font-size: 0.7em; /* Un peu plus grand que le reste du texte de la ligne */ }

    .results-table thead tr { font-size: 0.7em; }
    #container-wrapper .wikitable { font-size: 0.5em; }

    .text-overlay { font-size: 0.7em; }
    .results-table thead th { font-size: 0.6em; }
    .results-table tbody tr { font-size: 1em; }
}


/*********************************************************************************************************************************/
/* =================================================================== */
/* ==  AJUSTEMENTS RESPONSIVES    max-width: 340px                  == */
/* =================================================================== */
@media (max-width: 340px) {

    h2 {  padding: 10px 20px 7px ; background-color: #074107; width:200px; border-radius: 15px; font-size: 0.8em;}
   
    .text-overlay { font-size: 0.6em; }

    /* Chaque cellule <td> prend toute la largeur de la carte */
    .departement-table-container .results-table td { font-size: 1.0em; }
    .departement-table-container .results-table td:before { font-size: 1.0em; padding: 10px; font-weight: 200; }
}

/*********************************************************************************************************************************/
/* =================================================================== */
/* ==  AJUSTEMENTS RESPONSIVES    max-width: 320px                  == */
/* =================================================================== */
@media (max-width: 320px) {

    /* Chaque cellule <td> prend toute la largeur de la carte */
    .departement-table-container .results-table td { font-size: 0.9em; }
    .departement-table-container .results-table td:before { font-size: 0.9em; padding: 10px; font-weight: 200; }
}