/**
 * 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: sans-serif;
    font-size: 6pt;
    line-height: $line-height;
    letter-spacing: 0.25pt;
    z-index: 500;
}

.body:before{
  top:-2em;
  width:100%;
  text-align: center;
}
.body:after{
  bottom:-2em;
  width:100%;
  text-align: center;
}


/*gauche*/
.paper:nth-child(odd) .body:before { content: $header-odd; }
/*droite*/
.paper:nth-child(even) .body:before { content: $header-even; }

.body:after  { content: counter(folio); z-index: 499;}



/**
 * 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 {
//     @extend .x1;
//     @extend .w4;
// }
// html:not(.facing) .paper:nth-child(even) .body:before,
// html.facing .paper:nth-child(odd) .body:before {
//     @extend .x5;
//     @extend .w4;
// }
// html:not(.facing) .paper:nth-child(odd) .body:after,
// html.facing .paper:nth-child(even) .body:after {
//     @extend .x5;
//     @extend .w1;
//     text-align: left;
// }
// html:not(.facing) .paper:nth-child(even) .body:after,
// html.facing .paper:nth-child(odd) .body:after {
//     @extend .x1;
//     @extend .w1;
//     text-align: left;
// }


#flow-main {
  position: relative;
  -webkit-flow-into: flow-main;
          flow-into: flow-main;
}

.flow-main {
  -webkit-flow-from: flow-main;
          flow-from: flow-main;
}