@import url("general.css");


.album{
    font-size:14px;
   
}

.boite2{
    margin:10px 10px;
    width:95%;
    height:275px;
    opacity:1;
    box-shadow: 0 0 5px black;
    padding-left:1px;
    padding-right:1px;
}

.album2{
    margin-bottom: 1%;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing:border-box;
    margin-left:5%;
    padding:2% 1% 0 ;
}

.album3{
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    display: flex;
    align-items:stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
   
   
    margin-left: auto;
   
    margin-top: 0;
}

.BoiteSortie{
    position:relative;
    font-size:18px;
    font-weight: 700;
    color:#d5c6c6;
    margin-left:0px;

}

.BoiteSortie{
    position:relative;
    font-size:16px;
    font-weight: 700;
    color:#d5c6c6;
    margin-left:21px;

}

.BoiteNom{
   margin-left:21px;
   font-size: 25px;
   font-weight:600;
}

.Boite3{
    position:relative;
    font-size:14px;
    font-weight: 700;
    color:#d5c6c6;
    margin-left:0px;

}

.BoiteNom:hover{
    text-decoration:underline;
    color: #d5c6c6;
   
}





.album2{
    background-color: #333;
    max-width: 20%;
    border-radius: 5px;
    margin:20px;
    padding:15px;
    overflow: hidden;
}

.album2 img{
    width:100%;
    height:auto;
    border:3px solid #000;
    transition: all 1s ease;
}

.album2 img:hover{
    transform: scale(1.05);
    opacity:0.7;
}

.album2 .texte{
    width:100%;
    font-size:1.5em;
    align-items: center;
}

/* styles pour les écrans tablettes */
@media screen and (min-width:768px) and (max-width:1024px){
    .album2{
        max-width: 40%;
    }
}

/* styles pour les écrans cellulaires */
@media screen and (min-width:320px) and (max-width:767px){
    .album2{
        max-width: 100%;
    }
}