/* Tablettes */
@media screen and (max-width: 1024px) {
    .moi_meme {
        padding: 80px 32px 0 32px;
        gap: 24px;
        margin-bottom: min(calc(100vh - 92px - 80px), 160px);
    }

    .photo_profil {
        grid-column: 2 / span 4;
    }

    .texte_presentation {
        grid-column: 7 / span 5;
    }

    .fond_bleu {
        width: 45%;
        height: 25%;
    }
}

/* Petites tablettes */
@media screen and (max-width: 768px) {
    .moi_meme {
        padding: 60px 24px 0 24px;
        gap: 20px;
        margin-bottom: min(calc(100vh - 92px - 60px), 140px);
    }

    .photo_profil {
        grid-column: 1 / span 5;
    }

    .texte_presentation {
        grid-column: 7 / span 6;
    }

    .titre_presentation {
        font-size: 22px;
    }

    .fond_bleu {
        width: 70%;
        height: 20%;
    }
}

/* Smartphones et tablettes en mode portrait */
@media screen and (max-width: 768px) {
    .moi_meme {
        grid-template-columns: 1fr;
        padding: 40px 16px 0 16px;
        gap: 32px;
        margin-bottom: min(calc(100vh - 92px - 40px), 100px);
    }

    .photo_profil {
        grid-column: 1 / -1;
        width: 70%;
        margin: 0 auto;
        order: 1;
    }

    .texte_presentation {
        grid-column: 1 / -1;
        text-align: center;
        order: 2;
        padding: 0 20px;
    }

    .titre_presentation {
        font-size: 20px;
    }

    .contenu_presentation {
        font-size: 15px;
        line-height: 19px;
        max-width: 600px;
        margin: 0 auto;
    }

    .fond_bleu {
display: none;
    }
}

/* Très petits écrans */
@media screen and (max-width: 320px) {
    .moi_meme {
        padding: 32px 12px 0 12px;
        gap: 20px;
    }

    .photo_profil {
        width: 90%;
    }

    .titre_presentation {
        font-size: 18px;
    }

    .contenu_presentation {
        font-size: 14px;
        line-height: 18px;
    }
}