/* ==========================================================================
   Libellé vertical de la page, le long du bord gauche de l'écran.
   Grand mot en filigrane : blanc léger en mode « différence » (blanc sur les
   fonds sombres, gris foncé léger sur les fonds clairs).
   Il commence sous l'en-tête, passe sous le pied de page, et sa taille
   s'adapte au nombre de lettres (--tl-nb, donné par le thème).
   Pour régler sa présence : modifier --tl-libelle-opacite (0 à 1).
   ========================================================================== */

:root {
--tl-libelle-opacite: 0.15;
}

.tl-libelle-page {
position: fixed;
left: clamp(0.6rem, 1.6vw, 1.6rem);
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tl-entete-hauteur, 172px) + 3rem);
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--tl-entete-hauteur, 172px) - 5.5rem);
color: #ffffff;
opacity: var(--tl-libelle-opacite);
mix-blend-mode: difference;
pointer-events: none;
transition: opacity 0.5s ease;
}

/* Effacé quand le pied de page arrive à l'écran. */
.tl-libelle-page.is-cache {
opacity: 0;
}

.tl-libelle-page span {
font-family: var(--wp--preset--font-family--dm-serif-display);
font-size: min(
clamp(3.5rem, 6vw, 6.5rem),
calc((100vh - var(--wp-admin--admin-bar--height, 0px) - var(--tl-entete-hauteur, 172px) - 14.5rem) / (var(--tl-nb, 10) * 0.78))
);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
writing-mode: vertical-rl;
transform: rotate(180deg);
}

/* Le filet fin, sous le mot. */
.tl-libelle-page::after {
content: "";
width: 1px;
height: 7rem;
background: currentColor;
}

/* Le pied de page passe devant le mot (l'en-tête aussi, niveau 100). */
.tl-footer,
.tl-pied {
position: relative;
z-index: 60;
}

/* Pas de marge pour l'accueillir sur tablette et téléphone. */
@media (max-width: 1023px) {
.tl-libelle-page {
display: none;
}
}