@import url('https://fonts.googleapis.com/css2?family=Merienda+One&family=Nunito+Sans&display=swap" rel="stylesheet');


.redressed{
	font-family: 'Redressed', cursive;
}
.merriweather{
	font-family: 'Merriweather', serif;
}


/* Déco du texte h1 */
.hero-title {
    margin-top: 150px;
    text-align: center;
    font-size: 5vw; /* Taille adaptative */
    text-shadow: 0 0 10px #000;
    color: #f1f1f1;
    font-family: "Merienda One", sans-serif;
}

/* Ajustements sur petits écrans */
@media (max-width: 768px) {
    .hero-title {
        font-size: 8vw; /* Augmenter la taille sur petits écrans */
        margin-top: 100px; /* Réduction du margin-top */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 10vw; /* Encore plus grand pour mobile */
        margin-top: 80px;
    }
}


   
   


.facebook-icon {
    color: #1877F2; /* Couleur officielle de Facebook */
}

.facebook-icon:hover {
    color: #145DA0; /* Couleur légèrement différente pour l'effet hover */
}

.instagram-icon {
    color: #E4405F; /* Couleur officielle Instagram */
}

.instagram-icon:hover {
    color: #C13584; /* Couleur de survol */
}

.linkedin-icon {
    color: #0077B5; /* Couleur officielle LinkedIn */
}

.linkedin-icon:hover {
    color: #005582; /* Couleur de survol */
}

.tiktok-icon {
    color: #000000; /* Couleur noire officielle TikTok */
}

.tiktok-icon:hover {
    color: #69C9D0; /* Couleur secondaire TikTok */
}

.nav-item .fa-home {
    color: #000000; /* Remplacez par la couleur souhaitée */
}

.nav-item .fa-home:hover {
    color: #000000; /* Optionnel : couleur pour le survol */
}


/* Style pour le slider*/

   /* Personnalisation du carousel */
  /* Personnalisation du slider */
/* Personnalisation générale du slider */
.custom-slider {
    width: 100%;
    height: 500px; /* Ajuste la hauteur en fonction de ton besoin */
    position: relative;
    overflow: hidden;
    background-color: yellow; /* Cadre jaune autour du slider */
}

/* Disposition du contenu dans chaque item du carousel */
.carousel-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 20px;
}

/* Contenu texte à gauche */
.carousel-text {
    flex: 1; /* Prend la moitié gauche */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Le cadre contenant le titre et la description */
.custom-caption {
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: left;
    width: 80%; /* Ajuste la largeur du cadre de texte */
}

/* Image à droite */
.carousel-image {
    flex: 1; /* Prend la moitié droite */
    padding: 20px;
}

/* Personnalisation de l'image */
.carousel-image img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Pour s'assurer que l'image couvre entièrement la zone sans déformation */
}

/* Personnalisation des contrôles de navigation */
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: black;
}

/* Pour les petits écrans, ajuster la disposition */
@media (max-width: 768px) {
    .carousel-content {
        flex-direction: column; /* Empile les colonnes sur les petits écrans */
    }

    .carousel-text {
        padding-bottom: 20px; /* Espacement sous le texte */
    }

    .custom-caption {
        width: 90%; /* Largeur du cadre plus grande sur mobile */
    }

    .carousel-image {
        padding-top: 20px; /* Espacement de l'image quand les éléments sont empilés */
    }
}

/* Personnalisation des boutons de navigation Previous et Next */
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 50%;
   transform: translateY(500%); 
   z-index: 10; /*Pour s'assurer que les boutons sont au-dessus de l'image */
   background-color: rgba(0, 0, 0, 0.5); 
   border-radius: 50%;
    width: 30px; /* Largeur du bouton */
    height: 30px; /* Hauteur du bouton */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 2rem; /* Espacement supplémentaire depuis les bords */
}

