/*
 * -----------------------------------------------------------------------------
 * Styles généraux et variables globales
 * -----------------------------------------------------------------------------
 */

:root {
    /* Couleurs de la charte graphique ASCAm (inspirées du Cameroun et de la Roumanie) */
    --primary-color: #001374;   /* Vert émeraude */
    --secondary-color: #ff0000; /* Rouge vif */
    --accent-color: #ffd700;    /* Jaune/Or */
    
    /* Couleurs de texte et de fond */
    --text-color: #2c2c2c;
    --light-text-color: #606060;
    --background-color: #f8f8f8;
    --card-background: #ffffff;
    
    /* Typographie */
    --font-primary: 'Poppins'; /* Police moderne et lisible */
    --font-secondary: 'Georgia', serif; /* Pour les titres ou accents si désiré */
    
    /* Espacement et dimensions */
    --spacing-xs: 8px;
    --spacing-sm: 15px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --border-radius: 20px;
    
    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-speed: 0.3s;
}

/* Reset CSS basique et styles par défaut */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding-top: 60px; /* IMPORTANT: Ajout d'un padding pour compenser la hauteur du header fixe */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Styles pour les titres */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

h1 { font-size: 2.5rem; } /* Pour les titres principaux de page */
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: var(--spacing-sm);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--secondary-color);
}

ul, ol {
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
}

/* Mise en évidence des couleurs des drapeaux pour les titres */
.highlight {
    color: var(--secondary-color); /* Rouge pour le texte mis en évidence */
}
.color-green { color: var(--primary-color); }
.color-red { color: var(--secondary-color); }
.color-yellow { color: var(--accent-color); }

/* Conteneurs de contenu principaux */
.main-content {
    /* padding: var(--spacing-lg) var(--spacing-sm); Padding latéral pour mobile */
    min-height: calc(100vh - 120px); /* Assure un pied de page en bas */
    
}

.content-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-sm); /* Padding interne du conteneur */
}

.section-block {
    margin: 0 auto;
    max-width: 80%;
    padding: var(--spacing-lg) var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    /* padding: var(--spacing-lg); */
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    
    /* box-shadow: var(--shadow-md); */
}

.section-heading, .section-sub-heading,.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-description, .section-text {
    text-align: center;
    padding: 0px 8px ;
    margin-bottom: var(--spacing-lg);
    color: var(--light-text-color);
}

.divider {
    border: none;
    height: 1px;
    background-color: #eee;
    margin: var(--spacing-lg) 0;
}

/*
 * -----------------------------------------------------------------------------
 * Composants réutilisables
 * -----------------------------------------------------------------------------
 */

/* Boutons */
.button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform var(--transition-speed) ease;
    cursor: pointer;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
}

.button-primary {
    background-color: var(--primary-color);
    color: white;
    border:white 1px solid;
    
}

.button-primary:hover {
    background-color: #ffffff; /* Vert légèrement plus foncé */
    color: #001374;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.button-secondary {
    background-color: var(--card-background);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.button-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Formulaires */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    color: var(--text-color);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    font-size: 1rem;
    color: var(--text-color);
    background-color: #fcfcfc;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.2);
    outline: none;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
}

.form-row .form-group {
    flex: 1; /* Chaque groupe prendra une part égale de l'espace */
}

.required {
    color: var(--secondary-color);
    font-weight: normal;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--light-text-color);
    margin-top: var(--spacing-xs);
    display: block;
}

/* Messages Flash (Flask) */
.flash-messages {
    list-style: none;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-weight: bold;
}

.flash-message {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border-radius: var(--border-radius);
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/*
 * -----------------------------------------------------------------------------
 * Styles du Header et du Footer
 * -----------------------------------------------------------------------------
 */

.main-header {
    background-color: var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-sm);
    box-shadow: var(--shadow-md);
    position: fixed; /* Rend le header fixe */
    top: 0; /* Le positionne en haut de l'écran */
    width: 100%; /* S'assure qu'il occupe toute la largeur */
    z-index: 100; /* Assure que le header est au-dessus du reste */
    transition: all var(--transition-speed) ease; /* Transition pour un effet doux */
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Permet le retour à la ligne sur petits écrans */
}
.lang-select {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }

