/* .portrait { */
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: flex-start; */

    /* margin-top: 150px; */
    /* padding: 0 60px; */

    /* min-height: 520px; */
/* } */


/* .emplacement_premiere_partie_texte { */
    /* width: 55%; */
    /* padding: 5px; */
    /* font-size: 40px; */
/* } */

/* .portrait-droite { */
    /* width: 35%; */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: flex-end; */
/* } */

   

/* .photo_artiste { */
    /* height: 460px; */
    /* width: auto; */

    /* border-radius: 20px; */
/* } */

/* .legende_artiste { */
    /* width: 100%; */
    /* margin-top: 10px; */

    /* text-align: right; */
    /* font-size: 25px; */
/* } */


/* ==========================================
   1. STYLE MOBILE / NATEL (Par défaut)
   ========================================== */
.portrait {
    display: flex;
    flex-direction: column;    /* Empile le texte puis la photo */
    margin-top: 30px;          /* Marge réduite pour mobile */
    padding: 0 20px;           /* Moins de padding sur les côtés */
    min-height: auto;
    gap: 30px;
}

.emplacement_premiere_partie_texte {
    width: 100%;               /* Prend toute la largeur disponible */
    padding: 0;
    font-size: 18px;           /* Taille lisible sur smartphone */
    line-height: 1.5;
}

.portrait-droite {
    width: 100%;               /* Affiche la photo sous le texte */
    display: flex;
    flex-direction: column;
    align-items: center;       /* Centre la photo et la légende */
}

.photo_artiste {
    width: 100%;
    max-width: 400px;          /* Empêche la photo d'être géante */
    height: auto;              /* Garde le ratio d'aspect sans déformer */
    border-radius: 20px;
}

.legende_artiste {
    width: 100%;
    margin-top: 10px;
    text-align: center;        /* Alignement centré plus propre sur mobile */
    font-size: 16px;
}


/* ==========================================
   2. STYLE ORDINATEUR (Votre code d'origine)
   ========================================== */
@media (min-width: 768px) {
    .portrait {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 150px;
        padding: 0 60px;
        min-height: 520px;
        gap: 0;
    }

    .emplacement_premiere_partie_texte {
        width: 55%;
        padding: 5px;
        font-size: 40px;
    }

    .portrait-droite {
        width: 35%;
        align-items: flex-end;
    }

    .photo_artiste {
        width: auto;
        height: 460px;
    }

    .legende_artiste {
        text-align: right;
        font-size: 25px;
    }
}