/* ==================================================
   1. PAGES : TITRES ET CONTENU
   ================================================== */

/* Masquer les titres des pages */
.page .entry-title {
    display: none;
}

/* Pages : largeur de la colonne de texte sur ordinateur */
@media only screen and (min-width: 669px) {
    body.page .entry-content p,
    body.page .entry-content h1,
    body.page .entry-content h2,
    body.page .entry-content h3,
    body.page .entry-content h4,
    body.page .entry-content ul,
    body.page .entry-content ol,
    body.page .entry-content blockquote {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Pages : fond gris très foncé */
body.page,
body.page #page {
    background-color: #171717 !important;
}


/* ==================================================
   2. IMAGES DE COUVERTURE DES PAGES
   ================================================== */

.page .entry-content .wp-block-image.cover-large {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1600px, calc(100vw - 32px));
    max-width: none;
}

.page .entry-content .wp-block-image.cover-large img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==================================================
   3. EN-TÊTE DU SITE
   ================================================== */

/* Fond de l'en-tête sur ordinateur */
@media (min-width: 669px) {
    header#masthead {
        background-color: #171717 !important;
    }
}

/* Fond de l'en-tête sur mobile */
@media (max-width: 668px) {
    header#masthead {
        background: #171717 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* Ordinateur : largeur et marges intérieures de l'en-tête */
@media only screen and (min-width: 669px) {
    #masthead .site-header-wrap {
        width: 100% !important;
        max-width: none !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
}

/* Titre et description du site */
.site-header .site-title,
.site-header .site-description {
    color: #F1EDE5 !important;
}

/* Titres : Montserrat Light */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300 !important;
}

#masthead .site-title {
    font-weight: 300 !important;
}

#masthead .site-title a {
    font-weight: 400 !important;
}

/* Menu principal */
#masthead .main-navigation a {
    font-weight: 300 !important;
}

/* Menu principal : couleurs sur ordinateur */
@media (min-width: 669px) {
    .site-header-wrap .main-navigation a {
        color: #F1EDE5 !important;
    }

    .site-header-wrap .main-navigation a:hover,
    .site-header-wrap .main-navigation .current-menu-item > a {
        color: #D6B66E !important;
    }
}

/* Sous-menus */
@media (min-width: 669px) {
    .main-navigation ul ul {
        background-color: #171717 !important;
    }

    .main-navigation ul ul a {
        color: #F1EDE5 !important;
        background-color: #171717 !important;
    }

    .main-navigation ul ul a:hover {
        color: #D6B66E !important;
        background-color: #292929 !important;
    }
}

/* Ordinateur : logo et menu sur une ligne */
@media only screen and (min-width: 560px) {
    .site-header-wrap.has-logo:not(.has-title-and-tagline) {
        grid-template-areas: "site-logo main-navigation" !important;
    }

    .site-header-wrap .site-logo {
        grid-row: 1;
        align-self: center;
        margin: 0 !important;
    }

    .site-header-wrap .main-navigation {
        grid-row: 1;
        align-self: center;
    }
}

/* ==================================================
   4. EN-TÊTE MOBILE
   ================================================== */

@media (min-width: 320px) and (max-width: 668px) {
    .home #main {
        padding-top: 0 !important;
    }
}

/* Bouton Menu mobile */
@media (max-width: 668px) {
    label#toggle-menu {
        display: inline-block !important;
        padding: 6px 12px !important;
        border: 1px solid #D6B66E !important;
        border-radius: 3px !important;
        background-color: #171717 !important;
        color: #D6B66E !important;
    }

    .custom-logo {
        max-height: 40px !important;
        width: auto !important;
    }
}

/* Mobile : logo et menu en première ligne,
   titre et tagline en dessous */
@media only screen and (max-width: 559px) {

    #masthead .site-header-wrap.has-menu.has-title-and-tagline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "site-logo main-navigation"
            "site-title ."
            "site-description ." !important;
        align-items: center !important;
        column-gap: 16px !important;
        row-gap: 0 !important;
    }

    #masthead .site-header-wrap .site-logo {
        grid-area: site-logo !important;
        justify-self: start !important;
        align-self: center !important;
        margin: 0 !important;
    }

    #masthead .site-header-wrap .main-navigation {
        grid-area: main-navigation !important;
        justify-self: end !important;
        align-self: center !important;
    }

    #masthead .site-header-wrap .site-title {
        display: block !important;
        grid-area: site-title !important;
        justify-self: start !important;
        text-align: left !important;
        margin: 0 !important;
    }

    #masthead .site-header-wrap .site-description {
        display: block !important;
        grid-area: site-description !important;
        justify-self: start !important;
        text-align: left !important;
        margin: 0 !important;
    }

    #masthead .site-header-wrap .social-navigation {
        display: none !important;
    }

    #masthead .site-header-wrap {
        padding-top: 12px !important;
    }
}

