/* =========================================
   DESIGN SYSTEM
========================================= */
:root {
  --primary: #14532d;
  --primary-light: #2e7d32;
  --accent: #10b981;
  --gold: #d4af37;
  --dark: #0f172a;
  --bg-soft: #f3f6f4;
  --text-soft: #6b7280;
  --radius: 20px;
  --transition: 0.35s ease;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-strong: 0 20px 60px rgba(0,0,0,0.15);
}

/* =========================================
   BASE
========================================= */
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: var(--bg-soft);
  color: var(--dark);
  line-height: 1.7;
}

/* =========================================
   NAVBAR PREMIUM
========================================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: var(--shadow-soft);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 2.5rem;
  color: white;
}

.navbar h1 {
  margin: 0;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.5rem;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-weight: 600;
  position: relative;
  font-size: 0.95rem;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: var(--transition);
}

.nav-links a:hover::after {
  width: 100%;
}

.burger {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.7rem;
  cursor: pointer;
}

/* =================================
THEME TOGGLE
================================ */

.theme-toggle{

 background:rgba(255,255,255,0.15);

 border:none;

 color:white;

 padding:6px 10px;

 border-radius:8px;

 cursor:pointer;

 font-size:1rem;

 margin-right:10px;

}


.theme-toggle:hover{

 background:rgba(255,255,255,0.3);

}


/* =================================
DARK MODE VARIABLES
================================ */

.dark{

 --soft-bg:#0f172a;

 --card-bg:#1e293b;

 --text-dark:#e5e7eb;

 --text-soft:#94a3b8;

 --primary:#22c55e;

 --primary-light:#16a34a;

}


/* fond général */

.dark body{

 background:#0f172a;

 color:#e5e7eb;

}


/* cartes */

.dark .card,
.dark .relative.bg-white,
.dark .event-card,
.dark .visionnaire-container,
.dark #verset-content{

 background:#1e293b;

 color:#e5e7eb;

}


/* navbar */

.dark .navbar{

 background:linear-gradient(
 135deg,
 #14532d,
 #166534
 );

}


/* footer */

.dark footer{

 background:linear-gradient(
 135deg,
 #14532d,
 #166534
 );

}


/* inputs */

.dark input,
.dark textarea,
.dark select{

 background:#020617;

 color:white;

 border:1px solid #334155;

}

/* =========================================
   HERO LOUANGE IMMERSIF
========================================= */
.hero-louange {
  height: 550px;
  background: url("louange.jpg") center/cover no-repeat;
  position: relative;
}

.hero-louange::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.6),
    rgba(20,83,45,0.85)
  );
}

.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 0 2rem;
}

.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.hero-content p {
  font-size: 1.2rem;
  max-width: 750px;
  opacity: 0.95;
}

/* =========================================
   SECTION PRESIDENT
========================================= */
.president-section {
  padding: 5rem 2rem;
  display: flex;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: auto;
}

.president-section img {
  width: 320px;
  border-radius: var(--radius);
  border: 5px solid var(--gold);
  box-shadow: var(--shadow-strong);
  transition: var(--transition);
}

.president-section img:hover {
  transform: scale(1.05);
}

.president-info h3 {
  font-size: 2rem;
  color: var(--primary);
}

.president-info p {
  color: var(--text-soft);
  margin-top: 1rem;
}

/* =========================================
   SOUS-GROUPES (CARTES PREMIUM)
========================================= */
.subgroups {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: auto;
}

.subgroups h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 3rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.card {
  background: white;
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  text-align: center;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

.card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.card p {
  color: var(--text-soft);
}

/* =========================================
   BOUTONS
========================================= */
button,
.btn {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

button:hover,
.btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* =========================================
   CITATION BIBLIQUE
========================================= */
.quote-section {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  text-align: center;
  padding: 4rem 2rem;
  margin-top: 4rem;
}

.quote-section blockquote {
  font-size: 1.4rem;
  max-width: 800px;
  margin: auto;
  font-style: italic;
}

/* =========================================
   FOOTER
========================================= */
footer {
  background: var(--dark);
  color: white;
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 992px) {
  .president-section {
    flex-direction: column;
    text-align: center;
  }

  .president-section img {
    width: 260px;
  }

  .hero-content h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .burger {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    background: var(--primary);
    flex-direction: column;
    width: 240px;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  .nav-links.open {
    height: 260px;
  }
}