/* ================================
MAIN - ARTICLE
=================================*/

/* ============================== */
/* The article                    */
main > article {
    display:flex;
    flex-direction:column;
}

/* Order of the main elements of the article */
main > article > h1         { order:48 }
main > article > img        { order:10 }
main > article > .imgsrc    { order:20 }

main > article > .metadatas             { order:40 }
main > article > .metadatas > .author   { order:43 }
main > article > .metadatas > .creation { order:42 }
main > article > .metadatas > .category { order:41 }
main > article > .metadatas > .draft    { order:44 }

main > article > .comments  { order:50 }
main > article > .chapeau   { order:60 }
main > article > .content   { order:70 }


/* ============================== */
/* Content of the article         */

/* ---------- Image */
main > article > img {
    border-bottom-right-radius:var(--GC-FRAME-BORDER-RADIUS);
    border-bottom-left-radius:var(--GC-FRAME-BORDER-RADIUS);
    width:100%;
}
main > article > .imgsrc {
    display:block;
    position:relative;
    font-size:70%;
    width:100%;
    text-align:right;
    padding-right:1em;
    box-sizing:border-box;
}
main > article > .imgsrc::before { 
    content:"©"; 
    margin-right:2px;
}

/* ---------- Title */
main > article > h1 {
    text-align:left;
}

/* ---------- Metadatas */
main > article > .metadatas {
    color:var(--GC-COLOR-TEXT);
    position:relative;
    width:100%;
    font-size:90%;
    margin-top:10px;
    display:flex;
    flex-direction:row;
    justify-content:left;
    flex-wrap:wrap;
}

main > article > .metadatas > * { 
    margin-right:1em;
    margin-bottom:2px; 
}

main > article > .metadatas > .category {  
    background-color:var(--GC-COLOR2);
    color:var(--GC-COLOR-BACKGROUND);
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    padding:2px 10px;
    margin-top:-2px;
}

main > article > .metadatas > .author {  
    display:none;
}

main > article > .metadatas > .draft {
    background-color:var(--GC-COLOR1);
    color:var(--GC-COLOR-BACKGROUND);
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    display:block;
    position:absolute;
    top:-35px; 
    left:50%; transform:translateX(-50%);
    font-size:150%;
    padding:0 20px;
}

/* ---------- Comments */
main > article > .comments {
    background-color:var(--GC-COLOR1);
    color:var(--GC-COLOR-BACKGROUND);
    font-size:90%;
    padding:2px 10px;
    margin:10px 0 2px 0;
    float:right;
    transform:translate(0,3px);
}

/* ---------- Chapeau */
main > article > .chapeau {
    font-weight:bold;
}

/* ============================== */
/* Category description           */
main > fieldset.category {
    margin-top:100px;
    padding:20px;
    box-sizing:border-box;
    border-radius:1em;
    border:5px solid var(--GC-COLOR2);
    color:var(--GC-COLOR-TEXT);
}

main > fieldset.category > legend {
    padding:0 10px;
}