/*
==========================================================
 MUSIMÉDIANE — ARTICLES WORDPRESS
 Feuille de style spécifique aux articles de la revue
==========================================================
*/


/* ========================================================
   1. STRUCTURE GÉNÉRALE
   ======================================================== */

.musimediane-page {
    display: flex;
    align-items: flex-start;

    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 0;

    box-sizing: border-box;
}



/* ========================================================
   2. COLONNE GAUCHE / SOMMAIRE
   ======================================================== */

.musimediane-sidebar {
    flex: 0 0 20%;
    width: 20%;

    position: sticky;
    top: 0;

    height: 100vh;
    overflow-y: auto;

    box-sizing: border-box;

    padding: 0 12px 2rem;

    background: #FFF9E0;
    border-right: 1px solid #999;
}

.musimediane-article {
    flex: 1 1 80%;
    min-width: 0;

    padding: 2rem 4vw 4rem;

    box-sizing: border-box;
}


/* ========================================================
   3. LOGO MUSIMÉDIANE
   ======================================================== */

.musimediane-sidebar .musimediane-logo {
    display: block !important;

    width: calc(100% + 24px) !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 -12px 1.5rem -12px !important;
    padding: 0 !important;
}

/* ========================================================
   4. TITRE DANS LA COLONNE GAUCHE
   ======================================================== */

.musimediane-sidebar-title {
    font-size: 0.85rem;
    line-height: 1.25;

    font-weight: bold;
    text-align: center;

    margin: 1.25rem 0;
    padding: 0 0.5rem;
}


/* ========================================================
   5. AUTEUR DANS LA COLONNE GAUCHE
   ======================================================== */

.musimediane-sidebar-author {
    font-size: 0.85rem;
    line-height: 1.25;

    font-weight: bold;
    text-align: center;

    margin: 0 0 2rem 0;
    padding: 0 0.5rem;
}


/* ========================================================
   6. LIGNES DU SOMMAIRE
   ======================================================== */

.musimediane-sidebar hr {
    width: 90%;

    margin: 1rem auto;

    padding: 0;

    border: 0;
    border-top: 1px solid #999;
}


/* ========================================================
   7. SOMMAIRE EASY TABLE OF CONTENTS
   ======================================================== */

.musimediane-sidebar .ez-toc-container {
    width: 100% !important;

    margin: 0 !important;
    padding: 0.5rem !important;

    box-sizing: border-box;

    border: 0 !important;
    background: transparent !important;

    box-shadow: none !important;
}


/* Titre éventuellement généré par Easy TOC */

.musimediane-sidebar .ez-toc-title-container {
    display: none;
}


/* Liste principale */

.musimediane-sidebar .ez-toc-list {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}


/* Éléments du sommaire */

.musimediane-sidebar .ez-toc-list li {
    margin: 0.35rem 0 !important;

    padding: 0 !important;

    font-size: 0.82rem;
    line-height: 1.25;

    text-align: left;
}


/* Sous-niveaux */

.musimediane-sidebar .ez-toc-list ul {
    margin: 0.25rem 0 0.5rem 1rem !important;
    padding: 0 !important;
}


/* Liens du sommaire */

.musimediane-sidebar .ez-toc-list a {
    text-decoration: none;
}


/* ========================================================
   8. ZONE PRINCIPALE DE L'ARTICLE
   ======================================================== */

.musimediane-article {
    flex: 1 1 auto;

    min-width: 0;

    margin: 0;
    padding: 2rem 4vw 4rem 4vw;

    box-sizing: border-box;
}


/* Le texte conserve une largeur confortable */

.musimediane-article > * {
    width: 100%;
    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}
/* ========================================================
   9. TITRE PRINCIPAL DE L'ARTICLE
   ======================================================== */

.musimediane-article .titre-article {
    max-width: 1000px;

    margin-top: 2rem;
    margin-bottom: 1.25rem;

    padding: 0;

    font-size: 1.75rem;
    line-height: 1.25;

    font-weight: normal;
    text-align: center;
}


/* ========================================================
   10. AUTEUR ET AFFILIATION
   ======================================================== */

.musimediane-article .titre-auteur {
    max-width: 1000px;

    margin-top: 0;
    margin-bottom: 4rem;

    padding: 0;

    font-size: 1.25rem;
    line-height: 1.35;

    font-weight: normal;
    text-align: center;
}


/* ========================================================
   11. PARAGRAPHES
   ======================================================== */

.musimediane-article p {
    font-size: 1rem;
    line-height: 1.4;

    text-align: justify;
}


/* ========================================================
   12. LIENS
   ======================================================== */

.musimediane-article a {
    color: #009900;

    text-decoration: none;
}

.musimediane-article a:hover {
    text-decoration: underline;
}


