@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
.bangers-regular {
  font-family: "Bangers", serif;
  font-weight: 400;
  font-style: normal;
}

/* Conteneur principal */
.container {
    flex: 1;
    display: flex;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne */
    gap: 20px;
    justify-content: flex-start; /* Aligne les colonnes à gauche */
    margin-top: 20px;
    padding: 20px;
}


.containertitre {
      background-color: #ff8152;
      color: white;
      text-align: center;
      padding: 2rem 2rem;
      position: relative;
      border-radius: 10px; /* Coins arrondis */
      margin-top : 10px ;
      margin-right : 10px;

    }

.containertitre h1 {
      font-family: 'Bangers', cursive;
      letter-spacing: 5px; /* Ajustez la valeur selon vos besoins */
      font-size: 3rem;
      margin: 0;
    }

.container3 {
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne */
    gap: 20px;
    justify-content: space-around;
    margin-top: 20px;
    padding: 20px;
    background:white; /* Couleur d'arrière-plan du conteneur */
    padding: 10px 10px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Effet d'ombre */
    max-width: 60%; /* Limite la largeur */
    color:black;
}

@media (max-width: 768px) {
  .container3 {
      margin-left:+5px;
      max-width: 100%; /* Limite la largeur */
}
}

.container3 h1{
  color : #3f88c5;
}

.contener4 {
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne */
    gap: 20px;
    justify-content: space-around;
    margin-top: 20px;
    padding: 20px;
    background:#2c3e50; /* Couleur d'arrière-plan du conteneur */
    padding: 10px 10px; /* Espacement interne */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Effet d'ombre */
    max-width: 60%; /* Limite la largeur */
    color:white;
}

/*Pour les écrans larges (menu latéral)*/
@media (min-width: 768px) {
    .container {
        margin-left: 220px; 
    }
}
@media (min-width: 768px) {
    .containertitre {
        margin-left: 220px; 
    }
}


/* Style pour chaque colonne */
.column {
    flex: 0 1 300px; /* Empêche l'expansion de la colonne seule */
    max-width: 100%;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1.5px; /* Ajustez la valeur selon vos besoins */

    color: #3f88c5;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

/* Media query pour les petits écrans */


/* Styles pour les titres */
.column h2 {
    text-align: center;
}

/* Styles pour les listes */
.column ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 10px 0; /* Espace entre les lignes */
}

.column ul li {
    padding: 10px;
    background-color: #3f88c5;
    margin-bottom: 10px;
    border-radius: 4px;
}

.column ul li:hover {
    color: #3f88c5;
      background-color: #6fffb0;
      transform: translateX(5px);
    }

.column ul li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
}

.column ul li a:hover {
    text-decoration: underline;
}

/* Styles pour les listes flexibles */
.course-list {
    display: flex;
    flex-wrap: wrap; /* Permet aux items de passer à la ligne */
    gap: 10px;
}

.course-list li {
    flex: 1 1 100px;
    padding: 10px;
    background-color: #2471A3;
    border-radius: 4px;
}

.course-list li:last-child {
    margin-right: 0;
}

.course-list li:hover {
    background-color: #1F618D;
}

.course-list li a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
}

/* Styles pour le titre principal */
h1 {
    text-align: center ;
    font-size: 2em; /* Ajustement de la taille du titre */
    margin-bottom: auto;
}
p {
    text-align: center;
    margin-bottom: 30px;
}

/* Suppression du margin-left sur .content */
.content {
    flex: 1; /* Prend tout l'espace restant */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

/* Style spécifique pour les listes des chapitres */


.modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permet le défilement si nécessaire */
    background-color: rgba(0,0,0,0.5); /* Fond noir transparent */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Centré verticalement et horizontalement */
    padding: 20px;
    border: 250px solid #888;
    width: 80%; /* Largeur ajustable */
    padding-top: 60px; /* Ajustez cette valeur si nécessaire */
    margin-left: 220px; /* Décale le contenu pour le menu sur les grands écrans */
    padding-left: 20px;
    padding-right: 20px;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}

.modal-link[style*="pointer-events: none"] {
    cursor: default;
    text-decoration: none;
}

/* Style pour les messages */
.message {
    font-style: italic;
    color: grey;
}

/* Image de fond pour toute la page */
body {
    margin:0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #fef5e7 url('https://www.transparenttextures.com/patterns/subtle-dots.png');
    min-height: 100vh; /* Assure que le contenu occupe toute la hauteur de la fenêtre */
    color: #333;
}

/* Style du footer */
footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
    position: absolute;
    bottom: 0;
}

/* Bouton du menu */


/* Liens du menu */
#menu-container ul {
    list-style: none;
    padding: 0 1rem;
    margin: 0;
    border-radius: 15px;  
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#menu-container ul li {
    margin-bottom: 20px;
}

#menu-container ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

#menu-container ul li a:hover {
      color: #3f88c5;
      background-color: #6fffb0;
        transform: translateX(5px);
}
@media (max-width: 768px) {
  #menu-container ul {
    list-style: none;
    padding: 0 1rem;
    margin: 0;
    border-radius: 15px;  
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#menu-container ul li {
    margin-bottom: 20px;
}

#menu-container ul li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      transition: all 0.3s ease;
      text-align:center;
    }

#menu-container ul li a:hover {
      color: #3f88c5;
      background-color: #6fffb0;
        transform: translateX(5px);
}
}



/* Style général du contenu principal */
@media (max-width: 768px) {
    .column {
        flex: 1 1 100%; /* Les colonnes prennent toute la largeur */
    }
  .content {
    margin-left: 0px; /* Décale le contenu pour le menu sur les grands écrans */

}
}