body {
    margin: 0;
    padding: 0;
    position: relative; /* Ajoutez une position relative*/
}
h1{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 125%;
}
h2{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 100%;
}
h3{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 90%;
}
.logo {
    position: absolute;
    top: 20px;
    left: 15px;
    width: 200px; /* Ajuster la largeur selon vos besoins */
    height: 200px; /* Ajuster la hauteur selon vos besoins */
    z-index: 2;
   
}

.divHeader {
    position: absolute;
    top: 183px;
    left: 106px;
    width: 944px;
    height: 1171px;
    padding-left: 30px;
    padding-right 30px;
    background-color: white;
    z-index: 2;
}

.divContainer {
    position: absolute;
    top: 184px;
    left: 650px;
    height: 1025px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.div1, .div2, .div3, .div4 {
    width: 100%;
    padding-left: 8px;
    height: 182px;
    margin-bottom: -20px; /* Espacement entre les divs */
    width: 450px;
    display: flex;
    align-items: center; *//* Centrer verticalement */
    z-index: 2;
}
.div5{
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    text-align: center; /* Centrer le texte à l'intérieur */
    width: 100%;
   /* padding-left: 100px;*/
    height: 182px;
    margin-bottom: -20px; /* Espacement entre les divs */
    width: 450px;
    
    z-index: 2;
}

/* Style pour les balises de titre à l'intérieur de div1 à div5 */
.div1 h2, .div2 h2, .div3 h2, .div4 h2,
.div1 h3, .div2 h3, .div3 h3, .div4 h3 {
    max-width: 150px; /* Définir la largeur maximale du texte */
    word-wrap: break-word; /* Permettre aux mots de se couper sur plusieurs lignes */
    margin:0;
}
.div5 h2{
    max-width: 250px; /* Définir la largeur maximale du texte */
    word-wrap: break-word; /* Permettre aux mots de se couper sur plusieurs lignes */ 
}
.div1 {
    background-image:url('../images/fondIntroduction.jpg') ;
    background-repeat: no-repeat; /* Par défaut, l'image se répète, vous pouvez l'empêcher ainsi */
    background-size: contain; 
    
}
.div2 {
    background-image:url('../images/fondModule1.jpg') ;
    background-repeat: no-repeat; /* Par défaut, l'image se répète, vous pouvez l'empêcher ainsi */
    background-size: contain; 
    
}
.div3 {
    background-image:url('../images/fondModule2.jpg') ;
    background-repeat: no-repeat; /* Par défaut, l'image se répète, vous pouvez l'empêcher ainsi */
    background-size: contain; 
   
}
.div4 {
    background-image:url('../images/fondModule3.jpg') ;
    background-repeat: no-repeat; /* Par défaut, l'image se répète, vous pouvez l'empêcher ainsi */
    background-size: contain; 
   
}
.div5 {
    background-image:url('../images/fondOutils.jpg') ;
    background-repeat: no-repeat; /* Par défaut, l'image se répète, vous pouvez l'empêcher ainsi */
    background-size: contain; 
    color: white;
    /*height: 220px;*/
    
}
.divImage1 {
    position: absolute;
    top: 571px; /* Ajustez cette valeur pour aligner la divImage1 juste en dessous de divHeader */
    left: 106px;
    width: 544px;
    height: 400px; /* Ajustez cette valeur en fonction de la hauteur de l'image */
    display: flex;
    justify-content: center; /* Aligner horizontalement au centre */
    align-items: center; /* Aligner verticalement au centre */
    background-color: #f0f0f0; /* Couleur de fond pour divImage1 */
    z-index: 3; /* Un z-index plus élevé pour être au-dessus de divHeader */
}


.divImage1 img {
    max-width: 100%; /* Assurer que l'image ne dépasse pas la largeur de la div */
}

.divImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/background.jpg); /* Ajoutez votre image de fond ici */
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; /* Superposition en arrière-plan des autres divs */
}

/* ... Vos styles existants ... */

/* Ajout d'une règle CSS pour les écrans de taille inférieure à 768px (petits écrans) */
@media (max-width: 768px) {
    /* Masquer les divImage et divImage1 sur les petits écrans */
    .divImage,
    .divImage1 {
        display: none;
    }

    /* Afficher les div les unes au-dessus des autres à gauche de l'écran */
    .divContainer {
        left: 15px; /* Ajuster la position à votre besoin */
        top:400px;
    }
    .div1,
    .div2,
    .div3,
    .div4,
    .div5 {
        margin-bottom: 10px; /* Ajouter un espacement entre les divs */
    }

    /* Afficher divHeader en haut de l'écran avec une largeur de 100% */
    .divHeader {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }
}