/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    height: 100vh; /* Limite la hauteur à la taille exacte de l'écran */
    width: 100vw; /* Prend toute la largeur de l'écran */
    overflow-x: hidden; /* Empêche le scroll si le contenu dépasse */
    
}



/* En-tête moderne avec dégradé fluide */
header {
    background: linear-gradient(to bottom, rgba(48, 51, 204, 0.9), rgba(109, 109, 206, 0.7), rgba(243, 141, 141, 0)); /* Dégradé plus fluide */
    color: rgb(189, 255, 199);
    padding: 20px;
    text-align: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: sticky;
    width: 100%;
    backdrop-filter: blur(10px); /* Effet de verre dépoli */
    top: 0;
    left: 0;
    z-index: 1000; /* Assure que le header reste au-dessus */
}

/* Ajout d'un léger effet lumineux */
header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* Navigation */
nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline-block;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: rgb(129, 224, 110);
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #225a34;
    transition: 0.3s ease-in-out;
}

nav ul li a:hover {
    background-color: #113247;
}

.scroll {
    width: 100%;
    max-width: 100vw; /* Assure que le conteneur ne dépasse pas l'écran */
    overflow-x: auto; /* Active le défilement horizontal */
    display: flex;
    align-items: center;
    padding: 10px;
    scrollbar-width: thin; /* Rend la barre de scroll plus discrète */
}




/* Container des bulles */
.forum-container {
    display: flex;
    flex-wrap: nowrap; /* Empêche les bulles de passer à la ligne */
    gap: 15px;
    width: max-content; /* Permet aux cartes de s'étendre sans casser la mise en page */
    overflow-x: auto; /* Assure que le scroll fonctionne */
    scroll-behavior: smooth; /* Animation fluide */
}

/* Effet bulle sur les cartes */
.forum-card {
    background: white;
    padding: 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    width: 300px;
    text-align: center;
    flex-shrink: 0; /* Empêche les cartes de rétrécir */
    position: relative;
    transition: transform 0.3s ease-in-out;
    margin-left: 80px;  /* Ajoute une marge à gauche */
    margin-right: 15px; /* Ajoute une marge à droite */
    gap: 15px; /* Garde l'espace entre les bulles */    


}

/* Bouton bulle coloré */
.forum-card a {
    display: inline-block;
    background: linear-gradient(to right, #2b1cb1, #9949c7); /* Dégradé chaleureux */
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 30px; /* Arrondi façon bulle */
    margin-top: 15px;
    font-weight: bold;
    transition: 0.3s ease-in-out;
    box-shadow: 0 5px 10px rgba(255, 111, 97, 0.3); /* Ombre colorée */
}

/* Effet au survol */
.forum-card a:hover {
    background: linear-gradient(to right, #2d5f25, #4ba735);
    transform: scale(1.1); /* Effet d'agrandissement */
    box-shadow: 0 5px 15px rgba(255, 111, 97, 0.5);
}

/* Effet de flottement au survol */
.forum-card:hover {
    transform: translateY(-5px);
}

/* Image en arrondi */
.forum-card img {
    width: 80%;
    border-radius: 5%;
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Empêche l'image de dépasser la largeur de la bulle */
    max-height: 250px; /* Limite la hauteur à 300px */
    height: auto; /* Garde les proportions correctes */
}

/* Texte stylé */
.forum-card h3 {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #373869;
}

.forum-card p {
    font-size: 14px;
    color: #555;
}

/* Bouton arrondi */
.forum-card a {
    display: inline-block;
    background-color: #5254a6;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    margin-top: 15px;
    transition: 0.3s ease-in-out;
}

.forum-card a:hover {
    background-color: #7072d0;
}

.homi {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh; /* Centre l’élément sur toute la hauteur de l’écran */
    
}
.text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh; /* Centre l’élément sur toute la hauteur de l’écran */
    
}
.abouti {
    display: flex;
    justify-content: center;
    height: 65vh; /* Centre l’élément sur toute la hauteur de l’écran */
}
.abouti h2, .abouti p {
    text-align: center;
}
.kestion {
    display: flex;
    justify-content: center;
    height: 100vh; /* Centre l’élément sur toute la hauteur de l’écran */
}

.scroll {
    scrollbar-width: none;
}

.scroll:-webkit-scrollbar {
    display: none;
}

footer {
    background: #2d2e52; 
    color: white;
    padding: 20px;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;

}

.forum-card .small-text {
    font-size: 15px; /* Taille plus petite */
    color: #b6b6b6; /* Gris doux */
    font-style: italic; /* Italique */
    text-align: left;
}
p {
    overflow-wrap: break-word;
}

@media screen and (max-width: 732px) {
    body {
        height: auto; /* Permet un scroll fluide */
    }

    header {
        padding: 20px;
    }

    nav ul {
        display: flex;
        flex-direction: center; /* Transforme le menu en liste verticale */
        align-items: center;
    }

    .forum-container {
        flex-wrap: wrap; /* Permet aux bulles de passer à la ligne */
        justify-content: center;
        padding: 0 10px; /* Réduit la marge latérale */
    }

    .forum-card {
        width: 90%; /* Réduit la largeur des cartes sur mobile */
        margin: 10px auto; /* Centre les bulles */
    }

    .forum-card img {
        width: 100%; /* Assure que l’image s’adapte */
    }

    .homi, .abouti, .kestion {
        height: auto; /* Ajuste la hauteur pour éviter les coupures */
        padding: 20px;
    }
    nav ul {
        display: flex;
        flex-direction: column; /* Transforme le menu en liste verticale */
        align-items: center;
        margin-bottom: 10px; /* Ajoute un espace de 15px entre chaque bouton */
        gap: 20px;
    }







/* Adaptation pour les petits écrans */
@media screen and (max-width: 600px) {
    nav ul {
        display: flex;
        flex-direction: column; /* Transforme le menu en liste verticale */
        align-items: center;
        margin-bottom: 10px; /* Ajoute un espace de 15px entre chaque bouton */
        gap: 20px;
    }
}
}
@media screen and (max-width: 1024px) {
    body {
        height: auto; /* Permet un scroll fluide */
    }

    header {
        padding: 20px;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap; /* Permet au menu de s'adapter */
        justify-content: center;
    }

    .forum-container {
        flex-wrap: wrap; /* Permet aux bulles de passer à la ligne */
        justify-content: center;
        padding: 0 20px; /* Ajuste la marge latérale */
    }

    .forum-card {
        width: 45%; /* Ajuste la largeur des cartes sur tablette */
        margin: 10px auto; /* Centre les bulles */
    }

    .forum-card img {
        width: 100%; /* Assure que l’image s’adapte */
    }

    .homi, .abouti, .kestion {
        height: auto; /* Ajuste la hauteur pour éviter les coupures */
        padding: 40px;
    }
    .abouti {
        margin-bottom: 20px;
    }
    .homi {
        margin-top: 20px;
    }
}