body 
{
    margin: 0;
    padding: 0;
    background-image: url('/images/background.jpg');
    background-color: 0a0b0d;	
    font-family: "Times New Roman", "serif";
}

a:link
{ 
    color: #6699FF; text-decoration:none; 
}

a:visited
{ 
    color: #003399; text-decoration:none; 
}

a:hover
{ 
    color: #3333FF; text-decoration:underline; 
}

/* Barre de navigation */

    .navbar /* Définiton des propriétés stylistiques des éléments de classe "navbar" */
    {
        display: flex;
        margin: auto;
        padding-left: 27px;
        padding-right: 27px;
        width: 906px;
        background-color: #434343;
        overflow: hidden;
    }

    .navbar a /* Définition des propriétés stylistiques des éléments <a> contenus dans un élément de classe "navbar" */
    {
        padding: 14px 16px;
        color: white;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
    }

    .dropdown /* Définition des propriétés stylistiques des éléments de la classe "dropdown" */
    {
        overflow: hidden;
    }

    .dropdown .dropbtn /* Définition des propriétés des éléments de classe "dropbtn" contenus dans un élément de classe "dropdown" */
    {
        padding: 14px 16px;
        border: none;
        outline: none;
        color: white;
        background-color: inherit;
        font-size: 16px;  
        font-family: inherit;
    }

    .date /* Définition des propriétés stylistiques de l'élément qui contient la fonction donnant la date actuelle */
    {	
        padding: 14px 16px;
        border: none;
        outline: none;
        color: white;
        background-color: inherit;
        font-size: 16px;
        font-family: inherit;
    }

    .navbar a:hover, .dropdown:hover .dropbtn /* Définition de l'apparence des éléments de la barre de navigation lorsqu'ils sont survolés */
    {
        background-color: red;
    }

    .dropdown-content /* Définition de l'apparence du contenu des menus déroulant */
    {
        display: none;
        min-width: 160px;
        position: absolute;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a /* Définition de l'apparence des <a> dans les menus déroulant */
    {
        display: block;
        padding: 12px 16px;
        color: black;
        text-decoration: none;
        text-align: left;
    }

    .dropdown-content a:hover /* Définition de l'apparence des <a> dans les menus déroulant lorsqu'ils sont survolés */
    {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content
    {
        display: block;
    }

/* Cadre du site */

    .top-fond /* Définition des propriétés stylistiques du haut de la page avec le logo et le nom */
    {
        margin: auto;
        position: relative;
        width: 960px;
        height: 400px;
        background-image: linear-gradient(to top, #434343 0%, #0a0b0d 80%);
    }

        .top-logo /* Définition des propriétés stylistiques du logo */
        {
            position: absolute;
            top: 50px;
            left: 330px;
            width: 300px;
            height: 300px;
            background-image: url("/images/logo-aesmul-trans.png");
            background-size: contain;
            background-repeat: no-repeat;
        }

        .nom-asso /* Définition des propriétés stylistiques du nom de l'association */
        {
            position: absolute;
            top: 87%; 
            left: 50%;
            width: 906px; 
            transform: translateX(-50%);
            white-space: nowrap;
            color: white; 
            font-size: 28px;
            font-family: "Agency FB";
            text-align: center;
            text-shadow: 3px 3px 3px #0a0b0d;
        }
        
        .uppercase-letter /* Définition des propriétés stylistiques des premières lettres de chaque mot dans le nom de l'association */
        {
            color: #3363FF; 
            font-family: "Copperplate";
            font-size: 32px; 
        }

        @media screen and (max-width: 1194px) /* Redéfinition des propriétés stylistiques de "nom-asso" pour mobile */
        {
            .nom-asso 
            {
                font-size: 24px;
            }
        }

        @media screen and (max-width: 1194px) /* Redéfinition des propriétés stylistiques de "uppercase-letter" pour mobile */
        {
            .uppercase-letter
            {
                font-size: 26px;
            }
        }
    
    .top /* Définition des propriétés stylistiques du haut de la page après la barre de navigation et avant le contenu */
    {
        display: flex;
        margin: auto;
        width: 960px;
        height: 10px;
        justify-content: center;
    }

        .top-gauche
        {
            width: 27px;
            height: 10px;
            background-image: linear-gradient(315deg, #700904 0%, #CB0303 14%, #700904 28%, #434343 29%);
            
        }

        .top-centre
        {
            width: 906px;
            height: 10px;
            background-image: linear-gradient(to top, #700904 0%, #CB0303 50%, #700904 100%);
            
        }

        .top-droite
        {
            width: 27px;
            height: 10px;
            background-image: linear-gradient(45deg, #700904 0%, #CB0303 14%, #700904 28%, #434343 29%);
            
        }

    .principale /* Définition des propriétés stylistiques du milieu du site avec les côtés et le contenu */
    {
        display: flex;
        margin: auto;
        width: 960px;
        justify-content: center;
    }

        .gauche
        {
            width: 27px;
            background-image: linear-gradient(to right, #434343 0px, #434343 16px, #700904 17px, #CB0303 22px, #700904 27px);
        }

        .centre
        {
            padding: 10px;
            width: 906px;
            background-color: #FFFFFF;
        }

        .droite
        {
            width: 27px;
            background-image: linear-gradient(to left, #434343 0px, #434343 16px, #700904 17px, #CB0303 22px, #700904 27px);
        }

    .bottom /* Définition des propriétés stylistiques du bas de la page juste après le milieu */
    {
        display: flex;
        margin: auto;
        width: 960px;
        justify-content: center;
    }

        .bottom-gauche
        {
            width: 27px;
            height: 10px;
            background-image: linear-gradient(225deg, #700904 0%, #CB0303 14%, #700904 28%, #434343 29%);
        }

        .bottom-centre
        {
            width: 906px;
            height: 10px;
            background-image: linear-gradient(to top, #700904 0%, #CB0303 50%, #700904 100%);
        }

        .bottom-droite
        {
            width: 27px;
            height: 10px;
            background-image: linear-gradient(135deg, #700904 0%, #CB0303 14%, #700904 28%, #434343 29%);
        }

    .bottom-fond /* Définition des propriétés stylistiques du bas de la page */
    {
        margin: auto;
        padding: 10px 0;
        width: 960px;
        height: 70px;
        background-image: linear-gradient(to bottom, #434343 0%, #0a0b0d 80%);
        text-align: center;
    }

/* Pages du site */

    p.titre /* Définition des propriétés stylistiques pour le titre des pages */
    {
        color: red;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    p.description /* Définition des propriétés stylistiques pour le texte descriptif des pages */
    {
        font-size: 16px;
        text-align: justify;
    }

    div.archive-liste /* Définition des propriétés stylistiques pour les listes centrés */
    {
        text-align: center;
    }

        ul.archive-picot 
        {
            display: inline-block;
            margin-top: 0cm;
            font-size: 14px;
            text-align: left;
        }

        .archive-liste p
        {
            font-weight: bold;
            font-style: italic;
        }

    div.grid-table /* Définition des propriétés stylistiques des l'éléments contenants les budgets */
    {
        display: grid;
        margin: auto;
        grid-template-columns: auto auto;
    }

    .album-container /* Définition des propriétés stylistiques de l'élément contenant les albums photos avec leur image de profil et leur titre */ 
    {
        display: grid;
        margin: auto;
        padding: 5px;
        width: 90%;
        border: ridge 12px #003;
        gap: 10px;
        grid-template-columns: auto auto;
    }

        .album-photos /* Définition des propriétés stylistiques de l'élément qui contient les images de profil des albums  */
        {
            border: solid 1px;
            box-shadow: 3px 3px 3px;
        }

        .album-photos img /* Définition des propriétés stylistiques des photos de profil des albums */
        {
            width: 300px;
            height: 200px;
            border: 0;
        }

        .album-titre /* Définition des propriétés stylistiques du titre des albums */
        {
            padding: 10px;
        }

        .album-titre a /* Définition des propriétés stylistiques du lien vers les albums photos */
        {
            font-weight: bold;
        }

    .photo-container /* Définition des propriétés stylistiques de la gallerie de photos */
    {
        display: grid;
        margin: auto;
        width: 600px;
        padding: 2px;
        border: ridge 12px #003;
        gap: 2px;
        grid-template-columns: auto auto;
        justify-content: center;
    }

        div.photo-item img /* Définition des propriétés stylistiques des photos dans la galerie */
        {
            width: 300px;
            height: 200px;
        }

    div.executif-table
    {
        display: grid;
        margin: auto;
        width: 95%;
        gap: 10px;
        grid-template-columns: 375px auto;
    }

    div.executif-photo
    {
        width: 375px;
        box-shadow: 3px 3px 3px;
    }

    .executif-photo img
    {
        width: 375px;
    }

    div.executif-texte
    {
        margin: auto;
        padding: 20px;
        place-items: center;
        text-align: justify;
    }

    .executif-texte p
    {
        margin-bottom: 50px;
        vertical-align: bottom;
    }