/* ============================================================
   MADRASATI — Système de design islamique (global)
   Police : Amiri (arabe + latin classique)
   Palette : vert #1b4332 · doré #b8963e · ivoire #faf7f0
   ============================================================ */

/* ── Polices ─────────────────────────────────────────────────
   Noto Naskh Arabic : police arabe moderne, claire, très lisible à toutes tailles.
   Amiri : conservée pour les titres et éléments décoratifs (Quran, headers).
   ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Amiri+Quran&display=swap');


/* ── Variables globales ───────────────────────────────────── */
:root {
  /* Couleurs */
  --vert:          #1b4332;
  --vert-fonce:    #0d2b1f;
  --vert-moyen:    #2d6a4f;
  --vert-clair:    #40916c;
  --vert-pale:     #d8f3dc;
  --or:            #b8963e;   /* doré mat, plus noble que jaune vif */
  --or-vif:        #c9a227;
  --or-clair:      #f0e6c0;
  --or-sombre:     #8a6d1a;
  --ivoire:        #faf7f0;   /* blanc chaud, papyrus */
  --ivoire-sombre: #f0ead8;
  --blanc:         #ffffff;
  --fond:          #f5f3ee;   /* fond légèrement chaud */
  --fond-alt:      #eceae3;
  --texte:         #1a1a1a;
  --texte-doux:    #5a5a5a;
  --texte-leger:   #9a9a9a;
  --bordure:       #d8d3c8;
  --bordure-or:    #d4b87a;
  --erreur:        #b91c1c;
  --erreur-fond:   #fef2f2;
  --succes:        #15803d;
  --succes-fond:   #f0fdf4;
  --avert:         #b45309;
  --avert-fond:    #fffbeb;

  /* Ombres */
  --ombre-sm:  0 1px 6px  rgba(27,67,50,.08);
  --ombre:     0 3px 16px rgba(27,67,50,.10);
  --ombre-md:  0 6px 24px rgba(27,67,50,.13);
  --ombre-lg:  0 12px 40px rgba(27,67,50,.16);

  /* Rayons */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;

  /* Transition */
  --trans: .2s ease;

  /* Polices */
  --font-latin:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
}

/* ════════════════════════════════════════════════════════════
   MOTIFS GÉOMÉTRIQUES ISLAMIQUES (backgrounds utilitaires)
   ════════════════════════════════════════════════════════════ */

/* Treillis diagonal — fond clair */
.geo-bg {
  background-color: var(--fond);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 34px,
      rgba(27,67,50,.042) 34px, rgba(27,67,50,.042) 35px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 34px,
      rgba(27,67,50,.042) 34px, rgba(27,67,50,.042) 35px
    );
}

/* Treillis doré — pour sections foncées (hero, topbar) */
.geo-bg-dark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Crect x='21' y='21' width='28' height='28' fill='none' stroke='%23b8963e' stroke-width='0.6' opacity='0.12'/%3E%3Crect x='21' y='21' width='28' height='28' fill='none' stroke='%23b8963e' stroke-width='0.6' opacity='0.12' transform='rotate(45 35 35)'/%3E%3Ccircle cx='35' cy='35' r='3.5' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.14'/%3E%3Ccircle cx='0' cy='0' r='3.5' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='70' cy='0' r='3.5' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='0' cy='70' r='3.5' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='70' cy='70' r='3.5' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════
   LOGO ISLAMIQUE — SVG réutilisable (rosette géométrique)
   ════════════════════════════════════════════════════════════ */

/*
  Usage HTML :
  <svg class="logo-emblem" viewBox="0 0 64 64" …>
    <use href="#islamic-rosette"/>
  </svg>

  Définir le <defs> une fois en haut de chaque page :
  voir snippet ci-dessous dans les commentaires PHP.
*/

/* ════════════════════════════════════════════════════════════
   SÉPARATEURS ORNEMENTAUX
   ════════════════════════════════════════════════════════════ */

.ornament-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0;
  user-select: none;
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--bordure-or) 30%,
    var(--or) 50%,
    var(--bordure-or) 70%,
    transparent
  );
}

