/* ==========================================================================
   Bouton « Revenir en haut » : rond doré avec l'ornement d'origine, en bas à
   droite de toutes les pages. Il apparaît après un peu de défilement.
   ========================================================================== */

.tl-haut {
position: fixed;
right: clamp(1rem, 2.5vw, 2rem);
bottom: clamp(1rem, 2.5vw, 2rem);
z-index: 90;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid #c9a24e;
border-radius: 50%;
background: rgba(26, 20, 17, 0.85);
color: var(--wp--preset--color--or);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease, background-color 0.25s ease, color 0.25s ease;
}

.tl-haut.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}

.tl-haut:hover,
.tl-haut:focus-visible {
background: var(--wp--preset--color--or);
color: var(--wp--preset--color--noir-chaud);
}

.tl-haut:focus-visible {
outline: 2px solid var(--wp--preset--color--or);
outline-offset: 3px;
}

.tl-haut__orn {
width: 24px;
height: 30px;
background-color: currentColor;
-webkit-mask: url("../ornements/scroll-top.svg") center / contain no-repeat;
mask: url("../ornements/scroll-top.svg") center / contain no-repeat;
}

/* Téléphone : au-dessus de la barre de réservation fixée en bas de l'écran. */
@media (max-width: 1023px) {
body:has(.tl-entete__resa-mobile) .tl-haut {
bottom: calc(3.75rem + 1rem);
}
}

@media (prefers-reduced-motion: reduce) {
.tl-haut {
transition: none;
}
}