/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    background-image: url('mali.jpg');
    background-size: cover;
    background-position: center;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* Header styles */
header {
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
}
/*navs */
nav {
    width: 100%;
}

nav ul {
    display: flex;
    justify-content: center; /* Changé de 'center' à 'flex-start' */
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    margin-left: 1rem; /* Ajoutez une marge à gauche pour pousser le contenu vers la gauche */
    flex-wrap: nowrap;
}

nav ul li {
    margin: 0 0.25rem;
}

nav ul li a {
    padding: 0.7rem 3rem;
    text-decoration: none;
    color: #333;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    transition: all 0.3s ease;
    display: block;
    white-space: nowrap;
    font-size: 0.9rem;
}

nav ul li a:hover {
    background: #4CAF50;
    color: white;
    transform: scale(1.05);
}


/* Main content */
main {
    padding-top: 80px;
    min-height: calc(100vh - 60px);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* Cards container */
.container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
}

/* Styles existants des cartes */
.card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

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

.card-body {
    padding: 10px;
}

.description-cards p {
    margin: 20px auto;
    max-width: 80%;
    font-size: 1.2em;
    color: #aba6a6;
    text-align: center;
}


/* Effet de survol */
.card {
    transition: transform 0.3s ease-in-out; /* Animation douce pour l'effet de survol */
    cursor: pointer; /* Change le curseur pour indiquer la possibilité de cliquer */
    border: 1px solid transparent; /* Ajoute une bordure transparente pour éviter les décalages lors de la transformation */
}

.card:hover {
    transform: translateY(-10px) scale(1.05); /* Déplace la carte vers le haut et l'agrandit */
   
}


/* Footer */
footer {
    background: rgba(255, 255, 255, 0.8); /* Transparence ajustée pour une apparence légère */
    padding: 10px 0; /* Padding vertical pour un peu d'espace au-dessus et en dessous */
    text-align: center;
    width: 100%; /* S'assure que le footer prend toute la largeur */
    display: flex;
    justify-content: center; /* Centre les éléments dans le footer */
    align-items: center;
    border-top: 1px solid #ccc; /* Ajoute une bordure au haut du footer pour le démarquer */
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacement entre les icônes */
}

.social-links img {
    width: 30px; /* Définit une taille uniforme pour toutes les icônes */
    height: 30px;
}

.social-links a {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-links a:hover {
    transform: scale(1.1); /* Effet de zoom léger au survol */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); /* Ombre pour un effet visuel renforcé */
}



/* Message de présentation */
.presentation-message {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    margin: 1rem auto;
    border-radius: 8px;
    max-width: 900px; /* Vous pouvez ajuster la largeur maximale ici */
    font-size: 0.9rem; /* Taille de la police ajustable selon vos besoins */
}

/* Option connexion */
.login-option {
    position: absolute;
    right: 1rem; /* Ajustez la position droite ici */
    top: 50%; /* Centrage vertical */
    transform: translateY(-50%); /* Assure que le bouton est centré verticalement */
}

