/*
 * ============================================================
 *  JISR.MEDIA — Core CSS
 *  Variables · Reset · Typographie · Utilitaires
 *  Version 1.0 · 2026
 * ============================================================
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Amiri:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */
:root {

  /* Couleurs principales */
  --jisr-navy:       #0B1F3A;   /* Fond principal */
  --jisr-navy-dark:  #040c18;   /* Fond topbar / footer */
  --jisr-navy-mid:   #0F2847;   /* Variante header */
  --jisr-card:       #0D2240;   /* Fond cartes */
  --jisr-card-dark:  #0a1e35;   /* Fond cartes sombres */
  --jisr-border:     #1C2F45;   /* Bordures et séparateurs */

  /* Or — couleur signature */
  --jisr-gold:       #C9A84C;
  --jisr-gold-light: #E8C85A;
  --jisr-gold-dark:  #9A6E1A;

  /* Textes — accessibles, lisibles à tout âge */
  --jisr-text-1:     #EDF3FA;   /* Titres, texte principal */
  --jisr-text-2:     #C8DCEE;   /* Corps de texte, excerpts */
  --jisr-text-3:     #A0BDD0;   /* Méta, dates, labels */
  --jisr-text-4:     #5C7A95;   /* Placeholders, désactivé */
  --jisr-white:      #FFFFFF;

  /* Breaking news */
  --jisr-break-red:  #C0392B;
  --jisr-break-gold: #7D6008;
  --jisr-break-blue: #1A5276;

  /* Sports */
  --jisr-sport:      #E8C85A;

  /* Typographies */
  --font-latin:   'Inter', system-ui, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-arabic:  'Amiri', 'Traditional Arabic', serif;

  /* Tailles de texte */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   25px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  50px;

  /* Espacement */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Rayons */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Ombres */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);

  /* Largeurs max */
  --max-width:      1280px;
  --content-width:  900px;
  --sidebar-width:  290px;

  /* Grille pub */
  --ad-leaderboard-h: 90px;
  --ad-rectangle-h:   250px;
}

/* ============================================================
   2. RESET UNIVERSEL
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  background: var(--jisr-navy);
  color: var(--jisr-text-1);
  font-family: var(--font-latin);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Direction RTL pour l'arabe */
body[dir="rtl"] {
  font-family: var(--font-arabic);
  font-size: 20px;
  line-height: 1.9;
}

img, video, iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol { list-style: none; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

/* Titres latin */
.jisr-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--jisr-white);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.jisr-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--jisr-text-1);
  line-height: 1.28;
}

.jisr-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--jisr-text-1);
  line-height: 1.35;
}

.jisr-h4 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--jisr-text-1);
  line-height: 1.4;
}

/* Titres arabe */
[dir="rtl"] .jisr-h1,
[dir="rtl"] .jisr-h2,
[dir="rtl"] .jisr-h3,
[dir="rtl"] .jisr-h4 {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}

/* Corps de texte */
.jisr-body {
  font-size: var(--text-base);
  color: var(--jisr-text-2);
  line-height: 1.7;
}

.jisr-body-sm {
  font-size: var(--text-sm);
  color: var(--jisr-text-2);
  line-height: 1.65;
}

.jisr-meta {
  font-size: var(--text-xs);
  color: var(--jisr-text-3);
  letter-spacing: 0.05em;
}

/* Labels / badges */
.jisr-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jisr-gold);
}

[dir="rtl"] .jisr-label {
  letter-spacing: 0.05em;
  font-family: var(--font-arabic);
}

/* ============================================================
   4. COULEURS UTILITAIRES
   ============================================================ */
.text-gold    { color: var(--jisr-gold); }
.text-gold-l  { color: var(--jisr-gold-light); }
.text-white   { color: var(--jisr-white); }
.text-1       { color: var(--jisr-text-1); }
.text-2       { color: var(--jisr-text-2); }
.text-3       { color: var(--jisr-text-3); }
.text-sport   { color: var(--jisr-sport); }

.bg-navy      { background: var(--jisr-navy); }
.bg-card      { background: var(--jisr-card); }
.bg-card-dark { background: var(--jisr-card-dark); }
.bg-dark      { background: var(--jisr-navy-dark); }
.bg-gold      { background: var(--jisr-gold); }
.bg-border    { background: var(--jisr-border); }

/* ============================================================
   5. SÉPARATEURS DORÉS
   ============================================================ */
.jisr-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);
  border: none;
  margin: var(--space-4) 0;
}

.jisr-sep-v {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.4), transparent);
}

.jisr-sep-left {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0.4), transparent);
}

[dir="rtl"] .jisr-sep-left {
  background: linear-gradient(270deg, rgba(201,168,76,0.4), transparent);
}

/* ============================================================
   6. BOUTONS
   ============================================================ */
