/* ===========================
   BASE
=========================== */

@font-face {
    font-family: 'trystregular';
    src: url('../fonts/Tryst-Regular-webfont.eot');
    src: url('../fonts/Tryst-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Tryst-Regular-webfont.woff2') format('woff2'),
         url('../fonts/Tryst-Regular-webfont.woff') format('woff'),
         url('../fonts/Tryst-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Tryst-Regular-webfont.svg#trystregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    color: rgba(0,0,0,0.5);
    background: #b8c3bf url(../img/bg.jpg) no-repeat center 40px;
    font-size: 135%;
    font-family: 'trystregular';
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.content {
    min-height: 650px;
    border-radius: 4px;
    background-color: #dedede;
    padding: 20px 50px;
}

/* ===========================
   HEADER
=========================== */

.header {
    text-align: center;
    color: #5b4c20;
    padding-top: 0.1rem;
    padding-bottom: 3rem;
}

.header h1 {
    margin: 10;
    color: #5b4c20;
    font-size: 3rem;
    line-height: 2;
    letter-spacing: 10px;
}

.header h1 a {
    color: #756741;
    text-decoration: none;
}

.header h2 {
    font-size: 1.5rem;
    color: #5b4c20;
    line-height: 1.5;
    letter-spacing: 10px;
}

/* ===========================
   MENU GRAND ÉCRAN
=========================== */

.nav {
    background-color: #70877f;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto 25px auto;
    color: #ffffff;
    border-radius: 0 0 4px 4px;
}

.menu.expanded {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.menu.expanded li {
    margin: 0 12px 0 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.menu.expanded li:last-child {
    margin-left: 2rem;
    border-left: 1px dashed #b8c2be;
    padding-left: 1rem;
}

.menu.expanded li.menu-candidater a {
    background-color: #c9a542;
    color: #ffffff;
    border: 2px solid #c9a542;
    padding: 0 0.9rem;
    min-height: 2.3rem;
    border-radius: 4px;
}

.menu.expanded li.menu-ikimazine a {
    color: #ffffff;
    border: 2px solid #ffffff;
    background: transparent;
    padding: 0 0.9rem;
    min-height: 2.3rem;
    border-radius: 4px;
}

.menu.expanded a,
.menu.expanded a:hover {
    color: #999;
}

.nav a,
.nav a:link,
.nav a:visited {
    font-size: 1.5rem;
    color: #f0f0f0 !important;
}

.nav .active a,
.nav .current a {
    color: #ffffff !important;
}

/* ===========================
   MENU MOBILE INDÉPENDANT
=========================== */

.my-responsive-menu {
    display: none;
}

.my-menu-button {
    background-color: #70877f;
    color: #fff;
    padding: 0.2rem 2rem;
    border-radius: 0 0 4px 4px;
    border: none;
    font-size: 1.3rem;
    width: 100%;
    text-align: center;
}

.my-menu-list {
        background-color: #70877f;   /* même couleur que le bandeau */
display: none;    
 border-radius: 0 0 4px 4px;
    list-style: none;
    padding: 1rem;
    margin: 0;
}

.my-menu-list li {
    margin-bottom: 1rem;
}

.my-menu-list a {
    color: #fff;
    font-size: 1.4rem;
}

/* ===========================
   ARTICLE
=========================== */

.article {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px dashed #b8c2be;
}

.article header h1 {
    font-weight: bold;
}

.article header h1 a {
    color: #444;
}

.article header h1 a:hover {
    color: #258fd6;
    text-decoration: none;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar-logo img {
    width: 100%;
    max-width: 180px;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

.sidebar-quote {
    background-color: #4f5e59;
    font-style: italic;
    border-radius: 4px;
    padding: 1rem;
    color: #ffffff;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.4;    
}

.aside {
    padding-left: 2rem;
}
.aside h3 {
	font-size: 1em;
	font-weight: bold;
	margin-top: 6rem; padding-bottom: 0.5rem;
	border-bottom: 1px dashed #4f5e59;
	text-transform: uppercase;
}
.aside li.tag {
	margin-left: 0;
}
.aside ul {
	margin: 0;
}
.aside ul li {
    margin-bottom: 1.5rem;   /* espace doux entre les éléments */
    line-height: 1.2;        /* respiration du texte */
}

@media (max-width: 768px) {
    .aside {
        margin-top: 2rem;
        padding-left: 1rem;
    }
}

/* ===========================
   FOOTER
=========================== */

.footer {
    padding: 2rem 0;
    text-align: center;
}

.footer p {
    margin: 0;
}

.copyright {
    font-size: 0.7rem;
}

/* ===========================
   RESPONSIVE FINAL
=========================== */

@media (max-width: 767px) {

    /* cacher le menu large */
    nav,
    .nav {
        display: none !important;
    }

    /* afficher le menu mobile */
    .my-responsive-menu {
        display: block !important;
    }

    /* ouvrir le menu mobile quand on clique */
    .my-menu-button.open + .my-menu-list {
        display: block !important;
    }
}