/* ==========================================================================
   LMA ACADEMY - DESIGN SYSTEM (Sombre & Élégant / Dark Premium)
   ========================================================================== */

/* IMPORTATION DES POLICES DEPUIS GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --lma-primary: #d4af37;       /* Or élégant (Gold) */
    --lma-primary-hover: #b5952f;
    --lma-primary-gradient: linear-gradient(135deg, #fcd34d 0%, #d4af37 100%);
    --lma-bg-color: #0f172a;      /* Arrière-plan global (Slate 900) */
    --lma-secondary: #1e293b;     /* Arrière-plan des cartes (Slate 800) */
    --lma-text-dark: #f8fafc;     /* Texte principal (Blanc cassé) */
    --lma-text-light: #cbd5e1;    /* Texte secondaire (Gris plus clair pour meilleur contraste) */
    --lma-border: #334155;        /* Bordures subtiles (Slate 700) */
    --lma-success: #10b981;       
    --lma-danger: #ef4444;        
    --lma-radius: 16px;           
    --lma-radius-sm: 10px;
    --lma-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --lma-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.15);
    
    /* Variables pour les polices */
    --lma-font-fr: 'Open Sans', sans-serif;
    --lma-font-ar: 'Tajawal', sans-serif;
}

/* --- Typographie Globale & Arrière-plan --- */
.lma-wrapper {
    font-family: var(--lma-font-fr); /* Police par défaut */
    color: var(--lma-text-dark);
    line-height: 1.6;
    background-color: var(--lma-bg-color);
    padding: 30px;
    border-radius: var(--lma-radius);
    border: 1px solid var(--lma-border);
    box-shadow: var(--lma-shadow);
}

/* Application de la police Arabe si la langue est définie (nécessite que le HTML ait dir="rtl" ou lang="ar") */
html[dir="rtl"] .lma-wrapper,
html[lang^="ar"] .lma-wrapper {
    font-family: var(--lma-font-ar);
}

/* Amélioration de la lisibilité des descriptions */
.lma-course-info div, .lma-wrapper p {
    color: var(--lma-text-light);
    font-size: 1.05rem; /* Légèrement plus grand */
    font-weight: 400;
}

