/* ========================= */
/* Grille d'actions */
/* ========================= */

.actions-grid {
    display: grid; /* Active le système de grille CSS */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Crée des colonnes responsives d'au moins 350px */
    gap: 30px; /* Espace entre les cartes */
    margin-bottom: 80px; /* Espace sous la grille */
    margin-top: 100px; /* Espace au-dessus de la grille */
}

.action-card {
    background: white; /* Fond blanc pour chaque carte */
    border-radius: 12px; /* Coins arrondis */
    overflow: hidden; /* Cache le débordement des éléments internes */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Ombre légère pour donner du relief */
    transition: all 0.3s ease; /* Animation fluide lors des interactions */
    cursor: pointer; /* Curseur en forme de main */
    position: relative; /* Nécessaire pour positionner des éléments enfants en absolu */
}

.action-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Accentue l’ombre au survol */
}

/* Badge indiquant le statut de l'action */
.card-badge {
    position: absolute; /* Positionné par rapport à la carte */
    top: 15px; /* Distance depuis le haut */
    right: 15px; /* Distance depuis la droite */
    padding: 6px 12px; /* Espacement interne */
    border-radius: 20px; /* Forme arrondie type "pastille" */
    font-size: 0.8em; /* Taille du texte */
    font-weight: 600; /* Texte semi-gras */
    z-index: 2; /* Passe au-dessus des images */
}

/* Badge pour action à venir */
.card-badge.upcoming {
    background: #4a7c59; /* Fond vert */
    color: white; /* Texte blanc */
}

/* Badge pour action passée */
.card-badge.past {
    background: #6c757d; /* Fond gris */
    color: white; /* Texte blanc */
}

/* Conteneur de l'image */
.card-image {
    height: 200px; /* Hauteur fixe */
    overflow: hidden; /* Coupe l’image si elle dépasse */
}

.card-image img {
    width: 100%; /* Image prend toute la largeur */
    height: 100%; /* Image prend toute la hauteur */
    object-fit: cover; /* L’image garde ses proportions */
    transition: transform 0.3s ease; /* Animation possible (zoom, etc.) */
}

/* Contenu texte de la carte */
.card-content {
    padding: 25px; /* Espacement intérieur */
}

.card-content h3 {
    color: #2c5530; /* Couleur verte principale */
    margin-bottom: 15px; /* Espace sous le titre */
    font-size: 1.3em; /* Taille du titre */
    line-height: 1.3; /* Hauteur de ligne pour la lisibilité */
}

/* Métadonnées (date, lieu, etc.) */
.action-meta {
    display: flex; /* Organisation en flexbox */
    flex-direction: column; /* Éléments empilés verticalement */
    gap: 8px; /* Espacement entre les lignes */
    margin-bottom: 15px; /* Espace sous les métadonnées */
    color: #666; /* Couleur gris foncé */
    font-size: 0.9em; /* Texte légèrement plus petit */
}

.action-meta span {
    display: flex; /* Alignement horizontal icône + texte */
    align-items: center; /* Alignement vertical centré */
    gap: 5px; /* Espace entre icône et texte */
}

/* Description de l'action */
.card-content p {
    color: #555; /* Gris pour le texte */
    margin-bottom: 20px; /* Espace sous le paragraphe */
    line-height: 1.6; /* Lisibilité du texte */
}

/* Statistiques de l'action */
.card-stats {
    display: flex; /* Statistiques côte à côte */
    gap: 20px; /* Espacement entre les stats */
    margin-bottom: 20px; /* Espace sous la section */
    padding: 15px; /* Espacement interne */
    background: #f8f9fa; /* Fond gris clair */
    border-radius: 8px; /* Coins arrondis */
}

.stat {
    text-align: center; /* Texte centré */
    flex: 1; /* Chaque statistique prend la même largeur */
}