.jisr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  font-family: var(--font-latin);
}

.jisr-btn-gold {
  background: var(--jisr-gold);
  color: var(--jisr-navy);
}
.jisr-btn-gold:hover { background: var(--jisr-gold-light); }

.jisr-btn-outline {
  background: transparent;
  color: var(--jisr-gold);
  border: 1px solid var(--jisr-gold);
}
.jisr-btn-outline:hover {
  background: rgba(201,168,76,0.1);
}

.jisr-btn-ghost {
  background: var(--jisr-border);
  color: var(--jisr-text-2);
  border-radius: var(--radius-full);
  padding: 6px 16px;
}
.jisr-btn-ghost:hover { color: var(--jisr-white); border-color: var(--jisr-gold); }

[dir="rtl"] .jisr-btn {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* Read more link */
.jisr-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jisr-gold);
  transition: gap var(--transition-fast);
}
.jisr-read-more:hover { gap: var(--space-3); }

[dir="rtl"] .jisr-read-more {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* ============================================================
   7. BADGES & TAGS
   ============================================================ */
.jisr-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.jisr-badge-live {
  background: #C0392B;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jisr-badge-video {
  background: rgba(201,168,76,0.9);
  color: var(--jisr-navy);
}

.jisr-badge-soon {
  background: rgba(201,168,76,0.15);
  color: var(--jisr-gold);
}

/* Point animé live */
.jisr-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: jisr-pulse 1.2s infinite;
}

@keyframes jisr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.8); }
}

/* ============================================================
   8. SWITCH DE LANGUE
   ============================================================ */
.jisr-lang-switch {
  display: flex;
  gap: 2px;
  border: 1px solid rgba(201,168,76,0.25);
  padding: 2px;
}

.jisr-lang-switch a {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jisr-text-3);
  transition: all var(--transition-fast);
  font-family: var(--font-latin);
}

.jisr-lang-switch a.active {
  background: var(--jisr-gold);
  color: var(--jisr-navy);
}

.jisr-lang-switch a:hover:not(.active) {
  color: var(--jisr-gold);
}

/* ============================================================
   9. FORMULAIRES
   ============================================================ */
.jisr-input {
  width: 100%;
  background: var(--jisr-border);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--jisr-white);
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-family: var(--font-latin);
  outline: none;
  transition: border-color var(--transition-fast);
}

.jisr-input:focus {
  border-color: var(--jisr-gold);
}

.jisr-input::placeholder {
  color: var(--jisr-text-4);
}

[dir="rtl"] .jisr-input {
  font-family: var(--font-arabic);
  font-size: var(--text-md);
  text-align: right;
}

/* ============================================================
   10. ANIMATIONS GLOBALES
   ============================================================ */
@keyframes jisr-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jisr-slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes jisr-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[dir="rtl"] @keyframes jisr-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.jisr-animate-fade { animation: jisr-fadeIn 0.5s ease both; }
.jisr-animate-slide { animation: jisr-slideDown 0.4s ease both; }

/* ============================================================
   11. RESPONSIVE BREAKPOINTS
   ============================================================ */
/* Mobile  : < 600px  */
/* Tablette: < 900px  */
/* Desktop : > 900px  */

@media (max-width: 900px) {
  :root {
    --sidebar-width: 100%;
  }
  .jisr-h1 { font-size: var(--text-2xl); }
  .jisr-h2 { font-size: var(--text-xl); }
}

@media (max-width: 600px) {
  :root {
    --space-8: 20px;
    --space-12: 28px;
  }
  .jisr-h1 { font-size: var(--text-xl); }
  .jisr-h2 { font-size: var(--text-lg); }
  .jisr-h3 { font-size: var(--text-base); }
}

/* ============================================================
   12. ZONE CONTENU CLAIR — Option 3
   ============================================================ */
.jisr-light-zone {
  background: #F5F0E8;
}

/* Inputs dans la zone claire */
.jisr-light-zone .jisr-input {
  background: #EDE8DF;
  color: #1C2333;
  border-color: rgba(201,168,76,0.35);
}
.jisr-light-zone .jisr-input::placeholder { color: #8A9AAA; }
.jisr-light-zone .jisr-input:focus { border-color: var(--jisr-gold); }

/* Bouton outline dans zone claire */
.jisr-light-zone .jisr-btn-outline {
  color: var(--jisr-gold-dark);
  border-color: var(--jisr-gold-dark);
}

/* ============================================================
   13. ACCESSIBILITÉ
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--jisr-gold);
  outline-offset: 2px;
}

/* Taille minimale tactile */
button, a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Contraste renforcé pour les personnes âgées */
@media (prefers-contrast: high) {
  :root {
    --jisr-text-2: #D0E4F4;
    --jisr-text-3: #A8C4DA;
  }
}

/* Réduction mouvement si besoin */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}