/* ========================================================
   13. TITRES H1
   ======================================================== */

.musimediane-article h1 {
    max-width: 1000px;

    margin: 2rem auto 1.5rem auto;

    padding: 0;

    font-size: 1.5rem;
    line-height: 1.3;

    font-weight: bold;
    text-align: center;
}


/* ========================================================
   14. TITRES H2
   ======================================================== */

.musimediane-article h2 {
    max-width: 1000px;

    margin: 2rem auto 1rem auto;

    padding: 0;

    font-size: 1.25rem;
    line-height: 1.3;

    font-weight: bold;
    text-align: left;
}


/* ========================================================
   15. TITRES H3
   ======================================================== */

.musimediane-article h3 {
    max-width: 1000px;

    margin: 1.75rem auto 0.75rem auto;

    padding: 0;

    font-size: 1.15rem;
    line-height: 1.3;

    font-weight: bold;
    text-align: left;
}


/* ========================================================
   16. TITRES H4
   ======================================================== */

.musimediane-article h4 {
    max-width: 1000px;

    margin: 1.5rem auto 0.75rem auto;

    padding: 0;

    font-size: 1rem;
    line-height: 1.3;

    font-weight: bold;
    text-align: left;
}


/* ========================================================
   17. NOTES LATÉRALES
   ======================================================== */

/* ========================================================
   NOTES LATÉRALES
   ======================================================== */

.musimediane-article aside {
    float: right;

    width: 30%;
    min-width: 200px;

    margin: 0 0 1rem 2rem;
    padding: 1rem;

    box-sizing: border-box;

    border-left: 4px solid #ccc;
    background-color: #e9e9e9;

    font-size: 12px !important;
    line-height: 1.25;

    text-align: left;

    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* Tout ce qui se trouve dans une note garde cette taille */

.musimediane-article aside p,
.musimediane-article aside li,
.musimediane-article aside span,
.musimediane-article aside a {
    font-size: 12px !important;
    line-height: 1.25 !important;
}


.musimediane-article aside p {
    margin: 0 0 0.7rem 0;
    padding: 0;

    text-align: left;
}


.musimediane-article aside p:last-child {
    margin-bottom: 0;
}


/* ========================================================
   18. CITATIONS
   ======================================================== */

.musimediane-article blockquote {
    max-width: 900px;

    margin: 1.5rem auto;

    padding: 0 2rem;

    font-size: 0.85rem;
    line-height: 1.4;
}


/* ========================================================
   19. ILLUSTRATIONS
   ======================================================== */

.musimediane-article .illustration {
    display: block;

    width: 100%;
    max-width: 1000px;

    margin: 2rem auto;

    text-align: center;
}


/* Images */

.musimediane-article .illustration img {
    display: block;

    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;
}


/* ========================================================
   20. LÉGENDES DES ILLUSTRATIONS
   ======================================================== */

.musimediane-article .lgd {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;

    padding: 0;

    font-size: 0.9rem;
    line-height: 1.25;

    font-weight: bold;
    text-align: center;
}


/* ========================================================
   21. IMAGES GÉNÉRALES
   ======================================================== */

.musimediane-article img {
    max-width: 100%;
    height: auto;
}


/* ========================================================
   22. BIBLIOGRAPHIE
   ======================================================== */

.musimediane-article .bibliographie {
    margin-left: 1.5rem;

    text-indent: -1.5rem;

    margin-top: 0.5rem;
}


/* ========================================================
   23. TRAITS HORIZONTAUX
   ======================================================== */

.musimediane-article hr {
    max-width: 1000px;

    margin: 2rem auto;

    border: 0;
    border-top: 1px solid #999;
}


/* ========================================================
   24. EXPOSANTS ET INDICES
   ======================================================== */

.musimediane-article sup,
.musimediane-article sub {
    vertical-align: baseline;
    position: relative;
}

.musimediane-article sup {
    top: -0.4em;
}

.musimediane-article sub {
    top: 0.4em;
}


/* ========================================================
   25. SÉLECTEUR FR / EN
   ======================================================== */

.musimediane-language {
    position: fixed;

    top: 0;
    right: 0;

    z-index: 1000;

    padding: 0.4rem 0.6rem;

    background-color: #FFF9E0;

    border-left: 1px solid #555;
    border-bottom: 1px solid #555;

    border-radius: 0 0 0 0.4rem;

    font-size: 0.9rem;
}


.musimediane-language a {
    color: #000;

    text-decoration: none;

    opacity: 0.6;
}


.musimediane-language a:hover {
    opacity: 1;
}


.musimediane-language a.active {
    font-weight: bold;

    opacity: 1;

    pointer-events: none;
}


/* ========================================================
   26. NETTOYAGE DES FLOTTANTS
   ======================================================== */

.musimediane-article::after {
    content: "";

    display: table;
    clear: both;
}


/* ========================================================
   27. TABLETTES ET PETITS ÉCRANS
   ======================================================== */

@media (max-width: 994px) {

    .musimediane-page {
        display: block;
    }


    /* La colonne gauche repasse au-dessus */

    .musimediane-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        flex: none;

        padding-bottom: 1.5rem;

        border-right: 0;
        border-bottom: 1px solid #999;
    }


    /* Logo plus petit */

    .musimediane-sidebar .musimediane-logo {
    display: block;

    width: calc(100% + 24px);
    max-width: none;
    height: auto;

    margin: 0 -12px 1.5rem -12px;
    padding: 0;
}

    /* Article pleine largeur */

    .musimediane-article {
        width: 100%;

        margin: 0;

        padding: 2rem;
    }


    /* Notes intégrées au texte */

    .musimediane-article aside {
        float: none;

        width: 100%;
        min-width: 0;

        margin: 1.5rem 0;
    }
}


