/* =========================================================
   🌍 STYLE GLOBAL — GBJ GARENGANZE
   Mode clair uniquement
   Palette : Orange doré (#D18F03), Bleu royal (#0A2A6B)
   Police : Poppins + Source Sans 3
========================================================= */

/* ====== VARIABLES GLOBALES ====== */
:root {
  --gbj-orange: #D18F03;
  --gbj-blue: #0A2A6B;
  --gbj-lightblue: #E8F0FF;
  --gbj-bg: #FFFDF8;
  --gbj-text: #1F2937;
}

/* =========================================================
   🌤️ MODE CLAIR UNIQUEMENT
========================================================= */
body {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--gbj-text);
  background: var(--gbj-bg);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5 {
  font-family: "Poppins", sans-serif;
  color: var(--gbj-blue);
  font-weight: 700;
}

a {
  text-decoration: none;
  color: var(--gbj-blue);
  transition: all 0.3s ease;
}
a:hover { color: var(--gbj-orange); }

/* ====== NAVBAR ====== */
.navbar {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: background 0.4s ease;
}
.navbar-brand {
  font-weight: 700;
  color: var(--gbj-blue);
}
.navbar-nav .nav-link {
  color: var(--gbj-blue);
  font-weight: 500;
}
.navbar-nav .nav-link:hover { color: var(--gbj-orange); }

/* ====== HERO ====== */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,42,107,0.75) 0%, rgba(10,42,107,0.85) 50%, rgba(10,42,107,0.95) 100%),
    url("assets/hero-young-worship.jpg") center/cover no-repeat;
  min-height: 90vh;
  display: flex;
  align-items: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero h1,
.hero .heading,
.hero .lead,
.hero p {
  color: #fff !important;
}

@media (max-width: 768px) {
  .hero {
    text-align: center;
    background:
      linear-gradient(180deg, rgba(10,42,107,0.7) 0%, rgba(10,42,107,0.9) 100%),
      url("assets/hero-young-worship.jpg") center/cover no-repeat;
    padding: 3rem 1rem;
  }
  .hero h1 {
    font-size: 1.9rem;
    line-height: 1.3;
  }
}

/* ====== BOUTONS ====== */
.btn-orange {
  background: var(--gbj-orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.2rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-orange:hover {
  background: #b97d02;
  color: #fff;
}

.btn-outline-light {
  border: 2px solid #fff;
  color: #fff;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--gbj-blue);
}

/* ====== SECTIONS ====== */
.section {
  padding: 90px 0;
}
.section-title {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--gbj-blue);
}
.section-sub {
  color: #4B5563;
}

/* ====== FEATURES ====== */
.feature-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.feature-card .icon {
  font-size: 28px;
  color: var(--gbj-orange);
}

/* ====== BRANCHES ====== */
.branch-card {
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1rem;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.branch-card i {
  font-size: 2rem;
  color: var(--gbj-orange);
  margin-bottom: 12px;
}
.branch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ====== CTA ====== */
.cta-section {
  background: linear-gradient(135deg, var(--gbj-blue), #123A8C);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.cta-section h3,
.cta-section p {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cta-section .btn {
  border-radius: 10px;
  font-weight: 600;
}

/* ====== FOOTER ====== */
.footer {
  background: var(--gbj-blue);
  padding: 60px 0 30px;
  color: #E2E8F0;
}
.footer h5, .footer h6 {
  color: #fff;
}
.footer a {
  color: #E2E8F0;
}
.footer a:hover {
  color: var(--gbj-orange);
}
.footer input,
.footer textarea,
.footer select {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
}
.footer input::placeholder,
.footer textarea::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.footer .btn-orange {
  background: var(--gbj-orange);
}
.footer .btn-orange:hover {
  background: #b97d02;
}

/* ====== GALERIE ====== */
.gallery img {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* ====== FORM ====== */
form .form-control,
form .form-select {
  border-radius: 8px;
}
form .btn {
  border-radius: 8px;
}

/* ====== UTILITIES & FIXES ====== */
.hero-small { min-height: 54vh; }
.navbar .nav-link.active { color: var(--gbj-orange) !important; font-weight: 700; }
.btn:focus, .form-control:focus, .form-select:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(209,143,3,.25);
  border-color: #FFD27A;
}
img { max-width: 100%; height: auto; }
.shadow-soft { box-shadow: 0 10px 30px rgba(2,6,23,.08); }
.badge.bg-warning.text-dark { background-color: #FFD54A !important; }

/* ====== CARDS ====== */
.card.border-0 { border-radius: 16px; }
.card .card-title.heading { color: var(--gbj-blue); }

/* ====== TABLES ====== */
.table thead th { white-space: nowrap; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .section { padding: 70px 0; }
}
@media (max-width: 576px) {
  .section { padding: 64px 0; }
}