/**
 * Barre d'actions mobile — constat F03/A06.
 * Le markup existait sans aucun CSS : trois liens nus sous le pied de page.
 * Active sur tout le site depuis le lot 1 : elle n'est plus conditionnée à un
 * paramètre de prototypage.
 */

.pleinr-mobile-sticky-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 999;
	display: none;
	background: var(--sombre);
	/* Pas de bordure haute : la barre se détache déjà par son fond, et ce
	   filet d'un pixel s'ajoutait à la hauteur (61 px) alors que le corps de
	   page en réservait 68 — d'où un liseré clair visible entre le bas du
	   pied de page et la barre, une fois défilé tout en bas. */
	box-shadow: 0 -2px 16px rgba(10, 14, 20, .35);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* En mobile : barre fixe en bas d'écran, toujours à portée de pouce. */
@media (max-width: 921px) {
	.pleinr-mobile-sticky-bar { display: flex; }
	/* Réserver exactement sa hauteur : 60 px de part et d'autre, sinon un
	   liseré du fond de page apparaît entre le pied de page et la barre. */
	body { padding-bottom: 60px; }
}

.pleinr-mobile-sticky-bar__item {
	flex: 1;
	min-height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--e-1, .5rem) .25rem;
	color: var(--encre-claire);
	text-decoration: none;
	font-size: var(--t-menu, .8125rem);
	line-height: var(--lh-ui, 1.2);
	font-weight: 600;
}

.pleinr-mobile-sticky-bar__item + .pleinr-mobile-sticky-bar__item {
	border-inline-start: 1px solid rgba(255, 255, 255, .14);
}

.pleinr-mobile-sticky-bar__icon { font-size: 1.15rem; line-height: 1; }

.pleinr-mobile-sticky-bar__item:focus-visible {
	outline: 3px solid var(--accent-clair);
	outline-offset: -3px;
}

/* En desktop : les trois actions restent présentes, mais dans le flux en fin
   de page — une barre collée en bas d'un grand écran n'apporte rien. */
@media (min-width: 922px) {
	.pleinr-mobile-sticky-bar {
		display: flex;
		position: static;
		justify-content: center;
		gap: var(--e-2, 1rem);
		padding: var(--e-4, 2rem) var(--e-2, 1rem);
		border-top: 1px solid rgba(255, 255, 255, .14);
		box-shadow: none;
	}
	.pleinr-mobile-sticky-bar__item {
		flex: 0 0 auto;
		flex-direction: row;
		gap: .5rem;
		min-width: 190px;
		border: 2px solid rgba(255, 255, 255, .28);
		border-radius: var(--rayon-s, 6px);
	}
	.pleinr-mobile-sticky-bar__item + .pleinr-mobile-sticky-bar__item {
		border-inline-start: 2px solid rgba(255, 255, 255, .28);
	}
	.pleinr-mobile-sticky-bar__item:hover {
		background: var(--encre-claire);
		color: var(--sombre);
		border-color: var(--encre-claire);
	}
}