/* ========================================
   தமிழ் கற்போம் - Apprenons le Tamoul
   CSS Commun v2.0
   ======================================== */

:root {
    --primary-deep: #1a0a2e;
    --primary-rich: #3d1a5c;
    --accent-gold: #d4a853;
    --accent-copper: #c77b4a;
    --accent-vermillion: #e74c3c;
    --accent-emerald: #2ecc71;
    --accent-blue: #3498db;
    --text-cream: #faf6f0;
    --text-warm: #f5e6d3;
    --bg-gradient-start: #0f0518;
    --bg-gradient-mid: #1a0a2e;
    --bg-gradient-end: #2d1250;
    --card-bg: rgba(61, 26, 92, 0.4);
    --card-border: rgba(212, 168, 83, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 30%, var(--bg-gradient-end) 100%);
    background-attachment: fixed;
    color: var(--text-cream);
    min-height: 100vh;
    line-height: 1.7;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--primary-deep);
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

/* ========================================
   Navigation
   ======================================== */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(15, 5, 24, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
}

.logo {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-decoration: none;
}

.logo-fr {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-warm);
    opacity: 0.8;
    margin-left: 0.5rem;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    align-items: center;
}

.nav-links > li { position: relative; }

.nav-links > li > a {
    color: var(--text-cream);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    display: block;
    transition: color 0.3s;
}

.nav-links > li > a:hover,
.nav-links > li > a.active {
    color: var(--accent-gold);
}

/* Dropdown */
.dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(15, 5, 24, 0.98);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    min-width: 200px;
    padding: 0.5rem 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 1001;
}

.dropdown:hover .dropdown-content { display: block; }

.dropdown-content a {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--text-warm);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.dropdown-content a:hover,
.dropdown-content a.active {
    background: var(--card-bg);
    color: var(--accent-gold);
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1002;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-cream);
    margin: 5px 0;
    transition: all 0.3s;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    padding: 5rem 5% 0;
    font-size: 0.9rem;
    text-align: center;
}

.breadcrumb a {
    color: var(--accent-gold);
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb span {
    color: var(--text-warm);
    opacity: 0.5;
    margin: 0 0.3rem;
}

/* ========================================
   Page Header
   ======================================== */
.page-header {
    padding: 2rem 5% 2rem;
    text-align: center;
    position: relative;
}

.page-header .tamil-title {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.page-header p {
    color: var(--text-warm);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* ========================================
   Container & Sections
   ======================================== */
.container {
    padding: 2rem 5% 4rem;
    max-width: 1000px;
    margin: 0 auto;
}

.content-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--text-cream);
    margin-bottom: 0.3rem;
}

.content-section .tamil-subtitle {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.content-section p {
    color: var(--text-warm);
    margin-bottom: 1rem;
}

/* ========================================
   Cards Grid
   ======================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.3rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(212, 168, 83, 0.12);
    border-color: var(--accent-gold);
}

.card-icon { font-size: 2rem; margin-bottom: 0.8rem; }

.card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--text-cream);
    margin-bottom: 0.2rem;
}

.card .tamil {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 0.95rem;
    color: var(--accent-gold);
    margin-bottom: 0.6rem;
}

.card p {
    color: var(--text-warm);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ========================================
   Tables
   ======================================== */
.table-container {
    overflow-x: auto;
    margin: 1rem 0;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(61, 26, 92, 0.3);
    border-radius: 10px;
    overflow: hidden;
    min-width: 300px;
}

th, td {
    padding: 0.8rem;
    text-align: center;
    border-bottom: 1px solid var(--card-border);
}

th {
    background: rgba(212, 168, 83, 0.15);
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 0.9rem;
}

td { color: var(--text-warm); }

.tamil-cell {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.4rem;
    color: var(--text-cream);
}

/* ========================================
   Vocabulary Cards
   ======================================== */
.vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
}

.vocab-card {
    background: rgba(61, 26, 92, 0.5);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.vocab-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-gold);
}

.vocab-card .tamil {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.6rem;
    color: var(--text-cream);
    display: block;
    margin-bottom: 0.4rem;
}

