/**
 * ET Astra — styles du site public.
 *
 * Chargés uniquement si au moins une fonctionnalité de l'onglet Options est
 * active. Les couleurs reprennent les variables du thème enfant : le bouton
 * suit la palette sans réglage supplémentaire.
 */

/* ---------- Portées d'affichage ---------- */

@media (max-width: 782px) {
	.eta-desktop-only { display: none !important; }
}
@media (min-width: 783px) {
	.eta-mobile-only { display: none !important; }
}

/* ---------- Retour en haut ---------- */

.eta-totop {
	position: fixed;
	bottom: 24px;
	z-index: 90;
	width: 46px;
	height: 46px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--wia-line, #2A2A30);
	border-radius: 50%;
	background: var(--wia-surface, #17171A);
	color: var(--wia-txt, #F4F4F5);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility .2s, border-color .2s, background-color .2s;
}
.eta-totop[hidden] { display: none; }

/* `opacity: 0` seul laisserait un bouton invisible capter les clics dans le
   coin de l'ecran, et rester atteignable au clavier. */
.eta-totop.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.eta-totop:hover {
	border-color: var(--wia-orange, #FF7A1A);
	background: var(--wia-orange, #FF7A1A);
	color: #0B0B0C;
}
.eta-totop:focus-visible {
	outline: 2px solid var(--wia-orange, #FF7A1A);
	outline-offset: 3px;
}

.eta-pos-right { right: 24px; }
.eta-pos-left  { left: 24px; }

/* Chevron dessiné en CSS : aucune dépendance à une police d'icônes. */
.eta-totop-arrow {
	width: 9px;
	height: 9px;
	margin-top: 3px;
	border-left: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---------- Bouton d'appel ---------- */

.eta-call {
	position: fixed;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 18px;
	border-radius: 23px;
	background: var(--wia-orange, #FF7A1A);
	color: #0B0B0C;
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8);
	transition: transform .18s;
}
.eta-call:hover { transform: translateY(-2px); color: #0B0B0C; }
.eta-call:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.eta-call-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background: currentColor;
	/* Combiné téléphonique en masque : pas de fichier image à charger. */
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.3 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
	.eta-call-text { display: none; }
	.eta-call { width: 46px; padding: 0; justify-content: center; }
}

/* ---------- Barre de progression de lecture ---------- */

.eta-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 100;
	pointer-events: none;
	background: transparent;
}
.eta-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wia-orange, #FF7A1A);
	transition: width .1s linear;
}
body.admin-bar .eta-progress { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .eta-progress { top: 46px; }
}

/* ---------- Bandeau défilant ---------- */

/*
 * Les effets vivent dans marquee.css, chargée aussi par l'aperçu des
 * réglages : une seule source de vérité, donc aucune divergence possible
 * entre ce qu'on voit en réglant et ce qui sort en ligne.
 */

/* Un texte qui défile sans fin est difficile à lire pour certaines
   personnes, et le respect de ce réglage système est une exigence WCAG. */
@media (prefers-reduced-motion: reduce) {
	.eta-totop { transition: none; }
	.eta-progress span { transition: none; }
}