/* ============================================================
   FONTS.CSS - Polices professionnelles avec support du ڭ
   ============================================================ */

/* ===== 1. IMPORT DES POLICES ===== */
/* Polices qui supportent le ڭ (Kaf avec 3 points) */
/* ============================================================
   FONTS.CSS - Polices professionnelles avec support du ڭ
   ============================================================ */

/* ===== 1. IMPORT DES POLICES ===== */
/* Polices qui supportent le ڭ (Kaf avec 3 points) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ===== 2. VARIABLES ===== */
:root {
    /* ===== POLICES FRANÇAISES ===== */
    --font-fr-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-fr-heading: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-fr-alt: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    
    /* ===== POLICES ARABES (Supportent le ڭ) ===== */
    --font-ar-primary: 'Tajawal', 'Noto Sans Arabic', 'Cairo', 'Almarai', sans-serif;
    --font-ar-heading: 'Tajawal', 'Noto Sans Arabic', 'Cairo', 'Almarai', sans-serif;
    --font-ar-alt: 'Tajawal', 'Noto Sans Arabic', 'Cairo', sans-serif;
    
    /* ===== POLICES MIXTES ===== */
    --font-primary: var(--font-fr-primary);
    --font-heading: var(--font-fr-heading);
}

/* ===== 3. APPLICATION GLOBALE ===== */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.7;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

/* ===== 4. MODE ARABE ===== */
body.rtl-mode {
    font-family: var(--font-ar-primary);
    font-weight: 400;
}

body.rtl-mode h1,
body.rtl-mode h2,
body.rtl-mode h3,
body.rtl-mode h4,
body.rtl-mode h5,
body.rtl-mode h6 {
    font-family: var(--font-ar-heading);
    font-weight: 700;
}

body.rtl-mode .logo-text {
    font-family: var(--font-ar-heading);
    font-weight: 700;
}

/* ===== 5. STYLES SPÉCIFIQUES ===== */

/* Logo - important pour le nom ڭدار */
.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
}

/* En mode arabe, le logo utilise une police qui supporte le ڭ */
body.rtl-mode .logo-text {
    font-family: 'Tajawal', 'Noto Sans Arabic', 'Cairo', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    font-size: 1.4rem;
}

/* Navigation */
.nav-list a {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

body.rtl-mode .nav-list a {
    font-family: var(--font-ar-primary);
    font-weight: 500;
    letter-spacing: 0;
}

/* Boutons */
.btn-oro,
.btn-outline,
.btn-phone {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 1px;
}

body.rtl-mode .btn-oro,
body.rtl-mode .btn-outline,
body.rtl-mode .btn-phone {
    font-family: var(--font-ar-primary);
    font-weight: 600;
    letter-spacing: 0;
}

/* Sections */
.section-tag {
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 2px;
}

body.rtl-mode .section-tag {
    font-family: var(--font-ar-primary);
    font-weight: 600;
    letter-spacing: 0;
}

.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
}

body.rtl-mode .section-title {
    font-family: var(--font-ar-heading);
    font-weight: 700;
}

/* Missions */
.mission-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
}

body.rtl-mode .mission-card h3 {
    font-family: var(--font-ar-heading);
    font-weight: 600;
}

/* Témoignages */
.temoignage-texte {
    font-family: var(--font-primary);
    font-weight: 300;
    font-style: italic;
}

body.rtl-mode .temoignage-texte {
    font-family: var(--font-ar-primary);
    font-weight: 300;
    font-style: normal;
}

/* Footer */
.footer-col h3,
.footer-col h4 {
    font-family: var(--font-heading);
    font-weight: 600;
}

body.rtl-mode .footer-col h3,
body.rtl-mode .footer-col h4 {
    font-family: var(--font-ar-heading);
    font-weight: 600;
}

/* Formulaire */
.form-group label {
    font-family: var(--font-primary);
    font-weight: 500;
}

body.rtl-mode .form-group label {
    font-family: var(--font-ar-primary);
    font-weight: 500;
}

/* ===== 6. OPTIMISATION PERFORMANCE ===== */

/* Chargement optimisé */
@media (prefers-reduced-data: reduce) {
    * {
        font-family: system-ui, -apple-system, sans-serif !important;
    }
}

/* Fallback */
@supports not (font-variation-settings: normal) {
    body {
        font-family: 'Montserrat', Arial, sans-serif;
    }
    body.rtl-mode {
        font-family: 'Tajawal', 'Cairo', sans-serif;
    }
}

/* ===== 7. TAILLES RESPONSIVE ===== */

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    
    .slide-title {
        font-size: 2.2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    body.rtl-mode .logo-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .slide-title {
        font-size: 1.8rem;
    }
    
    body.rtl-mode .logo-text {
        font-size: 1rem;
    }
}