.lang-select option {
    padding: 8px;
  }

.logo-container {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.logo-link {
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo-img {
    height: 40px; /* Taille du logo */
    margin-right: 10px;
    border-radius: 50%; /* Si le logo est circulaire */
    box-shadow: var(--shadow-sm);
}

.logo-text span {
    color: var(--accent-color); /* Couleur accent pour "ASCAm" */
}

.menu-toggle {
    display: none; /* Caché par défaut sur grand écran */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.menu-icon {
    font-size: 30px;
    color: white;
}

.main-menu {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
}

.nav-link {
    color: white;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed) ease;
}

.nav-link.active,
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Page Header pour les sous-pages */
.page-header {
    /* La première valeur est l'overlay, la seconde est l'image */
    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('../images/baniere.png') no-repeat center / cover;
    
    color: white;
    text-align: center;
    height: 40vh;
    padding: var(--spacing-lg) var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    margin-top: 00px;

}

.page-title {
    font-size: 4rem;
    margin-top: 12vh;
    margin-bottom: var(--spacing-sm);
    color: white;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.4);
    animation: fadeInUp 0.7s ease-out ; /* Applique l'animation */

}

.page-description {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}


.main-footer {
    background-color: #00254a; /* Couleur de fond sombre */
    color: #ecf0f1; /* Couleur du texte clair */
    padding: 40px 20px 20px;
    font-family: sans-serif;
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l'écran est petit */
    justify-content: space-between; /* Distribue l'espace entre les sections */
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--font-primary);

}

.footer-section {
    flex: 1; /* Chaque section prend une part égale de l'espace */
    min-width: 200px; /* Taille minimale pour éviter un écrasement sur mobile */
    margin-bottom: 20px;
}

.footer-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ecf0f1;
}

.footer-section h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #ecf0f1;
    border-bottom: 2px solid #3498db; /* Souligné élégant */
    padding-bottom: 5px;
}

.quick-links-list {
    list-style: none;
    padding: 0;
}

.quick-links-list li {
    margin-bottom: 8px;
}

.footer-link,
.footer-contact,
.social-icon {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover,
.social-icon:hover {
    color: #3498db; /* Couleur au survol */
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    font-size: 1.8em;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #34495e;
    padding-top: 20px;
    margin-top: 20px;
    font-size: 0.85em;
    color: #95a5a6;
}

.footer-credits {
    margin-top: 5px;
}

/*
 * -----------------------------------------------------------------------------
 * Styles spécifiques aux pages
 * -----------------------------------------------------------------------------
 */

/* --- Page d'Accueil (index.html) --- */
.hero-section {
    background: url('../images/caption.jpg') no-repeat center center/cover;
    /* background-image: linear-gradient(to right, #226608, #4f6800, #776700, #9f6000, #c55300, #d85a00, #eb6100, #ff6800, #ff9000, #ffb600, #ffdb00, #f7ff00); */
    height: 100vh; /* Hauteur de la section d'accueil */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    line-height: 2em;
    z-index: 1; /* Pour superposer du texte */
    margin-top: 00px; /* Compense le padding-top du body pour que la hero section remonte sous le header fixe */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Overlay sombre pour lisibilité du texte */
    z-index: -1;
}

.hero-content {
    padding: var(--spacing-md);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.hero-title {
    font-size: 4rem;
    margin-bottom: var(--spacing-sm);
    color: white;
    text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.4);
    animation: fadeInUp 1.2s ease-out ; /* Applique l'animation */

}

.hero-subtitle {
    font-size: 1.5rem;
    color: white;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
    animation: fadeInUp 0.7s ease-out ; /* Applique l'animation */

}

.welcome-section {
    text-align: center;
    margin-top: 40px;
    /* animation: fadeInUp 0.7s ease-out ; Applique l'animation */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}
.cta-section {
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
}

.cta-heading {
    color: white;
    margin-bottom: var(--spacing-sm);
}

.cta-description {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-md);
    animation: fadeInUp 0.7s ease-out ; /* Applique l'animation */

}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    animation: fadeInUp 0.7s ease-out ; /* Applique l'animation */

}