/* Ordinateur : réduire l'espace sous la tagline */
@media only screen and (min-width: 560px) {
    #masthead .site-header-wrap .site-description {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}


/* ==================================================
   5. ARTICLES : FOND ET TYPOGRAPHIE
   ================================================== */

/* Fond noir sous le contenu éditorial */
body.single-post #main {
    background-color: #000;
}

/* Fond blanc du contenu de l'article */
.single-post,
.single-post #page,
.single-post #content,
.single-post #primary,
.single-post article,
.single-post .entry-header,
.single-post .entry-content,
.single-post .entry-footer {
    background: #ffffff !important;
}

/* Textes foncés */
.single-post .entry-title,
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-meta,
.single-post .entry-footer {
    color: #292929 !important;
}

/* Titre de l'article */
.single-post .entry-header,
.single-post .entry-title {
    background: #ffffff !important;
    color: #292929 !important;
}

/* Liens */
.single-post .entry-content a {
    color: #806323 !important;
}

/* Légendes des photos */
.single-post .wp-block-image figcaption,
.single-post .wp-block-gallery figcaption,
.single-post .gallery-caption,
.single-post .wp-caption-text {
    color: #555555 !important;
}

/* Bio de l'auteur */
body.single-post .author-bio {
    color: #222;
}


/* ==================================================
   6. ARTICLES : NAVIGATION ET COMMENTAIRES
   ================================================== */

body.single-post nav.post-navigation,
body.single-post #comments {
    background: transparent;
    color: #f1ede5;
}

body.single-post nav.post-navigation a,
body.single-post #comments a {
    color: #d6ad55;
}

body.single-post #comments p,
body.single-post #comments label,
body.single-post #comments h2,
body.single-post #comments h3 {
    color: #f1ede5;
}


/* ==================================================
   7. ARTICLES : PIED DE PAGE
   ================================================== */

body.single-post #colophon {
    background-color: #000;
    color: #f1ede5;
    max-width: none;
    width: 100%;
}

body.single-post #colophon a {
    color: #d6ad55;
}

/* Alignement du footer sur la colonne éditoriale */
body.single-post #colophon > * {
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* ==================================================
   8. AJUSTEMENTS MOBILES DES ARTICLES
   ================================================== */

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

    body.single-post #main {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.single-post #colophon {
        width: 100%;
        max-width: 100%;
    }

    body.single-post #colophon > * {
        width: auto;
        max-width: none;
        margin-left: 20px;
        margin-right: 20px;
    }

    /* Supprimer les bandes latérales sur les articles */
    body.single-post article.entry {
        box-shadow: -16px 0 0 #fff, 16px 0 0 #fff;
    }
}


/* ==================================================
   9. BOUTONS DE PARTAGE
   ================================================== */

.sd-social-icon .sd-content ul li a.sd-button {
    background-color: transparent !important;
    color: #B8B8B8 !important;
    box-shadow: none !important;
    border: none !important;
}

.sd-social-icon .sd-content ul li a.sd-button:before,
.sd-social-icon .sd-content ul li a.sd-button:after {
    color: #B8B8B8 !important;
}

.sd-social-icon .sd-content ul li a.sd-button:hover {
    background-color: transparent !important;
    color: #D6B66E !important;
}
/* Mobile : aligner l'en-tête sur les marges du contenu */
@media only screen and (max-width: 559px) {
    #masthead .site-header-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}
body.single-post .author-bio {
    color: #222;
    padding-bottom: 32px;
}
/* Supprimer l'ombre périphérique du thème Morden */
@media only screen and (min-width: 1024px) {
    #page {
        box-shadow: none !important;
    }
}
/* Pages et accueil : réduire l'espace avant l'image mise en avant */
@media only screen and (min-width: 669px) {
    body.home #main,
    body.page #main {
        padding-top: 16px !important;
    }
}
/* Articles : supprimer toute la navigation précédente / suivante */
body.single-post .post-navigation {
    display: none !important;
}
/* Articles : réduire l'espace supérieur du pied de page */
body.single-post #colophon {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.single-post #colophon .site-info {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Articles : supprimer l'espace inférieur de la zone principale */
body.single-post main#main {
    padding-bottom: 0 !important;
}
/* En-tête : rétablir une marge au-dessus du titre */
body.single-post #colophon .site-info {
    padding-top: 24px !important;
    margin-top: 0 !important;
}