/* **********************************************************

                    Site Internet TOM 2022
           Feuille de styles spécifique page Groupes

*************************************************************
Arnaud Wilhelm
Novembre 2021
*/

/*------------------------------------------------
Main
--------------------------------------------------*/

main{
    padding-left: 10px;      /* On laise de la place aux boites */
    padding-right: 10px;
} 

#zone_groupes{
    display: flex;         /* La disposition des boites */
    flex-wrap: wrap;
    justify-content: space-around;
}       /* La zone des boites */

#zone_groupes div{
    text-align: center;
    
              /* Bordure */
    border: 2px solid;
    border-radius: 10px;
    
    margin: 2px;       /* Marges */
    margin-top: 10px;
    margin-bottom: 15px;
       
    width: 270px;       /* Taille */
    height: 320px;
}       /* Toutes les boites */


#zone_groupes h2{
    margin-top: 5px;
    margin-bottom: 2px;
    font-family: 'kagedemoblack', Verdana, courier;   /* Police */
    font-size: 30px; 
    letter-spacing: +1px;
}       /* Titres des boites */

#zone_groupes h3{
    margin-top: 2px;
    margin-bottom: 0px;
}       /* Sous-titres des boites */

#zone_groupes p{
    margin-top: 0px;
    margin-bottom: 15px;
}       /* texte des boites */

#zone_DJ{
    display: flex;         /* La disposition des boites */
    flex-wrap: wrap;
    justify-content: space-around;
}       /* La zone des boites */

#zone_DJ div{
    text-align: center;
    
              /* Bordure */
    border: 2px solid;
    border-radius: 10px;
    
    margin: 2px;       /* Marges */
    margin-top: 10px;
    margin-bottom: 15px;
       
    width: 220px;       /* Taille */

}       /* Toutes les boites */


#zone_DJ h2{
    margin-top: 5px;
    margin-bottom: 2px;
    font-family: 'kagedemoblack', Verdana, courier;   /* Police */
    font-size: 30px; 
    letter-spacing: +1px;
}       /* Titres des boites */

#zone_DJ h3{
    margin-top: 2px;
    margin-bottom: 0px;
}       /* Sous-titres des boites */

#zone_DJ p{
    margin-top: 0px;
    margin-bottom: 5px;
}       /* texte des boites */

#zone_DJ #DJplus{  
    width: 200px;       /* Taille */
    height: 250px;
}       /* La boite DJ plus */

#DJplus img{
    margin-top: 30px;
    margin-bottom: 0px;
}       /* texte des boites */


/* Pour smartphones ********************************************************** */
@media handheld , (max-width: 905px), (max-device-width: 905px){
    #zone_groupes div:first-child {
        margin-left: inherit;       /* Marges */
        margin-right: inherit;       /* Marges */
    }

}