/**
 * Le bouton de retour en haut de page.
 *
 * Discret tant qu'on est en haut : il n'apparaît qu'une fois l'écran d'accueil
 * dépassé, et se retire de la même façon. Le turquoise de la marque reste
 * réservé au trait, le fond au blanc — l'orange, lui, ne sert qu'à l'achat.
 */

.lupeo-haut {
	position: fixed;
	right: clamp(14px, 2.2vw, 26px);
	bottom: calc(clamp(14px, 2.2vw, 26px) + env(safe-area-inset-bottom));
	z-index: 55;

	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	border: 1px solid var(--lupeo-line, #E6DFD4);
	border-radius: 999px;
	background: #fff;
	color: var(--lupeo-teal, #007C75);
	box-shadow: 0 8px 22px -12px rgba(26, 26, 26, .55);
	cursor: pointer;

	/* Masqué par défaut : c'est le script qui le fait venir, et `visibility`
	   le retire des cibles de tabulation tant qu'il n'est pas là. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s,
		background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lupeo-haut[hidden] {
	display: none;
}

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

/* Le trait de l'icône vient d'ici : `lupeo-boutique.css`, qui porte le jeu
   commun, n'est chargé que sur les pages de la boutique — le bouton, lui, est
   sur toutes les pages, y compris les mentions légales. */
.lupeo-haut .lupeo-i {
	width: 20px;
	height: 20px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sur iPhone, l'état de survol reste collé après une tape : on ne l'applique
   qu'aux appareils qui ont un vrai pointeur. */
@media (hover: hover) {
	.lupeo-haut:hover {
		background: var(--lupeo-teal, #007C75);
		border-color: var(--lupeo-teal, #007C75);
		color: #fff;
	}
}

.lupeo-haut:active {
	transform: translateY(1px);
}

.lupeo-haut:focus-visible {
	outline: 2px solid var(--lupeo-ink, #1A1A1A);
	outline-offset: 2px;
}

/* La barre d'achat de repli occupe déjà le bas de l'écran — sur téléphone
   comme sur ordinateur : le bouton monte au-dessus d'elle plutôt que de la
   recouvrir. La classe est posée sur le `body` par `lupeo-achat.js`. */
body.lupeo-a-barre .lupeo-haut {
	bottom: calc(76px + 14px + env(safe-area-inset-bottom));
}

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

@media print {
	.lupeo-haut {
		display: none;
	}
}