/* Variables de base pour les couleurs */
:root {
    --primary-color: #2e7d32; /* Vert principal */
    --secondary-color: #d32f2f; /* Rouge principal */
    --light-bg: #f5f5f5;
    --dark-bg: #4c4c4c;
    --border-color: #e0e0e0;
}

/* --- Mise en page principale et suppression des marges par défaut --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #55a033;
}

#app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Correction de l'espacement général */
}

#content-wrapper {
    display: flex;
    flex: 1; /* Prend l'espace restant en hauteur */
}

#main-content {
    flex-grow: 1;
    padding: 20px 15px 0; /* Ajout d'un petit padding en bas pour la lisibilité */
}

/* --- Correction spécifique de l'espace en bas de page (Le Problème principal) --- */

/* Supprimer les marges par défaut des sections principales */
#main-content > section,
#pillarsCarousel {
    margin-bottom: 0 !important;
}

/* Assurez-vous que l'espace entre la section des piliers et le bas de l'écran est minimum */
#pillarsCarousel {
    margin-top: 2rem; /* Espacement au-dessus */
    padding-bottom: 20px; /* Petit espace sous le carrousel */
}

/* --- TOP NAV --- */
#top-navbar {
    display: flex;
    justify-content: space-around;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 100px;
}

.top-nav-item {
    flex-grow: 1;
    text-align: center;
    padding: 15px 10px;
    cursor: pointer;
    border-right: 1px solid var(--border-color);
    transition: background-color 0.3s;
}

.top-nav-item:last-child {
    border-right: none;
}

.top-nav-item i {
    font-size: 28px;
    margin-bottom: 5px;
}

.top-nav-item .label {
    font-size: 14px;
    font-weight: bold;
    color: var(--dark-bg);
}

.top-nav-item:nth-child(1) i { color: var(--primary-color); }
.top-nav-item:nth-child(2) i { color: var(--secondary-color); }
.top-nav-item:nth-child(3) i { color: var(--primary-color); }
.top-nav-item:nth-child(4) i { color: #5bc0de; }
.top-nav-item:nth-child(5) i { color: var(--primary-color); }

.top-nav-item.active {
    border-bottom: 5px solid var(--secondary-color);
    padding-bottom: 10px;
}

/* --- SIDEBAR --- */
#sidebar {
    width: 250px;
    background-color: white;
    padding: 20px 0;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar-nav .nav-link {
    display: block;
    padding: 12px 20px;
    color: var(--dark-bg);
    text-decoration: none;
    font-weight: bold;
    border-left: 5px solid transparent;
    transition: all 0.2s;
}

.sidebar-nav .nav-link i {
    margin-right: 10px;
    color: var(--primary-color);
}

.sidebar-nav .nav-link.active {
    background-color: var(--light-bg);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- CARROUSEL PRINCIPAL --- */
#main-carousel-container {
    /* Réduit la hauteur pour un meilleur affichage sur le bureau */
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}

.carousel-custom-item {
    
    background-size: cover;
    background-position: center;
    color: white;
}
/* Définissez vos images de fond ici (elles ne s'affichent pas sans URL réelle) */
.slide-1 { background-image: url('https://picsum.photos/1200/350?random=1'); }
.slide-2 { background-image: url('https://picsum.photos/1200/350?random=2'); }
.slide-3 { background-image: url('https://picsum.photos/1200/350?random=3'); }

.carousel-caption {
    left: 2%; 
    right: 5%;
    bottom: 20px;
    top: auto; /* Laisse le caption se positionner en bas */
    padding: 15px;
    text-align: start !important; /* Réaligner le texte à gauche comme dans votre intention initiale */
    background-color: #0000007d;
    width: 96%; /* Pour prendre toute la largeur disponible */
}

/* --- CONTENU DU CORPS (#body-content) --- */
.content-block {
    padding: 20px;
    background-color: #c3e697;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 100%;
    color: #000;
}

.left-block h4 {
    color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.home-icon-color {
    color: #fff;
    margin-right: 8px;
}

.btn-learn-more {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 25px;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s;
}

/* Correction du décalage du bouton 'Mes Projets' */
.btn-learn-more.fr {
    float: none; /* Supprime le float qui déformait le layout */
    position: static; /* Supprime la position relative */
    display: inline-block;
}


.right-block {
    text-align: center;
    background-color: var(--light-bg); /* Changé pour une meilleure lisibilité */
}

.right-block h4 {
    color: var(--primary-color);
}

.right-block .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-block img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.right-block .green-btn {
    background-color: var(--primary-color);
}

/* --- CARROUSEL DES PILIERS (#pillarsCarousel) --- */
.info-card {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--primary-color);
    height: auto; /* Permet à la carte de s'adapter au contenu */
    margin-top: 10px;
    margin-bottom: 10px; /* Ajout de marges pour centrer verticalement dans le carrousel */
}

.info-card i {
    font-size: 30px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.info-card h5 {
    color: var(--primary-color);
}
/* Ajoutez ou modifiez ces règles dans votre fichier style.css */

#pillarsCarousel {
    margin-top: 2rem;
    padding-bottom: 20px;
}

/* S'assurer que les cartes dans le carrousel prennent une hauteur égale si nécessaire */
/* Le conteneur du carrousel doit être flexible pour les colonnes */
#pillarsCarousel .carousel-inner {
    overflow: visible; /* Permet aux ombres de cartes de ne pas être coupées */
    padding: 10px 0; /* Ajouter un padding vertical pour éviter que les cartes ne touchent les bords */
}