.vocab-card .trans {
    font-size: 0.8rem;
    color: var(--accent-gold);
    display: block;
    margin-bottom: 0.2rem;
}

.vocab-card .french {
    font-size: 0.9rem;
    color: var(--text-warm);
}

/* ========================================
   Conversation Phrases
   ======================================== */
.phrases-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.phrase-card {
    background: rgba(61, 26, 92, 0.4);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 10px 10px 0;
    padding: 0.9rem 1rem;
    transition: all 0.3s;
}

.phrase-card:hover {
    transform: translateX(4px);
    background: rgba(61, 26, 92, 0.6);
}

.phrase-tamil {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.2rem;
    color: var(--text-cream);
    margin-bottom: 0.2rem;
}

.phrase-trans {
    font-size: 0.8rem;
    color: var(--accent-gold);
}

.phrase-french {
    color: var(--text-warm);
    font-size: 0.9rem;
}

/* ========================================
   Info Boxes
   ======================================== */
.info-box {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
}

.info-box h4 {
    color: var(--accent-emerald);
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

.info-box.warning {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}
.info-box.warning h4 { color: #f1c40f; }

.info-box.tip {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
}
.info-box.tip h4 { color: var(--accent-blue); }

/* ========================================
   Navigation Buttons
   ======================================== */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-cream);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.nav-btn:hover {
    background: var(--accent-gold);
    color: var(--primary-deep);
    border-color: var(--accent-gold);
}

/* ========================================
   Footer
   ======================================== */
footer {
    background: rgba(15, 5, 24, 0.95);
    border-top: 1px solid var(--card-border);
    padding: 1.5rem 5%;
    text-align: center;
}

footer p {
    color: var(--text-warm);
    font-size: 0.85rem;
    opacity: 0.8;
}

footer a {
    color: var(--accent-gold);
    text-decoration: none;
}

/* ========================================
   Exercise Specific
   ======================================== */
.exercise-area {
    background: rgba(61, 26, 92, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.btn {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper));
    color: var(--primary-deep);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 168, 83, 0.3);
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--text-cream);
    border: 1px solid var(--card-border);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    nav { padding: 0.8rem 4%; }
    
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0f0518;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        z-index: 9999;
        overflow-y: auto;
        padding: 2rem 1rem;
    }
    
    .nav-links.active { display: flex; }
    
    .nav-links > li { width: 100%; text-align: center; }
    
    .nav-links > li > a { 
        font-size: 1.2rem; 
        padding: 0.8rem 1rem;
        display: block;
        color: #f5f0e8;
    }
    
    /* Bordure orange pour indiquer les sous-menus (mode sombre) */
    .nav-links > li.dropdown > a {
        border: 2px solid #d4a853;
        border-radius: 8px;
        margin: 0.2rem 1rem;
        width: auto;
    }
    
    .dropdown .dropdown-content {
        position: static;
        display: none;
        background: rgba(45, 27, 78, 0.9);
        border: 1px solid rgba(212, 168, 83, 0.3);
        border-radius: 8px;
        box-shadow: none;
        min-width: auto;
        margin-top: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .dropdown .dropdown-content a {
        color: #c9b896;
        padding: 0.6rem 1rem;
    }
    
    .dropdown .dropdown-content a:hover {
        color: #d4a853;
        background: rgba(212, 168, 83, 0.1);
    }
    
    .dropdown.open .dropdown-content { display: block; }
    
    .mobile-menu-btn { display: block; z-index: 10001; }
    
    .breadcrumb { padding-top: 4.5rem; }
    
    .page-header { padding: 1.5rem 4% 1.5rem; }
    
    .container { padding: 1.5rem 4% 3rem; }
    
    .content-section {
        padding: 1.2rem;
        border-radius: 12px;
    }
    
    .cards-grid { grid-template-columns: 1fr; }
    
    .vocab-grid { grid-template-columns: repeat(2, 1fr); }
    
    .nav-buttons { flex-direction: column; }
    
    .nav-btn { justify-content: center; }
}

@media (max-width: 480px) {
    .logo { font-size: 1.2rem; }
    .vocab-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .vocab-card .tamil { font-size: 1.4rem; }
}

