/* Import des polices Google Fonts utilisées sur le site */
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');

/* Import d’une police Adobe Fonts */
@import url("https://use.typekit.net/avd5swi.css");

/* Reset CSS global pour éviter les styles par défaut des navigateurs */
* {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les espacements internes par défaut */
    box-sizing: border-box; /* Inclut padding et border dans la taille totale */
    font-family: 'Arial', sans-serif; /* Police par défaut du site */
}

/* Conteneur central pour limiter la largeur du contenu */
.container {
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: 0 auto; /* Centre horizontalement */
    padding: 0 20px; /* Marges internes sur mobile */
}

/* ================= HEADER ET NAVIGATION ================= */
header {
    background-color: #f5f5dc; /* Couleur de fond du header */
    padding: 15px 0; /* Espacement vertical */
    font-family: 'Sora', sans-serif; /* Police spécifique au header */
}

/* Organisation du contenu du header */
.header-container {
    display: flex; /* Utilisation de Flexbox */
    justify-content: space-between; /* Espace logo / navigation */
    align-items: center; /* Alignement vertical */
}

/* Logo */
.logo {
    width: 170px; /* Largeur du logo */
}

/* Menu de navigation */
nav ul {
    display: flex; /* Liens alignés horizontalement */
    list-style: none; /* Suppression des puces */
    gap: 45px; /* Espacement entre les liens */
}

/* Liens de navigation */
nav a {
    color: #E52421; /* Couleur rouge */
    text-decoration: none; /* Suppression du soulignement */
    font-size: 18px; /* Taille du texte */
}

/* Effet au survol des liens */
nav a:hover {
    color: #28a745; /* Passage au vert */
}

/* Bouton "Don" dans le header */
.donate-btn {
    background-color: #E52421; /* Fond rouge */
    color: #fffbec; /* Texte clair */
    padding: 8px 15px; /* Espacement interne */
    border-radius: 4px; /* Coins arrondis */
    text-decoration: none; /* Pas de soulignement */
    font-size: 18px; /* Taille du texte */
}

/* Effet hover du bouton Don */
.donate-btn:hover {
    color: #28a745; /* Changement de couleur du texte */
}

/* ================= PAGES D'ACTIONS ================= */

/* Conteneur principal des pages d’actions */
.action-content {
    max-width: 1000px; /* Largeur maximale */
    margin: 0 auto 60px; /* Centré avec marge basse */
    background: white; /* Fond blanc */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Ombre */
    overflow: hidden; /* Coupe les débordements */
    border: 1px solid #e8f4ea; /* Bordure verte claire */
    margin-top: 70px; /* Espace au-dessus */
}

/* Image principale de l’action */
.action-hero {
    height: 300px; /* Hauteur fixe */
    overflow: hidden; /* Cache le surplus */
}

.action-hero img {
    width: 100%; /* Largeur complète */
    height: 100%; /* Hauteur complète */
    object-fit: cover; /* Recadrage propre */
}

/* Contenu texte de l’action */
.action-body {
    padding: 40px; /* Espacement interne */
}

/* Métadonnées (date, lieu, etc.) */
.action-meta {
    display: flex; /* Alignement horizontal */
    gap: 2rem; /* Espacement entre éléments */
    margin-bottom: 2rem; /* Marge basse */
    padding-bottom: 1.5rem; /* Espace avant la bordure */
    border-bottom: 2px solid #e8f4ea; /* Ligne de séparation */
}

.meta-item {
    display: flex; /* Icône + texte */
    align-items: center; /* Alignement vertical */
    gap: 0.5rem; /* Espace icône/texte */
    color: #666; /* Couleur grise */
    font-size: 1em; /* Taille normale */
}

/* Icônes des métadonnées */
.meta-item .icon {
    color: #2c5530; /* Vert principal */
    font-size: 1.2em; /* Taille de l’icône */
}

/* Description de l’action */
.action-description h1 {
    color: #2c5530; /* Couleur principale */
    margin-bottom: 1.5rem; /* Espace sous le titre */
    font-size: 2em; /* Taille du titre */
    line-height: 1.3; /* Lisibilité */
}

.action-description p {
    line-height: 1.7; /* Lisibilité du texte */
    margin-bottom: 1.5rem; /* Espacement */
    color: #555; /* Gris foncé */
    font-size: 1.1em; /* Taille du texte */
}

/* Statistiques */
.action-stats {
    display: grid; /* Mise en page en grille */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive */
    gap: 1.5rem; /* Espacement */
    margin: 2.5rem 0; /* Marges verticales */
    padding: 2rem; /* Espacement interne */
    background: #f8f9fa; /* Fond gris clair */
    border-radius: 10px; /* Coins arrondis */
    border-left: 4px solid #2c5530; /* Accent visuel à gauche */
}

.stat {
    text-align: center; /* Texte centré */
    padding: 1rem; /* Espacement interne */
}

.stat-number {
    font-size: 2.2em; /* Taille du chiffre */
    font-weight: bold; /* Gras */
    color: #2c5530; /* Vert */
    display: block; /* Passe à la ligne */
    line-height: 1; /* Compacité */
}

