/* ============================================================
   AL AMINE ACADEMY — Brand Override Layer
   Charte Graphique v1.0 — Avril 2026
   Appliqué par-dessus Tailwind. Pas de !important sauf nécessaire.
   ============================================================ */

:root {
  --bleu-royal: #1E7A9A;
  --bleu-nuit: #0A1F3D;
  --or-sacre: #F4C640;
  --bleu-celeste: #7BC4D9;
  --creme-sacre: #F5E6C8;
  --or-doux: #E8B547;
  --ivoire: #FAF7F0;
  --gris-brume: #E5E7EB;
  --gris-plomb: #64748B;
  --anthracite: #1E293B;
  --encre: #0F172A;
  --rouge-direct: #E63946;
  --vert-benediction: #16A34A;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-brand: 'Montserrat', sans-serif;
  --font-ui: 'Montserrat', sans-serif;
  --font-arabic: 'Amiri', serif;
}

/* ── GLOBAL BODY ── */
body {
  font-family: var(--font-ui) !important;
  background-color: var(--ivoire) !important;
}
.dark body {
  background-color: var(--encre) !important;
}

/* ── REMAP EMERALD → BLEU ROYAL ── */
.bg-emerald-50 { background-color: #e8f4f8 !important; }
.bg-emerald-100 { background-color: #d1eaf2 !important; }
.bg-emerald-200 { background-color: #a3d5e5 !important; }
.bg-emerald-300 { background-color: var(--bleu-celeste) !important; }
.bg-emerald-400 { background-color: #4dadc5 !important; }
.bg-emerald-500 { background-color: var(--bleu-royal) !important; }
.bg-emerald-600 { background-color: var(--bleu-royal) !important; }
.bg-emerald-700 { background-color: #166380 !important; }
.bg-emerald-800 { background-color: #0e4d66 !important; }
.bg-emerald-900 { background-color: var(--bleu-nuit) !important; }

.text-emerald-50 { color: #e8f4f8 !important; }
.text-emerald-100 { color: #d1eaf2 !important; }
.text-emerald-200 { color: #a3d5e5 !important; }
.text-emerald-300 { color: var(--bleu-celeste) !important; }
.text-emerald-400 { color: #4dadc5 !important; }
.text-emerald-500 { color: var(--bleu-royal) !important; }
.text-emerald-600 { color: var(--bleu-royal) !important; }
.text-emerald-700 { color: #166380 !important; }
.text-emerald-800 { color: #0e4d66 !important; }
.text-emerald-900 { color: var(--bleu-nuit) !important; }

.border-emerald-500,
.border-emerald-600 { border-color: var(--bleu-royal) !important; }
.border-emerald-700,
.border-emerald-800 { border-color: var(--bleu-nuit) !important; }

.from-emerald-900 { --tw-gradient-from: var(--bleu-nuit) !important; }
.from-emerald-800 { --tw-gradient-from: #0e4d66 !important; }
.via-emerald-800 { --tw-gradient-via: var(--bleu-royal) !important; }
.to-emerald-700 { --tw-gradient-to: #166380 !important; }

.ring-emerald-500 { --tw-ring-color: var(--bleu-royal) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: var(--bleu-royal) !important; }

.hover\:bg-emerald-50:hover { background-color: #e8f4f8 !important; }
.hover\:bg-emerald-700:hover { background-color: #166380 !important; }

/* ── DARK MODE REMAP ── */
.dark .dark\:bg-emerald-900 { background-color: var(--bleu-nuit) !important; }
.dark .dark\:bg-emerald-800 { background-color: #0e4d66 !important; }
.dark .dark\:text-emerald-400 { color: var(--bleu-celeste) !important; }
.dark .dark\:text-emerald-300 { color: var(--bleu-celeste) !important; }
.dark .dark\:bg-gray-900 { background-color: var(--encre) !important; }
.dark .dark\:bg-gray-800 { background-color: var(--anthracite) !important; }
.dark .dark\:bg-gray-700 { background-color: #243044 !important; }

/* ── REMAP YELLOW → OR SACRÉ ── */
.text-yellow-400 { color: var(--or-sacre) !important; }
.text-yellow-500 { color: var(--or-doux) !important; }
.bg-yellow-400 { background-color: var(--or-sacre) !important; }
.bg-yellow-100 { background-color: var(--creme-sacre) !important; }

/* ── WARM NEUTRALS ── */
.bg-gray-50 { background-color: var(--ivoire) !important; }
.bg-white { background-color: #fff !important; }
.dark .bg-gray-50 { background-color: var(--anthracite) !important; }

/* ── TYPOGRAPHY ── */
h1, h2, .text-4xl, .text-5xl, .text-3xl {
  font-family: var(--font-brand) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

h3, .text-xl, .text-2xl {
  font-family: var(--font-brand) !important;
  font-weight: 600 !important;
}

.text-lg, .text-base, .text-sm, p {
  font-family: var(--font-ui);
}

/* ── NAV BRANDING ── */
nav {
  font-family: var(--font-brand) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
}
nav.scrolled,
nav.bg-white {
  background-color: rgba(255, 255, 255, 0.98) !important;
}
.dark nav {
  background-color: rgba(15, 23, 42, 0.95) !important;
}

/* Nav brand name */
nav span.text-xl,
nav span.text-lg,
nav .font-bold {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Nav links */
nav a {
  font-family: var(--font-brand) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500 !important;
}

/* CTA bouton inscription nav */
nav a[href="admission.html"] {
  background-color: var(--bleu-royal) !important;
  font-family: var(--font-brand) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}
nav a[href="admission.html"]:hover {
  background-color: #166380 !important;
}

/* ── HERO SECTIONS ── */
section.relative.min-h-\[60vh\],
section.relative.min-h-\[100svh\],
section[class*="min-h-"] {
  font-family: var(--font-brand);
}

/* Hero H1 */
section h1 {
  font-family: var(--font-brand) !important;
  font-weight: 500 !important;
  font-style: normal;
  letter-spacing: -0.02em;
}

/* Hero subtitle */
section h1 + p,
section h1 ~ p.text-xl,
section h1 ~ p.text-lg {
  font-family: var(--font-brand) !important;
  font-style: italic;
  font-weight: 400 !important;
}

/* ── SECTION HEADERS ── */
section > div > h2 {
  font-family: var(--font-brand) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Section subtitles */
section > div > h2 + p {
  font-family: var(--font-ui);
  color: var(--gris-plomb);
}

/* ── CARDS ── */

/* Card headings */
.rounded-2xl h3,
.shadow-md h3 {
  font-family: var(--font-brand) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem !important;
}

/* ── CTA BUTTONS ── */
a.inline-flex,
a.inline-block,
a[href*="admission"],

/* Primary CTA */
a.bg-emerald-600,
a.bg-emerald-500,
.bg-emerald-600 {
  background-color: var(--bleu-royal) !important;
}
a.bg-emerald-600:hover,
.bg-emerald-600:hover {
  background-color: #166380 !important;
}

/* White CTA on dark bg */
a.bg-white.text-emerald-800,
a.bg-white.text-emerald-700 {
  color: var(--bleu-nuit) !important;
  border: 2px solid var(--or-sacre) !important;
}

/* ── ACCENT: OR SACRÉ ── */
.text-emerald-600.font-bold,
section .font-bold.text-emerald-600 {
  color: var(--or-doux) !important;
}

/* Eyebrow / category labels */
.text-xs.text-emerald-600,
.text-sm.text-emerald-600,
.uppercase.text-emerald-600 {
  color: var(--bleu-royal) !important;
  font-family: var(--font-brand) !important;
  letter-spacing: 0.2em;
}

/* ── AVATARS TÉMOIGNAGES ── */
.w-10.h-10.rounded-full.bg-emerald-600,

/* ── FOOTER ── */
footer {
  background-color: var(--encre) !important;
  font-family: var(--font-ui);
  border-top: 1px solid rgba(244, 198, 64, 0.2);
}
footer h3, footer h4 {
  font-family: var(--font-brand) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem !important;
  color: var(--or-sacre) !important;
}
footer a {
  font-family: var(--font-ui);
}

/* ── ICONS (FA) ACCENT ── */
.fa-kaaba,
.fa-star,
.fa-mosque {
  color: var(--or-sacre) !important;
}

/* ── WHATSAPP FLOATING BUTTON ── */
a[href*="wa.me"].fixed,

/* ── SCROLL INDICATOR ── */
.scroll-indicator,
[class*="animate-bounce"] {
  color: var(--or-sacre) !important;
}

/* ── SCHEDULE ACCORDION ── */
.schedule-period summary {
  font-family: var(--font-brand) !important;
}

/* ── FORM (ADMISSION) ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--bleu-royal) !important;
  box-shadow: 0 0 0 2px rgba(30, 122, 154, 0.15) !important;
}
label {
  font-family: var(--font-brand) !important;
  letter-spacing: 0.05em;
}

/* ── ARABIC TEXT ── */
[lang="ar"],
.arabic,
[dir="rtl"] {
  font-family: var(--font-arabic) !important;
}

/* ── UTILITY: OR ACCENT ── */
.brand-accent { color: var(--or-sacre); }
.brand-accent-bg { background-color: var(--or-sacre); color: var(--bleu-nuit); }
.brand-eyebrow {
  font-family: var(--font-brand);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--bleu-royal);
}

/* ── TRANSITIONS ── */
a, button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── Épuré: suppress ALL non-circle rounding ── */
.rounded-3xl,
.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-md,
.rounded-sm,
.rounded,
[class*="rounded-bl-"],
[class*="rounded-br-"],
[class*="rounded-tl-"],

/* Keep rounded-full for intentional circles (icons, avatars) */

/* ── Footer: force encre background ── */
footer,
footer.bg-gray-50,
footer[class*="bg-"],
.dark footer,
.dark footer[class*="bg-"],
footer:is(.dark *) {
  background-color: #0A1F3D !important;
  --tw-bg-opacity: 1 !important;
}