.ornament-divider::before { background: linear-gradient(to left,  transparent, var(--bordure-or) 30%, var(--or) 50%, var(--bordure-or) 70%, transparent); }
.ornament-divider::after  { background: linear-gradient(to right, transparent, var(--bordure-or) 30%, var(--or) 50%, var(--bordure-or) 70%, transparent); }

.ornament-divider .gem {
  color: var(--or);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Séparateur de section plus fin */
.ornament-divider-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  color: var(--or);
  font-size: 12px;
  opacity: .65;
}

.ornament-divider-sm::before,
.ornament-divider-sm::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordure-or);
  opacity: .5;
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHIE ARABE
   ════════════════════════════════════════════════════════════ */

/* Texte arabe standard */
.ar {
  font-family: var(--font-arabic);
  font-size: 1.15em;
  line-height: 2;
  font-weight: 500;
}


/* Grand titre arabe (nom de la plateforme, titres de niveau) */
.ar-title {
  font-family: var(--font-arabic);
  font-size: 1.8rem;
  font-weight: 700;
  direction: rtl;
  line-height: 1.5;
  color: var(--vert);
}

/* Affichage décoratif (calligraphie) */
.ar-display {
  font-family: var(--font-arabic);
  font-size: 2.4rem;
  font-weight: 700;
  direction: rtl;
  line-height: 1.6;
  color: var(--or);
  text-shadow: 0 1px 3px rgba(184,150,62,.3);
}

/* Bloc Basmala / citation coranique */
.basmala {
  font-family: var(--font-arabic);
  font-size: 1.5rem;
  color: var(--vert);
  text-align: center;
  direction: rtl;
  line-height: 2;
  padding: 12px;
  position: relative;
}

.basmala::before,
.basmala::after {
  content: '❧';
  color: var(--or);
  opacity: .6;
  font-size: .7em;
  margin: 0 8px;
}

/* Texte de cours — arabe avec taille confortable */
.ar-content {
  font-family: var(--font-arabic);
  font-size: 1.25rem;
  line-height: 2.2;
  direction: rtl;
  color: var(--texte);
  letter-spacing: .01em;
}

/* ════════════════════════════════════════════════════════════
   ORNEMENT COIN — décoration géométrique de carte
   ════════════════════════════════════════════════════════════ */

/* Ajouter à un parent position:relative */
.corner-ornament {
  position: relative;
  overflow: hidden;
}

.corner-ornament::before,
.corner-ornament::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='6' width='36' height='36' fill='none' stroke='%23b8963e' stroke-width='1.2'/%3E%3Crect x='6' y='6' width='36' height='36' fill='none' stroke='%23b8963e' stroke-width='1.2' transform='rotate(45 24 24)'/%3E%3Ccircle cx='24' cy='24' r='6' fill='none' stroke='%23b8963e' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
}

.corner-ornament::before { top: -8px; left: -8px; }
.corner-ornament::after  { bottom: -8px; right: -8px; transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════
   BADGE / ORNEMENT ÉTOILE ISLAMIQUE (8 branches)
   ════════════════════════════════════════════════════════════ */

.star-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   ALERTES
   ════════════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  animation: alertSlide .25s ease;
}

@keyframes alertSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert svg { flex-shrink: 0; margin-top: 1px; }