.stat-label {
    font-size: 0.9em; /* Texte plus petit */
    color: #666; /* Gris */
    margin-top: 0.8rem; /* Espace au-dessus */
    line-height: 1.3; /* Lisibilité */
}

/* Call To Action */
.action-cta {
    background: linear-gradient(135deg, #e8f4ea 0%, #c8e6c9 100%); /* Dégradé vert */
    padding: 2.5rem; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    margin: 2.5rem 0; /* Marges verticales */
    text-align: center; /* Texte centré */
    border: 2px solid #c8e6c9; /* Bordure */
}

.action-cta h3 {
    color: #2c5530; /* Vert principal */
    margin-bottom: 1rem; /* Espace sous le titre */
    font-size: 1.4em; /* Taille du titre */
}

.action-cta p {
    color: #555; /* Gris */
    margin-bottom: 1.5rem; /* Espacement */
    font-size: 1.1em; /* Taille du texte */
}

/* Boutons CTA */
.cta-buttons {
    display: flex; /* Boutons côte à côte */
    gap: 1rem; /* Espacement */
    justify-content: center; /* Centrage */
    flex-wrap: wrap; /* Retour à la ligne si besoin */
    margin-top: 1.5rem; /* Marge haute */
}

/* ================= FOOTER ================= */
footer {
    background-color: #2c5530; /* Fond vert foncé */
    color: white; /* Texte blanc */
    padding: 50px 0 20px; /* Espacement */
}

/* Organisation du footer */
.footer-container {
    display: grid; /* Mise en page en grille */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
    gap: 40px; /* Espacement */
    margin-bottom: 40px; /* Marge basse */
}

.footer-section h3 {
    color: #f8f9fa; /* Blanc cassé */
    margin-bottom: 20px; /* Espacement */
    font-size: 1.2em; /* Taille du titre */
}

.footer-section p,
.footer-section a {
    color: #f8f9fa; /* Texte clair */
    margin-bottom: 10px; /* Espacement */
    display: block; /* Chaque élément sur une ligne */
    text-decoration: none; /* Pas de soulignement */
}

.footer-section a:hover {
    color: #4a7c59; /* Changement de couleur au survol */
}

/* Bas du footer */
.footer-bottom {
    border-top: 1px solid #333; /* Ligne de séparation */
    padding-top: 20px; /* Espacement */
    text-align: center; /* Centré */
    color: #999; /* Gris */
    font-size: 0.9em; /* Texte plus petit */
}

/* ================= COMPOSANTS RÉUTILISABLES ================= */

/* Boutons génériques */
.btn {
  padding: 12px 30px; /* Taille du bouton */
  border-radius: 5px; /* Coins arrondis */
  text-decoration: none; /* Pas de soulignement */
  font-weight: bold; /* Texte en gras */
  transition: all .3s ease !important; /* Animation fluide */
  position: relative; /* Pour effets internes */
  overflow: hidden; /* Cache les débordements */
  display: inline-flex; /* Alignement flexible */
  align-items: center; /* Centrage vertical */
  gap: .5rem; /* Espacement icône/texte */
  font-size: 1em; /* Taille normale */
  border: 2px solid transparent; /* Bordure invisible */
}

/* Bouton principal */
.btn-primary { 
    background: #2c5530; /* Vert principal */
    color: #fff; /* Texte blanc */
}

/* Hover bouton principal */
.btn-primary:hover { 
    background: #1e5c32; /* Vert plus foncé */
    transform: translateY(-2px); /* Effet de levée */
    box-shadow: 0 5px 15px rgba(44,85,48,.3); /* Ombre */
}

/* Bouton secondaire */
.btn-secondary { 
    background: #4a7c59; /* Vert secondaire */
    color: #fff; /* Texte blanc */
}

/* Hover bouton secondaire */
.btn-secondary:hover { 
    background: #3a6c49; /* Vert plus foncé */
    transform: translateY(-2px); /* Effet levé */
    box-shadow: 0 5px 15px rgba(74,124,89,.3); /* Ombre */
}

/* Champs de formulaire */
.form-group {
    margin-bottom: 20px; /* Espacement entre champs */
}

.form-group label {
    display: block; /* Label sur une ligne */
    margin-bottom: 8px; /* Espace sous le label */
    color: #2c5530; /* Vert */
    font-weight: bold; /* Texte en gras */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Pleine largeur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille du texte */
}

/* Zone de texte */
.form-group textarea {
    height: 120px; /* Hauteur par défaut */
    resize: vertical; /* Redimensionnement vertical uniquement */
}

/* Groupe plein largeur */
.form-group-full {
    position: relative; /* Base pour animations */
    margin-bottom: 20px; /* Espacement */
}

.form-group-full label {
    display: block; /* Label visible */
    margin-bottom: 8px; /* Espacement */
    color: #2c5530; /* Vert */
    font-weight: bold; /* Texte en gras */
    transition: all 0.3s ease; /* Animation */
    transform-origin: left center; /* Origine de transformation */
}

.form-group-full input,
.form-group-full select,
.form-group-full textarea {
    width: 100%; /* Pleine largeur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille du texte */
}