main {
    margin-top: 100px; /* Ajustez cette valeur selon l'espace désiré */
}



/* Styles pour les en-têtes */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url('mali.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sucess{
    text-align: center;
    color: white;
  }

/* Styles supplémentaires pour les autres éléments */



header {
    background: transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}


.lessons-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permet à plusieurs cartes de passer à la ligne si elles débordent */
    margin-top: 20px; /* Espace au-dessus des cartes */
    padding: 10px 0;
}

.lesson-card {
    flex: 0 0 23%; /* Chaque carte occupe environ 23% de la largeur */
    background-color: #f5f5f5;
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s ease; /* Effet d'agrandissement au survol */
}

.lesson-card:hover {
    transform: scale(1.05);
}

.lesson-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.lesson-card a {
    display: block;
    margin-top: 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.lesson-card a:hover {
    color: #007bff; /* Change la couleur du lien au survol */
}


/* Styles pour les pieds de page */
footer {
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
}
/* Style de la barre de navigation */
.nav-container {
    position: fixed; /* Fixe la barre de navigation en haut de la page */
    top: 0;
    right: 60px; /* Décale légèrement à droite pour faire de la place à l'icône de recherche */
    left: 0;
    width: calc(100% - 320px); /* Réduit la largeur pour compenser le décalage à gauche */
    background-color: transparent; /* Garde le fond transparent pour voir l'image derrière */
    z-index: 1000;
    margin-bottom: 20px; /* S'assure que la navigation est au-dessus des autres éléments */
    display: flex; /* Ajoute un affichage flex pour aligner horizontalement les éléments */
    align-items: center; /* Centre verticalement les éléments dans la barre */
    justify-content: flex-start; /* Alignement horizontal au début */
}

.navbar {
    display: flex;
    justify-content: center; /* Centre les éléments de navigation */
    padding: 10px 0;
}

.nav-link {
    background-color: white; /* Arrière-plan blanc pour les liens */
    padding: 8px 16px;
    margin: 0 10px;
    border-radius: 5px; /* Coins arrondis pour les liens */
    text-decoration: none; /* Supprime le soulignement des liens */
    color: black; /* Texte noir pour les liens */
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet 3D */
}

.nav-link:hover {
    background-color: #f0f0f0; /* Change l'arrière-plan au survol */
}

/* Style pour l'icône de recherche, ajoutée sur le côté gauche */
.search-icon {
    position: fixed; /* Position fixe */
    top: 0px; /* Alignement vertical avec la barre de recherche */
    right: 10px; /* 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 */
}




/*adaptation a differentes appreils 

/* Media Queries pour adapter le style à différentes tailles d'écran */
@media (max-width: 600px) {
    body {
       
        overflow-x: hidden; /* Empêche le défilement horizontal dû à des débordements */
        background-position: top center;
        text-align: center; /* Centrage du texte et des éléments inline */
    margin: 0; /* Enlève la marge par défaut */
    }
    .navbar {
       
        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;

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

}



.nav-container .navbar 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 */
}

    /*cartes*/
    /* Container qui englobe les cartes */
    .lessons-container {
        display: grid;
        justify-content: center; /* Aligner les cartes à gauche */
        grid-template-columns: repeat(3, 1fr);
        gap: 40px; /* Augmentez ce gap si nécessaire pour plus d'espacement */
       padding-right: 28px;
        justify-content: center; /* Centre les cartes horizontalement */
        width: calc(100% - 40px); /* Ajustez la largeur si nécessaire */
        margin: auto; /* Centre le conteneur sur la page */
    }

    .lesson-card {
        display: block;
        width: 100%;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-radius: 8px;
    }

    .lesson-card img {
        width: 100%;
        height: auto;
    }
}
    




@media (min-width: 321px) and (max-width: 480px) {
    body {
        font-size: 85%;
        padding: 15px;
    }
}

@media (max-width: 320px) {
    body {
        font-size: 80%;
        padding: 10px;
    }
}

/* Flexbox pour une navigation responsive */
.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navbar a {
    padding: 10px;
    flex-grow: 1;
    text-align: center;
}

/* Rendre toutes les images responsives */
img {
    max-width: 100%;
    height: auto;
}

/* Améliorations des formulaires pour une meilleure accessibilité sur mobile */
input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    box-sizing: border-box; /* Inclut le padding et le border dans la largeur */
}

/* Styles des boutons pour une meilleure accessibilité */
button {
    padding: 15px 25px;
    font-size: 100%;
    cursor: pointer;
}

.navbar .nav-link {
    color: #000; /* Couleur initiale du texte */
    background-color: rgb(87, 88, 102); /* Fond initialement transparent */
    padding: 10px; /* Ajoute de l'espacement autour du texte */
    transition: color 0.3s, background-color 0.3s, transform 0.3s; /* Transition douce pour les changements */
}

.navbar .nav-link:hover {
    color: white; /* Change la couleur du texte en blanc au survol */
    background-color: #4CAF50; /* Change la couleur de fond en vert au survol */
    transform: scale(1.1); /* Agrandit légèrement le bouton au survol pour un effet dynamique */
}

/* Assure la visibilité du texte dans toute la page */
body, h1, h2, h3, p, span {
    color: #333 !important; /* Couleur foncée pour assurer la visibilité sur des fonds clairs */
    font-size: 16px !important; /* Taille de police standard */
    visibility: visible !important; /* S'assure que les éléments sont visibles */
    opacity: 1 !important; /* Assure que les éléments ne sont pas transparents */
    display: block !important; /* S'assure que les éléments ne sont pas masqués */
    z-index: 1000 !important; /* S'assure que le texte est en avant-plan */
}


/* 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 */
}