/* Global Reset */
*,
*::before,
*::after {
    box-sizing: border-box; /* Empêche les bordures et marges de déborder */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le débordement horizontal */
}

.subcontainer,.text{
  width: 100%;
}

/* Title */
.title {
    display: inline-block;
    font-size: xx-large;
    font-weight: 700;
    color: #2F88FB;
    margin: 2%;
    word-wrap: break-word; /* Assure que le texte long ne dépasse pas */
    overflow-wrap: break-word; /* S'assure que les longs mots sont cassés */
    max-width: 100%; /* Empêche le texte de dépasser */
}

/* Main container */
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Empêche le conteneur principal de dépasser */
}

/* Conteneur général */
.container {
    width: 100%;
    padding: 0 10px; /* Ajoute un peu de marge intérieure pour plus de confort */
}

/* Première section */
.first-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first-child .subcontainer {
    display: flex;
    flex-direction: row;
    gap: 2%;
    justify-content: center; /* Centre le contenu */
    width: 100%; /* Assure que tout reste contenu */
}

.first-child img {
    width: 35%;
    height: auto;
   
    border: 0px;
}

.first-child .text {
    text-align: left;
    font-size: medium;
    font-weight: 300;
    max-width: 100%; /* Empêche le texte de dépasser */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Second child */
.second-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.second-child img {
    width: 35%;
    height: auto;
}

.second-child .text {
    text-align: left;
    font-size: medium;
    font-weight: 300;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.second-child .subcontainer {
    display: flex;
    flex-direction: row;
    gap: 2%;
    
}

.second-child .fourth-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.second-child strong {
    color: #5FD068;
}

.second-child a {
    text-decoration: none;
    color: #5FD068;
}

/* Troisième enfant */
.third-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.third-child img {
    width: 30%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #4997FD;
    margin-top: 3%;
}

.third-child .text p {
    margin-block-start: 0em;
}

.italic{ 
    margin-block-start: 0em;
    font-style:  italic;
}

.third-child .text {
    text-align: left;
    font-size: medium;
    font-weight: 300;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.third-child .subcontainer {
    display: flex;
    flex-direction: row;
    gap: 2%;
    
}

.third-child .nb {
    color: #5FD068;
    font-weight: 500;
    display: inline-block;
}

.third-child a {
    text-decoration: none;
    color: #5FD068;
}

/* Quatrième enfant */
.fourth-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fourth-child .subcontainer {
    display: flex;
    flex-direction: row;
    gap: 2%;
    
}

.fourth-child img {
    width: 35%;
    height: auto;
    border-radius: 7px;
    border: 0px;
    
    margin-bottom: 3%;
}

.fourth-child .text {
    text-align: left;
    font-size: medium;
    font-weight: 300;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.fourth-child .text p {
    margin-block-start: 0em;
}

.fourth-child a {
    text-decoration: none;
    color: #5FD068;
}



/* Responsive design */
@media (max-width: 768px) {

  .subcontainer{
    flex-wrap: wrap;
    }
  .third-child img{
    display: none;
  }

    .first-child .subcontainer,
    .second-child .subcontainer,
    .third-child .subcontainer,
    .fourth-child .subcontainer {
        flex-direction: column; /* Empile les éléments sur les petits écrans */
        align-items: center;
    }

    .first-child img,
    .second-child img,
    .third-child img,
    .fourth-child img {
        width: 80%; /* Redimensionne les images sur mobile */
        height: auto;
    }

    .title {
        font-size: large;
        text-align: center;
    }

    .third-child .nb {
        font-size: 1.2em;
    }

    
}