/* Variables */



:root {



    --primary-color: #4CAF50;



    --secondary-color: #2E7D32;



    --text-color: #333;



    --light-bg: #f5f5f5;



    --white: #ffffff;



}







/* Reset et styles de base */



* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







body {



    font-family: 'Arial', sans-serif;



    line-height: 1.6;



    color: var(--text-color);



}







/* Navbar */



.navbar {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 1rem 5%;



    background-color: var(--white);



    box-shadow: 0 2px 5px rgba(0,0,0,0.1);



}







.logo span {



    font-size: 1.5rem;



    font-weight: bold;



    color: var(--primary-color);



}







.nav-links {



    display: flex;



    gap: 2rem;



}







.nav-links a {



    text-decoration: none;



    color: var(--text-color);



    font-weight: 500;



    transition: color 0.3s;



}







.nav-links a:hover,



.nav-links a.active {



    color: var(--primary-color);



}







.nav-buttons {



    display: flex;



    gap: 1rem;



}







/* Boutons */



.btn-primary,



.btn-secondary {



    padding: 0.5rem 1.5rem;



    border: none;



    border-radius: 5px;



    cursor: pointer;



    font-weight: 500;



    transition: all 0.3s;



}







.btn-primary {



    background-color: var(--primary-color);



    color: var(--white);



}







.btn-secondary {



    background-color: transparent;



    border: 2px solid var(--primary-color);



    color: var(--primary-color);



}







.btn-primary:hover {



    background-color: var(--secondary-color);



}







.btn-secondary:hover {



    background-color: var(--primary-color);



    color: var(--white);



}







/* Hero Section */



.hero {



    display: flex;



    align-items: center;



    padding: 4rem 5%;



    background-color: var(--light-bg);



    gap: 2rem;



}







.hero-content {



    flex: 1;



}







.hero-content h1 {



    font-size: 2.5rem;



    margin-bottom: 1rem;



    color: var(--primary-color);



}







.hero-content p {



    font-size: 1.1rem;



    margin-bottom: 2rem;



}







.hero-buttons {



    display: flex;



    gap: 1rem;



}







.hero-image {



    flex: 1;



}







.hero-image img {



    width: 100%;



    max-width: 500px;



    border-radius: 10px;



    box-shadow: 0 4px 15px rgba(0,0,0,0.1);



}







/* Features Section */



.features {



    display: flex;



    justify-content: space-around;



    padding: 4rem 5%;



    background-color: var(--white);



    gap: 2rem;



}







.feature-card {



    flex: 1;



    text-align: center;



    padding: 2rem;



    background-color: var(--light-bg);



    border-radius: 10px;



    transition: transform 0.3s;



}







.feature-card:hover {



    transform: translateY(-10px);



}







.feature-card i {



    font-size: 2.5rem;



    color: var(--primary-color);



    margin-bottom: 1rem;



}







.feature-card h3 {



    margin-bottom: 1rem;



    color: var(--primary-color);



}







/* Responsive Design */



@media (max-width: 768px) {



    .hero {



        flex-direction: column;



        text-align: center;



    }







    .hero-buttons {



        justify-content: center;



    }







    .features {



        flex-direction: column;



    }







    .nav-links {



        display: none;



    }



}







/* Styles pour le formulaire d'inscription */



.card {



    border: none;



    border-radius: 15px;



}







.card-body {



    padding: 2rem;



}







.form-control {



    border-radius: 8px;



    padding: 0.75rem 1rem;



    border: 1px solid #dee2e6;



}







.form-control:focus {



    border-color: #4CAF50;



    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);



}







.btn-primary {



    background-color: #4CAF50;



    border-color: #4CAF50;



    padding: 0.75rem 1.5rem;



    border-radius: 8px;



    font-weight: 500;



}







.btn-primary:hover {



    background-color: #388E3C;



    border-color: #388E3C;



}







/* Styles pour la prévisualisation de la photo */



.profile-picture-preview {



    width: 150px;



    height: 150px;



    border-radius: 50%;



    object-fit: cover;



    margin: 1rem auto;



    display: block;



    border: 3px solid #4CAF50;



}







.profile-picture-container {



    text-align: center;



    margin-bottom: 1.5rem;



}







.profile-picture-placeholder {



    width: 150px;



    height: 150px;



    border-radius: 50%;



    background-color: #e9ecef;



    display: flex;



    align-items: center;



    justify-content: center;



    margin: 1rem auto;



    border: 3px solid #4CAF50;



    color: #6c757d;



    font-size: 3rem;



}







/* Message d'erreur */



.invalid-feedback {



    color: #dc3545;



    font-size: 0.875rem;



    margin-top: 0.25rem;



}







/* Message d'aide */



.form-text {



    color: #6c757d;



    font-size: 0.875rem;



    margin-top: 0.25rem;



} 



/* ===== NAVBAR BRAND ===== */

.navbar-brand {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    color: var(--gray-900);

    font-weight: 700;

    font-size: 1.15rem;

    transition: var(--transition);

}



.navbar-brand:hover {

    color: var(--primary-green);

    transform: translateY(-1px);

}



.navbar-logo {

    width: 120px; /* Taille adaptée pour Logo.png qui contient le logo + texte */

    height: auto; /* Hauteur automatique pour maintenir les proportions */

    object-fit: contain;

    transition: var(--transition);

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

}



.navbar-brand:hover .navbar-logo {

    transform: scale(1.1) rotate(5deg);

    filter: drop-shadow(0 4px 8px rgba(135, 217, 0, 0.3));

}



/* ===== MENU ICONS ===== */

.menu-icon {

    width: 14px; /* Réduit de 16px à 14px */

    height: 14px; /* Réduit de 16px à 14px */

    object-fit: contain;

    margin-right: 8px;

    vertical-align: middle;

    transition: var(--transition);

}



.menu-link:hover .menu-icon {

    transform: scale(1.1);

    filter: drop-shadow(0 2px 4px rgba(135, 217, 0, 0.3));

}