/* ============================================================
   ثيم Xkorienta — طبقة تجاوز اختيارية
   Thème Xkorienta — couche de surcharge optionnelle

   لا يُحمَّل هذا الملف إلا إذا فعّل الأدمين الثيم من:
   لوحة التحكم ← إدارة الثيمات ← زر "ثيم Xkorienta"
   إطفاء الزر يعيد الموقع فورا إلى الثيم الكلاسيكي الأخضر.

   Ce fichier n'est chargé que si l'admin active le thème depuis
   la gestion des thèmes. Le désactiver restaure le thème vert.

   Il ne fait que redéfinir les variables de theme.css — aucune
   règle de mise en page n'est touchée.
============================================================ */
:root {
    /* --- الهوية / identité (bleu électrique Xkorienta) --- */
    --brand-1: #2b4be0;   --brand-1-rgb: 43,75,224;
    --brand-2: #3b5bed;   --brand-2-rgb: 59,91,237;
    --brand-deep: #1b2da0;
    --brand-alt: #2563eb;
    --brand-soft: #8fa6ff;
    --brand-pale: #e6ebff;
    --brand-pale-2: #eef1ff;
    --brand-pale-3: #eef2ff;

    /* --- النجاح / succès (vert Xkorienta) --- */
    --ok-1: #2ea052;      --ok-1-rgb: 46,160,82;
    --ok-2: #1f9447;
    --ok-3: #1f9447;
    --ok-4: #3ccb74;

    /* --- واجهة الإدارة / UI admin --- */
    --ui-1: #2b4be0;      --ui-1-rgb: 43,75,224;
    --ui-2: #1b2da0;

    /* --- الحياد / neutres --- */
    --ink: #0f1729;
    --text-1: #1c2547;
    --text-2: #5b6485;
    --text-3: #9aa1bd;
    --surface-1: #faf8f1;
    --surface-2: #faf8f1;
    --line-1: #dfe3f5;
    --page-tint: 250, 248, 241;
    --footer-1: #0f1729;
    --footer-2: #1a2744;

    /* --- لمسة Xkorienta / touche Xkorienta --- */
    --accent-color: #c5f135;
    --xk-lime: #c5f135;
    --xk-gold: #b07d1e;

    /* ظلال مائلة إلى الأزرق / ombres teintées bleu */
    --shadow-sm: 0 1px 3px rgba(27,45,160,0.09);
    --shadow-md: 0 4px 6px rgba(27,45,160,0.10);
    --shadow-lg: 0 10px 25px rgba(27,45,160,0.15);
    --shadow-xl: 0 20px 40px rgba(27,45,160,0.20);
}

/* روابط التذييل تأخذ لون الـ lime كما في Xkorienta
   Les liens du pied de page prennent le lime, comme sur Xkorienta */
footer a:hover {
    color: var(--xk-lime);
}

/* ============================================================
   طابع Xkorienta الكامل — قسم البطل الداكن + لمسات الـ lime
   L'identité Xkorienta complète — héros sombre + touches lime

   كل ما تحت هذا السطر لا يعمل إلا والثيم مُفعَّل، فإطفاء الزر
   يعيد المظهر الكلاسيكي بالكامل دون أي أثر.
   Tout ce qui suit ne s'applique que thème activé : le désactiver
   restaure intégralement l'apparence classique.
============================================================ */

/* --- قسم البطل: تدرّج كحلي داكن كما في Xkorienta ---
   --- Section héros : dégradé bleu nuit, comme sur Xkorienta --- */
