/* BLOCK ARTICLE */

article {
    padding: 0px calc(var(--margin-w)*2);
    padding-bottom: calc(var(--margin-h)*9);
    margin: auto; /* centre */
}
@media (max-width: 460px) { article { padding: 0px var(--margin-w); } }




/* LARGEUR ARTICLE */

:root { --content-width: 100%; }
@media (min-width: 381px) {
    :root { --content-width: 600px; }
}
@media (min-width: 769px) {
    body[data-aside="article-min"] { --content-width: 600px; }
}
@media (min-width: 1001px) {
    :root {                          --content-width: 790px; }
    body[data-aside="article-min"] { --content-width: 790px; }
    body[data-aside="article-max"] { --content-width: 650px; }
}
@media (min-width: 1441px) {
    :root {                          --content-width: 880px; }
    body[data-aside="article-min"] { --content-width: 880px; }
    body[data-aside="article-max"] { --content-width: 650px; }
}
@media (min-width: 1621px) {
    body[data-aside="article-max"] { --content-width: 790px; }
}
@media (min-width: 1791px) {
    body[data-aside="article-max"] { --content-width: 880px; }
}
article{ max-width: var(--content-width); }



/* INDENTATION */

/* text indent des p qui suivent des p */
article p + p { text-indent: calc(var(--margin-w)*2.7); }
/* reset text indent des els en inline-block */
article a, article sup { text-indent: 0px; }



/* MISE EN PLACE COMPTEUR DES P */

article {
    counter-reset: p_counter;
}
article > p,
article section > p,
article blockquote > p {
    counter-increment: p_counter;
}
article > p:before,
article *:not(.unnumbered):not(li)  > p:before {
    content: counter(p_counter);
    text-indent: 0px;
}



/* POSITION COMPTEUR DES P */

@media (max-width: 460px) { article p:before { display: none; } }

:root {                               --p-counter-left: -15px; }
@media (min-width: 661px) {
    body[data-aside="close"] {        --p-counter-left: -20px; }
}
@media (min-width: 769px) {}
@media (min-width: 901px) {
    body[data-aside="close"] {        --p-counter-left: -40px; }
    body[data-aside="article-min"],
    body[data-aside="plateforme"] {   --p-counter-left: -20px; }
}
@media (min-width: 1001px) {}
@media screen and (min-width: 1301px){
    body[data-aside="article-min"],
    body[data-aside="plateforme"] {   --p-counter-left: -40px; }
}
@media (min-width: 1381px) {
    body[data-aside="article-max"] {  --p-counter-left: -40px; }
}

article > p,
article section > p,
article blockquote > p { position: relative; }

article > p:before,
article *:not(.unnumbered):not(li) > p:before {
    position: absolute; left: var(--p-counter-left);
}

/* cas special des p qui suivent des p */
article > p + p:before,
article *:not(.unnumbered):not(li) > p + p:before { 
    left: var(--p-counter-left);
}
/* cas special des blockquotes */
article blockquote p:before { 
    left: calc((var(--margin-w)*-4) + var(--p-counter-left)) !important;
}



/* APPELS DE NOTE + FIGURE */

article a[href^="#fig"],
article a.footnote-ref > sup {
    transform: translateY(-0px)!important;
    white-space: nowrap;
}
article a[href^="#fig"]::before { content: "["; margin-right: 0px; }
article a[href^="#fig"]::after { content: "]"; }
article a.footnote-ref > sup::before { content: "("; }
article a.footnote-ref > sup::after { content: ")"; }
article a.footnote-ref::before { display: none; }


/* MARGINS / PADDINGS */

article p {
    margin: 0;
}
article h2 {
    display: table;
    text-align: center;
    width: auto; max-width: 70%;
    
    margin: auto;
    
    margin-top: calc(var(--margin-h)*4);
    padding-bottom: calc(var(--margin-h)*0.75);
    border-bottom: 1px solid var(--color-noir-1);
    margin-bottom: calc(var(--margin-h)*1);
}
@media (max-width: 768px) { article h2 { margin-top: calc(var(--margin-h)*2); } }

article h3 {
    margin-top: calc(var(--margin-h)*4);
    margin-bottom: calc(var(--margin-h)*1);
}
article blockquote,
article ul,
article ol {
    margin: var(--margin-h) 0;
}
article blockquote {
    margin: var(--margin-h) 0;
    margin-left: calc(var(--margin-w)*2.7); padding-left: calc(var(--margin-w)*1.3);

    /* -10 et -9 pr etre aligne sur hauteur de x */
    -webkit-box-shadow: -10px 0px 0px -9px var(--color-noir-1);
    box-shadow: -10px 0px 0px -9px var(--color-noir-1);
}
article ul { padding-left: calc(var(--margin-w)*4); }
@media (max-width: 768px) { article ul { padding-left: calc(var(--margin-w)*2.7); } }

article hr {
    margin-top: calc(var(--margin-h)*11); margin-bottom: 0px;
    
    height: 1px; border: none;
    background: var(--color-noir-1);
}
article hr + p { margin-top: var(--t1-lh); }
article hr + .unnumbered { margin-top: var(--t1-lh); }

/* si article ne commence pas par un titre, on aligne sur la ligne de base */
article >*:first-child:not(section) { margin-top: calc(var(--margin-h)*8 - 51px); } /* ou : calc(var(--margin-h)*5 - 7px); */
@media (max-width: 768px) { article >*:first-child:not(section) { margin-top: calc(var(--margin-h)*2 + 3px); } }