.login-btn {
    padding: 10px 20px; /* Ajustez le padding du bouton */
    font-size: 16px; /* Taille de la police du bouton */
    color: white;
    background: linear-gradient(45deg, #4CAF50, #8BC34A); /* Couleurs du gradient ajustables */
    border: none;
    border-radius: 5px; /* Ajustez le rayon de la bordure pour changer l'apparence du bouton */
    cursor: pointer;
    transition: background 0.3s ease-in-out, transform 0.2s ease; /* Ajustez la durée des transitions */
}

.login-btn:hover {
    background: linear-gradient(45deg, #8BC34A, #CDDC39); /* Couleurs du gradient au survol ajustables */
    transform: scale(1.05); /* Effet de transformation au survol */
}



/* Responsive design */
@media (max-width: 1200px) {
    .container {
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes pour les écrans sous 1200px */
    }
}

@media (max-width: 900px) {
    .container {
        grid-template-columns: repeat(2, 1fr); /* Deux colonnes pour les écrans sous 900px */
    }

    nav ul li a {
        padding: 0.4rem 0.8rem; /* Ajustement du padding pour les petits écrans */
        font-size: 0.8rem; /* Réduction de la taille de la police pour les petits écrans */
    }

     /*arrier plan pour l'image*/
     body, html {
        /* Appliquer des modifications pour les appareils de largeur exactement 600px */
        background-image: url('mali.jpg'); /* Utiliser une image optimisée pour 600px si nécessaire */
        background-position: top center;
     }

}

@media (max-width: 600px) {
   
    /*arrier plan pour l'image*/
    body, html {
        /* Appliquer des modifications pour les appareils de largeur exactement 600px */
        background-image: url('mali.jpg'); /* Utiliser une image optimisée pour 600px si nécessaire */
        background-position: top center;
     }

/*WakamissokoEducation*/
     h1 {
        font-size: 18px; /* Réduit la taille de la police pour les petits écrans */
    }
    .search-icon {right: 8px;}

/*les matieres*/

    nav ul {
       
            display: flex;
            justify-content: flex-start; /* Changé de 'center' à 'flex-start' */
            list-style: none;
            padding: 0.5rem;
            margin: 0;
            margin-left: 0rem; /* Ajoutez une marge à gauche pour pousser le contenu vers la gauche */
            flex-wrap: nowrap;

    }

    nav ul li {
        margin: 0 0.2rem; /* Ajustement des marges entre les liens */
    }

    nav ul li a {
        padding: 0.3rem 0.6rem; /* Plus petits paddings pour les liens */
        font-size: 0.75rem; /* Encore plus petite taille de police pour les très petits écrans */
    }

    .card img {
        height: 100px; /* Hauteur ajustée des images dans les cartes pour les très petits écrans */
    }
/*les cartes*/

/* Styles de base pour les cartes */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes de même taille */
    gap: 20px; /* Espace entre les cartes */
    padding: 20px; /* Espace autour des cartes dans le conteneur */
}

.card {
    display: block;
    width: 100%; /* Assure que la carte prend toute la largeur de la colonne */
    overflow: hidden; /* Empêche le débordement du contenu de la carte */
}

.card img {
    width: 100%; /* Assure que l'image couvre la largeur de la carte */
    height: auto; /* Garde le rapport d'aspect de l'image */
}

.card-body {
    padding: 10px;
}


}


/* Description texte */
.description-text {
    background-color: rgba(255, 255, 255, 0.8); /* Couleur de fond blanche avec une transparence */
    padding: 20px; /* Espacement intérieur pour donner de l'espace au texte */
    border-radius: 8px; /* Bords arrondis pour un look doux */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre portée pour un effet subtil de profondeur */
    margin: 20px; /* Marge autour du texte pour le délimiter de son environnement */
    margin-left: auto; /* Assure que la marge gauche est auto pour centrer si besoin */
    margin-right: auto; /* Assure que la marge droite est auto pour centrer */
    max-width: 800px; /* Largeur maximale pour la lisibilité du texte */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne et lisible */
    line-height: 1.6; /* Espacement entre les lignes pour améliorer la lisibilité */
    color: #333; /* Couleur de texte sombre pour un bon contraste avec le fond clair */
    text-align: justify; /* Justifie le texte pour une présentation propre et formelle */
}

.description-text p {
    margin-bottom: 1em; /* Ajoute un espace en dessous de chaque paragraphe */
}


/* Style pour l'icône de recherche */
/* Style pour l'icône de recherche, ajoutée sur le côté gauche */
.search-icon {
    position: fixed; /* Position fixe */
    top: 10px; /* Alignement vertical avec la barre de recherche */
    right: 20px; /* Distance du bord droit, ajustez selon votre mise en page */
    z-index: 1002; /* Index plus élevé pour être au-dessus de la boîte de recherche */
    cursor: pointer; /* Curseur pointeur au survol */
    padding: 10px; /* Padding pour une zone cliquable plus grande */
    background-color: #007bff; /* Couleur de fond de l'icône */
    color: white; /* Couleur de l'icône */
    border-radius: 50%; /* Forme ronde */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre pour la visibilité */
}

/* Conteneur de la boîte de recherche */
#search-box {
    display: none; /* Initialement caché */
    position: fixed; /* Fixe la boîte de recherche sur la page */
    top: 10px; /* Alignement vertical avec l'icône de recherche */
    right: 80px; /* Position juste à gauche de l'icône de recherche */
    z-index: 1001; /* Assure qu'elle reste au-dessus des autres éléments */
    background-color: #fff; /* Couleur de fond */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Ombre pour une meilleure visibilité */
}

#search-box input {
    padding: 8px;
    width: 240px; /* Définissez une largeur appropriée pour le champ de saisie */
    border: none; /* Pas de bordure pour l'input */
    outline: none; /* Supprime l'outline lors de la sélection */
}

#search-box.active {
    display: block; /* Affiche le conteneur lorsqu'il est actif */
}

/* Si vous souhaitez ajouter une animation pour que la barre de recherche glisse depuis l'icône, vous pouvez utiliser une transition CSS */
#search-box {
    transition: right 0.3s ease; /* Transition douce pour 'right' */
}

.search-icon:hover {
    background-color: #0056b3; /* Changement de couleur au survol */
}