/* ========================================================
   28. SMARTPHONES
   ======================================================== */

@media (max-width: 600px) {

    .musimediane-article {
        padding: 1.25rem;
    }


    .musimediane-article .titre-article {
        font-size: 1.45rem;

        margin-top: 1rem;
    }


    .musimediane-article .titre-auteur {
        font-size: 1.05rem;

        margin-bottom: 2.5rem;
    }


    .musimediane-article p {
        text-align: left;
    }


    .musimediane-article blockquote {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .musimediane-sidebar-title,
    .musimediane-sidebar-author {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ========================================================
   TWENTY SIXTEEN : PAGE MUSIMÉDIANE PLEINE LARGEUR
   ======================================================== */

body.page-id-1598 .site-inner,
body.page-id-1598 .site-content,
body.page-id-1598 .content-area,
body.page-id-1598 .site-main,
body.page-id-1598 .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-id-1598 .content-area {
    float: none !important;
}

body.page-id-1598 .site-main {
    margin: 0 !important;
}


/* ========================================================
   MUSIMÉDIANE : NEUTRALISATION DE TWENTY SIXTEEN
   ======================================================== */

/*
 * Une page Musimédiane doit utiliser toute la fenêtre,
 * comme les anciennes pages HTML.
 */

body:has(.musimediane-page) {
    margin: 0 !important;
}

body:has(.musimediane-page) .site {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    max-width: none !important;
}

body:has(.musimediane-page) .site-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.musimediane-page) .site-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.musimediane-page) .content-area {
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.musimediane-page) .site-main {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.musimediane-page) article {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.musimediane-page) .entry-content {
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
 * On masque les éléments WordPress autour de l'article.
 * La page Musimédiane possède son propre en-tête.
 */

body:has(.musimediane-page) .site-header,
body:has(.musimediane-page) .entry-header,
body:has(.musimediane-page) .entry-footer,
body:has(.musimediane-page) .site-footer,
body:has(.musimediane-page) .sidebar {
    display: none !important;
}


/* ========================================================
   STRUCTURE DE LA PAGE MUSIMÉDIANE
   ======================================================== */

.musimediane-page {
    display: flex !important;
    align-items: flex-start;

    position: relative !important;
    left: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


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

.musimediane-sidebar {
    flex: 0 0 20%;

    width: 20%;
    min-width: 0;
    max-width: none;

    position: sticky;
    top: 0;

    height: 100vh;
    overflow-y: auto;

    margin: 0;
    padding: 0 12px 2rem;

    box-sizing: border-box;

    background-color: #FFF9E0;
    border-right: 1px solid #999;
}


/* Le logo occupe toute la largeur de la sidebar */

.musimediane-sidebar .musimediane-logo {
    display: block !important;

    width: calc(100% + 24px) !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 -12px 1.5rem !important;
    padding: 0 !important;
}


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

.musimediane-article {
    flex: 1 1 80%;

    width: 80%;
    min-width: 0;

    margin: 0 !important;

    padding: 2.5rem 4% 4rem !important;

    box-sizing: border-box;
}


/*
 * L'ancien modèle utilise une zone de lecture beaucoup
 * plus large que notre premier essai.
 */

.musimediane-article > * {
    width: auto;
    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}


/* ========================================================
   NOTES
   ======================================================== */

.musimediane-article .musimediane-note {
    float: right;

    width: 30%;
    min-width: 0;

    margin: 0 0 1.5rem 2rem;
    padding: 1rem;

    box-sizing: border-box;

    background: #e9e9e9;
    border-left: 4px solid #ccc;

    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

.musimediane-article .musimediane-note * {
    font-size: inherit !important;
    line-height: inherit !important;
}


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

@media (max-width: 994px) {

    .musimediane-page {
        display: block !important;
    }

    .musimediane-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        padding-bottom: 1.5rem;

        border-right: 0;
        border-bottom: 1px solid #999;
    }

    .musimediane-sidebar .musimediane-logo {
        width: 300px !important;
        max-width: 100% !important;

        margin: 0 auto 1.5rem !important;
    }

    .musimediane-article {
        width: 100%;

        padding: 2rem !important;
    }

    .musimediane-article .musimediane-note {
        float: none;

        width: 100%;

        margin: 1.5rem 0;
    }
}

/* ========================================================
   CORRECTION PLEINE LARGEUR POUR LA PAGE MUSIMÉDIANE
   ======================================================== */

body:has(.musimediane-page) .site,
body:has(.musimediane-page) .site-inner,
body:has(.musimediane-page) .site-content,
body:has(.musimediane-page) .content-area,
body:has(.musimediane-page) .site-main,
body:has(.musimediane-page) article,
body:has(.musimediane-page) .entry-content,
body:has(.musimediane-page) .vc_row,
body:has(.musimediane-page) .wpb_wrapper {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* On enlève également les flottements de Twenty Sixteen */

body:has(.musimediane-page) .content-area,
body:has(.musimediane-page) .entry-content {
    float: none !important;
}


/* ========================================================
   PAGE MUSIMÉDIANE
   ======================================================== */

.musimediane-page {
    display: flex !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    left: 0 !important;

    box-sizing: border-box;
}


/* ========================================================
   SIDEBAR : 20 % DE L'ÉCRAN
   ======================================================== */

.musimediane-sidebar {
    flex: 0 0 20% !important;

    width: 20% !important;
    min-width: 220px;
    max-width: none !important;

    position: sticky;
    top: 0;

    height: 100vh;
    overflow-y: auto;

    margin: 0 !important;
    padding: 0 12px 2rem !important;

    box-sizing: border-box;

    background: #FFF9E0;
    border-right: 1px solid #999;
}


/* ========================================================
   LOGO
   ======================================================== */

.musimediane-sidebar .musimediane-logo {
    display: block !important;

    width: calc(100% + 24px) !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 -12px 1.5rem -12px !important;
    padding: 0 !important;
}


/* ========================================================
   ZONE ARTICLE : 80 %
   ======================================================== */

.musimediane-article {
    flex: 1 1 80% !important;

    width: 80% !important;
    min-width: 0;

    margin: 0 !important;

    padding: 2.5rem 4% 4rem !important;

    box-sizing: border-box;
}


/*
   Sur la page d'origine, la zone texte + notes
   est sensiblement plus large que dans notre essai.
*/

.musimediane-article > * {
    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}


/* ========================================================
   NOTE LATÉRALE
   ======================================================== */

.musimediane-article .musimediane-note {
    float: right;

    width: 30% !important;
    min-width: 220px;

    margin: 0 0 1.5rem 2rem !important;
    padding: 1rem !important;

    box-sizing: border-box;

    background: #e9e9e9;
    border-left: 4px solid #ccc;

    font-size: 0.72rem !important;
    line-height: 1.2 !important;
}

.musimediane-article .musimediane-note p,
.musimediane-article .musimediane-note a,
.musimediane-article .musimediane-note span {
    font-size: inherit !important;
    line-height: inherit !important;
}


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

@media (max-width: 994px) {

    .musimediane-page {
        display: block !important;
    }

    .musimediane-sidebar {
        position: relative;

        width: 100% !important;
        min-width: 0;

        height: auto;

        border-right: 0;
        border-bottom: 1px solid #999;
    }

    .musimediane-sidebar .musimediane-logo {
        width: 300px !important;
        max-width: 100% !important;

        margin: 0 auto 1.5rem !important;
    }

    .musimediane-article {
        width: 100% !important;

        padding: 2rem !important;
    }

    .musimediane-article .musimediane-note {
        float: none;

        width: 100% !important;
        min-width: 0;

        margin: 1.5rem 0 !important;
    }
}

/* ========================================================
   SÉLECTEUR DE LANGUE : COMPLÉMENT
   ======================================================== */

.musimediane-language .active {
    color: #000;
    font-weight: bold;
    opacity: 1;
}

/*
 * Lorsque l’administrateur est connecté, le sélecteur
 * descend sous la barre noire de WordPress.
 */
body.admin-bar .musimediane-language {
    top: 32px;
}

/*
 * Sur les petits écrans, la barre d’administration
 * WordPress est plus haute.
 */
@media screen and (max-width: 782px) {
    body.admin-bar .musimediane-language {
        top: 46px;
    }
}