#pillarsCarousel .carousel-item {
    padding: 1rem 0;
}

#pillarsCarousel .row {
    display: flex; /* Assure que les colonnes sont gérées par flexbox */
    align-items: stretch; /* Force toutes les colonnes à avoir la même hauteur (utile pour info-card) */
}

/* Le style de base de la carte reste le même, mais assurez-vous qu'elle est bien définie */
.info-card {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--primary-color);
    height: 100%; /* Important pour align-items: stretch */
}



/* 1. Assurer la superposition correcte avec z-index (au cas où) */
#sidebar {
    /* La barre latérale doit être au-dessus des autres éléments si elle est fixée/collée */
    /* Assurez-vous qu'elle soit positionnée à gauche */
    position: sticky; /* ou fixed, si vous voulez qu'elle défile avec la page */
    top: 0;
    z-index: 1050; /* Doit être supérieur à tout élément potentiellement flottant */
    height: 100vh; /* Hauteur de la fenêtre */
    width: 200px; /* Largeur définie pour la barre latérale */
    background-color: #f8f9fa; /* Couleur de fond pour bien la délimiter */
    padding-top: 20px;
}
/* Exemple de style pour le fichier style.css */

/* Définition de la couleur d'accentuation (si ce n'est pas déjà fait) */
.text-success {
    color: #198754 !important; /* Couleur verte de Bootstrap par défaut ou votre propre vert */
}
/* Vous pouvez aussi utiliser une couleur liée à la 'Forêt' */
/* .text-success { color: #28a745 !important; } */
.ratio-4x3 {
    --bs-aspect-ratio: 40%;
}
.event-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border-left: 5px solid var(--bs-success); /* Style par défaut */
 }
 .event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
 }
        /* Style des cartes spécifiques au type pour une meilleure différenciation */
        .event-card.card-VisiteTerrain { border-left-color: #198754 !important; } /* Vert: success */
        .event-card.card-Lancement { border-left-color: #0dcaf0 !important; } /* Cyan: info */
        .event-card.card-Débat { border-left-color: #0d6efd !important; } /* Bleu: primary */
        .event-card.card-Formation { border-left-color: #ffc107 !important; } /* Jaune: warning */

 .timeline-date {
  width: 80px;
  height: 80px;
  background-color: #198754; /* success */
  color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
 }
 .timeline-date .day {
  font-size: 2rem;
  line-height: 1;
 }
.text-center-forced{
    text-align: center !important;
}
.text-info {
    --bs-text-opacity: 1;
    color: #198754 !important;
}
.img-fluid-hg{
    height: 500px;
}
/* 1. FLEXBOX pour aligner les boutons en bas des cartes */
.info-card {
    display: flex;
    flex-direction: column;
    height: 100%; 
}

/* 2. TRONCATURE du texte à 3 lignes */
.text-truncate-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; 
    line-height: 1.5em; 
    max-height: 4.5em; /* 1.5em * 3 lignes */
    margin-bottom: 0;
    flex-grow: 1; /* Permet au texte de prendre l'espace restant au-dessus du bouton */
}

/* 3. POUSSER le bouton en bas */
.info-card button {
    margin-top: auto !important; /* Pousse le bouton au bas du conteneur flex */
}

/* 4. ADAPTER l'image à sa zone */
.info-card img {
    /* Retiré : width:250px; */
    max-width: 100%;
    display: block; /* S'assure qu'elle est traitée comme un bloc */
    margin: 0 auto 1rem auto; /* Centre l'image et ajoute une marge en bas */
}
#auth-container {
            min-height: 80vh; /* Hauteur minimale pour centrer verticalement */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 0;
            background-color: #f8f9fa;
        }
        .auth-card {
            max-width: 450px;
            width: 100%;
            border: none;
            border-top: 5px solid #198754; /* Bordure verte distinctive */
            border-radius: .5rem;
        }
.style-contrat {
    font-size: 82%;
    font-weight:700;
}