.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.news-card {
display: flex; 
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden; 
}

.news-image {
width: 120px; 
height: auto;
object-fit: cover; 
margin-right: 15px; 
}

.news-content {
flex-grow: 1; /* Le contenu prend l'espace restant */
padding: 15px;
}

.news-title {
margin-top: 0;
margin-bottom: 5px;
font-size: 1.2em;
}

.news-summary {
font-size: 0.95em;
line-height: 1.4;
margin-bottom: 10px;
}

.news-link {
color: #337ab7;
text-decoration: none;
}

.news-link:hover {
text-decoration: underline;
}


/* --- Page À Propos (a_propos.html) --- */
.about-section .section-block {
    text-align: left; /* Aligne le texte des blocs à gauche */
}

.mission-list {
    list-style: none;
    padding-left: 0px;  
    display: flex; /* Active Flexbox sur la liste */
    justify-content: space-around; /* Espace les éléments de manière égale */
    gap: 20px; 


}

.mission-item {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    width: 30%;
    transition: transform var(--transition-speed) ease;
    
    
}
.mission-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.mission-item i.fa, .mission-item i.fas , .benefit-card h3 i{
display: block; 
font-size: 4em; 
margin-bottom: 30px; 
color: #337ab7;
}

.mission-item:before {
content: none !important; /* Supprime tout style ::before précédent */
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    text-align: center;
}

.stat-card {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border-top: 5px solid var(--accent-color);
}

.stat-number {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 1rem;
    color: var(--light-text-color);
    text-transform: uppercase;
    font-weight: bold;
}

.equipe-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.member-card {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform var(--transition-speed) ease;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.member-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--spacing-sm);
    border: 4px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.member-name {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.member-role {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-xs);
}

.member-contact {
    font-size: 0.9rem;
    color: var(--light-text-color);
}
/* Rend le lien invisible visuellement */
.member-link {
    text-decoration: none;
    color: inherit; /* Hérite la couleur du texte du parent */
    display: block; /* S'assure que le lien couvre toute la carte */
}

/* Ajoute un effet de survol à la carte elle-même, la rendant cliquable */
.member-link:hover .member-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Assure que la photo est un bloc pour éviter les espaces indésirables */
.member-photo {
    display: block;
}
.download-section {
    text-align: center;
}

.download-links-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne sur mobile */
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.download-button {
    /* Le style de base est déjà défini dans .button */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* Espace entre l'icône et le texte */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
    .download-links-container {
        flex-direction: column;
    }
    .download-button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}


.partners-logos-grid {
    display: flex;
    /* Correction: Empêche les logos de passer à la ligne */
    flex-wrap: wrap; 
    
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #f2f2f2;
    border-radius: var(--border-radius);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    
}

/* Définition de l'animation de défilement */
@keyframes defilement-partenaires {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%); /* Fait défiler de droite à gauche */
    }
}
.partner-link {
    display: inline-block; /* S'assure que l'image remplit le lien */
}

.partner-logo {
    max-width: 160px;
    height: auto;
    filter: grayscale(50%);
    opacity: 0.7;
    transition: all var(--transition-speed) ease;

    /* Propriétés pour l'animation */
    /* animation: defilement-partenaires 10s linear infinite; */
    /* white-space: nowrap; Empêche les logos de passer à la ligne */
    /* overflow: hidden; Cache les logos en dehors de la zone de vue */
}

.partner-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
    animation-play-state: paused;
}

.testimonials-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.testimonial-card {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    font-style: italic;
    border-left: 5px solid var(--accent-color);
    transition: all var(--transition-speed) ease;
    animation: fadeInUp 0.5s ease-in-out forwards;

}
.testimonial-card:hover{
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.testimonial-text {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--text-color);
}

.testimonial-author {
    font-weight: bold;
    text-align: right;
    color: var(--primary-color);
    font-style: normal;
}


/* --- Page Adhésion (adhesion.html) --- */
.membership-section {
    text-align: center;
}

