/* Importation de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');



/********** body **********/

body {
    font-family: 'Comic Neue', cursive;
    margin: 0; 
    padding: 0; 
    background-color: #f9f9f9; 
    
}


/********** Styles pour l'en-tête **********/
header {
    background-color: #8dafff; 
    padding: 20px 0; /* Padding haut et bas de 20px, pas de padding horizontal */
    border-bottom: 1px solid #8dafff; /* Bordure inférieure de l'en-tête */
}

header .container {
    background-color: #8dafff; 
}


/********** Styles pour les titres h1 et h2 **********/

h1, h2 {
    font-size: 2em; 
    text-align: center; 
    margin: 25px; 
    font-family: "Comic Neue", cursive; 
    font-weight: 700; 
    font-style: normal; 
}


/********** Styles pour les liens dans la navigation **********/
nav .navbar-nav .nav-item .nav-link {
    font-size: 1.2em; /* Taille de police des liens dans la navigation */
}


/********** Styles pour le conteneur d'arrière-plan avec une image **********/
div.background-container {
    display: flex; /* Utilisation de flexbox pour le positionnement */
    justify-content: center; 
    align-items: center;
    background-image: url('img/pexels-freestockpro-2781814.jpg'); /* Image de fond */
    background-size: cover; /* Redimensionnement de l'image pour couvrir tout le conteneur */
    background-attachment: fixed; /* Fixation de l'image de fond */
    position: relative; /* Position relative pour permettre le positionnement absolu des éléments enfants */
    width: 100%; 
    height: 100vh; 
    z-index: 5; /* Index de la pile z pour le positionnement */
    color: white; 
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* Ombre du texte pour meilleure lisibilité */
}


/********** Pseudo-élément après pour créer un overlay sombre **********/
div.background-container::after {
    content: ""; /* Contenu vide nécessaire pour le pseudo-élément */
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond sombre avec transparence */
    position: absolute; /* Position absolue par rapport au parent */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 50; /* Index de la pile z plus élevé que le contenu principal */
}


/********** Styles pour les éléments enfants du conteneur d'arrière-plan **********/
div.background-container > div {
    position: relative; /* Position relative pour permettre le positionnement absolu des éléments enfants */
    z-index: 60; /* Index de la pile z pour les éléments enfants */
    text-align: center; 
    max-width: 600px; 
    padding: 20px; 
}


/********** Styles spécifiques pour le titre h1 à l'intérieur du conteneur d'arrière-plan **********/
div.background-container h1 {
    color: white; 
    margin-bottom: 20px; 
}


/********** Styles pour les paragraphes à l'intérieur du conteneur d'arrière-plan **********/
div.background-container p {
    margin-bottom: 20px; 
}


/********** Styles pour les boutons à l'intérieur du conteneur d'arrière-plan **********/
button {
    background-color: #4CAF50; 
    color: white; 
    border: none; 
    padding: 10px 20px; /* Padding intérieur de 10px en haut/bas et 20px à gauche/droite */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur au survol */
    text-decoration: none; /* Suppression du soulignement des liens dans le bouton */
}


/********** Styles pour les boutons au survol à l'intérieur du conteneur d'arrière-plan **********/
button:hover {
    background-color: #45a049; /* Changement de couleur de fond au survol */
}

.button-exercice {
    margin-top: 20px;
    background-color: #4CAF50; /* Vert */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    border-radius: 12px;
    
}

/********** Styles pour la section principale **********/
main {
    padding: 20px 0; 
    margin: 30px; 
}


/********** Styles pour les sections dans le contenu principal **********/
section {
    margin-bottom: 40px; 
}


/********** Styles pour le pied de page **********/
footer {
    background-color: #8dafff;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #8dafff;
    margin-top: auto; /* Marge automatique pour pousser le footer en bas */
}


/********** Styles pour les labels dans les formulaires **********/
form label {
    display: block; /* Affichage en bloc pour occuper toute la largeur disponible */
    margin: 10px 0 5px; /* Marge extérieure de 10px en haut, 5px en bas */
}


/********** Styles pour les inputs, textarea et boutons dans les formulaires **********/
form input, form textarea, form button {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #ccc; /* Bordure de 1px avec couleur grise */
    border-radius: 4px; 
}


/********** Styles spécifiques pour le bouton dans le formulaire**********/
form button {
    background-color: #4CAF50; 
    color: white; 
    border: none; 
    cursor: pointer; /* Curseur pointeur au survol */
}


/********** Styles pour le bouton au survol dans le formulaire**********/
form button:hover {
    background-color: #45a049; 
}


/********** Styles pour les conteneurs des images **********/
.images {
    display: flex; /* Utilisation de flexbox pour le positionnement */
    flex-direction: row; /* Disposition en ligne des images */
    gap: 10px; /* Espacement horizontal entre les images */
    flex: 1; /* Expansion flexible */
    padding: 30px; 
}


/********** Styles pour les images à l'intérieur des conteneurs d'images **********/
.images img {
    width: 100%; /* Largeur des images de 30% de la largeur du conteneur */
    height: auto; /* Hauteur automatique pour maintenir les proportions */
    object-fit: cover; /* Redimensionnement de l'image en conservant l'aspect ratio */
    display: block; /* Affichage en bloc */
}


/********** Styles pour les images au survol **********/
.images img:hover {
    opacity: 40%; /* Réduction de l'opacité au survol */
}