/**
 * Macro-structure
 * ===============
 */

.body,
.body:before,
.body:after { position: absolute; }

.body:before,
.body:after { z-index: 500; }


/**
 * Zone de composition principale
 * ------------------------------
 */

.body {
    top: @page-margin-top;
    bottom: @page-margin-bottom;
}

/* TODO: move into grid.less? */
.bloc { position: absolute; z-index: 500; }
.debug .header,
.debug .footer,
.debug .body,
.debug .bloc { outline: 1px solid purple; }

/**
 * Pieds de page
 * -------------
 */

.body:before,
.body:after {
    display: block;
    font-family: "Belgika8th", sans-serif;
    font-size: 6pt;
    line-height: @line-height;
    letter-spacing: 0.25pt;
    z-index: 500;
}

.body:before,
.body:after { bottom: @line-height * -3; }

/*.header:before { content: "Type d'article — Titre de l'article"; } */
/*.footer:before { content: "Médor n°1 —  printemps 2015"; }*/
//.body:after  { content: counter(page-counter); z-index: 499;}

//.paper:nth-child(even) .body:before { content: "Médor — été 2016"; }


/**
 * Miroir
 * -------
 */

/**
 * Placement en miroir des éléments en fonction de si ils se trouvent sur une
 * page paire ou une page impaire, en utilisant le pseudo-sélecteur `nth-child`
 */

html:not(.facing) .paper:nth-child(odd) .body,
html.facing .paper:nth-child(even) .body {
    right: @page-margin-outside;
    left: @page-margin-inside;
}

html:not(.facing) .paper:nth-child(even) .body,
html.facing .paper:nth-child(odd) .body {
    left: @page-margin-outside;
    right: @page-margin-inside;
}

html:not(.facing) .paper:nth-child(odd) .body:before,
html.facing .paper:nth-child(even) .body:before {
    .x1();
    .w4();
}
html:not(.facing) .paper:nth-child(even) .body:before,
html.facing .paper:nth-child(odd) .body:before {
    .x5();
    .w4();
}
html:not(.facing) .paper:nth-child(odd) .body:after,
html.facing .paper:nth-child(even) .body:after {
    .x5();
    .w1();
    text-align: left;
}
html:not(.facing) .paper:nth-child(even) .body:after,
html.facing .paper:nth-child(odd) .body:after {
    .x1();
    .w1();
    text-align: left;
}