.alert--succes   { background: var(--succes-fond); color: #14532d; border: 1px solid #bbf7d0; }
.alert--erreur   { background: var(--erreur-fond); color: #7f1d1d; border: 1px solid #fecaca; }
.alert--info     { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.alert--avertissement { background: var(--avert-fond); color: #78350f; border: 1px solid #fde68a; }

/* ════════════════════════════════════════════════════════════
   UTILITAIRES
   ════════════════════════════════════════════════════════════ */

.text-or    { color: var(--or); }
.text-vert  { color: var(--vert); }
.text-doux  { color: var(--texte-doux); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   TOPBAR GLOBAL — partagé par toutes les pages
   ════════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: 64px;
  background: var(--vert);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Crect x='21' y='21' width='28' height='28' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.10'/%3E%3Crect x='21' y='21' width='28' height='28' fill='none' stroke='%23b8963e' stroke-width='0.5' opacity='0.10' transform='rotate(45 35 35)'/%3E%3C/svg%3E");
  border-bottom: 1px solid rgba(184,150,62,.35);
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
}
.topbar-inner {
  display: flex; align-items: center; gap: 14px;
  height: 100%; padding: 0 20px;
}
.topbar-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; text-decoration: none;
}
.topbar-logo-emblem { width: 36px; height: 36px; }
.topbar-logo-ar  { font-family: var(--font-arabic); font-size: 17px; font-weight: 700; color: var(--or); direction: rtl; }
.topbar-logo-fr  { font-size: 9px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; }
.topbar-nav {
  display: flex; align-items: center; gap: 2px;
}
.topbar-right {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
}
.topbar-link {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.topbar-link:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.topbar-deconnexion { color: rgba(255,255,255,.5); }
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--or); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(184,150,62,.18);
  font-family: var(--font-arabic); font-size: 15px; font-weight: 700;
  color: var(--or); line-height: 1;
}

/* ══ Footer commun (cours, profil, tickets, paiement, ...) ════ */
.cours-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: .8rem;
  color: var(--texte-leger);
  border-top: 1px solid var(--bordure);
  background: var(--blanc);
  margin-top: 20px;
}

/* ══ Footer : liens légaux ══════════════════════════════════════ */
.cours-footer-links {
  margin-top: 6px;
  font-size: .72rem;
  color: var(--texte-leger, #999);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.cours-footer-links a {
  color: var(--texte-doux, #666);
  text-decoration: none;
  transition: color .15s ease;
}
.cours-footer-links a:hover {
  color: var(--or);
  text-decoration: underline;
}
.cours-footer-links span {
  color: var(--bordure, #ddd);
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS (v2026.04)
   Tous ces effets respectent prefers-reduced-motion.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Fade-in progressif au chargement ─────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);   }
}

main > section,
main > .profil-sections > section,
main > .admin-page,
main > div[class*="hero"],
main > div[class*="grid"] {
  animation: fadeInUp .45s cubic-bezier(.22, .9, .3, 1) both;
}
main > *:nth-child(1) { animation-delay: 0s;    }
main > *:nth-child(2) { animation-delay: .07s;  }
main > *:nth-child(3) { animation-delay: .14s;  }
main > *:nth-child(4) { animation-delay: .21s;  }
main > *:nth-child(5) { animation-delay: .28s;  }
main > *:nth-child(n+6) { animation-delay: .32s; }

/* ── 2. Hover sur cards : translation + ombre renforcée ──── */
.lecon-item,
.lc-card,
.lc-bulle,
.lc-quiz-card,
.attestation-card,
.paiement-ligne,
.vitrine-card,
.programme-card {
  transition:
    transform .22s cubic-bezier(.22, .9, .3, 1),
    box-shadow .22s ease,
    border-color .18s ease;
  will-change: transform;
}

.lecon-item:not(.lecon-item--bloquee):hover,
.lc-card:hover,
.lc-bulle:hover,
.lc-quiz-card:hover,
.attestation-card:hover,
.paiement-ligne:hover,
.vitrine-card:hover,
.programme-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 22px -10px rgba(27, 67, 50, .18),
    0 4px 10px -4px rgba(184, 150, 62, .14);
}

/* ── 3. Topbar "glass" : blur + bordure discrète au scroll ── */
.topbar {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: background-color .2s ease, box-shadow .25s ease, height .2s ease;
}
.topbar.scrolled {
  background: rgba(27, 67, 50, .88);
  box-shadow: 0 2px 14px -4px rgba(0, 0, 0, .35);
  border-bottom: 1px solid rgba(184, 150, 62, .24);
}

/* ── 4. Flash messages : fade-out après 4s (via JS) ──────── */
.alert {
  transition: opacity .35s ease, transform .35s ease, max-height .4s ease,
              padding .35s ease, margin .35s ease, border-width .35s ease;
  overflow: hidden;
}
.alert--dismissed {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}

/* ── 5. Boutons : état de chargement avec spinner ────────── */
button.is-loading,
.btn-primary.is-loading,
.btn-secondary.is-loading,
a.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  cursor: progress;
}
button.is-loading::after,
.btn-primary.is-loading::after,
.btn-secondary.is-loading::after,
a.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: inherit;
  animation: btnSpin .7s linear infinite;
  opacity: .9;
}
/* Les btn primary ont un fond doré/vert — forcer spinner visible en blanc */
.btn-primary.is-loading::after { border-color: #fff; border-top-color: transparent; }

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* ── 6. Banner cookies ──────────────────────────────────────── */
#cookie-banner {
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 9999;
  background: rgba(27, 67, 50, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(184, 150, 62, .3);
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4);
  padding: 14px 18px;
  animation: fadeInUp .45s cubic-bezier(.22, .9, .3, 1) .3s both;
}
#cookie-banner.cookie-banner--hidden {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 260px;
  font-size: .82rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, .92);
}
.cookie-banner-text a {
  color: var(--or, #b8963e);
  text-decoration: underline;
}
.cookie-banner-text a:hover { color: #fff; }
.cookie-banner-btn {
  flex-shrink: 0;
  background: var(--or, #b8963e);
  color: #1b4332;
  border: none;
  padding: 9px 20px;
  border-radius: 7px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cookie-banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(184, 150, 62, .35);
}
@media (max-width: 560px) {
  #cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .cookie-banner-btn { width: 100%; }
}

/* ── 7. Accessibilité : désactiver les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  main > section,
  main > *,
  .lecon-item, .lc-card, .lc-bulle, .lc-quiz-card,
  .attestation-card, .paiement-ligne,
  .vitrine-card, .programme-card,
  .topbar, .alert {
    animation: none !important;
    transition: none !important;
  }
  .lecon-item:hover, .lc-card:hover, .lc-bulle:hover,
  .lc-quiz-card:hover, .attestation-card:hover,
  .paiement-ligne:hover, .vitrine-card:hover, .programme-card:hover {
    transform: none;
  }
}

/* ── Taille du texte arabe réglable par l'élève ──────────────────
   La variable --ar-size / --ar-lh est pilotée par global.js
   (préférence mémorisée, réglée depuis le profil). S'applique
   aux surfaces de lecture arabe : leçons + dictionnaire. */
.lecon-texte-arabe,
.ar-content,
.dict-mot-arabe {
  font-size: var(--ar-size, 1.5rem) !important;
  line-height: var(--ar-lh, 1.9) !important;
}

/* ── Mode sombre (activé par l'élève, piloté par global.js) ──────
   On inverse les variables de couleur ; la plupart des composants
   suivent automatiquement. Quelques zones "en dur" seront affinées. */
:root[data-theme="dark"] {
  --fond:          #0f1712;
  --fond-alt:      #15201a;
  --ivoire:        #1a2620;
  --ivoire-sombre: #22302a;
  --blanc:         #1c2823;   /* fond des cartes → sombre */
  --texte:         #eae7df;
  --texte-doux:    #b6b3ab;
  --texte-leger:   #8b887f;
  --bordure:       #2e3a33;
  --bordure-or:    #6b5a34;
  --vert-pale:     #16241c;
  --or-clair:      #3a3316;
  --erreur-fond:   #2a1414;
  --succes-fond:   #102419;
  --avert-fond:    #2a2210;
  --ombre-sm: 0 1px 6px  rgba(0,0,0,.4);
  --ombre:    0 3px 16px rgba(0,0,0,.45);
  --ombre-md: 0 6px 24px rgba(0,0,0,.5);
  --ombre-lg: 0 12px 40px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body { background: var(--fond); color: var(--texte); }
/* Boutons colorés : garder le texte clair même si --blanc est devenu sombre */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-continuer,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .topbar-btn-support { color: #fff !important; }
/* Champs de formulaire lisibles en sombre */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #14201a; color: var(--texte); border-color: var(--bordure);
}
/* Images/vidéos : léger adoucissement de la luminosité le soir */
:root[data-theme="dark"] .video-container { background: #000; }