/* LISTES */

article ol { list-style-position: inside; }

/* puce des ul */
article ul {
    list-style: none;
}
article ul > li { position: relative; }
article ul > li:before {
    content: "—";
    position: absolute; left: -40px;
}

/* cas special pr les listes avec des sauts de lignes en md */
article li > p { display: inline; }


/* CAS SPECIAUX */

/* class pr pas de compteurs p */
.unnumbered {}
/* class pr saut de ligne + reset indentation p */
.blank { padding-top: var(--t1-lh); }



/* ASIDE */

/* aside / notes */
.footnote-back { margin-left: 6px; }
/* aside / fiche / bouton pr copier ref article */
#citation-copier { cursor: pointer; }


/* RESPONSIVE : INDENTATION/POSITION COMPTEURS/MARGINS/PADDINGS */
/* 
    a bouger dans leur partie une fois que c'est ok
*/
@media (min-width: 769px) {

    /* indentation */
    article p + p { text-indent: calc(var(--margin-w)*4); }

    /* position compteur */
    article > p + p:before,
    article *:not(.unnumbered):not(li) > p + p:before { 
        left: var(--p-counter-left);
    }
    /* cas special des blockquotes */
    article blockquote p:before { 
        left: calc((var(--margin-w)*-5.3) + var(--p-counter-left)) !important;
    }

    /* marges blockquote */
    article blockquote {
        margin-left: calc(var(--margin-w)*4); padding-left: calc(var(--margin-w)*1.3);
    }
}



/* ENTRETIEN */

/* toggle asterisme si contenu devant .dialog */
.dialog:before {
    display: none;
    content: url("/static/icons/problemata-asterisme.svg");

    width: 51px;
    margin: 25px auto 30px auto;
}
* + .dialog:before {
    display: block;
}

/* toggle asterisme si .dialog suivi par du contenu */
.dialog + *:not(hr) {
    padding-top: 110.3px; /* height asterisme */
    position: relative;
}
.dialog + *:not(hr) > * { margin-top: 0px; } /* si h2, h3 */
.dialog + *:not(hr):after {
    display: block;
    content: url("/static/icons/problemata-asterisme.svg");

    width: 51px;
    margin: 25px auto 30px auto;

    position: absolute;
    left: 0; right: 0;
    top: 0px;
}

:root{
    --dialog-indent: 60px;
}

/* reset blockquote */
.dialog blockquote {
    margin: calc(var(--margin-h)/2) 0;
    margin-left: 0px; padding-left: 0px;
    -webkit-box-shadow: none; box-shadow: none;
}
.dialog .replica:last-of-type blockquote:last-of-type { margin-bottom: 0; }
.dialog blockquote p:before { 
    left: calc(var(--dialog-indent)*-1 + var(--p-counter-left)) !important;
}

.dialog .agent {
    font-family: "ProblemataSans-Regular";
    font-size: var(--n3-fs);
    font-weight: 100;
    line-height: var(--n3-lh);
    letter-spacing: var(--n2-ls);
}
.dialog .replica .agent {
    display: block;
    margin-left: var(--dialog-indent);
    text-indent: 0px;
}
.dialog .replica blockquote p {
    margin-left: var(--dialog-indent);
}
.dialog .replica blockquote p + p {
    text-indent: var(--dialog-indent) !important;
}

/* nom premier agent */
.dialog .replica > p:first-of-type .agent {
    text-indent: var(--dialog-indent);
    margin-left: 0px;
}
/* replique premier agent */
.dialog .replica blockquote:first-of-type p {
    text-indent: 0px;
    margin-left: 0px;
}
.dialog blockquote:first-of-type p:before { 
    left: var(--p-counter-left) !important;
}

/* agent vide */
.dialog .agent:empty {
    position: relative;
    width: 121px;
    height: 14px;
    top: -2px;
    margin-left: var(--dialog-indent) !important;
}
.dialog .agent:empty:before {
    content : "";
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-bottom:1px solid var(--color-noir-1);
}


/* ESSAI VISUEL */

/*header essai visuel*/
#visual-essay-header{}

#visual-essay-header figure{
    max-width: 1200px;
    margin: auto;
    padding: calc(var(--margin-h)*1) calc(var(--margin-h)*1);
}

#visual-essay-header figure > svg {
    width: 100%;
    display: block;
}
#visual-essay-header figure > svg .b {
    fill: none;
    stroke: #808080;
    stroke-width: 1px;
    stroke-miterlimit: 10;
}
#visual-essay-header figure > img {
    width: 100%;
    display: block;

    object-fit: cover;
    aspect-ratio: 2/1;
}

#visual-essay-header .wrapper {
    max-width: var(--content-width);
    margin: auto;
    margin-bottom: calc(var(--margin-h)*1);
    padding: 0px calc(var(--margin-w)*2);
}
@media (max-width: 460px) {
    #visual-essay-header .wrapper {
        padding: 0px var(--margin-w);
    }
}
#visual-essay-header .pdf-link {
    width: 224px;
    display: inline-block;

    box-sizing: border-box;
    padding: calc(var(--margin-h)*1) calc(var(--margin-w)*1);
}

/* article essai visuel*/

#visual-essay-article:after {
    content: url("/static/icons/picto-eyes.svg");

    display: block;
    width: 94px;
    margin: 25px auto 30px auto;
}