.benefits-grid {
     display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    column-gap: 40px;
    row-gap: 40px;
    
    margin-top: var(--spacing-lg);
}
/* Responsive pour différentes tailles d'écran */
@media (max-width: 1400px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur écrans moyens */
    }
}

@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablettes */
    }
}

@media (max-width: 640px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobiles */
    }
}

.benefit-card {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border-bottom: 5px solid var(--primary-color);
    transition: transform var(--transition-speed) ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.benefit-title {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.benefit-text {
    font-size: 0.95rem;
    color: var(--light-text-color);
}

.adhesion-procedure {
    text-align: left;
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-top: var(--spacing-lg);
    width: 100%;
    display: flex; /* Utilise Flexbox */
    flex-direction: column; /* Aligne les éléments en colonne */
    border: 1px solid #e0e0e0; /* Bordure discrète */
}

.procedure-list {
    list-style-type: decimal;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    list-style-type: none;
}

.procedure-item {
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;

    display: flex; /* Utilise Flexbox pour aligner l'icône et le texte */
    align-items: center; /* Centre verticalement */
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease;
    counter-reset: procedure-step;

}
.procedure-list i {
    /* Styles pour le cercle */
    
    justify-content: center;
    align-items: center;
   
    /* background-color: var(--primary-color); */
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 20px;
    margin-left: 10px;

    
    /* border-radius: 50%; Transforme l'élément en cercle */
    
    /* Ombre pour un effet de profondeur */
    box-shadow: var(--shadow-sm);
}
.procedure-item:hover {
    background-color: #f9f9f9; /* Changement de couleur au survol */
}
.procedure-item h4::before {
    counter-increment: procedure-step;
    content: counter(procedure-step);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    border-radius: 50%; /* Numéro en forme de cercle */
    box-shadow: var(--shadow-sm);
}

.procedure-item b {
    color: var(--primary-color);
}

.procedure-note {
    font-style: italic;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    margin-top: var(--spacing-md);
}

.adhesion-procedure .button {
    margin-top: var(--spacing-lg);
    display: block; /* Le bouton prend toute la largeur */
    max-width: 400px; /* Limite la largeur du bouton */
    margin-left: auto;
    margin-right: auto;
}

/* --- Page Événements & Galerie (evenements.html) --- */
.section-intro {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.upcoming-events, .past-events-gallery {
    text-align: left;
}

.events-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.event-card {
    background-color: var(--card-background);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--accent-color);
    transition: transform var(--transition-speed) ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.event-title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.event-meta {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin-bottom: var(--spacing-xs);
}

.event-description {
    font-size: 0.95rem;
    color: var(--text-color);
}
/* Styles de la galerie (inchangés) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.gallery-item-container {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.gallery-icon {
    position: absolute;
    top: 10px; /* Espace depuis le haut */
    left: 10px; /* Espace depuis la gauche */
    color: white; /* Couleur de l'icône */
    font-size: 1.5rem; /* Taille de l'icône */
    z-index: 10; /* Assure que l'icône est au-dessus de l'image */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Ajoute une ombre pour la visibilité */
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.gallery-item-container:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.gallery-link {
    display: block;
    height: 200px;
    overflow: hidden;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-speed) ease;
}

.gallery-item-container:hover .gallery-image {
    transform: scale(1.1);
}

.image-caption {
    padding: var(--spacing-sm);
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    font-size: 0.95rem;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
}

/* --- Lightbox Styles (Combinés et optimisés) --- */

/*
 * -----------------------------------------------------------------------------
 * Styles de la lightbox
 * -----------------------------------------------------------------------------
 */

.lightbox {
   
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
     transition: opacity var(--transition-speed) ease, 
                visibility var(--transition-speed) ease,
                transform 1s ease;
    z-index: 1000;
    transform: translateY(-100%);
}

/* ➡️ Logique d'affichage CSS : Cible l'ID de l'URL ⬅️ */
.lightbox:target {
    visibility: visible;
    opacity: 1;
}

.lightbox-content {
    /* Conteneur de l'image, centré par flexbox */
    max-width: 90%;
    max-height: 90%;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
    overflow: hidden;
    z-index: 2; /* Assure que le contenu est au-dessus de l'overlay */
}

.lightbox-image {
    /* Styles de l'image à l'intérieur de la lightbox */
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: black;
}

.lightbox-close {
    /* Le bouton de fermeture */
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2.5rem;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    transition: color var(--transition-speed) ease;
    z-index: 3; /* Au-dessus de tout */
}

.lightbox-close:hover {
    color: var(--secondary-color);
}
/* Règle pour l'affichage de la lightbox avec JavaScript */
.lightbox.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.lightbox-overlay {
    /* L'overlay cliquable (le fond sombre) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sous le contenu et le bouton de fermeture */
}

/* --- Page Contact (contact.html) --- */
.contact-section {
    text-align: center;
}

.contact-info-section {
    text-align: left;
}

.contact-list {
    list-style: none; /* Supprime les puces par défaut */
    padding: 0;
    max-width: 500px; /* Limite la largeur pour une meilleure lisibilité */
    margin: 0 auto var(--spacing-lg);
}

.contact-item {
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
}

.contact-item b {
    color: var(--primary-color);
}

.contact-form-section {
    text-align: left;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);
}

.contact-form .button {
    display: block;
    width: 100%;
    margin-top: var(--spacing-lg);
}

.social-location-section {
    text-align: center;
}

.social-links-container {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0 var(--spacing-lg);
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne */
}

.social-links-container .fa-facebook-f { background-color: #3b5998; color: white;  margin-right: 10px;font-size: 1.5em;border-radius: 5px;padding: 5px;}
.social-links-container .fa-instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white; margin-right: 10px;font-size: 1.5em;border-radius: 5px;padding: 5px;}
.social-links-container .fa-whatsapp { background-color: #25d366; color: white; margin-right: 10px;font-size: 1.5em;border-radius: 5px;padding: 5px;}
.social-links-container .fab .fa-brands {
    margin-right: 10px;
    font-size: 1.2em;
    
}
.social-link {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.social-facebook:hover { background-color: #3b5998; color: white;}
.social-instagram:hover { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white;}
.social-whatsapp:hover { background-color: #25d366; color: white;}

.location-map {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    max-width: 100%; /* Assure que la carte est responsive */
}

/* --- Page Générateur de Carte (generateur_carte.html) --- */
.card-generator-section {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligner en haut pour éviter le centrage vertical total */
    min-height: calc(100vh - 120px); /* Ajuste la hauteur pour l'affichage */
    padding: var(--spacing-lg) var(--spacing-sm);
    background: linear-gradient(135deg, var(--background-color) 0%, #e0e0e0 100%);
}

.card-generator-container {
    max-width: 600px;
    width: 100%;
    padding: var(--spacing-lg);
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.generator-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.generator-title {
    font-size: 2rem;
    color: var(--primary-color);
}

.brand-slogan {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-form {
    text-align: left; /* Aligne le formulaire à gauche dans son conteneur */
}

.card-form .button {
    margin-top: var(--spacing-lg);
    width: 100%; /* Le bouton prend toute la largeur du formulaire */
}

.instructions-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid #eee;
    text-align: left;
}

.instructions-title {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.instructions-list {
    list-style-type: disc;
    padding-left: var(--spacing-lg);
    font-size: 0.95rem;
    color: var(--light-text-color);
}


/* --- Page Connexion Admin (login.html) --- */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, var(--primary-color) 0%, #4CAF50 100%);
}

.login-container {
    background-color: var(--card-background);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header {
    margin-bottom: var(--spacing-lg);
}

.login-title {
    font-size: 2rem;
    color: var(--primary-color);
}

.login-form {
    margin-top: var(--spacing-md);
}

.login-form .button {
    width: 100%;
    margin-top: var(--spacing-lg);
}

/*====================
  Section de profil de membre spécifique
  ====================*/

.member-profile-section {
    padding: 3rem 1rem;
}

.member-bio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
}

.member-bio-card:hover {
    transform: translateY(-10px);
}

.member-photo-container {
    border: 5px solid var(--secondary-color);
    border-radius: 50%;
    overflow: hidden;
    width: 200px;
    height: 200px;
    margin-bottom: 1.5rem;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.profile-photo:hover {
    transform: scale(1.1);
}

.member-details {
    width: 100%;
}

.profile-name {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-role {
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
}

.profile-contact-info {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 1.5rem;
}

.profile-bio {
    text-align: left;
}

.profile-bio h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
/* En-tête de la page d'actualité */
.page-header.news-header {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: 6rem 1rem 3rem;
    text-align: center;
}

.news-header .page-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 0.3rem;
    margin-top: 8px;
}

.news-date {
    font-size: 1rem;
    font-style: italic;
    opacity: 0.8;
    color: wheat;
}

/* Section principale et conteneur */
.main-content.news-detail-section {
    padding: 2rem;
}
/*====================
  Mise en page du contenu de l'article
  ====================*/

.news-image-container {
    margin-bottom: 2rem;
    text-align: center;
}

.news-image-full {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.news-content-full {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

.news-content-full p {
    margin-bottom: 1.5rem;
}

/* Lien de retour */
.back-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/*
 * -----------------------------------------------------------------------------
 * Media Queries (Responsive Design)
 * -----------------------------------------------------------------------------
 */

@media (max-width: 992px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .page-title { font-size: 2.5rem; }
    .hero-title { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.3rem; }
    .mission-list {
        display: grid;
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
        gap: var(--spacing-md); /* Crée un espacement entre les cartes */
    }
    .mission-item{
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Ajustement du padding du body pour mobile si nécessaire */
    body {
        padding-top: 60px; /* Conserve le padding pour éviter que le contenu ne soit caché */
    }
    
    .main-nav {
        flex-direction: row; /* Reviens à la ligne horizontale pour le logo et le bouton */
        align-items: center;
        justify-content: space-between; /* Espace le logo et le bouton */
    }

    /* Le menu principal devient superposé et caché par défaut */
    .main-menu {
        position: fixed; /* Reste fixe par rapport à la fenêtre */
        top: 60px; /* Commence juste en dessous du header */
        left: 0;
        width: 100%;
        height: calc(100vh - 60px); /* Prend le reste de la hauteur de l'écran */
        background-color: var(--primary-color); /* Même fond que le header */
        flex-direction: column;
        padding: var(--spacing-sm) 0;
        transform: translateX(-100%); /* Masqué hors de l'écran */
        transition: transform var(--transition-speed) ease-in-out;
        z-index: 90; /* En dessous du header mais au-dessus du reste */
        box-shadow: var(--shadow-md);
        overflow-y: auto; /* Permet le défilement si le menu est trop long */
    }
    .member-profile-section .section-block{
        padding: 0;
    }

    .main-menu.active {
        transform: translateX(0); /* Affiche le menu */
    }
        .lang-select {
        padding: 3px 5px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    .lang-select option {
        padding: 8px;
        font-size: 10px;
        border-radius: 20px;
    }

    .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Séparateur */
    }
    .nav-item:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: block; /* Prend toute la largeur de l'élément de liste */
        padding: var(--spacing-md);
    }

    .menu-toggle {
        display: block; /* Affiché sur mobile */
        /* align-self: center; // Pas nécessaire si justify-content: space-between */
    }

    .page-header {
        padding: var(--spacing-md);
        margin-top: 60px; /* Assure que le header de la sous-page n'est pas caché */
    }
    
    .hero-section {
        height: 100vh; /* Ajuste la hauteur de la section d'accueil sur mobile */
        margin-top: -60px; /* Compense le padding-top du body */
    }
    .main-content {
        /* padding: var(--spacing-md) var(--spacing-sm); */
        max-width: 100%;
        opacity: 1; /* Rendre le contenu visible */
        transform: translateY(0); /* Réinitialise la translation */
    }
    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1.8rem;
    }
    .mission-list {
        display: grid;
        grid-template-columns: 50% 50%; /* Force la grille à n'avoir qu'une seule colonne */
        gap: var(--spacing-md); /* Crée un espacement entre les cartes */
    }
    .mission-item{
        width: 100%;
    }
    .cta-buttons {
        flex-direction: column;
    }
    .cta-buttons .button {
        width: 80%;
        margin: 0 auto;
    }

    .form-row {
        flex-direction: column;
        gap: 0; /* Supprime le gap entre les éléments en colonne */
    }
    .form-group {
        width: 100%; /* Chaque groupe prend toute la largeur */
    }
    .news-grid {
        display: grid;
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
        gap: var(--spacing-md); /* Crée un espacement entre les cartes */
    }

    .partner-logo {
        max-width: 120px;
    }

    .lightbox-close {
        font-size: 2rem;
        top: 15px;
        right: 15px;
    }
    
.lightbox {
        /*
         * Utilise la position fixe pour couvrir toute la fenêtre d'affichage,
         * ce qui empêche le contenu de la page de s'afficher derrière.
         */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* Assure que la lightbox est au-dessus de tout le reste du contenu */
        z-index: 1000;
        
        /* Centrage et fond de la lightbox */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.85);
        padding: var(--spacing-sm);
    }
    
    .lightbox-content {
        /* Le conteneur du contenu s'adapte à l'écran */
        max-width: 90%;
        max-height: 90vh; /* Limite la hauteur à 90% de l'écran pour éviter le défilement */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .lightbox-image {
        /* L'image elle-même est forcée de s'adapter au conteneur */
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

    .lightbox-close {
        /* Le bouton de fermeture est toujours visible en haut à droite */
        font-size: 2rem;
        top: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .page-title { font-size: 2rem; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1.4rem; }

    .main-content {
        /* padding: var(--spacing-md) var(--spacing-xs); */
        max-width:100% ;
    }
    .content-container{
        max-width: 100%;
        padding: 0;
    }
    .section-block {
        padding: var(--spacing-md);
        max-width: 90%;
    }
    .about-section{
        max-width: 100%;
    }
    .section-text{
        text-align: left;
    }
    .mission-list {
        display: grid;
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
        gap: var(--spacing-md); /* Crée un espacement entre les cartes */
    }
    .mission-item{
        width: 100%;
    }
    .page-header{
        margin-top: 0;
    }
    .button {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .logo-link {
        font-size: 1.2rem;
    }
    .logo-img {
        height: 35px;
    }
    .equipe-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
    margin-top: var(--spacing-md);
    }
    .member-card{
        margin-left: 0;
       
    }
    .member-photo {
        width: 100px;
        height: 100px;
    }
    .member-name {
        font-size: 1.2rem;
    }

    .event-card, .news-card, .benefit-card, .testimonial-card, .stat-card {
        padding: var(--spacing-sm);
    }
    .news-card img{
        display: block;
    }
     .news-card {
        /* Met en place le conteneur en colonne */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre le contenu si nécessaire */
        text-align: center; /* Centre le texte */
    }

    .news-card .news-image {
        /* L'image doit prendre toute la largeur */
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: var(--spacing-sm); /* Ajoute de l'espace en dessous de l'image */
    }

    .news-card .news-content {
        /* Le conteneur de texte s'adapte */
        width: 100%;
    }

    /* Optionnel : pour la galerie */
    .news-grid {
        grid-template-columns: 1fr; /* S'assure qu'une seule carte s'affiche par ligne */
    }
    .testimonials-container{
        display: grid;
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
        gap: var(--spacing-md); /* Crée un espacement entre les cartes */
    }
    .events-list-grid{
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */
       
    }
    .gallery-grid{
        grid-template-columns: 1fr; /* Force la grille à n'avoir qu'une seule colonne */

    }
    .gallery-link {
        height: 180px;
    }
    .procedure-list li{
        margin-left: 0;
        
        padding-left: 0;
    }
    
    .procedure-list i {
        margin-left: 0;
        margin-right: 5px;
        padding-left: 0;
    
    }
    .procedure-list h4{
        line-height: 2em;
        text-align: center;
    }
    .adhesion-procedure{
        padding-left: 0;
    }
    .login-container, .card-generator-container {
        padding: var(--spacing-md);
    }
}
/* Keyframe pour une animation d'apparition douce */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}