.about {
    padding: 50px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-content {
    display: flex;
    flex-direction: row; /* Disposition en ligne par défaut */
    max-width: 1200px;
    align-items: center;
}

.about-text {
    flex: 1;
    margin-right: 30px;
}

.about h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333;
}

.about p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #555;
}

.about p strong {
    color: #000;
}

.about-photo {
    flex: 0.5;
    text-align: center; /* Centre l'image sur petits écrans */
}

.about-photo img {
    max-width: 100%;
    border-radius: 50%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* Media query pour les écrans de taille moyenne (tablettes) */
@media screen and (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Disposition verticale */
        text-align: center; /* Centre le texte */
    }

    .about-text {
        margin-right: 0; /* Pas d'espace de marge à droite */
        margin-bottom: 20px; /* Ajoute un espacement entre le texte et la photo */
    }

    .about h2 {
        font-size: 2em; /* Réduit la taille du titre */
    }

    .about p {
        font-size: 1em; /* Réduit légèrement la taille du texte */
    }

    .more-text {
        display: none; /* Masque le texte supplémentaire par défaut */
    }

    .about a {
        color: #3498db; /* Couleur du lien */
        text-decoration: none; /* Enlève le soulignement */
        cursor: pointer; /* Change le curseur */
        margin-top: 10px; /* Ajoute un espace au-dessus du lien */
        display: inline-block; /* Permet d'ajouter des marges */
    }

    .about a:hover {
        text-decoration: underline; /* Souligné au survol */
    }
}

/* Media query pour les petits écrans (smartphones) */
@media screen and (max-width: 480px) {
    .about {
        padding: 30px; /* Réduit le padding sur petits écrans */
    }

    .about h2 {
        font-size: 1.8em; /* Réduit davantage la taille du titre */
    }

    .about p {
        font-size: 0.95em; /* Adapte la taille du texte pour être lisible sur smartphones */
    }

    .about-photo img {
        max-width: 80%; /* Réduit la taille de l'image pour petits écrans */
    }
}