@font-face {
  font-family: 'Sinistre';
    src: url("/ep/typ/Sinistre-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------------------------------
   Échelle générale
   Toute la mise en page étant en em, la taille de police de la racine
   règle l'ensemble. --hauteur-utile = hauteur, en em, du bloc le plus
   haut (le paragraphe le plus long). La taille de police est calculée
   pour que ce bloc tienne toujours dans la hauteur visible de l'écran
   (unité svh : ne varie pas quand la barre d'adresse se rétracte),
   avec un plafond à 16px, soit la taille d'origine sur ordinateur.
   Si du texte est coupé en bas, augmenter cette valeur ; s'il reste
   beaucoup de vide, la diminuer.
------------------------------------------------------------------- */
html
{
    --hauteur-utile: 44;
    --vitesse-serpents: 0; /* 0 = serpents immobiles ; 1 = ils suivent le texte */
    font-size: 16px;
    font-size: clamp(9px, calc(100svh / var(--hauteur-utile)), 16px);
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #181a17;
}
body
{
    margin: 0;
    height: 100%;
}

/* ------------------------------------------------------------------
   Fond animé
   Couche fixe dont seule l'opacité est animée (plus fluide sur mobile,
   et indépendante de la hauteur du document). Le rendu reste celui de
   l'animation d'origine : fondu de #181a17 vers #747d7b, puis retour.
   Pour réintroduire le dégradé radial, remplacer « background » ci-dessous
   par : radial-gradient(at 40% 5%, #747d7b, #181a17)
------------------------------------------------------------------- */
@keyframes fond {
  0%, 30%   { opacity: 0; }
  55%       { opacity: 1; }
  85%, 100% { opacity: 0; }
}
body::before
{
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: #747d7b;
    opacity: 0;
    pointer-events: none;
    animation: fond 15s infinite linear;
}

/* ------------------------------------------------------------------
   Navigation horizontale
   #main est le seul élément qui défile, et uniquement en horizontal.
   Le document ne défile plus : la hauteur reste figée sur mobile.
------------------------------------------------------------------- */
#main
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pinch-zoom;
}
#contenu
{
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    width: calc(190em + 8px);
    height: 100%;
    padding: 8px 0 0 8px; /* reprend la marge par défaut de 8px de l'ancien body */
}
h1
{
    font-family: 'Sinistre';
    font-size: 9.5em;
    line-height: 0.5em;
    color: #393d3a;
}
p
{
    font-family: 'Sinistre';
    font-size: 1.2em;
    color: #85908d;
    text-align: left;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 4;
    letter-spacing: 0.05em;
    font-kerning: auto;
    margin-left: 2em;
    margin-right: 2em;
}

/* Serpents en position: fixed : un geste (tactile ou trackpad) qui démarre
   sur eux ne fait pas défiler #main, car le défilement suit le bloc
   conteneur, qui est ici la fenêtre. pointer-events: none laisse passer
   les gestes vers le contenu situé dessous. */
.serpentAV,
.serpentAR
{
    pointer-events: none;
}

/* Défilement retardé des serpents : le script définit --decalage (en px,
   proportionnel au défilement de #main, selon --vitesse-serpents) et les
   serpents se déplacent vers la gauche de cette valeur, donc plus lentement
   que le texte. Avec --vitesse-serpents: 0, ils restent immobiles. */
.serpentAV,
.serpentAR
{
    transform: translate3d(calc(var(--decalage, 0px) * -1), 0, 0);
    will-change: transform;
}

/* Serpents : hauteur liée à l'écran (svh), largeur proportionnelle */
.serpentAV img,
.serpentAR img
{
    display: block;
    height: 75vh;
    height: 75svh;
    width: auto;
    max-width: none;
}
a:link
{
    text-decoration: none;
    color: #85908d;
}
a.shine:link {
  -webkit-mask-image: linear-gradient(-75deg, #85908d 45%, rgba(174,212,216,.2) 50%, #85908d 55%);
  mask-image: linear-gradient(-75deg, #85908d 45%, rgba(174,212,216,.2) 50%, #85908d 55%);
  -webkit-mask-size: 200%;
  mask-size: 200%;
  animation: shine 8s infinite;
}
@keyframes shine {
  from {
    -webkit-mask-position: 150%;
    mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
    mask-position: -50%;
  }
}
a:visited
{
    text-decoration: none;
    color: #85908d;
}
a:hover
{
    color: #181a17;
}
#titre
{
    width: 45em;
}
#infos
{
    position: absolute;
    top: 2em;
    left: 0.7em;
}
.infos
{
    font-family: 'Sinistre';
    font-size: 1em;
    line-height: 1.2em;
    color: #393d3a;
}
.paragraphe
{
    width: 50em;
}
.serpentAV
{
    z-index: 1;
    position: fixed;
    top: 5em;
    left: 2em;
}
.serpentAR
{
    z-index: -1;
    position: fixed;
    top: 5em;
    left: 2em;
}
@media (max-width: 768px) {
    html
    {
        --hauteur-utile: 60;
        --vitesse-serpents: 0.5; /* les serpents défilent à la moitié de la vitesse du texte */
    }
    /* Titre réduit (9.5em -> 7em) ; sa largeur et celle du conteneur
       suivent la même proportion : 45em -> 33em, 145em -> 133em. */
    h1
    {
        font-size: 7em;
    }
    #titre
    {
        width: 33em;
    }
    #contenu
    {
        width: calc(133em + 8px);
    }
    .paragraphe {
        max-width: 25em;
    }
    /* Serpents : retour au dimensionnement d'origine (75 % de la taille
       naturelle de l'image). Pour les réduire encore, baisser cette valeur. */
    .serpentAV img,
    .serpentAR img
    {
        height: auto;
        width: 75%;
    }
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    a.shine:link
    {
        animation: none;
    }
}