/******************************************************************************************************/
/* ELEMENTS GLOBAUX A TOUTES LES PAGES DU SITE */

*, h1, h2, h3 {
    box-sizing:border-box;
    padding: 0;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size:24px;
    color: #fff;
}

html {
    background-color: #202020;
}


a, a:link, a:visited {
    color: #a88877;
    text-decoration: none;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

blockquote{
    font-size:16px;
    color:#999;
    padding-bottom:10px;
}

/******************************************************************************************************/
/* STYLES DE L'ENTETE UTILISÉ DANS TOUTES LES PAGES DU SITE */

.pq-page-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #a88877;
    background-color: #000;
}

.pq-header-style {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
    height: 100px;
}

.pq-header-logo {
    width: 50%;
}

.pq-header-logo img {
    cursor: pointer;
}


.pq-header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
}

.pq-header-menu img {
    cursor: pointer;
}



/******************************************************************************************************/
/* MENU CONTEXTUEL APPARAISSANT SUR CHAQUE PAGE 
    La hauteur est établi par l'image
*/

.pq-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 101px;
    z-index: 100;
    background-color: #000;
    border-left: 1px solid #a88877;
    border-right: 1px solid #a88877;
}

.pq-menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #a88877;
    opacity: 0.8;
}

.pq-menu-item * {
    cursor: pointer;
}

.pq-menu-item label {
    font-size:20px;
    width:175px;
    text-align:left;
}

.pq-menu-item img {
    height: 75px;
    width: 100px;
}

.pq-menu-item:hover {
    opacity:1.0;
}




/******************************************************************************************************/
/* STRUCTURE GÉNRALE DU CORPS DES PAGES DU SITE */


.pq-section {
    display: flex;
    justify-content: flex-start;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left:5%;
    padding-right:5%;

}



/******************************************************************************************************/
/* STYLES UTILITAIRES ET GLOBAUX À TOUTES LES PAGES */


.pq-command {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 150px;
    margin-right:25px;
    font-size: 16px;
    color: #ccc;
    background-color: #555;
    border-radius: 10px;
}

.pq-command:last-child { margin-right:0;}
.pq-command-large { width:200px;}

.pq-command:hover {
    color: #fff;
    background-color: #666;
    cursor: pointer;
}

    
.pq-flex-center {
    display: flex;
    justify-content:center;
}


.pq-flex-wrap {
    flex-wrap: wrap;
}


.pq-no-border {
    border:none;
}



/******************************************************************************************************/
/* AJUSTEMENTS RESPONSIVE GLOBAUX A TOUTES LES PAGES */


@media screen and (max-width: 1000px) {

    .pq-page-header { margin-bottom: 30px; }
    .pq-header-style { height: 80px; }
    .pq-dropdown-menu { top: 81px; }
    .pq-header-logo img { height: 40px; margin-top:8px   }
    
    .pq-section { flex-wrap: wrap; }

}



@media screen and (max-width: 768px) {

    .pq-page-header { margin-bottom: 20px; }
    .pq-header-style { height: 60px; padding-left: 3%;padding-right: 3%;}
    .pq-dropdown-menu { top: 61px; }
    .pq-header-logo img { height: 30px; margin-top:5px }
    .pq-header-menu img { height: 40px;  }

    .pq-section { padding-left: 3%; padding-right: 3%; }


    .pq-command { height: 37px; width: 125px; font-size: 14px;  }

}




@media screen and (max-width: 425px) {

    .pq-section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .pq-command {
        height: 32px;
        width: 125px;
        font-size: 14px;
    }
}