/* --- Boutons --- */
.lma-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--lma-radius-sm);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    font-family: inherit; /* Hérite de la police selon la langue */
}
.lma-btn-primary { 
    background: var(--lma-primary-gradient); 
    color: #0f172a; /* Texte sombre sur bouton or pour le contraste */
    box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.2);
}
.lma-btn-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--lma-shadow-hover); 
    color: #000;
}
.lma-btn-outline { 
    border: 2px solid var(--lma-primary); 
    color: var(--lma-primary); 
    background: transparent; 
}
.lma-btn-outline:hover { 
    background: var(--lma-primary); 
    color: #0f172a; 
    box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.2);
}
.lma-btn-success { background: var(--lma-success); color: #fff; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);}
.lma-btn-success:hover { background: #059669; transform: translateY(-2px); color: #fff; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); }
.lma-btn-danger { background: var(--lma-danger); color: #fff; }

/* --- Catalogue & Grille de Cartes --- */
.lma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 35px;
}
.lma-card {
    background: var(--lma-secondary);
    border-radius: var(--lma-radius);
    border: 1px solid var(--lma-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--lma-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lma-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--lma-shadow-hover);
    border-color: var(--lma-primary);
}
.lma-card-img { width: 100%; height: 200px; object-fit: cover; background: var(--lma-bg-color); border-bottom: 1px solid var(--lma-border); }
.lma-card-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; }
.lma-badges { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.lma-badge { background: rgba(212, 175, 55, 0.15); color: #fcd34d; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.lma-badge-secondary { background: var(--lma-bg-color); color: var(--lma-text-light); }

/* NOUVEAU : Forcer le titre sur 1 seule ligne avec "..." à la fin */
.lma-card-title { 
    font-size: 20px; 
    font-weight: 800; 
    margin: 0 0 10px 0; 
    line-height: 1.4; 
    color: var(--lma-text-dark); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.lma-card-author { font-size: 14px; color: var(--lma-text-light); margin-bottom: 25px; font-weight: 500; }

/* --- Système de Filtres --- */
.lma-filter-container { margin-bottom: 50px; background: var(--lma-secondary); padding: 20px; border-radius: var(--lma-radius); border: 1px solid var(--lma-border); box-shadow: var(--lma-shadow); }
.lma-filter-levels { display: flex; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
.lma-filter-btn { flex: 1; min-width: 120px; padding: 14px; background: var(--lma-bg-color); border: 1px solid var(--lma-border); color: var(--lma-text-light); font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-align: center; border-radius: var(--lma-radius-sm); font-family: inherit; }
.lma-filter-btn:hover { background: var(--lma-secondary); border-color: var(--lma-primary); color: var(--lma-text-dark); }
.lma-filter-btn.active { background: var(--lma-primary-gradient); color: #0f172a; border-color: transparent; box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.2); }
.lma-filter-selects { display: flex; gap: 12px; flex-wrap: wrap; }
.lma-filter-select { 
    flex: 1; 
    min-width: 200px; 
    padding: 14px !important; 
    background: var(--lma-bg-color) !important; 
    border: 1px solid var(--lma-border) !important; 
    color: var(--lma-text-dark) !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    cursor: pointer; 
    outline: none; 
    text-align: center; 
    border-radius: var(--lma-radius-sm); 
    box-sizing: border-box !important; 
    transition: border-color 0.3s; 
    font-family: inherit;
    height: auto !important; 
    min-height: 52px !important; 
    line-height: normal !important; 
}

/* --- Page Single Course --- */
.lma-course-layout { display: flex; gap: 40px; align-items: flex-start; }
.lma-course-main { flex: 1; }
.lma-course-sidebar { width: 380px; background: var(--lma-secondary); border-radius: var(--lma-radius); box-shadow: var(--lma-shadow); padding: 35px; position: sticky; top: 30px; border: 1px solid var(--lma-border); flex-shrink: 0; }
.lma-video-box { position: relative; padding-top: 56.25%; border-radius: var(--lma-radius); overflow: hidden; background: #020617; margin-bottom: 35px; box-shadow: var(--lma-shadow); border: 1px solid var(--lma-border); }
.lma-video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.lma-course-info { background: var(--lma-secondary); padding: 35px; border-radius: var(--lma-radius); border: 1px solid var(--lma-border); margin-bottom: 35px; }
.lma-lesson-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 25px; background: var(--lma-bg-color); border: 1px solid var(--lma-border); border-radius: var(--lma-radius-sm); margin-bottom: 12px; transition: all 0.3s; }
.lma-lesson-row:hover { border-color: var(--lma-primary); transform: translateX(5px); }
.lma-lesson-row.unlocked { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.3); }

/* CORRECTION DE L'AFFICHAGE DU PRIX POUR L'ARABE (PC ET MOBILE) */
.lma-price { 
    font-size: 42px; 
    font-weight: 900; 
    color: var(--lma-primary); 
    text-align: center; 
    margin-bottom: 25px; 
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);
    direction: ltr; /* Force LTR pour que "1 500,00 DZD" ne s'inverse pas */
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
}

.lma-course-sidebar ul li { color: var(--lma-text-light); }

/* --- Lecteur Vidéo (Player) --- */
.lma-player-wrap { display: flex; gap: 25px; background: #020617; padding: 25px; border-radius: var(--lma-radius); min-height: 85vh; border: 1px solid var(--lma-border); }
.lma-player-main { flex: 1; display: flex; flex-direction: column; }
.lma-player-sidebar { width: 340px; background: var(--lma-bg-color); border-radius: var(--lma-radius-sm); padding: 25px; display: flex; flex-direction: column; flex-shrink: 0; border: 1px solid var(--lma-border); }
.lma-playlist-item { display: block; padding: 16px; background: var(--lma-secondary); color: var(--lma-text-light); text-decoration: none; border-radius: 8px; margin-bottom: 12px; transition: 0.3s; border-left: 4px solid transparent; border: 1px solid var(--lma-border); }
.lma-playlist-item:hover { background: var(--lma-border); color: #fff; transform: translateX(4px); }
.lma-playlist-item.active { background: var(--lma-primary-gradient); color: #0f172a; border-left-color: #fff; font-weight: bold; border: none; }

/* --- Quiz --- */
.lma-quiz-container { background: var(--lma-bg-color); padding: 35px; border-radius: var(--lma-radius-sm); margin-top: 25px; border: 1px solid var(--lma-border); }
.lma-quiz-q-box { display: none; background: var(--lma-secondary); padding: 30px; border-radius: 8px; animation: fadeIn 0.4s ease; border: 1px solid var(--lma-border); }
.lma-quiz-q-box.active { display: block; }
.lma-quiz-label { display: flex; align-items: center; background: var(--lma-bg-color); color: var(--lma-text-dark); margin-bottom: 15px; cursor: pointer; padding: 18px; border-radius: 8px; border: 2px solid var(--lma-border); transition: all 0.2s; font-size: 16px; font-weight: 500; }
.lma-quiz-label:hover { border-color: var(--lma-primary); }

/* --- Tableaux de Bord (Dashboards) --- */
.lma-welcome-box { background: linear-gradient(135deg, var(--lma-secondary) 0%, var(--lma-bg-color) 100%); color: var(--lma-text-dark); padding: 45px; border-radius: var(--lma-radius); margin-bottom: 40px; border: 1px solid var(--lma-border); position: relative; overflow: hidden; }
.lma-welcome-box h2 { color: var(--lma-primary); }
.lma-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; margin-bottom: 40px; }
.lma-stat-box { background: var(--lma-secondary); padding: 30px; border-radius: var(--lma-radius); border: 1px solid var(--lma-border); box-shadow: var(--lma-shadow); transition: transform 0.3s; }
.lma-stat-box:hover { transform: translateY(-5px); border-color: var(--lma-primary); }
.lma-stat-box.highlight { background: var(--lma-primary-gradient); color: #0f172a; border: none; box-shadow: var(--lma-shadow-hover); }
.lma-stat-box.highlight h4, .lma-stat-box.highlight .lma-stat-value { color: #0f172a; }
.lma-stat-value { 
    font-size: 42px; 
    font-weight: 900; 
    margin: 15px 0 0 0; 
    direction: ltr; /* Force l'affichage LTR */
    display: inline-block; 
}

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

/* ==========================================================================
   PAGES DE CONDITIONS (CGU)
   ========================================================================== */
.lma-cgu-wrapper { max-width: 1000px; margin: 0 auto; font-family: inherit; color: var(--lma-text-light); line-height: 1.6; background: transparent; padding: 0; border: none; box-shadow: none; }
.lma-cgu-header { background: linear-gradient(135deg, var(--lma-secondary) 0%, #020617 100%); color: var(--lma-text-dark); padding: 60px 30px; border-radius: var(--lma-radius); text-align: center; margin-bottom: 50px; border: 1px solid var(--lma-border); }
.lma-cgu-header h1 { margin: 0 0 15px 0; font-size: 2.8rem; font-weight: 900; color: var(--lma-primary); }
.lma-cgu-header p { font-size: 1.15rem; opacity: 0.9; margin: 0; max-width: 650px; margin: 0 auto; }
.lma-cgu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; }
.lma-cgu-card { background: var(--lma-secondary); border: 1px solid var(--lma-border); border-radius: var(--lma-radius); padding: 35px; transition: all 0.3s ease; box-shadow: var(--lma-shadow); }
.lma-cgu-card:hover { transform: translateY(-8px); border-color: var(--lma-primary); }
.lma-cgu-icon { width: 65px; height: 65px; background: rgba(212, 175, 55, 0.1); color: var(--lma-primary); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 25px; border: 1px solid rgba(212, 175, 55, 0.2); }
.lma-cgu-card h3 { color: var(--lma-text-dark); font-size: 1.3rem; font-weight: 800; margin-top: 0; margin-bottom: 15px; }
.lma-cgu-card p { font-size: 1rem; margin: 0; color: var(--lma-text-light); }
@media (max-width: 768px) { .lma-cgu-header h1 { font-size: 2.2rem; } .lma-cgu-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   AUTHENTICATION (Connexion & Inscription)
   ========================================================================== */
.lms-auth-box { max-width: 440px; margin: 60px auto; padding: 40px; background: var(--lma-secondary); border-radius: var(--lma-radius); box-shadow: var(--lma-shadow); font-family: inherit; border: 1px solid var(--lma-border); box-sizing: border-box; }
.lms-auth-box.register-box { max-width: 500px; }
.lms-auth-box h2 { text-align: center; color: var(--lma-primary); margin-bottom: 30px; font-size: 26px; font-weight: 800; }
.lms-role-selector { display: flex; gap: 15px; margin-bottom: 25px; }
.lms-role-card { flex: 1; border: 1px solid var(--lma-border); border-radius: var(--lma-radius-sm); padding: 18px; text-align: center; cursor: pointer; transition: all 0.3s; position: relative; background: var(--lma-bg-color); color: var(--lma-text-light); }
.lms-role-card input { position: absolute; opacity: 0; }
.lms-role-card.active { border-color: var(--lma-primary); background: rgba(212, 175, 55, 0.1); color: var(--lma-primary); }
.lms-role-title { font-weight: 700; font-size: 15px; margin-top: 8px; display: block; }
.lms-form-group { margin-bottom: 22px; }

.lms-form-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--lma-text-dark); font-size: 14px; }
.lms-form-group input[type="text"], .lms-form-group input[type="email"], .lms-form-group input[type="password"], .lms-form-group textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--lma-border); background: var(--lma-bg-color); color: var(--lma-text-dark); border-radius: var(--lma-radius-sm); font-size: 15px; transition: all 0.3s; box-sizing: border-box; font-family: inherit; }
.lms-form-group input:focus, .lms-form-group textarea:focus { border-color: var(--lma-primary); outline: none; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1); }

.lms-form-group select { width: 100%; padding: 14px 16px; border: 1px solid var(--lma-border); background: var(--lma-bg-color); color: var(--lma-text-dark); border-radius: var(--lma-radius-sm); font-size: 15px; transition: all 0.3s; box-sizing: border-box; font-family: inherit; height: auto !important; min-height: 52px; line-height: normal; }
.lms-form-group select:focus { border-color: var(--lma-primary); outline: none; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1); }

.lms-auth-footer { margin-top: 25px; text-align: center; font-size: 14px; color: var(--lma-text-light); }
.lms-auth-footer a { color: var(--lma-primary); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.lms-auth-footer a:hover { color: var(--lma-primary-hover); text-decoration: underline; }
.lms-error-msg { background: rgba(239, 68, 68, 0.1); color: #fca5a5; padding: 16px; border-radius: var(--lma-radius-sm); border: 1px solid var(--lma-danger); margin-bottom: 25px; font-size: 14px; text-align: left; font-weight: 600; }

@media (max-width: 900px) {
    .lma-course-layout, .lma-player-wrap { flex-direction: column; }
    .lma-course-sidebar, .lma-player-sidebar { width: 100%; position: static; }
}

@media (max-width: 768px) {
    .lma-wrapper { padding: 15px; background: transparent; border: none; box-shadow: none; }
    
    .lma-grid { grid-template-columns: 1fr; gap: 20px; }
    .lma-filter-levels, .lma-filter-selects { flex-direction: column; }
    .lma-filter-btn, .lma-filter-select { width: 100% !important; min-width: auto !important; }
    
    .lma-video-box {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        margin-top: -15px;
        margin-bottom: 20px;
    }

    html[dir="rtl"] .lma-video-box,
    html[lang^="ar"] .lma-video-box {
        margin-left: 0 !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .lma-player-wrap { padding: 0; background: transparent; border: none; box-shadow: none; }
    .lma-course-info, .lma-course-sidebar { padding: 20px; }
    .lma-price { font-size: 32px; direction: ltr; }
    
    .lma-cgu-header { padding: 30px 15px; }
    .lma-cgu-header h1 { font-size: 2rem; }
    .lms-auth-box { padding: 25px 20px; margin: 15px auto; width: 100%; border:none; border-radius:0; box-shadow:none; background: transparent;}
    .lma-lesson-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}