/* Personnalisation des icônes des boutons */
.carousel-control-prev-icon, .carousel-control-next-icon {
    font-size: 20px; /* Taille de l'icône */
    color: white; /* Couleur des icônes */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Espacement des boutons à gauche et à droite */ 
.carousel-control-prev {
    left: -5px; /* Décalage à gauche */
}

.carousel-control-next {
    right: 10px; /* Décalage à droite */
}

/* Optionnel : effets au survol des boutons */
/* .carousel-control-prev:hover, .carousel-control-next:hover {
    /* background-color: rgba(0, 0, 0, 0.8); Assombrir au survol */
 /* } */

.custom-caption h5 {
    font-weight: bold;  /* Met le titre en gras */
    /* text-transform: uppercase;  Met le titre en majuscules */
}

/* styliser le bouton en savoir plus */
/* Personnalisation du bouton "En savoir plus" */
.custom-caption .btn-learn-more {
    display: inline-block;
    padding: 10px 20px; /* Taille du bouton */
    background-color: #4aa3a2; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Enlever la décoration de lien */
    border-radius: 5px; /* Coins arrondis */
    margin-top: 10px; /* Espacement avec la description */
    font-weight: bold; /* Mettre le texte en gras */
    transition: background-color 0.3s ease; /* Animation lors du survol */
}

/* Effet au survol du bouton */
.custom-caption .btn-learn-more:hover {
    background-color: #d98c3d; /* Couleur au survol */
}


/* Styliser Footer*/
/* debut de la Section footer */
.cc-footer{
    background-color: #b6d8f2;
 
 }
     .cc-footer .reseau img{
         width: 40px;
         border-radius: 50%;
         margin: 10px 5px;
     }
 
     .nav a:hover{
        text-decoration: underline;
        color: #4aa3a2;
     } 


     /* styliser les liens reseaux sociaux du navbar*/
    
         .c-footer .reseau img{
             width: 40px;
             border-radius: 50%;
             margin: 10px 5px;
         }
     
         .nav a:hover{
            text-decoration: underline;
            /* color: #4aa3a2; */
         } 
    


         /* SECTION ESPACE ET PARCS DE LA RDC */
         /* ---------------Section tarif----------------- */
.section-tarifs{
    padding-bottom: 150px;
    border-bottom: 1px dashed #333;
}
.section-tarifs h3{
    text-align: center;
    font-size: 45px;
    color: #4aa3a2;
    margin: 120px 0 20px;
    padding: 0 30px;
}
.section-tarifs hr{
    width: 400px;
    margin: 20px auto 100px;
    
}
.container-tarifs{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.cartes-tarifs{
    width: 350px;
    height: auto;
    border-radius: 5px;
    margin: 15px 15px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
    position: relative;
}
.cartes-tarifs:hover{
    transform: translateY(-5px);
}
.cartes-tarifs h4{
    text-align: center;
    padding: 25px 20px;
    font-size: 35px;
    clip-path: polygon(0 0,100% 0%,100% 80%,0 100%);
    background: #04687c;
}
.cartes-tarifs span{
    display: block;
    text-align: center;
    padding: 15px;
    font-size: 25px;
    font-weight: bold;
}
.cartes-tarifs:nth-child(2) h4{
    background: #47b9cf;
}
.cartes-tarifs:nth-child(3) h4{
    background: #1f5762;
}
.cartes-tarifs p{
    font-size: 18px;
    padding: 20px 10px;
    border-bottom: 1px solid rgb(194,197,194);
}
.cartes-tarifs p:last-of-type{
    border-bottom: 1px solid rgb(194,197,194);
}
.cartes-tarifs p:nth-child(odd){
    background: rgba(195,195,194,0.219);
}
.cartes-tarifs a{
    display: block;
    text-decoration: none;
    border: 1px solid #333;
    text-align: center;
    width: 200px;
    height: 50px;
    border-radius: 9999px;
    color: #333;
    font-size: 18px;
    line-height: 50px;
    margin: 20px auto;
    transition: all 0.2s ease-in-out;
}
.cartes-tarifs a:hover{
    background: #333;
    color: #f1f1f1;
}
@media screen and (max-width:900px){
    .section-tarifs h3{
        font-size: 35px;
        margin: 80px 0 80px;
    }
}

@media screen and (max-width:425px){
    .section-tarifs h3{
        font-size: 30px;
        padding: 0 10px;
        margin: 50px 0;
    }
    .section-tarifs hr{
        width: 200px;
        margin: 20px auto 20px;
    }
}

        /* Forcer la taille uniforme des images */
        .card-img-top {
            height: 200px; /* Hauteur fixe */
            object-fit: cover; /* Coupe et ajuste l'image */
        }

        /* Badge de catégorie sur l'image */
        .category-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
            color: #fff;
            font-size: 0.9rem;
            padding: 5px 10px;
            border: 2px solid #fff; /* Bordure blanche */
            border-radius: 5px; /* Coins arrondis */
        }

        /* Rendre la carte entière cliquable */
        .card-link {
            text-decoration: none; /* Enlever le soulignement du lien */
            color: inherit; /* Garder les couleurs par défaut */
        }

        .card {
            position: relative; /* Pour positionner le badge */
            border: none; /* Retire la bordure de la carte */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
            transition: transform 0.2s; /* Animation au survol */
        }

        .card:hover {
            transform: scale(1.03); /* Effet d'agrandissement au survol */
        }
   

    /* Pour le contact */
        .contact-info {
            display: flex;
            flex-wrap: wrap; /* Permet de faire passer les éléments sur plusieurs lignes si nécessaire */
            justify-content: space-around;
            align-items: flex-start;
            background-color: #f4f4f9;
            padding: 40px 20px; /* Ajout d'un padding plus important */
            border-radius: 8px;
            gap: 20px; /* Espace entre les colonnes */
          }
          
          .info-item {
            flex: 1 1 calc(25% - 20px); /* Les éléments occupent 25% de la largeur avec un espace */
            text-align: center;
            max-width: 300px; /* Limite la largeur pour un alignement uniforme */
            margin: 10px 0; /* Espace entre les éléments */
          }
          
          .info-item i {
            font-size: 30px; /* Taille des icônes */
            color: #a00;
            margin-bottom: 15px;
          }
          
          .info-item h3 {
            font-size: 20px;
            margin: 15px 0;
            color: #333;
          }
          
          .info-item p {
            font-size: 16px;
            color: #666;
            line-height: 1.5; /* Espacement des lignes */
          }
          
          /* Responsive Design */
          @media (max-width: 768px) {
            .contact-info {
              flex-direction: column; /* Aligne les éléments en colonne sur des petits écrans */
              gap: 30px; /* Espace plus important entre les blocs */
            }
          
            .info-item {
              flex: 1 1 100%; /* Les éléments occupent toute la largeur */
              max-width: none; /* Supprime la limite de largeur */
            }
          }
          
/* Pour styliser la carte dans la page contact */
.map-section {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f9;
    border-radius: 8px;
    margin-top: 20px;
  }
  
  .map-container {
    max-width: 1000px;
    margin: 0 auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
  }
  

  /* css pour le compteur */
  /* Section des compteurs */
.counter-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f4f4f9; /* Couleur de fond pour la section */
    padding: 40px 20px;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* Conteneur de chaque compteur */
  .counter-item {
    flex: 1 1 200px; /* Ajuste automatiquement la largeur des compteurs */
    display: flex;
    justify-content: center;
  }
  
  /* Boîte des compteurs */
  .counter-box {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #4aa3a2; /* Couleur de la boîte (correspondant à la navbar) */
    color: #fff; /* Texte en blanc */
    /* border: 4px solid #600; Bordure épaisse */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Effet d'ombre */
    transition: transform 0.3s;
  }
  
  /* Effet au survol */
  .counter-box:hover {
    transform: scale(1.1); /* Agrandissement au survol */
  }
  
  /* Style pour le chiffre */
  .counter-box .count {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
  }
  
  /* Style pour le texte */
  .counter-box p {
    font-size: 16px;
    margin: 5px 0 0;
  }
  


  /* pour la section nos programmes */
  .hero-section {
    position: relative; /* Position relative pour permettre l'ajout de contenu sur l'image */
    background-image: url("{% static 'images/link.png' %}") no-repeat center center/cover;
    
    /* Remplacez 'path/to/your/image.jpg' par le chemin de votre image */
    min-height: 50vh; /* Hauteur minimale pour occuper tout l'écran */
    display: flex;
    align-items: center; /* Centrer verticalement le contenu */
    justify-content: center; /* Centrer horizontalement le contenu */
    padding: 20px; /* Espacement interne */
    color: #fff; /* Texte en blanc */
  }
  
  .hero-section .container {
    z-index: 2; /* Place le contenu au-dessus de l'image */
  }
  
  .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay sombre pour le contraste */
    z-index: 1; /* Place l'overlay entre l'image et le texte */
  }