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

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

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

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

main{
    padding-left: 10px;      /* On laise de la place aux boites */
    padding-right: 10px;
    padding-bottom: 150px;      /* On décale le logo */
} 

#zone_planning{
    display: flex;         /* La disposition des boites */
    flex-wrap: wrap;
    justify-content: space-around;
    
    margin-top: 15px;
}       /* La zone des boites */

.jour{
    text-align: center;
    
              /* Bordure */
    border: 2px solid;
    border-radius: 10px;
    
    margin: 2px;       /* Marges */
    margin-top: 10px;
    margin-bottom: 15px;
       
    width: 620px;       /* Taille */

    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}       /* Les boites jour */

.titre{
    height: 30px;
}

.journee{
    height: 180px;
}

.soiree{
    margin-bottom: 15px;
    flex: auto;
    
    display: flex;
    flex-direction: column;
}

#zone_planning h2{
    margin-top: 5px;
    margin-bottom: 0px;
}       /* Titres des boites */

#zone_planning h3{
    color: #e68366;
    margin-top: 15px;
    margin-bottom: 0px;
}       /* Sous-titres des boites */

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

.saut{
    height: 5px;
}

#zone_planning .lieu{
    font-size:  18px;
    font-weight: bolder;
    
    padding-top: 10px;
    margin-top: auto;
    margin-bottom: 0px;
}

#zone_activite p{
    margin-top: 10px;


}


/* Pour smartphones ********************************************************** */
@media handheld , (max-width: 905px), (max-device-width: 905px){
    
    .jour:nth-child(-n+2){
        margin-bottom: 0px;
    }
    
    .jour:nth-child(-n+2) .journee{
        height: 0px;
    }
}