/*
 * خط Louguiya — يجمع بين النسخة العربية (Louguiya) والنسخة اللاتينية/الفرنسية
 * (LouguiyaFR) تحت اسم عائلة خط واحد، بحيث يختار المتصفح تلقائياً الملف
 * المناسب حسب نوع الحرف (unicode-range) دون الحاجة لتحديد الخط في كل مكان.
 */

@font-face {
  font-family: 'Louguiya';
  src: url('../fonts/louguiya-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Louguiya';
  src: url('../fonts/louguiya-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/*
 * ملاحظة حول font-display في نسختي الخط الفرنسي (fr-regular / fr-bold) تحديداً:
 * استخدمنا "optional" بدل "swap" المستخدم في النسختين العربيتين أعلاه.
 * السبب: الخط الفرنسي وخط الاحتياط (Segoe UI/Tahoma) لهما حجم بصري مختلف
 * بنفس font-size، فحين يُستبدل الاحتياطي بالخط الفرنسي بعد اكتمال تحميله
 * (وهو ما يفعله swap) يظهر النص وكأنه "يكبر فجأة" أمام المستخدم — وهذا
 * يصير ملحوظاً تحديداً بعد مسح الكوكيز/ذاكرة التخزين المؤقت للخط، حين
 * يُعاد تحميل ملف الخط من الخادم فيَظهر الاحتياطي أولاً لفترة قصيرة.
 * "optional" يمنع هذه القفزة المرئية: يعطي المتصفح مهلة قصيرة جداً
 * (~100ms) لتحميل الخط، فإن لم يكتمل ضمنها يستخدم الاحتياطي مباشرة بلا
 * أي استبدال لاحق لبقية تلك الزيارة (ويُحمَّل الخط الفرنسي بصمت في الخلفية
 * ليصبح جاهزاً/مخزَّناً في الزيارات التالية دون أي وميض).
 */
@font-face {
  font-family: 'Louguiya';
  src: url('../fonts/louguiya-fr-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-024F, U+0300-036F;
}

@font-face {
  font-family: 'Louguiya';
  src: url('../fonts/louguiya-fr-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-024F, U+0300-036F;
}

/*
 * تصغير طفيف لحجم الخط عند عرض الموقع بالفرنسية (html[lang="fr"]).
 * السبب: حروف نسخة الخط الفرنسية (Latin) لها ارتفاع بصري أكبر من الحروف
 * العربية بنفس مقاس الخط (font-size)، فتبدو أكبر عند المقارنة. هذه القاعدة
 * عامة على كل الصفحات (fonts.css محمّل في جميع الصفحات) ولا تؤثر على النسخة
 * العربية، كما أنها لا تتعارض مع أي font-size مخصص موضوع على عناصر بعينها
 * لأنها تُعرّف على مستوى body فقط وتُورَث نسبياً (em/rem تبقى كما هي إن
 * استُخدمت، بينما القيم المطلقة الموروثة من body تتقلص تلقائياً).
 */
html[lang="fr"] body {
  font-size: 0.92em;
}