Frise test
Page servant de test pour les frises chronologiques, sera supprimé avant l'ouverture.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chronologie - Âge de la plénitude</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFFFF;
color: #111;
padding: 40px 20px 300px;
line-height: 1.45;
}
h1 {
text-align: center;
margin: 0 0 60px 0;
font-size: 2.4rem;
}
.timeline-wrapper {
position: relative;
max-width: 1600px;
margin: 0 auto;
}
.timeline {
position: relative;
height: 100px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 0px;
margin: 120px 0 220px 0;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.segment {
position: absolute;
top: 0;
height: 100%;
cursor: pointer;
transition: filter 0.2s ease;
}
.segment:hover {
filter: brightness(1.38);
}
.tick {
position: absolute;
top: -50px;
transform: translateX(-50%) rotate(-90deg);
font-weight: bold;
font-size: 1.18rem;
color: #000;
white-space: nowrap;
text-align: right;
}
.tick-extreme {
top: -120px; /* -50px - 40px = décalage de 40px vers le haut */
}
.event-label {
position: absolute;
bottom: -250px;
width: 450px;
left: 50%; /* centrage corrigé */
transform: translateX(-50%) rotate(-90deg);
font-size: 1.08rem;
font-weight: 600;
color: #222;
line-height: 1.4;
letter-spacing: 0.4px;
white-space: nowrap;
text-align: right;
}
</style>
</head> <body>
Chronologie - Âge de la plénitude
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 0.0000%; width: 2.0000%; background: #83e7be;" title="Signature du Traité d’El Dorado — Wikipédia"> </a>
Signature du Traité d’El Dorado
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 16.0000%; width: 2.0000%; background: #white;" title="-49 à -35 — Wikipédia"> </a>
-49 à -35
<a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment" style="left: 2.0000%; width: 28.0000%; background: #F59787;" title="Bataille du Royaume Céleste — Wikipédia"> </a>
Bataille du Royaume Céleste
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 4.0000%; width: 2.0000%; background: #FA5050;" title="Massacre de la forge — Wikipédia"> </a>
Massacre de la forge
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 6.0000%; width: 2.0000%; background: #F57C64;" title="Invasion de Nocturna — Wikipédia"> </a>
Invasion de Nocturna
<a href="https://fr.wikipedia.org/wiki/Guerre" target="_blank" class="segment" style="left: 70.0000%; width: 30.0000%; background: #FA5050;" title="Deuxième guerre de l'Abîme — Wikipédia"> </a>
Deuxième guerre de l'Abîme
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 70.0000%; width: 2.0000%; background: #F59787;" title="Bataille de Riddermark — Wikipédia"> </a>
Bataille de Riddermark
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 92.0000%; width: 2.0000%; background: #F59787;" title="Dernier carrée de Primordia — Wikipédia"> </a>
Dernier carrée de Primordia
<a href="https://fr.wikipedia.org/wiki/Arkadia" target="_blank" class="segment" style="left: 94.0000%; width: 2.0000%; background: #white;" title="-4 à 0 — Wikipédia"> </a>
-4 à 0
An -50
-48
-47
-49
-35
-15
An 0
-15
-4
An 0
</body>