:root {
    --text-color: black;
}

.marginal-text {
    font-size: 15px;
    text-align: center;
    flex-grow: 1;
}

.margin-text-box {
    display: flex;
    flex-direction: row;
    transform: rotate(-90deg) translate(-456px, 0);
    flex-wrap: nowrap;
    align-items:center;
    position: absolute;
    width: 456px;
    height: 60px;
    transform-origin: top left;
    align-content: stretch;
    z-index: 1;
    justify-content: space-between;
    gap: 5px;
}

.br {
    break-before: page;
}

#couv_clara {
    page: couv_voice1;
    page-break-after: always;
}

#couv_florian {
    page: couv_voice2;
    page-break-after: always;
}

@page couv_voice1{
    margin: 10mm 10mm;
    @bottom-right { content: none; }
    text-align: center;
}

@page couv_voice2{
    margin: 10mm 10mm;
    @bottom-right { content: none; }
    text-align: center;
}

.pagedjs_right_page .folio {
    display: block;
}

.pagedjs_couv_voice1_page .folio, .pagedjs_couv_voice2_page .folio {
    display: none;
}

p{
    background-color: transparent;
    font-size: 9.5pt;
}

/* Marges de Florian */
[data-id="voice2_margins"] {

}

[data-id="voice2_margins"] {
    transform: rotate(180deg);
}

/*
Ce document sera traité comme une simple feuille de style CSS appliquée sur la page web de prévisualisation.
C'est donc là que se fait la mise en page du document. Il est possible de modifier chaque couleur, chaque taille, position, police, etc., via ce document.

Pour paginer le contenu et en faire un livre, on utilise Pagedjs (https://pagedjs.org/). Si vous souhaitez contribuer à la mise en page, vous pourrez avoir besoin d'y jeter un coup d'oeil !
*/

body {
    font-family: "Baskervvol Base";
    color: var(--text-color);
}

h1, h2, h3 {
    font-size: 20px;
    margin: 1em 0;
    font-weight: bold;
    text-align: left;
    font-family: "Adelphe Fructidor;
}

p {
    margin-bottom : 1em;
    font-size: 12px;
    margin-top: 5px;
}

#voice1 p, #voice2 p {
    text-align: left;
}

strong{
    font-weight: bold;
    }

em {
    font-style: italic;
    }

img {
    width: 100%;
    }

.caption, .footnote {
    position: absolute;
    font-size: 10px;
    line-height: 12px;
    bottom: 0;
    margin: 0 !important;
}

a {
    text-decoration: none;
    color:inherit;
}

a:hover, .random:hover {
    text-shadow: var(--text-color) 1px 0 10px;
}

/* Pour Roman */

/* Bonjour Roman, voici les quelques sélecteurs CSS les plus importants pour faire cette mise en page. Bien sûr, ça n'est pas exhaustif parce que sinon le fichier serait dix fois plus long ; du coup n'hésite pas à rajouter les tiens, j'imagine que ça pourrait être utile à un moment. En tout cas, si tu édites ce fichier normalement tu devrais voir après quelques secondes les changements dans la page https://yanntrividic.fr/morale/maquette */

/* Je ne me rends pas compte de quel est ton niveau d'expertise en web, mais les "outils de développement" présents dans chaque navigateurs aident grandement à comprendre quel sélecteur est adapté à quel moment, et ça aide aussi à faire des tests sans avoir à recharger la page. C'est d'autant plus le cas ici vu que la page met du temps à charger. */

/* Aussi, malgré la webapp, si tu dois y passer du temps à faire la maquette, peut-être ce serait mieux pour toi de faire une copie de ce site sur ta machine et éditer ton CSS dessus, ce sera plus agréable que dans un Pad. Le code est disponible ici : https://gitlab.com/yanntrividic/the-moral-of-the-xerox-vf. Tu as juste à faire tourner un serveur HTTP avant de l'ouvrir et ça devrait marcher. Si jamais tu n'es pas familié avec ces méthodes, VSCode avec l'extension "Live Server" marchent très bien pour ça. */

/* Et enfin, dernier point, PagedJS fonctionne mieux avec Chrome ou Chromium, et moins bien avec les autres navigateurs. Si tu veux t'éviter des problèmes, je te conseille de passer par l'un de ces navigateurs pour faire la maquette */

/* COUVERTURE */

