/*
* Style du site du Comic
* Date de création: 5 juin 2020
* Auteur: Rétro
*/

/* Navbar */
#logoNavbar {
    height: 32px;
    /*padding-left: 1rem;*/
}

.nav-container {
    margin-left: 0px;
    padding-left: 0;
}

.navbar {
    background-color: #171717;
}

/* Menu déroulant */
.dropdown-item {
    text-align: left;
    align-content: left;
}

.dropdown-item:active {
    background-color: gray;
}

.icone-evenement {
    width: 18px;
}

/* Corps */
#logo {
    width: 250px;
}

.section-heading {
    margin: 0;
    padding-top:    1rem;
    padding-bottom: 1rem;
}

#en-tête {
    padding-top:    2rem;
    padding-bottom: 2rem;
}

#a-propos {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#vidéo {
    background-color: lightgray;
}

#vidéo .container-fluid {
    padding: 0;
}

#vidéo .row {
    padding-top:    2rem;
    padding-bottom: 2rem;
    padding-left:   2rem;
    padding-right:  2rem;
}

#lecteur-vidéo {
    max-width: 800px;
    margin: auto;
}

#vidéo video {
    width: 100%;
    /* Sans cette ligne, ça plante sur Safari 13.1.1
    source: https://stackoverflow.com/questions/16079275/
    html5-video-dimensions-in-safari-ios
    [Réponse de Joel Karunungan] */
    height: 100%;
}

#services .row {
    padding-left:   30px;
    padding-right:  30px;
    padding-bottom: 30px;
}

#services .section-heading {
    padding-top:    2rem;
    padding-bottom: 2rem;
}

.boite {
    padding-left:   10px;
    padding-right:  10px;
    /* Marge du bas 2x plus grande pour que l'espace entre les boîtes
    reste le même horizontalement et verticalement quand elles sont
    les unes au-dessus des autres dans les petites fenêtres */
    padding-bottom: 20px;
}

.encadré {
    border:         1px #ccc solid;
    padding-top:    50px;
    padding-bottom: 50px;
    padding-left:   20px;
    padding-right:  20px;
    align-content:  center;
}

.encadré:hover {
    background-color: lightgrey;
}

.encadré a {
    color: black;
    text-decoration: none;
}

.encadré div {
    padding-left:   10px;
    padding-right:  10px;
}

.encadré img {
    max-width: 200px;
    width: 100%;
    padding-bottom: 1rem;
}

/* Bas-de-page */
footer {
    background-color: #202020;
}
footer p {
    color: white;
}

#courriel {
    text-decoration: none;
}

.réseau-social {
    font-size: 30px;
    padding-left: 3px;
    padding-right: 3px;
}