/**
 * Confort d'utilisation sur téléphone, commun à tous les thèmes enfants (voir functions/components/mobile.php).
 * Chargé après les styles du thème enfant : il ne pose que la structure, les couleurs et la typographie
 * viennent du thème (classes de boutons, panneaux tabbar-sheet, chips…).
 */

/* Transitions entre les pages : fondu enchaîné, la barre de navigation mobile reste en place */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
}

.tabbar {
	view-transition-name: tabbar;
}

/* Barre de navigation mobile effacée pendant la lecture vers le bas (tabbar.js) */
@media (prefers-reduced-motion: no-preference) {
	.tabbar {
		transition: translate 0.25s ease-out;
	}
}

.tabbar.tabbar--hidden {
	translate: 0 100%;
}

/* Actions d'un contenu : ajouter à l'agenda, partager (parts/post-actions) */
.post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block: 1.5rem;
}

.post-actions svg,
.filters-toggle svg,
.address-locate-button svg {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
}

.post-actions-status,
.address-locate-status {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.9375rem;
}

.post-actions-status:empty,
.address-locate-status:empty {
	display: none;
}

/* Carrousels : la liste de cartes défile horizontalement sur mobile (carousel.js) */
@media (max-width: 47.99em) {
	:is(ul, ol).carousel {
		display: flex;
		gap: 1rem;
		/* Marge intérieure : le contour de focus des cartes n'est pas rogné par le défilement */
		margin: -0.25rem;
		padding: 0.25rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0.25rem;
		scrollbar-width: none;
	}

	:is(ul, ol).carousel > * {
		flex: 0 0 min(85%, 20rem);
		scroll-snap-align: start;
	}
}

.carousel-controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

.carousel-button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 50%;
	cursor: pointer;
}

.carousel-button:disabled {
	opacity: 0.35;
	cursor: default;
}

.carousel-button svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Filtres dans un panneau sur mobile (parts/filters-sheet) : le bouton remplace le titre et la liste */
.filters-toggle-value {
	font-weight: 700;
}

@media (min-width: 48em) {
	.filters-toggle {
		display: none !important;
	}
}

@media (max-width: 47.99em) {
	.filters--sheet:has(> .filters-toggle:not([hidden])) > :is(.filters-title, .filters-list) {
		display: none;
	}
}

/* Liste d'options en lignes : filtres des thèmes sans chips, applications d'itinéraire */
.filters-sheet-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.filters-sheet-list a {
	display: block;
	padding: 0.875rem 0.25rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.filters-sheet-list a:hover,
.filters-sheet-list a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.filters-sheet-list a[aria-current] {
	font-weight: 800;
}

/* Choix de l'application d'itinéraire (maps-links.js) */
.maps-sheet-address {
	margin: 0;
}

/* Bouton « Utiliser ma position » sous un champ d'adresse (address-locate.js) */
.address-locate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.75rem;
}