.stat-number {
    font-size: 1.4em; /* Taille du chiffre */
    font-weight: 700; /* Chiffre en gras */
    color: #2c5530; /* Couleur verte */
    display: block; /* Passe à la ligne */
}

.stat-label {
    font-size: 0.8em; /* Texte plus petit */
    color: #666; /* Couleur gris */
    margin-top: 4px; /* Espace au-dessus du label */
}

/* ========================= */
/* Section bénévole */
/* ========================= */

.volunteer-section {
    background: linear-gradient(135deg, #e8f4ea 0%, #c8e6c9 100%); /* Dégradé vert clair */
    padding: 60px; /* Espacement intérieur */
    border-radius: 12px; /* Coins arrondis */
    margin-top: 40px; /* Espace au-dessus */
    margin-bottom: 80px; /* Espace en dessous */
}

.volunteer-container {
    display: grid; /* Mise en page en grille */
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 50px; /* Espace entre les colonnes */
    align-items: start; /* Alignement en haut */
}

/* Texte de présentation */
.volunteer-content h2 {
    color: #2c5530; /* Couleur principale */
    margin-bottom: 20px; /* Espace sous le titre */
    font-size: 2.2em; /* Taille du titre */
}

.volunteer-content p {
    color: #555; /* Texte gris */
    margin-bottom: 30px; /* Espace sous le paragraphe */
    font-size: 1.1em; /* Taille du texte */
    line-height: 1.6; /* Lisibilité */
}

/* Liste des avantages bénévoles */
.volunteer-benefits {
    display: flex; /* Flexbox */
    flex-direction: column; /* Alignement vertical */
    gap: 20px; /* Espacement entre les éléments */
}

.benefit-item {
    display: flex; /* Icône + texte */
    align-items: flex-start; /* Alignement en haut */
    gap: 15px; /* Espace entre icône et texte */
    padding: 15px; /* Espacement interne */
    background: rgba(255, 255, 255, 0.7); /* Fond blanc transparent */
    border-radius: 8px; /* Coins arrondis */
}

.benefit-icon {
    font-size: 1.5em; /* Taille de l’icône */
    flex-shrink: 0; /* Empêche l’icône de se réduire */
}

.benefit-text h4 {
    color: #2c5530; /* Titre en vert */
    margin-bottom: 5px; /* Espace sous le titre */
    font-size: 1.1em; /* Taille du titre */
}

.benefit-text p {
    color: #666; /* Texte gris */
    margin: 0; /* Supprime la marge par défaut */
    font-size: 0.9em; /* Texte plus petit */
}

/* Formulaire bénévoles */
.volunteer-form {
    background: white; /* Fond blanc */
    padding: 30px; /* Espacement interne */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Ombre pour relief */
}

.volunteer-form h3 {
    color: #2c5530; /* Couleur principale */
    margin-bottom: 25px; /* Espace sous le titre */
    text-align: center; /* Titre centré */
    font-size: 1.5em; /* Taille du titre */
}

/* Lignes du formulaire */
.form-row {
    display: grid; /* Grille */
    grid-template-columns: 1fr 1fr; /* Deux champs côte à côte */
    gap: 20px; /* Espacement entre champs */
    margin-bottom: 20px; /* Espace sous la ligne */
}

.form-group {
    margin-bottom: 20px; /* Espace entre les champs */
}

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

/* Champs du formulaire */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Prend toute la largeur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure grise */
    border-radius: 6px; /* Coins arrondis */
    font-size: 1em; /* Taille du texte */
    transition: all 0.3s ease; /* Animation fluide */
}

/* Bouton d’envoi */
.submit-btn {
    width: 100%; /* Bouton pleine largeur */
    padding: 15px; /* Espacement interne */
    font-size: 1.1em; /* Taille du texte */
    margin-top: 10px; /* Espace au-dessus */
}

/* Liens dans la grille d’actions */
.actions-grid a {
    text-decoration: none; /* Supprime le soulignement */
}