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


/* Main container */
.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.source-box,.subcontainer{
    width: 100%;
}

/* First child */
.first-child {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%; /* Empêche le débordement */
}

/* Title */
.first-child .title {
    display: inline-block;
    font-size: xx-large;
    font-weight: 700;
    color: #2F88FB;
    margin: 2%;
    width: 100%; /* Utilise toute la largeur disponible */
    word-wrap: break-word; /* Evite le débordement du texte */
    overflow-wrap: break-word;
    text-align: center; /* Centre le titre */
    
}

/* Subcontainer (grille pour les images et textes) */
.first-child .subcontainer {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: auto;
    gap: 4%;
    width: 100%; /* Empêche le débordement */
    height: auto;
    justify-content: center;
    margin-bottom: 5%;
}

/* Source box */
.first-child .source-box {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
}

.first-child a {
    text-decoration: none;
    color: #5FD068;
    text-align: left;
    font-size: small;
    font-weight: 300;
    width: 100%; /* Empêche le débordement */
    word-wrap: break-word; /* Assure que le texte long se casse */
    overflow-wrap: break-word;
}

/* Images */
.first-child img {
    width: 100%; /* Ajuste les images à la largeur de leur conteneur */
    height: auto;
    border-radius: 7px;
    border: 1px solid #2F88FB;
}

/* Responsive design */
@media (max-width: 768px) {
    .first-child .subcontainer {
        grid-template-columns: 100%; /* Empile les éléments sur les petits écrans */
    }

    .first-child img {
        width: 80%; /* Réduit la taille des images sur mobile */
        height: auto;
    }

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

    .first-child .source-box {
        width: 100%; /* Élargit le conteneur des liens sur mobile */
    }
}