/* =========================================================================
   CSS - LAYOUTS COMMUNS (ACCUEIL, ECOLE, MULTIMEDIA, ETC.)
========================================================================= */

/* --- Layout Principal --- */
.home-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 100px auto 30px;
    padding: 0 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

@media (min-width: 1400px) {
    /* Si la page a une sidebar (body.with-sidebar), on laisse le conteneur s'étirer jusqu'à 1550px */
    body.with-sidebar .home-container {
        max-width: 1550px;
        padding-right: 360px; /* 320px (sidebar) + 40px d'espace */
    }
    /* Sinon, sur les pages normales (ex: Multimedia), le conteneur reste à 1200px et sans padding forcé */
    body:not(.with-sidebar) .home-container {
        max-width: 1200px;
        padding: 0 20px;
    }
}

/* --- Colonne Gauche (Contenu principal) --- */
.home-left {
    flex: 1 1 0%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}


/* =========================================================================
   GLOBAL SIDEBAR (Navigation App-Like)
========================================================================= */
.global-sidebar {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: 'Noto Sans JP', sans-serif;
    z-index: 9998;
}

.navigation-hub-title {
    margin: -20px -20px 15px;
    padding: 12px 20px;
    font-size: 1.2em;
    color: white;
    background-color: #222;
    text-align: center;
    border-bottom: 1px solid #444;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bouton Reprendre */
.hero-btn {
    display: block;
    background: #0074c7;
    color: white;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    font-size: 1.0em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,116,199,0.3);
    transition: background 0.2s, transform 0.2s;
}
.hero-btn:hover { background: #005a9c; color: white; transform: translateY(-2px); }

/* Accordéon des cours */
.course-accordion {
    background: transparent;
    border: none;
    overflow: hidden;
    box-shadow: none;
}
.course-accordion details { border-bottom: 1px solid #eee; }
.course-accordion details:last-child { border-bottom: none; }
.course-accordion summary {
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    background: #fafafa;
    list-style: none; 
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--theme-color);
}
.course-accordion summary::-webkit-details-marker { display: none; }
.course-accordion summary:hover { background: #f1f1f1; }
.course-list { list-style: none; margin: 0; padding: 10px 15px; }
.course-list li {
    margin-bottom: 0;
    border-bottom: 1px solid #f5f5f5;
    padding: 4px 0;
}
.course-list li:last-child { border-bottom: none; }
.course-list a { text-decoration: none; color: #555; display: block; padding: 4px 0; }
.course-list a:hover { text-decoration: underline; }
.course-list li.current-lesson {
    background-color: color-mix(in srgb, var(--theme-color, #0074c7) 10%, white);
    border-radius: 6px;
    margin: 0 -10px;
    padding: 4px 10px;
}
.course-list li.current-lesson a { font-weight: bold; color: var(--theme-color, #e67e22); }
.hub-link { color: #8c1c13 !important; font-size: 0.9em; float: right; }
.summary-arrow {
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s;
    font-size: 0.8em;
    color: #888;
}
details[open] > summary .summary-arrow { transform: rotate(180deg); }


/* COMPORTEMENT RESPONSIVE SIDEBAR */

/* PC Bureau ( > 1400px ) */
@media (min-width: 1400px) {
    .global-sidebar {
        display: none; /* Invisible par défaut sur grand écran pour les pages normales */
    }
    body.with-sidebar .global-sidebar {
        display: flex; /* Visible uniquement sur index et ecole */
        position: fixed;
        /* Positionnement robuste : collé à droite du conteneur de 1550px, ou collé à droite de l'écran (20px) */
        right: max(20px, calc(50vw - 775px));
        top: 100px;
        width: 320px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .global-sidebar-overlay { display: none !important; }
    .close-global-sidebar { display: none; } /* Bouton fermer inutile sur grand écran */
}

/* PC Portable, Tablettes, Mobiles ( < 1400px ) : Bottom Sheet */
@media (max-width: 1399px) {
    .global-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 70px); /* 70px = hauteur de la bottom-nav */
        max-height: 85vh;
        overflow-y: auto;
    }
    .global-sidebar.active {
        transform: translateY(0);
    }
    .global-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9997;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .global-sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
    .navigation-hub-title {
        position: sticky;
        top: -20px;
        margin: -20px -20px 15px;
        z-index: 10;
        border-radius: 20px 20px 0 0; /* Important pour l'arrondi quand ça scrolle */
    }
    .close-global-sidebar {
        background: none;
        border: none;
        color: white;
        font-size: 1.5em;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
}


/* =========================================================================
   ELEMENTS GRAPHIQUES INDEX-V3
========================================================================= */

/* Bannière Omikuji */
.omikuji-banner {
    display: block;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    color: #333;
    text-decoration: none;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.omikuji-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* =========================================================================
   NOUVEAU LAYOUT INDEX-V3 (Widgets + Tuiles)
========================================================================= */
.index-layout-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}

.index-widgets-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.index-main-column {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Grille 2x2 des Grandes Tuiles */
.main-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.main-tile {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 2em 1.5em;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s;
    border-top: 4px solid var(--tile-color, #0074c7);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-tile:hover {
    border-color: var(--tile-color, #0074c7);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--tile-color, #0074c7) 15%, transparent);
    transform: translateY(-3px);
}
.main-tile .tile-icon {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.5em;
}
.main-tile h3 { margin: 0 0 10px 0; font-size: 1.4em; font-weight: 700; color: var(--tile-color, #0074c7); }
.main-tile p { margin: 0; font-size: 0.9em; color: #666; }

/* Ligne des petites tuiles */
.small-tiles-row { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.small-tile {
    flex: 1 1 calc(25% - 15px);
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    color: #444;
    font-size: 0.9em;
    font-weight: bold;
    transition: background 0.2s;
    border: 1px solid #eee;
}
.small-tile:hover { background: #e2e6ea; border-color: #ccc; }


/* --- Tuiles Horizontales (Pour l'école : Grammaire / Révisions) --- */
.horizontal-tiles-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.horizontal-tile {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s;
    border-left: 6px solid var(--tile-color, #0074c7);
}
.horizontal-tile:hover {
    border-color: var(--tile-color, #0074c7);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--tile-color, #0074c7) 15%, transparent);
    transform: translateX(5px);
}
.horizontal-tile .tile-icon {
    font-size: 2.5em;
    margin-right: 20px;
}
.horizontal-tile-content h3 {
    margin: 0 0 5px 0;
    color: var(--tile-color, #0074c7);
    font-size: 1.4em;
    font-weight: bold;
}
.horizontal-tile-content p {
    margin: 0;
    color: #666;
    font-size: 0.95em;
}

/* =========================================================================
   KANJI DU JOUR
========================================================================= */
.kanji-of-the-day { text-align: center; padding-top: 10px; background: transparent; border: none; box-shadow: none; }

.kanji-card-print { 
    background: #fff; 
    border: 2px solid #ddd; 
    border-radius: 12px; 
    padding: 20px; 
    text-align: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    cursor: pointer; 
    transition: transform 0.2s, border-color 0.2s; 
    margin: 0 auto;
}
.kanji-card-print:hover { 
    transform: translateY(-3px); 
    border-color: #0074c7; 
}
.kanji-card-print .k { 
    font-size: 4.5em; 
    color: #0074c7; 
    line-height: 1; 
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    margin-bottom: 10px;
}
.kanji-card-print .r { font-size: 1.1em; color: #555; margin-bottom: 5px; }
.kanji-card-print .m-only { font-size: 1em; color: #888; font-weight: bold; }


/* Responsive Mobile global */
@media (max-width: 768px) {
    .home-container { flex-direction: column; }
    .index-layout-wrapper { flex-direction: column; }
    .index-widgets-column { flex: 1 1 auto; width: 100%; }
    .small-tile { flex: 1 1 45%; }
}