/* Style général */
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-links a {
  text-decoration: none;
  color: white;
  font-weight: 600;
  transition: 0.3s;
}
.nav-links a:hover {
  color: #c8e6c9;
}

/* Sections */
section {
  margin-bottom: 2rem;
}

/* Carte des responsables */
section .bg-white {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Bouton d’adhésion */
button {
  font-weight: 600;
  cursor: pointer;
}
button:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Footer */
footer {
  background-color: #2e7d32;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}
/* Couleurs personnalisées */
.bg-primary {
  background-color: #2e7d32;
}
.text-primary {
  color: #2e7d32;
}
.bg-secondary {
  background-color: #c8e6c9;
}
.text-secondary {
  color: #c8e6c9;
}
.bg-accent {
  background-color: #81c784;
}
.text-accent {
  color: #81c784;
}
.bg-light {
  background-color: #f5f5f5;
}
.text-light {
  color: #f5f5f5;
}
.bg-dark {
  background-color: #333;
}
.text-dark {
  color: #333;
}
/* Effets supplémentaires */
.card {
  border-radius: 8px;
  overflow: hidden;
}
.card img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.card img:hover {
  transform: scale(1.1);
}
.card-body {
  padding: 1rem;
}
.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.card-text {
  font-size: 1rem;
  line-height: 1.5;
}
.button-primary {
  background-color: #2e7d32;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}

/* Petite amélioration : logo et focus accessibles */
.logo {
  font-size: 1.125rem;
  font-weight: 700;
}

.nav-links a:focus {
  outline: 3px solid rgba(46,125,50,0.2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fallback image styles au cas où Tailwind n'est pas chargé */
.president-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* =================================
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;

}

/* =================================
RESPONSIVE TABLET
================================ */

@media(max-width:900px){

.hero-content h2{

 font-size:2rem;

}

}


/* =================================
RESPONSIVE TELEPHONE
================================ */

@media(max-width:768px){

/* bouton burger visible */

.burger{

 display:block;

 font-size:1.7rem;

}


/* menu mobile plein écran */

.nav-links{

 position:fixed;

 inset:0;

 height:100vh;

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

 display:flex;

 flex-direction:column;

 align-items:center;

 justify-content:flex-start;

 padding:90px 20px 40px;

 gap:12px;

 transform:translateY(-100%);

 opacity:0;

 transition:.4s ease;

 overflow-y:auto;

 -webkit-overflow-scrolling:touch;

 z-index:999;

}


/* menu visible */

.nav-links.open{

 transform:translateY(0);

 opacity:1;

}


/* items menu */

.nav-links li{

 width:100%;

 max-width:260px;

 text-align:center;

}


/* boutons menu */

.nav-links a{

 display:block;

 width:100%;

 padding:11px;

 border-radius:12px;

 background:rgba(255,255,255,.05);

 border:1px solid rgba(255,255,255,.08);

 font-size:.98rem;

 font-weight:600;

}


/* hover */

.nav-links a:hover{

 background:rgba(255,255,255,.12);

}


/* HERO plus compact */

.hero{

 padding:2.6rem 1.2rem;

 border-bottom-left-radius:28px;

 border-bottom-right-radius:28px;

}


/* titre hero */

.hero-content h2{

 font-size:1.75rem;

}


/* texte hero */

.hero-content p{

 font-size:.95rem;

}


/* section vision */

.visionnaire-section{

 margin:45px auto;

 padding:0 16px;

}


/* carte vision */

.visionnaire-container{

 padding:28px 20px;

 border-radius:16px;

}


/* titre vision */

.visionnaire-container h2{

 font-size:1.6rem;

}


/* texte vision */

.visionnaire-container p{

 font-size:.95rem;

}


/* verset */

#verset-du-jour{

 margin:2.2rem auto;

 padding:0 15px;

}


/* carte */

.card,
#verset-content{

 padding:1.4rem;

 border-radius:16px;

}


/* footer */

footer{

 padding:1.6rem;

 margin-top:3rem;

}

}


/* =================================
PETITS TELEPHONES
================================ */

@media(max-width:420px){

.hero-content h2{

 font-size:1.5rem;

}


.visionnaire-container{

 padding:22px 16px;

}


.visionnaire-container h2{

 font-size:1.45rem;

}


.visionnaire-container p{

 font-size:.92rem;

}


.nav-links{

 padding-top:85px;

}


.nav-links a{

 font-size:.92rem;

 padding:10px;

}

}