/* Titre de niveau 1 */
.pagedjs_couv_voice1_page h1 {
    font-family: "Americaine";
    font-weight: normal;
    font-size: 96px !important;
    line-height: 75px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.pagedjs_couv_voice2_page h1 {
    font-family: "Thestral";
    font-weight: condensed;
    font-style: normal;
    font-size: 49px !important;
    line-height: 44px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.pagedjs_couv_voice1_page h2, .pagedjs_couv_voice2_page h2 {
    font-size: 16px ;
    line-height: 15px ;
    /* text-transform: lowercase; */
    text-align: center;
    margin-left: 0;
}


h3 + p {
    margin-top: 2px;
}

.author{
    font-family: "instrument";
    font-size: 18px !important;
    line-height: 34px;
    text-transform: normal;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 186px;
}

.missel{
    font-size: 11px !important;
    line-height: 34px;
    font-family: "instrument";
    text-transform: uppercase;
    text-align: center;
    word-spacing: 26px;
    text-shadow: 0px 2px 3px black;
    margin-bottom: 20px;
    margin-top: -8px;
}

.context{
    /* font-size: 12px !important; */
    /* line-height: 14px !important; */
    /* text-transform: lowercase; */
font-style: normal;
    text-align: center;
    font-family: "Baskervvoll Base";
}

.cardinaux{
    font-size: 14px !important;
    line-height: 16px;
    text-transform: uppercase;
    text-align: center;
    font-family: "Americaine";
    letter-spacing: 4px;

    /* font-family: "Thestral"; */
    /* font-family: "superdot"; */
    /* font-family: "phosphene"; */
    /* font-family: "Goozette Outline"; */
    /* font-family: "Goozette"; */
}

.random{
    font-size: inherit;
}

/* Titre de niveau 2 */
.pagedjs_couv_voice1_page h2 {
}

/* Paragraphe */
.pagedjs_couv_voice1_page p {
}


/* TEXTE CLARA */

/* Titre de niveau 2 */
h2 {
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 0px;
    margin-bottom: 0px;
    margin-left: 16px;
}

.first {
    text-align: center;
    margin-left: 0;
    font-family: "goozette";
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 5px;;
    padding-bottom: 20px;
    padding-top: 12px;
    font-weight: normal;
    margin-right: 3px;
}

.first::before {
    content: "[";
}

.first::after {
    content: "]";
}

.first::before, .first::after {
    font-family: "phospene";
    font-size: 120%;
    vertical-align: top;
}

/* Titre de niveau 3 */
h3 {
    font-size: 18px;
    font-size: 14px;
    letter-spacing: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 8px;
    line-height: 16px;
}

/* Paragraphe */
.pagedjs_voice1_page p {

}

.marginal-text {
text-rendering: geometricPrecision;
color: black;
}

/* Folio */
.pagedjs_voice1_page .folio {
}


/* COUVERTURE FLORIAN */

/* Titre de niveau 1 */
.pagedjs_couv_voice2_page h1 {
}

/* Titre de niveau 2 */
.pagedjs_couv_voice2_page h2 {
}

/* Paragraphe */
.pagedjs_couv_voice2_page p {
}


/* TEXTE FLORIAN */

/* Titre de niveau 2 */
.pagedjs_voice2_page h2 {
}

/* Karawane */
.pagedjs_voice2_page img {
}

/* Titre de niveau 3 */
.pagedjs_voice2_page h3 {
}

/* Paragraphe */
.pagedjs_voice2_page p {
}

/* Marges */
.pagedjs_voice2_page .marginal-text {
    font-family: "mazius";
    font-size: 13px;
   letter-spacing: 0px;
   line-height: 14px;
}

.pagedjs_voice1_page .marginal-text {
    font-family: "phosphene";
    font-size: 15px;
   letter-spacing: 0px;
   line-height: 17px;
   font-weight: normal;
}


/* Folio */
.pagedjs_voice2_page .folio {
    font-family: "phosphene";
    font-size: 12px;
   font-weight: normal;

}

.pagedjs_voice1_page .folio {
    font-family: "mazius";
}


.folio{
    padding: 0em 1em 1em 0em;
}

p.marginal-text {
    margin: 0;
    margin-left: 18mm;
    margin-top: 8mm;
}

.margin-text-box p:nth-child(2){
    margin-left: 3mm;
}