.olfa-hero {
    background: linear-gradient(135deg, #0f1729 0%, #1a2744 40%, #2b4be0 100%) !important;
    background-attachment: fixed;
}

/* زر الدعوة الرئيسي يصبح lime بنص كحلي / CTA principal en lime, texte bleu nuit */
.olfa-hero .cta-button-primary {
    background: var(--xk-lime) !important;
    color: #16225c !important;
    box-shadow: 0 10px 30px rgba(197, 241, 53, 0.30) !important;
}

.olfa-hero .cta-button-primary:hover {
    background: #d4f95c !important;
    box-shadow: 0 14px 38px rgba(197, 241, 53, 0.42) !important;
}

/* الزر الثانوي: إطار فاتح شفاف / bouton secondaire : contour clair translucide */
.olfa-hero .cta-button-secondary {
    border-color: rgba(197, 241, 53, 0.45) !important;
}

.olfa-hero .cta-button-secondary:hover {
    border-color: var(--xk-lime) !important;
    color: var(--xk-lime) !important;
}

/* أرقام الثقة أسفل البطل بلون الـ lime / chiffres de confiance en lime */
.olfa-hero .container > div > div:last-child > div > div:first-child {
    color: var(--xk-lime) !important;
}

/* --- زر "إنشاء حساب" في الشريط العلوي: ذهبي Xkorienta ---
   --- Bouton « créer un compte » de la navbar : doré Xkorienta --- */
.nav-pill-register {
    background: linear-gradient(135deg, var(--xk-gold), #d99a26) !important;
}

/* --- الشريط العلوي فاتح، فيبقى النص الداكن مقروءا ---
   --- Navbar claire : on garde un texte foncé lisible ---
   ملاحظة: header.php يفرض خلفية كريمية بـ !important، وهذا الملف
   يُحمَّل بعده فيتجاوزها. / header.php force un fond crème en
   !important ; ce fichier étant chargé après, il reprend la main. */
.navbar {
    background: linear-gradient(135deg, #faf8f1 0%, #ffffff 100%) !important;
}

#mainNavbar .navbar-brand {
    color: var(--brand-1) !important;
}

/* ============================================================
   طبقة التصميم الكاملة / Couche de design complète
   لا تغيّر الألوان فقط، بل شكل البطاقات والأزرار والصور أيضا.
   Ne change pas que les couleurs : refond aussi cartes, boutons,
   images et espacements — et tout redevient classique si OFF.
============================================================ */

/* ---------- 0.a خلفية مسطّحة: إزالة صور الفسيفساء من الأقسام ----------
   ---------- 0.a Fond plat : on retire la mosaïque des sections ----------
   أقسام الصفحة الرئيسية تحمل صورة الفسيفساء في style مباشر (بلا !important)
   لذا نستطيع تحييدها من هنا. قسم البطل مستثنى ليحتفظ بتدرّجه الداكن.
   Les sections portent la mosaïque en style inline (sans !important) :
   on peut donc la neutraliser ici. Le héros est exclu pour garder son
   dégradé sombre. */
section[style*="url("]:not(.olfa-hero) {
    background-image: none !important;
    background-color: transparent !important;
}

/* ---------- 0. قسم البطل في أعلى الصفحة الرئيسية ----------
   ---------- 0. Section héros en haut de l'accueil ---------- */
.olfa-hero-top {
    background: linear-gradient(135deg, #0f1729 0%, #1a2744 40%, #2b4be0 100%) !important;
    border-radius: 22px;
    margin: 1.5rem auto 2.5rem;
    max-width: 1320px;
    padding: 4rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(15, 23, 41, 0.30);
}

.olfa-hero-top .olfa-hero-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* rtl.css يفرض text-align:right على كل العناوين، لذا نعيد التوسيط صراحة هنا
   rtl.css force text-align:right sur tous les titres : on recentre ici */
.olfa-hero-top h1 {
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.25;
    margin: 0 0 1rem;
    text-align: center !important;
}

.olfa-hero-top p {
    text-align: center !important;
}

.olfa-hero-top h1 .lime {
    color: var(--xk-lime);
}

.olfa-hero-top p {
    color: rgba(198, 210, 255, 0.88);
    font-size: 1.15rem;
    margin: 0 0 2rem;
}

.olfa-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.xk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2.6rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.xk-btn-lime {
    background: var(--xk-lime);
    color: #16225c;
    box-shadow: 0 10px 30px rgba(197, 241, 53, 0.30);
}

.xk-btn-lime:hover {
    background: #d4f95c;
    color: #16225c;
    transform: translateY(-2px);
}

.xk-btn-ghost {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.xk-btn-ghost:hover {
    border-color: var(--xk-lime);
    color: var(--xk-lime);
    transform: translateY(-2px);
}

/* ---------- 1. بطاقات الإحصائيات: مسطّحة ومضغوطة ----------
   ---------- 1. Cartes stats : plates et compactes ---------- */
.stats-card {
    padding: 1.6rem 1.2rem !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px rgba(27, 45, 160, 0.18) !important;
}

/* إخفاء الدوائر الزخرفية / on masque les cercles décoratifs */
.stats-card > div[style*="position: absolute"] {
    display: none !important;
}

/* الصورة الدائرية الكبيرة تصير أيقونة صغيرة
   Le grand cercle-image devient une petite icône */
.stats-card > div[style*="width: 200px"] {
    width: 74px !important;
    height: 74px !important;
    margin: 0 auto 0.9rem !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

.stats-card h3 {
    font-size: 2.8rem !important;
    margin-bottom: 0.2rem !important;
    text-shadow: none !important;
}

.stats-card .stats-card-title {
    font-size: 1.05rem !important;
    opacity: 0.9;
}

.stats-card:hover {
    transform: translateY(-4px) !important;
}

/* ---------- 2. الأزرار: مسطّحة وحديثة ----------
   ---------- 2. Boutons : plats et modernes ---------- */
.btn {
    border-radius: 12px !important;
    letter-spacing: 0.01em;
}

.btn-primary,
.btn-gradient {
    box-shadow: 0 6px 18px rgba(43, 75, 224, 0.28) !important;
}

.btn-success {
    box-shadow: 0 6px 18px rgba(46, 160, 82, 0.28) !important;
}

/* ---------- 3. البطاقات العامة ----------
   ---------- 3. Cartes génériques ---------- */
.card {
    border-radius: 18px !important;
    border: 1px solid var(--line-1) !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 34px rgba(27, 45, 160, 0.16) !important;
}

.video-card,
.course-card {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* ---------- 4. صفحة المسارات (ما يراه الطالب) ----------
   ---------- 4. Page parcours (vue élève) ---------- */
.cl-hero {
    background: linear-gradient(135deg, #0f1729 0%, #1a2744 40%, #2b4be0 100%) !important;
    border-radius: 20px !important;
    padding: 2.6rem 2rem !important;
    box-shadow: 0 14px 38px rgba(15, 23, 41, 0.28) !important;
}

.cl-hero h1 {
    color: #ffffff !important;
    text-align: center !important;
}

.cl-hero p {
    color: rgba(198, 210, 255, 0.88) !important;
    text-align: center !important;
}

.cl-hero .cl-mylevel {
    background: var(--xk-lime) !important;
    color: #16225c !important;
    box-shadow: 0 8px 22px rgba(197, 241, 53, 0.28) !important;
}

.cl-masar {
    border-radius: 18px !important;
    border: 1px solid var(--line-1) !important;
    box-shadow: 0 10px 26px rgba(27, 45, 160, 0.10) !important;
}

.cl-masar-head h2 {
    color: var(--brand-1) !important;
}

.cl-mahatta {
    background: var(--brand-pale-2) !important;
    border: 1px solid var(--line-1) !important;
    border-radius: 14px !important;
}

.cl-mahatta:hover {
    background: var(--brand-pale) !important;
    box-shadow: 0 10px 22px rgba(43, 75, 224, 0.14) !important;
}

.cl-mahatta .arrow {
    color: var(--brand-2) !important;
}

.cl-lvl-badge {
    background: var(--brand-pale-2) !important;
    color: var(--brand-1) !important;
}

.cl-lvl-badge.mine {
    background: var(--xk-lime) !important;
    color: #16225c !important;
}