@import 'fonts.css';
h1 {
    font-size: 28pt;
    font-weight: normal;
    line-height: 1em;
    font-family: 'Redaction 35';
    margin: 0;
}

h2 {
    margin: 0;
    font-size: 16pt;
    font-weight: normal;
    line-height: 1em;
    font-family: 'Redaction 10';
}

.titles {
    margin: auto;
    margin-top: 5cm;
    margin-right: 20mm;
    display: grid;
    grid-template-columns: 1cm 10cm;
    /* crée deux colonnes */
    /* grid-template-rows: 100px 200px;  crée deux lignes */
    grid-column-gap: 5mm;
    grid-row-gap: 5mm;
}

.page {
    line-height: 1.2em;
    font-size: 3.2em;
    font-family: 'Redaction 100';
    font-style: normal;
    font-weight: normal;
    position: relative;
}

.page::before {
    content: 'Quand le virtuel imite le réel';
    position: absolute;
    transform: rotate(90deg) translateX(50%);
    top: 50%;
    right: 5mm;
    transform-origin: top right;
}

.page::after {
    counter-increment: pages;
    content: counter(pages);
    position: absolute;
    text-decoration: underline;
    margin-left: calc(var(--page-margin-outside)*2);
}

.page .bloc {
    height: 100%;
}

p {
    margin: 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-spacing: -.1em;
    text-justify: inter-character;
    text-align-last: left;
}

p+p {
    text-indent: 2em;
}

img {
    width: 20%;
}