WARNING: A more experienced CSS writer may notice mistakes or web-browser incompatibilities with my CSS examples, if so you should take their advice over mine.
I had a look at your project and noticed a number of issues with how you were doing some things:
1. You are using Collapsing whitespace markup to reduce any visual output generated by your startup related passages, it is better to use a targeted CSS display: none; instead.
2. I assume the undefined variables ($dague, $bouclier, $fists, $feet, $trident, and $filet) in your startup were just left out of the example, based on their usage it appears that they may contain object references (datamaps?) of some sort. Due to the way the story format's History and Object property updating systems work the object references within the arrays will (quickly) not reference the same objects as the previously mentioned variables do.
3. The (align:) macro you are using generates the following HTML which sets a max-width of 50% on it's contents, this is why your "Vos points : 100" was on two lines.
<tw-hook style="text-align: center; max-width: 50%; margin-left: auto; margin-right: auto; display: block;"></tw-hook>
4. Due to how the Harlowe passage transition visual effect is implemented having HTML (like the hr element) within Passage content can cause some text to appear instantly, in the case of the hr element I would suggest using a named hook combined with targeted CSS to achieve the same result.
The following examples try to solve the above issues as well as your original issues.
a. The StoryInit and Monsters passages.
Remove the open and close curly braces.
b. The Start passage.
Replace the line(s) displaying the game into (name & version) and the hr element with the following.
|game>[Gladiateur `** Version 2.0.24 **`]\
c. The SideBar passage.
Replace the current content with the following.
|title>[Gladiateur]
|points>[(print: "Vos points : " + (text: $player's "hitPoints"))]
d. The CSS within the Story Stylesheet area.
Replace the current content with the following.
body {
background-color: darkcyan;
}
tw-story {
width: 1024px;
margin-left: 250px;
background-color: darkcyan;
font-family: "verdana";
font-size: 16px;
/* Reset/Override Harlowe defaults. */
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: inline-axis;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
box-sizing: content-box;
padding: 0;
}
tw-passage {
min-height: 100%;
margin-top: 10px;
margin-right: 10px;
margin-left: 15px;
}
tw-sidebar {
display: none;
}
tw-link {
color: cyan;
}
tw-include[type="startup"] {
display: none;
}
tw-passage tw-hook[name="game"] {
display: block;
padding-bottom: 0.75em;
border-bottom-style: inset;
border-bottom-width: 2px;
margin-bottom: 1em;
}
tw-include[title="SideBar"] {
display: block;
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: black;
text-align: center;
text-overflow: clip;
}
tw-include[title="SideBar"] tw-hook[name="title"] {
display: block;
font-size: 2.1em;
font-weight: bold;
margin-top: 15px;
}