/*fait par Lucas Grossrieder le 13.01.*/



.ligneConcert {
    /*je place mes images et texte dans cette classe qui les affiche dans une seule ligne et les
     espaces*/
    display: flex;
    flex-direction: row;
    justify-content:space-between ;
    gap: 20rem;
}

main {
    /*j'empile mes 3 lignes en les mettant en colonne puis je les centre dans le main */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
}



.lienD {
/*je met ensuite mon lien tout a gauche de l'écran en changeant la marge et faire ça permet aussi de
pas faire déborder le background rouge */
display: flex;
flex-direction: row-reverse;
margin-left: 86%;

}

iframe{
    border-radius: 10px;
    align-self: center;
}


h2 {
    /*je souligne mes titres*/
    text-decoration: underline;
}
li {
    /*je met plus d'espace entre les lignes de ma liste*/
    padding: 0.5%;
}
.lienD:hover {
    /*j'enlève le effet de hover agrandissant*/
    transform: none;
} 

.evenement {
    text-decoration: none;
    font-size: x-large;
}
/*on change pour les écran qui sont plus petits que 600px*/
@media (max-width : 600px){

    section {
        /*on met maintenant tous les éléments des lignes (sections) en incluant le lien
         en colonnes et on les mets au milieu de l'écran*/
        display: flex;
        flex-direction: column;
        gap: 0px;
        align-items: center;
    }
    /*je met ensuite l'image et le texte en colonne et centré*/
    .ligneConcert {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
        .lien,.lienD{
        /*je m'assure de les placer tous au même endroit*/
        margin-left: auto;
        width: auto;
        
    }
    section iframe,article{
        order: 1; /*pour que l'ordre image, texte soit le même quand on passe sur téléphone*/
        width: 90%;
        
    }
    .lienD{
        /*le lien était un petit peu trop décalé alors j'ai changé la marge pour
         le déplacer un peu*/
        margin-left: auto;
        margin-right:5% ;
    }

}