/* ========================================
   FIX: Overflow for long Tamil text
   ======================================== */
.vocab-card {
    overflow: hidden;
    word-wrap: break-word;
}

.vocab-card .tamil {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.vocab-card:hover .tamil {
    white-space: normal;
    overflow: visible;
}

/* For very long words, allow wrapping */
.vocab-card.allow-wrap .tamil {
    white-space: normal;
    font-size: 1.2rem;
    line-height: 1.3;
}

/* Smaller font for number cards with long text */
.number-card .tamil,
.vocab-card .tamil.long-text {
    font-size: 1.2rem;
}

@media (max-width: 480px) {
    .vocab-card .tamil {
        font-size: 1.2rem;
    }
    .number-card .tamil {
        font-size: 1rem;
    }
}

/* ============================================
   MODE SOMBRE / CLAIR
   ============================================ */

/* Variables mode clair */
:root {
    --toggle-bg: rgba(255,255,255,0.1);
}

[data-theme="light"] {
    --primary-deep: #f5f0e8;
    --primary-rich: #ebe4d8;
    --card-bg: #ffffff;
    --card-border: #d4c4a8;
    --text-cream: #2d1a3e;
    --text-warm: #5a4a6a;
    --accent-gold: #b8860b;
}

[data-theme="light"] body {
    background: linear-gradient(135deg, #f5f0e8 0%, #ebe4d8 50%, #e0d5c5 100%);
}

[data-theme="light"] .card,
[data-theme="light"] .vocab-card,
[data-theme="light"] .lesson-card,
[data-theme="light"] .exercise-card {
    background: #ffffff;
    border-color: #d4c4a8;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

[data-theme="light"] nav {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
}

[data-theme="light"] .page-header {
    background: linear-gradient(135deg, rgba(45, 26, 62, 0.95), rgba(61, 26, 92, 0.9));
}

/* Toolbar flottante */
.accessibility-toolbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.toolbar-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    background: var(--card-bg);
    color: var(--text-cream);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.toolbar-btn:hover {
    transform: scale(1.1);
    background: var(--accent-gold);
    color: var(--primary-deep);
}

/* Tailles de police */
[data-fontsize="small"] { font-size: 14px; }
[data-fontsize="normal"] { font-size: 16px; }
[data-fontsize="large"] { font-size: 18px; }
[data-fontsize="xlarge"] { font-size: 20px; }

[data-fontsize="large"] .tamil,
[data-fontsize="xlarge"] .tamil {
    font-size: 1.3em;
}

/* Barre de recherche */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}

.search-overlay.active {
    display: flex;
}

.search-container {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 70vh;
    overflow-y: auto;
}

.search-input-wrap {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-input {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    background: var(--primary-deep);
    color: var(--text-cream);
    font-size: 1.1rem;
}

.search-close {
    padding: 1rem;
    background: var(--accent-vermillion);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-result {
    padding: 1rem;
    background: rgba(61, 26, 92, 0.3);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-cream);
    transition: all 0.2s;
}

.search-result:hover {
    background: rgba(212, 168, 83, 0.2);
}

.search-result .result-title {
    font-weight: 600;
    color: var(--accent-gold);
}

.search-result .result-type {
    font-size: 0.8rem;
    color: var(--text-warm);
}

.search-result .result-tamil {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .accessibility-toolbar {
        bottom: 10px;
        right: 10px;
    }
    .toolbar-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Mode clair - Navigation et menus */
[data-theme="light"] .nav-links > li > a {
    color: #f5e6d3;
}

[data-theme="light"] .nav-links > li > a:hover {
    color: var(--accent-gold);
}

[data-theme="light"] .dropdown-content {
    background: #ffffff;
    border-color: #d4c4a8;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

[data-theme="light"] .dropdown-content a {
    color: #2d1a3e;
}

[data-theme="light"] .dropdown-content a:hover {
    background: rgba(184, 134, 11, 0.15);
    color: #b8860b;
}

[data-theme="light"] .breadcrumb {
    background: rgba(45, 26, 62, 0.1);
}

[data-theme="light"] .breadcrumb a {
    color: #2d1a3e;
}

[data-theme="light"] .mobile-menu-btn span {
    background: #f5e6d3;
}

/* Mode clair - Menu mobile */
@media (max-width: 768px) {
    [data-theme="light"] .nav-links {
        background: #faf8f5;
    }
    
    [data-theme="light"] .nav-links > li > a {
        color: #2d1a3e;
    }
    
    [data-theme="light"] .nav-links > li > a:hover {
        color: #b8860b;
    }
    
    /* Bordure bleue pour indiquer les sous-menus (mode clair) */
    [data-theme="light"] .nav-links > li.dropdown > a {
        border: 2px solid #3498db;
    }
    
    [data-theme="light"] .dropdown .dropdown-content {
        background: #ffffff;
        border: 1px solid #d4c4a8;
    }
    
    [data-theme="light"] .dropdown .dropdown-content a {
        color: #2d1a3e;
    }
    
    [data-theme="light"] .dropdown .dropdown-content a:hover {
        color: #b8860b;
        background: rgba(184, 134, 11, 0.1);
    }
    
    [data-theme="light"] .mobile-menu-btn span {
        background: #2d1a3e;
    }
}

/* Mode clair - Sections et conteneurs */
[data-theme="light"] .section-nav,
[data-theme="light"] .period-nav {
    background: #ffffff;
    border: 1px solid #d4c4a8;
}

[data-theme="light"] .section-nav a,
[data-theme="light"] .period-nav a {
    color: #2d1a3e;
    border-color: #d4c4a8;
}

[data-theme="light"] .section-nav a:hover,
[data-theme="light"] .period-nav a:hover {
    background: var(--accent-gold);
    color: #ffffff;
}

[data-theme="light"] .culture-section,
[data-theme="light"] .lit-section {
    background: #ffffff;
    border-color: #d4c4a8;
}

[data-theme="light"] .festival-card,
[data-theme="light"] .work-card,
[data-theme="light"] .temple-card {
    background: #f9f7f4;
    border-color: #d4c4a8;
}

[data-theme="light"] .quote-box {
    background: #f5f0e8;
}

[data-theme="light"] .fact-box {
    background: #f5f0e8;
    border-color: var(--accent-gold);
}

[data-theme="light"] .cuisine-card,
[data-theme="light"] .genre-card,
[data-theme="light"] .tradition-card,
[data-theme="light"] .art-card {
    background: #f9f7f4;
    border-color: #d4c4a8;
}

[data-theme="light"] .author-card {
    background: #f9f7f4;
}

[data-theme="light"] .stat-card {
    background: #f9f7f4;
}

[data-theme="light"] .phrase-card {
    background: #f9f7f4;
}

/* Mode clair - Footer */
[data-theme="light"] footer {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
}

[data-theme="light"] footer p,
[data-theme="light"] footer a {
    color: #f5e6d3;
}

/* ========================================

/* ========================================
   MODE CLAIR - DESIGN COMPLET ET LISIBLE
   Fond clair + Texte foncé = Contraste optimal
   ======================================== */

[data-theme="light"] {
    /* Couleurs de fond */
    --primary-deep: #f8f5f0;
    --primary-rich: #f0ebe3;
    --card-bg: #ffffff;
    --card-border: #c9b896;
    
    /* Couleurs de texte - FONCÉES pour lisibilité */
    --text-cream: #1a1a2e;
    --text-warm: #2d2d3a;
    --text-muted: #4a4a5a;
    
    /* Accents */
    --accent-gold: #996515;
    --accent-copper: #a85d35;
    --accent-purple: #7b3fa0;
}

/* === BODY ET FOND === */
[data-theme="light"] body {
    background: linear-gradient(135deg, #f8f5f0 0%, #f0ebe3 50%, #e8e0d5 100%);
    color: #1a1a2e;
}

/* === NAVIGATION (reste sombre pour contraste) === */
[data-theme="light"] nav {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
}

[data-theme="light"] .nav-links > li > a {
    color: #f5e6d3;
}

[data-theme="light"] .nav-links > li > a:hover,
[data-theme="light"] .nav-links > li > a.active {
    color: #d4a853;
}

[data-theme="light"] .dropdown-content {
    background: #ffffff;
    border: 2px solid #c9b896;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

[data-theme="light"] .dropdown-content a {
    color: #1a1a2e;
    border-bottom: 1px solid #e8e0d5;
}

[data-theme="light"] .dropdown-content a:hover {
    background: #f5f0e8;
    color: #996515;
}

[data-theme="light"] .mobile-menu-btn span {
    background: #f5e6d3;
}

/* === EN-TÊTE DE PAGE (reste sombre) === */
[data-theme="light"] .page-header {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
}

[data-theme="light"] .page-header h1,
[data-theme="light"] .page-header .tamil-title {
    color: #d4a853;
}

[data-theme="light"] .page-header p {
    color: #e8d5c4;
}

/* === HERO SECTION === */
[data-theme="light"] .hero {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
}

/* === CARTES (fond blanc, texte foncé) === */
[data-theme="light"] .card,
[data-theme="light"] .vocab-card,
[data-theme="light"] .lesson-card,
[data-theme="light"] .exercise-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .start-card,
[data-theme="light"] .link-card,
[data-theme="light"] .book-card,
[data-theme="light"] .video-card,
[data-theme="light"] .resource-card {
    background: #ffffff;
    border: 2px solid #c9b896;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    color: #1a1a2e;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .vocab-card:hover,
[data-theme="light"] .lesson-card:hover,
[data-theme="light"] .exercise-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .start-card:hover,
[data-theme="light"] .link-card:hover {
    border-color: #996515;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

[data-theme="light"] .card h3,
[data-theme="light"] .vocab-card h3,
[data-theme="light"] .lesson-card h3,
[data-theme="light"] .exercise-card h3,
[data-theme="light"] .feature-card h3,
[data-theme="light"] .start-card h3,
[data-theme="light"] .link-card h3,
[data-theme="light"] .link-card h4 {
    color: #1a1a2e;
}

[data-theme="light"] .card p,
[data-theme="light"] .vocab-card p,
[data-theme="light"] .lesson-card p,
[data-theme="light"] .exercise-card p,
[data-theme="light"] .feature-card p,
[data-theme="light"] .start-card p,
[data-theme="light"] .link-card p {
    color: #4a4a5a;
}

/* === TITRES ET TEXTES === */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 {
    color: #1a1a2e;
}

[data-theme="light"] .section-title,
[data-theme="light"] .alpha-section h2,
[data-theme="light"] .alphabet-section h2,
[data-theme="light"] .resource-section h2,
[data-theme="light"] .culture-section h2 {
    color: #996515;
}

[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] li {
    color: #2d2d3a;
}

[data-theme="light"] a {
    color: #996515;
}

[data-theme="light"] a:hover {
    color: #7a5010;
}

/* === SECTIONS DE CONTENU === */
[data-theme="light"] .culture-section,
[data-theme="light"] .resource-section,
[data-theme="light"] .alpha-section,
[data-theme="light"] .alphabet-section,
[data-theme="light"] .content-section,
[data-theme="light"] section {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .section-intro,
[data-theme="light"] .intro-box,
[data-theme="light"] .tip-box,
[data-theme="light"] .info-box {
    background: #f5f0e8;
    border-left-color: #996515;
    color: #1a1a2e;
}

[data-theme="light"] .tip-box p,
[data-theme="light"] .info-box p,
[data-theme="light"] .section-intro p,
[data-theme="light"] .intro-box p {
    color: #2d2d3a;
}

/* === NAVIGATION DE SECTION === */
[data-theme="light"] .section-nav {
    background: #ffffff;
    border: 2px solid #c9b896;
}

[data-theme="light"] .section-nav a {
    color: #1a1a2e;
    background: #f8f5f0;
    border: 2px solid #c9b896;
}

[data-theme="light"] .section-nav a:hover,
[data-theme="light"] .section-nav a.active {
    background: #996515;
    color: #ffffff;
    border-color: #996515;
}

/* === TABLEAUX === */
[data-theme="light"] table {
    background: #ffffff;
    border-color: #c9b896;
}

[data-theme="light"] th {
    background: #f5f0e8;
    color: #1a1a2e;
    border-color: #c9b896;
}

[data-theme="light"] td {
    background: #ffffff;
    color: #1a1a2e;
    border-color: #d4c4a8;
}

[data-theme="light"] tr:nth-child(even) td {
    background: #faf8f5;
}

[data-theme="light"] tr:hover td {
    background: #f0ebe3;
}

/* === FORMULAIRES === */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #996515;
    box-shadow: 0 0 0 3px rgba(153, 101, 21, 0.2);
}

[data-theme="light"] input::placeholder {
    color: #8a8a9a;
}

/* === BOUTONS === */
[data-theme="light"] .btn,
[data-theme="light"] button {
    background: #996515;
    color: #ffffff;
    border: 2px solid #996515;
}

[data-theme="light"] .btn:hover,
[data-theme="light"] button:hover {
    background: #7a5010;
    border-color: #7a5010;
}

[data-theme="light"] .btn-secondary {
    background: transparent;
    color: #996515;
    border: 2px solid #996515;
}

[data-theme="light"] .btn-secondary:hover {
    background: #996515;
    color: #ffffff;
}

/* === STATISTIQUES === */
[data-theme="light"] .stat-badge,
[data-theme="light"] .stats-bar .stat {
    background: #ffffff;
    border: 2px solid #c9b896;
}

[data-theme="light"] .stat-badge .number,
[data-theme="light"] .stat .number {
    color: #996515;
}

[data-theme="light"] .stat-badge .label,
[data-theme="light"] .stat .label {
    color: #4a4a5a;
}

/* === GRILLES DE LETTRES === */
[data-theme="light"] .letter-box,
[data-theme="light"] .letter-card,
[data-theme="light"] .char-btn {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .letter-box:hover,
[data-theme="light"] .letter-card:hover,
[data-theme="light"] .char-btn:hover {
    background: #996515;
    border-color: #996515;
    color: #ffffff;
}

[data-theme="light"] .letter-box .tamil,
[data-theme="light"] .letter-card .tamil-char,
[data-theme="light"] .tamil-char {
    color: #1a1a2e;
}

[data-theme="light"] .letter-box:hover .tamil,
[data-theme="light"] .letter-card:hover .tamil-char,
[data-theme="light"] .letter-box:hover .roman,
[data-theme="light"] .letter-card:hover .translit {
    color: #ffffff;
}

[data-theme="light"] .letter-box .roman,
[data-theme="light"] .letter-card .translit,
[data-theme="light"] .translit {
    color: #996515;
}

/* === TABLEAU CROISÉ ALPHABET === */
[data-theme="light"] .cross-table,
[data-theme="light"] .uyirmei-table {
    background: #ffffff;
}

[data-theme="light"] .cross-table th,
[data-theme="light"] .uyirmei-table th {
    background: #f5f0e8;
    color: #996515;
    border-color: #c9b896;
}

[data-theme="light"] .cross-table th.consonant-header,
[data-theme="light"] .uyirmei-table th.consonant-header {
    background: #f0e8f5;
    color: #7b3fa0;
}

[data-theme="light"] .cross-table td,
[data-theme="light"] .uyirmei-table td {
    background: #ffffff;
    color: #1a1a2e;
    border-color: #d4c4a8;
}

[data-theme="light"] .cross-table td:hover,
[data-theme="light"] .uyirmei-table td:hover {
    background: #996515;
    color: #ffffff;
}

[data-theme="light"] .cross-table .syl,
[data-theme="light"] .uyirmei-table .syllable {
    color: #1a1a2e;
}

[data-theme="light"] .cross-table td:hover .syl,
[data-theme="light"] .uyirmei-table td:hover .syllable,
[data-theme="light"] .cross-table td:hover .syl-trans,
[data-theme="light"] .uyirmei-table td:hover .syllable-translit {
    color: #ffffff;
}

[data-theme="light"] .cross-table .syl-trans,
[data-theme="light"] .uyirmei-table .syllable-translit,
[data-theme="light"] .cons-trans,
[data-theme="light"] .vowel-trans {
    color: #6a6a7a;
}

/* === LÉGENDE === */
[data-theme="light"] .legend {
    background: #f8f5f0;
    border: 1px solid #c9b896;
}

[data-theme="light"] .legend-item {
    color: #1a1a2e;
}

/* === EXERCICES === */
[data-theme="light"] .quiz-container,
[data-theme="light"] .flashcard-container,
[data-theme="light"] .memory-container,
[data-theme="light"] .exercise-container {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .quiz-option,
[data-theme="light"] .answer-btn {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .quiz-option:hover,
[data-theme="light"] .answer-btn:hover {
    background: #f0ebe3;
    border-color: #996515;
}

[data-theme="light"] .quiz-option.correct,
[data-theme="light"] .answer-btn.correct {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

[data-theme="light"] .quiz-option.incorrect,
[data-theme="light"] .answer-btn.incorrect {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

[data-theme="light"] .flashcard {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .flashcard .front,
[data-theme="light"] .flashcard .back {
    background: #ffffff;
    color: #1a1a2e;
}

[data-theme="light"] .memory-card {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .memory-card.flipped,
[data-theme="light"] .memory-card.matched {
    background: #ffffff;
}

/* === PENDU ET MOTS MÊLÉS === */
[data-theme="light"] .hangman-container,
[data-theme="light"] .wordsearch-container {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .letter-btn {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .letter-btn:hover {
    background: #996515;
    color: #ffffff;
    border-color: #996515;
}

[data-theme="light"] .letter-btn.used {
    background: #e0e0e0;
    color: #8a8a8a;
}

[data-theme="light"] .word-display {
    color: #1a1a2e;
}

[data-theme="light"] .grid-cell {
    background: #ffffff;
    border: 1px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .grid-cell.selected {
    background: #996515;
    color: #ffffff;
}

[data-theme="light"] .grid-cell.found {
    background: #d4edda;
    color: #155724;
}

/* === VOCABULAIRE === */
[data-theme="light"] .vocab-table {
    background: #ffffff;
}

[data-theme="light"] .vocab-table th {
    background: #f5f0e8;
    color: #1a1a2e;
}

[data-theme="light"] .vocab-table td {
    color: #1a1a2e;
    border-color: #d4c4a8;
}

[data-theme="light"] .vocab-item {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .vocab-item:hover {
    border-color: #996515;
}

[data-theme="light"] .vocab-tamil {
    color: #1a1a2e;
}

[data-theme="light"] .vocab-french {
    color: #4a4a5a;
}

[data-theme="light"] .vocab-translit {
    color: #996515;
}

/* === DIALOGUES === */
[data-theme="light"] .dialogue-box {
    background: #ffffff;
    border: 2px solid #c9b896;
}

[data-theme="light"] .dialogue-speaker {
    color: #996515;
}

[data-theme="light"] .dialogue-tamil {
    color: #1a1a2e;
}

[data-theme="light"] .dialogue-french {
    color: #4a4a5a;
}

/* === GRAMMAIRE === */
[data-theme="light"] .grammar-box,
[data-theme="light"] .rule-box {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .grammar-example {
    background: #f8f5f0;
    border-left: 4px solid #996515;
    color: #1a1a2e;
}

/* === PROGRESS BAR === */
[data-theme="light"] .progress-bar {
    background: #e0e0e0;
}

[data-theme="light"] .progress-fill {
    background: linear-gradient(90deg, #996515, #b8860b);
}

/* === FOOTER === */
[data-theme="light"] footer {
    background: linear-gradient(135deg, #2d1a3e 0%, #3d1a5c 100%);
    color: #e8d5c4;
}

[data-theme="light"] footer a {
    color: #d4a853;
}

/* === FILTRES === */
[data-theme="light"] .filter-btn {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
    background: #996515;
    color: #ffffff;
    border-color: #996515;
}

/* === ACCORDÉONS === */
[data-theme="light"] .accordion-header {
    background: #f8f5f0;
    color: #1a1a2e;
    border: 2px solid #c9b896;
}

[data-theme="light"] .accordion-header:hover {
    background: #f0ebe3;
}

[data-theme="light"] .accordion-content {
    background: #ffffff;
    border: 2px solid #c9b896;
    border-top: none;
    color: #1a1a2e;
}

/* === CODE === */
[data-theme="light"] code,
[data-theme="light"] pre {
    background: #f5f0e8;
    color: #1a1a2e;
    border: 1px solid #c9b896;
}

/* === TIMELINE === */
[data-theme="light"] .timeline-item {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .timeline-date {
    color: #996515;
}

[data-theme="light"] .timeline-content h3 {
    color: #1a1a2e;
}

[data-theme="light"] .timeline-content p {
    color: #4a4a5a;
}

/* === INFO AUDIO === */
[data-theme="light"] .audio-info,
[data-theme="light"] .audio-instruction {
    background: #f0f8f0;
    border: 2px solid #28a745;
    color: #1a1a2e;
}

/* === BADGES === */
[data-theme="light"] .badge {
    background: #996515;
    color: #ffffff;
}

/* === À PROPOS === */
[data-theme="light"] .about-section {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .about-section h2 {
    color: #996515;
}

[data-theme="light"] .about-section p {
    color: #2d2d3a;
}

/* === BREADCRUMB === */
[data-theme="light"] .breadcrumb {
    background: #f8f5f0;
    color: #1a1a2e;
}

[data-theme="light"] .breadcrumb a {
    color: #996515;
}

/* === ACCESSIBILITÉ TOOLBAR === */
[data-theme="light"] .accessibility-toolbar .toolbar-btn {
    background: #ffffff;
    border-color: #996515;
    color: #996515;
}

[data-theme="light"] .accessibility-toolbar .toolbar-btn:hover {
    background: #996515;
    color: #ffffff;
}

/* === SCROLL TO TOP === */
[data-theme="light"] .scroll-top {
    background: #996515;
    color: #ffffff;
}

/* === MODALS === */
[data-theme="light"] .modal-content {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .modal-header {
    background: #f8f5f0;
    border-bottom: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .modal-body {
    color: #2d2d3a;
}

/* === SPÉCIFIQUES RESSOURCES === */
[data-theme="light"] .resource-section {
    background: #ffffff;
    color: #1a1a2e;
}

[data-theme="light"] .resource-section h2 {
    color: #996515;
}

[data-theme="light"] .resource-section h3 {
    color: #7b3fa0;
}

[data-theme="light"] .resource-section p {
    color: #2d2d3a;
}

/* === SPÉCIFIQUES LITTÉRATURE === */
[data-theme="light"] .period-section {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .period-section h2 {
    color: #996515;
}

[data-theme="light"] .work-card {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .work-card h4 {
    color: #1a1a2e;
}

[data-theme="light"] .work-card p {
    color: #4a4a5a;
}

/* === LEÇONS === */
[data-theme="light"] .lesson-content {
    background: #ffffff;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .lesson-content h2,
[data-theme="light"] .lesson-content h3 {
    color: #996515;
}

[data-theme="light"] .lesson-content p,
[data-theme="light"] .lesson-content li {
    color: #2d2d3a;
}

[data-theme="light"] .lesson-number {
    background: #996515;
    color: #ffffff;
}

[data-theme="light"] .lesson-tamil {
    color: #7b3fa0;
}

/* === SEARCH OVERLAY === */
[data-theme="light"] .search-overlay {
    background: rgba(0,0,0,0.7);
}

[data-theme="light"] .search-container {
    background: #ffffff;
    border: 2px solid #c9b896;
}

[data-theme="light"] .search-input {
    background: #f8f5f0;
    border: 2px solid #c9b896;
    color: #1a1a2e;
}

[data-theme="light"] .search-results {
    background: #ffffff;
    color: #1a1a2e;
}

[data-theme="light"] .search-result-item {
    border-bottom: 1px solid #e0e0e0;
    color: #1a1a2e;
}

[data-theme="light"] .search-result-item:hover {
    background: #f8f5f0;
}