/*
 * Bouton « retour en haut » — style relevé sur la production (thème Borgholm).
 *
 * Toutes les valeurs viennent des styles CALCULÉS d'un navigateur sur dedienne-aero.com, pas
 * d'une lecture de la feuille : la feuille du thème posait Cormorant 22px/600 et un orange
 * #f23801, tous deux écrasés plus loin dans la cascade par les réglages du site. Ce qui compte
 * est ce qui s'affiche — Work Sans 18px/400 et #FE5000.
 *
 * #FE5000 et #000 sont par ailleurs les couleurs Primary et Accent du kit Elementor actif, et
 * Work Sans sa famille système : le bouton tombe juste sur les jetons du kit sans les invoquer.
 * Les mesures 73 / 51 / 39 / 18px, elles, sont propres à Borgholm et n'ont pas d'équivalent.
 */

#dedienne-back-to-top {
	position: fixed;
	right: 51px;
	bottom: 39px;
	width: 73px;
	height: 73px;
	margin: 0;
	background-color: #000;
	border-radius: 100%;
	/* visible, et non hidden : le ::after déborde d'un pixel sur chaque bord. */
	overflow: visible;
	opacity: 0;
	visibility: hidden;
	text-decoration: none;
	z-index: 1000;
}

@media only screen and (max-width: 480px) {
	#dedienne-back-to-top {
		right: 36px;
	}
}

/*
 * ---- LIMITE CONNUE ET ASSUMÉE : le bandeau de consentement recouvre le bouton ----
 *
 * `#dedienne-consentement` (mu-plugins/dedienne-traceurs.php) est en `position: fixed`,
 * `inset: auto 0 0 0`, `z-index: 99999`. Il occupe donc toute la bande basse de la fenêtre,
 * très au-dessus du `z-index: 1000` que le bouton tient de la production.
 *
 * Mesuré sur dev8, page ouverte à 2000px de défilement, bandeau affiché :
 *
 *   1600 × 1000 — bandeau 86px  — bouton recouvert sur 47/73px (64 %)
 *   1024 ×  900 — bandeau 86px  — bouton recouvert sur 47/73px (64 %)
 *    390 ×  844 — bandeau 216px — bouton recouvert sur 73/73px (100 %)
 *
 * Dans les trois cas, `elementFromPoint` au centre du bouton renvoie `#dedienne-consentement` :
 * le clic est intercepté et le retour en haut ne part pas.
 *
 * Le choix a été fait de NE PAS corriger, pour rester exactement sur les valeurs de la
 * production — `bottom: 39px`, `z-index: 1000`. La production n'a jamais ce conflit : son
 * greffon `cookie-notice` est installé mais n'affiche aucun bandeau, et le harnais de
 * comparaison pose de son côté le cookie `dedienne_consentement` avant de naviguer. Le
 * recouvrement ne concerne donc qu'un visiteur réel qui n'a pas encore répondu au bandeau, et
 * disparaît dès qu'il a répondu.
 *
 * Si la décision change, deux remèdes, dans cet ordre de préférence :
 *   1. remonter le bouton tant que le bandeau est là —
 *      `body:has(#dedienne-consentement:not([hidden])) #dedienne-back-to-top { bottom: … }` ;
 *   2. le masquer tant que le bandeau est là, avec le même sélecteur et `display: none`.
 * Dans les deux cas, NE PAS toucher au `z-index` : passer le bouton au-dessus du bandeau le
 * ferait flotter par-dessus le texte du consentement, ce qui est pire que le recouvrement.
 */

/*
 * Le texte est au-dessus du ::after (z-index 2 contre 1) : le cercle orange pousse SOUS le mot,
 * au-dessus du fond noir. C'est ce qui fait que « HAUT » reste lisible pendant toute
 * l'animation au lieu d'être recouvert.
 *
 * `overflow: hidden` est repris tel quel de Borgholm. Il rogne un libellé plus large que 73px —
 * contrainte prise en compte au choix des traductions.
 */
#dedienne-back-to-top .dedienne-back-to-top__texte {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	font-family: "Work Sans", sans-serif;
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
	z-index: 2;
}

#dedienne-back-to-top .dedienne-back-to-top__texte * {
	display: block;
	line-height: inherit;
}

/*
 * L'animation de survol : un disque orange dont le `clip-path` grandit depuis le coin haut-droit.
 *
 * Le débordement d'un pixel (top/left -1px, taille +2px) évite le liseré noir que laisserait un
 * disque exactement à la taille du bouton, l'anticrénelage des deux bords ne se superposant pas.
 *
 * L'asymétrie des transitions est volontaire, et c'est elle qui donne le geste : à l'ENTRÉE,
 * `opacity` et `visibility` basculent en 0s — l'orange est là tout de suite et seul le clip-path
 * s'anime ; à la SORTIE, ils sont retardés de .2s, le temps que le disque ait fini de se
 * refermer avant de disparaître. Inverser les deux donne un clignotement.
 */
#dedienne-back-to-top::after {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	background-color: #FE5000;
	border-radius: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-clip-path: circle(25% at 75% 25%);
	clip-path: circle(25% at 75% 25%);
	z-index: 1;
	-webkit-transition: -webkit-clip-path .4s cubic-bezier(.61, .04, 0, .98), opacity .2s ease .2s, visibility .2s ease .2s;
	transition: clip-path .4s cubic-bezier(.61, .04, 0, .98), -webkit-clip-path .4s cubic-bezier(.61, .04, 0, .98), opacity .2s ease .2s, visibility .2s ease .2s;
}

#dedienne-back-to-top:hover::after,
#dedienne-back-to-top:focus-visible::after {
	-webkit-clip-path: circle(90% at 75% 25%);
	clip-path: circle(90% at 75% 25%);
	opacity: 1;
	visibility: visible;
	-webkit-transition: -webkit-clip-path .4s cubic-bezier(.61, .04, 0, .98), opacity 0s ease, visibility 0s ease;
	transition: clip-path .4s cubic-bezier(.61, .04, 0, .98), -webkit-clip-path .4s cubic-bezier(.61, .04, 0, .98), opacity 0s ease, visibility 0s ease;
}

/*
 * Apparition et disparition, pilotées par le script.
 *
 * `visibility` sort le bouton du parcours de tabulation quand il est masqué — sans quoi un
 * élément invisible serait atteignable au clavier. Le `0s .15s` de la variante masquée retarde le
 * basculement de `visibility` jusqu'à la fin du fondu ; l'inverse couperait le fondu net.
 */
#dedienne-back-to-top.dedienne--off {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .15s ease, visibility 0s .15s;
	transition: opacity .15s ease, visibility 0s .15s;
}

#dedienne-back-to-top.dedienne--on {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

/*
 * Mouvement réduit — AJOUT, absent de la production.
 *
 * Les fondus d'opacité sont conservés : ce n'est pas du mouvement. Seule la poussée du disque
 * orange est neutralisée, elle seule se déplace. Le défilement animé au clic est neutralisé de
 * son côté dans le script.
 */
@media (prefers-reduced-motion: reduce) {
	#dedienne-back-to-top::after,
	#dedienne-back-to-top:hover::after,
	#dedienne-back-to-top:focus-visible::after {
		-webkit-transition-duration: 0s;
		transition-duration: 0s;
	}
}