/* RESET */
* { box-sizing:border-box; margin:0; padding:0; }
body { 
font-family: Arial, Helvetica, sans-serif; 
line-height:1.7; 
background:#f8f9fa; 
color:#222; 
}



/* LIENS */
main a { 
color:#1e7e34; 
text-decoration:none; 
font-weight:bold; 
}
main a:hover { 
text-decoration:underline; 
}


/* HEADER */
header {
  background-color: #1e7e34;
  padding: 10px 25px;
}

/* conteneur principal */
.header-container {
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* menu légèrement plus haut */
}

/* bloc logo + nom */
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}

/* logo */
.logo {
  width: 85px;
  height: auto;
}

/* nom ONG */
.org-name {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

/* menu */
nav {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

nav a {
  color: #ffffff;
  margin-left: 5px;
  font-size: 0.95rem;
  white-space: nowrap;
  font-weight: 600;
}

nav a:hover {
  text-decoration: underline;
}




/* MAIN */
main { 
max-width:1100px; 
margin:30px auto; 
padding:0 20px; 
}

/* SECTIONS */
section { 
background:#fff; 
padding:25px; 
margin-bottom:25px; 
border-radius:8px; 
box-shadow:0 2px 8px rgba(0,0,0,0.05); 
}

h1,h2,h3 { color:#1e7e34; margin-bottom:10px; }
h1{font-size:2rem;} 
h2{font-size:1.5rem;} 
h3{font-size:1.2rem;}



/* LISTES */
ul{
padding-left:20px;
} 
li{
margin-bottom:8px;
}



/* IMAGES */
img{
max-width:100%; 
height:auto; 
display:block; 
border-radius:8px; 
margin:15px 0;}



/* BOUTONS */
.btn{display:inline-block; 
padding:12px 25px; 
margin:10px; 
background:#2c7be5; 
color:#fff; text-decoration:none; 
border-radius:5px; 
font-weight:bold; 
transition:0.3s;
}

.btn:hover{background:#1a5fb4;
}

.btn.donate{background:#e63946;
}

.btn.donate:hover{background:#b53037;
}



/* MARQUEE */
.marquee-container{background:#0b7a3b;
color:#fff;
overflow:hidden; 
white-space:nowrap; 
padding:10px 0; 
border-bottom:2px solid #159957;
}

.marquee-text{display:inline-block; 
padding-left:100%; 
animation:marquee 60s linear infinite; 
font-weight:600; 
font-size:0.95rem;
}

@keyframes marquee{0%{transform:translateX(0);} 
100%{transform:translateX(-100%);}}

.marquee-text a{color:#ffdd57; 
margin-left:10px; text-decoration:underline;}

.marquee-text a:hover{color:#fff;}



/* HERO */
.hero{background:#f4f8fb; 
padding:80px 20px; text-align:center;}

.hero h1{font-size:36px; 
margin-bottom:20px;}

.hero-buttons{margin-top:25px;}



/* IMPACT */
.impact{background:#fff; 
padding:60px 20px; 
text-align:center;}

.impact-grid{display:grid; 
grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); 
gap:20px; margin-top:30px;}

.impact-item h3{font-size:32px; 
color:#2c7be5;}



/* PROGRAMMES */
.programme-grid{display:grid; 
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); 
gap:20px; margin-top:30px;
}

.programme{background:#f9f9f9; 
padding:25px; 
border-radius:8px; 
transition:0.3s;
}

.programme:hover{transform:translateY(-5px); 
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}


/* CTA */
.cta{background:#5aa9f0; 
color:#fff; 
padding:60px 20px; 
text-align:center;
}


/* NEWS, TESTIMONIALS, GALLERY */
.news-grid,

.testimonial-grid, 

.gallery-grid{display:grid; 
grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); 
gap:20px; margin-top:30px;
}

.news-item img, 
.gallery-grid img{width:100%; 
border-radius:8px;
}

.gallery-item{
height:220px;
}

.testimonial{background:#f4f4f4; 
padding:20px; 
border-radius:8px; 
transition:0.3s;
}

.testimonial:hover{transform:translateY(-5px); 
box-shadow:0 5px 15px rgba(0,0,0,0.1);}

/* NEWSLETTER */
.newsletter{text-align:center; 
background:#f4f8fb; 
padding:60px 20px;
}

.newsletter input{padding:10px; 
width:250px; 
margin-right:10px; 
border-radius:5px; 
border:1px solid #ccc;
}


/* FOOTER */
footer{background:#222; 
color:#ccc; 
text-align:center; 
padding:20px; 
font-size:0.9rem;
}

footer a{color:#ccc;}
.whatsapp-float{position:fixed; 
bottom:20px; 
right:20px; 
background:#25d366; 
color:#fff; 
border-radius:50%; 
padding:15px 18px; 
font-size:24px; 
text-align:center; z-index:999;}


{
  background-color: #0a0a0a;
  color: #fff;
  text-align: center;
  padding: 20px 10px;
}

.social-icons {
  margin-top: 10px;
}

.social-icons a {
  color: white;
  margin: 0 10px;
  font-size: 20px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #00c3ff;
  transform: scale(1.2);
}


/* RESPONSIVE */
@media(max-width:900px){
.header-container{flex-direction:column; 
align-items:flex-start; 
gap:12px;
}

.brand{white-space:normal;
}

.logo{width:70px;
}

.org-name{font-size:1rem;
}

nav a{margin:6px 12px 0 0; font-size:0.85rem;}
}





.don-btn{
background:#ff6b00;
color:white;
padding:10px 16px;
border-radius:6px;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.project-card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}




.partners{
text-align:center;
padding:60px 20px;
background:#f8f8f8;
}

.partners h2{
color:#1e7a3f;
margin-bottom:10px;
}

.partners-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:40px;
align-items:center;
margin-top:40px;
}

.partner img{
width:120px;
height:auto;
filter:grayscale(100%);
transition:0.3s;
}

.partner img:hover{
filter:grayscale(0%);
transform:scale(1.1);
}

.partners-grid img{
width:120px;
height:auto;
object-fit:contain;
}



.founder-container {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 20px;
}

.founder-image img {
  max-width: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.founder-text {
  flex: 1;
  background-color: #f9f9f9;
  padding: 20px;
  border-left: 6px solid #007bff;
  font-size: 1.1em;
  line-height: 1.6;
}

.founder-text h2 {
  margin-bottom: 15px;
  color: #007bff;
}

.founder-text-below {
  background-color: #f9f9f9;
  padding: 20px;
  border-left: 6px solid #007bff;
  font-size: 1.1em;
  line-height: 1.6;
}





.project-card1 {
  display: flex;
  gap: 20px;
  background:#fff;
  padding:20px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 30px;
  transition:0.3s;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.project-image img {
  max-width: 300px;
  border-radius: 8px;
}

.project-content {
  flex: 1;
}

.project-content h3 {
  color:#007bff;
  margin-bottom:10px;
}

.project-content p {
  margin-bottom:15px;
}

.project-stats {
  margin:10px 0;
  font-size:1.05em;
  font-weight:600;
}

.donate-btn {
  display:inline-block;
  background-color:#28a745;
  color:white;
  padding:10px 15px;
  border-radius:5px;
  text-decoration:none;
  font-weight:bold;
}

.donate-btn:hover {
  background-color:#218838;
}






.project-detail {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.project-header h1 {
  color: #007bff;
  margin-bottom: 10px;
}

.project-header p {
  margin: 5px 0;
  font-size: 1.05em;
}

.project-image img {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0;
}

.project-summary, .project-objectives, .project-budget, .project-impacts {
  margin-bottom: 25px;
}

.project-summary h2, .project-objectives h2, .project-budget h2, .project-impacts h2 {
  color: #1e7e34;
  margin-bottom: 10px;
}

.project-objectives ul, .project-impacts ul {
  padding-left: 20px;
}

.project-objectives li, .project-impacts li {
  margin-bottom: 8px;
}

.project-action {
  text-align: center;
  margin-top: 30px;
}

.donate-btn {
  display:inline-block;
  background-color:#28a745;
  color:white;
  padding:12px 20px;
  border-radius:5px;
  text-decoration:none;
  font-weight:bold;
}

.donate-btn:hover {
  background-color:#218838;
}







.project-presentation {
  display: flex;
  gap: 30px;
  align-items: center;
  background: #f4f8fb;
  padding: 40px 20px;
  border-radius: 10px;
  margin: 40px 0;
}

.presentation-image img {
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.presentation-text {
  flex: 1;
}

.presentation-text h2 {
  color: #6a1b9a; /* violet moderne */
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.presentation-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

.presentation-text .donate-btn {
  background-color: #28a745;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

.presentation-text .donate-btn:hover {
  background-color: #218838;
}





.blog-article {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

.blog-article header h1 {
  color: #007bff;
  margin-bottom: 10px;
}

.blog-article .meta {
  font-size: 0.9em;
  color: #666;
}

.blog-article section {
  margin-bottom: 25px;
}

.blog-article h2 {
  color: #1e7e34;
  margin-bottom: 10px;
}

.blog-article figure {
  margin: 20px 0;
  text-align: center;
}

.blog-article figure img {
  max-width: 100%;
  border-radius: 8px;
}

.blog-article figcaption {
  font-size: 0.85em;
  color: #555;
  margin-top: 5px;
}