/* ==========================================================================
   LA BARRE DE NAVIGATION DU TÉLÉPHONE

   Cinq boutons collés en bas de l'écran sous 768 px. Le balisage est rendu
   par `maelia_barre_mobile()` dans `functions.php`.

   Au-dessus de 768 px, rien de tout ceci n'existe : la barre de menu du haut
   reprend la main (voir `maelia-main-menu.css`, bande tablette).

   Pas d'animation sur la barre elle-même. C'est un contrôle vu à chaque
   écran : un élément que l'on regarde cent fois par visite doit être
   immobile. Le seul mouvement de ce composant est la montée du panneau, une
   fois qu'on l'a demandé.
   ========================================================================== */

@media (min-width: 768px) {
	.maelia-barre,
	.maelia-panneau,
	.maelia-voile {
		display: none !important;
	}
}

@media (max-width: 767px) {

	/* ----------------------------------------------------------------------
	   La barre
	   ---------------------------------------------------------------------- */

	.maelia-barre {
		position: fixed;
		z-index: 1000;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: stretch;
		/* `env(safe-area-inset-bottom)` : la barre d'accueil des iPhone sans
		   bouton mange ~34 px en bas de l'écran. Sans ce remplissage, les
		   libellés passent dessous. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--maelia-hairline);
		background-color: var(--maelia-surface);
	}

	.maelia-barre-bouton {
		position: relative;
		display: flex;
		flex: 1 1 20%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		/* 56 px de haut, cible tactile pleine hauteur : au-dessus des 44 px
		   que réclame une cible au doigt. */
		min-height: 56px;
		padding: 6px 2px 8px;
		color: var(--maelia-muted);
		text-align: center;
		text-decoration: none;
	}

	.maelia-barre-bouton:hover,
	.maelia-barre-bouton:focus {
		color: var(--maelia-teal-500);
	}

	.maelia-barre-bouton:focus-visible {
		outline: 2px solid var(--maelia-teal-500);
		outline-offset: -3px;
	}

	/* L'appui s'enfonce : 120 ms, la durée d'un retour tactile. */
	.maelia-barre-bouton:active {
		transform: translateY(1px);
	}

	.maelia-barre-icone {
		width: 22px;
		height: 22px;
	}

	.maelia-barre-nom {
		font-family: var(--maelia-police-texte, 'Archivo', sans-serif);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .01em;
		line-height: 1.1;
	}

	/* La page regardée : l'encre, et un repère de 2 px sur l'arête haute —
	   une forme, pas seulement une couleur. Même grammaire que l'onglet du
	   méga-menu. */
	.maelia-barre-bouton.est-actif {
		color: var(--maelia-ink);
	}

	.maelia-barre-bouton.est-actif::before {
		content: '';
		position: absolute;
		top: -1px;
		right: 14%;
		left: 14%;
		height: 2px;
		background-color: var(--maelia-ink);
	}

	/* La pastille du panier prend le tampon du site, celui de la date
	   « prêt le » et des champs en erreur : une petite marque qui qualifie. */
	.maelia-barre-pastille {
		position: absolute;
		top: 4px;
		left: 56%;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		border-radius: 9px;
		background-color: var(--maelia-stamp);
		color: #ffffff;
		font-family: var(--maelia-police-texte, 'Archivo', sans-serif);
		font-size: 10.5px;
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		line-height: 17px;
		text-align: center;
	}

	.maelia-barre-pastille.est-vide {
		display: none;
	}

	/* ----------------------------------------------------------------------
	   Les panneaux
	   ---------------------------------------------------------------------- */

	.maelia-voile {
		position: fixed;
		z-index: 1001;
		inset: 0;
		background-color: rgba(14, 59, 51, .38);
		opacity: 0;
		transition: opacity .22s cubic-bezier(.23, 1, .32, 1);
	}

	.maelia-voile.est-ouvert {
		opacity: 1;
	}

	.maelia-panneau {
		position: fixed;
		z-index: 1002;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		max-height: 72svh;
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--maelia-hairline);
		border-radius: 12px 12px 0 0;
		background-color: var(--maelia-surface);
		/* Il monte depuis le bas, d'où il est appelé. 220 ms, le temps d'un
		   tiroir, et l'inverse exact à la fermeture. */
		transform: translateY(100%);
		transition: transform .22s cubic-bezier(.23, 1, .32, 1);
	}

	.maelia-panneau.est-ouvert {
		transform: translateY(0);
	}

	.maelia-panneau-tete {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px 10px;
		border-bottom: 1px solid var(--maelia-hairline);
	}

	.maelia-panneau-titre {
		margin: 0;
		color: var(--maelia-ink);
		font-size: 17px;
		font-weight: 800;
		letter-spacing: -.01em;
		line-height: 1.2;
		text-transform: none;
	}

	.maelia-panneau-fermer {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -10px -10px -10px 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--maelia-muted);
	}

	.maelia-panneau-fermer svg {
		width: 20px;
		height: 20px;
	}

	.maelia-panneau-corps {
		overflow-y: auto;
		padding: 6px 16px 18px;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Les univers, puis leurs rayons en retrait : la hiérarchie se lit au
	   retrait et à la graisse, pas à la couleur. */
	.maelia-panneau-univers {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 13px 0 9px;
		border-bottom: 1px solid var(--maelia-hairline);
		color: var(--maelia-ink);
		font-size: 15.5px;
		font-weight: 700;
		text-decoration: none;
	}

	.maelia-panneau-rayons {
		margin: 0 0 14px;
		padding: 0;
		list-style: none;
	}

	.maelia-panneau-rayons > li > a {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		min-height: 44px;
		padding: 11px 0 11px 14px;
		border-bottom: 1px solid var(--maelia-hairline);
		color: var(--maelia-ink);
		font-size: 14px;
		text-decoration: none;
	}

	.maelia-panneau-rayons > li:last-child > a {
		border-bottom: 0;
	}

	.maelia-panneau-compte {
		flex: 0 0 auto;
		color: var(--maelia-muted);
		font-size: 11.5px;
		font-variant-numeric: tabular-nums;
	}

	/* ----------------------------------------------------------------------
	   La recherche
	   ---------------------------------------------------------------------- */

	.maelia-recherche {
		display: flex;
		gap: 8px;
		margin: 10px 0 4px;
	}

	.maelia-recherche-champ {
		flex: 1 1 auto;
		min-width: 0;
		height: 48px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid var(--maelia-hairline);
		border-radius: var(--maelia-radius);
		background-color: var(--maelia-surface);
		box-shadow: none;
		color: var(--maelia-ink);
		/* 16 px : en dessous, Safari zoome sur le champ à la mise au point. */
		font-size: 16px;
	}

	.maelia-recherche-champ:focus {
		border-color: var(--maelia-teal-500);
		outline: 0;
	}

	.maelia-recherche-envoi {
		flex: 0 0 auto;
		height: 48px;
		min-height: 48px;
		margin: 0;
		padding: 0 16px;
		line-height: 48px;
	}

	/* ----------------------------------------------------------------------
	   La place que la barre prend au contenu
	   ---------------------------------------------------------------------- */

	/* Sans cela, la barre couvre la fin de page — le pied, et le dernier
	   bouton de n'importe quelle liste. La classe vient de `body_class` : la
	   place n'est réservée que là où la barre est rendue. */
	body.maelia-avec-barre {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	/* Panneau ouvert : la page dessous ne défile plus. */
	body.maelia-panneau-ouvert {
		overflow: hidden;
	}

	@media (prefers-reduced-motion: reduce) {
		.maelia-panneau {
			transition: opacity .2s ease;
			transform: none;
			opacity: 0;
		}

		.maelia-panneau.est-ouvert {
			opacity: 1;
		}

		.maelia-barre-bouton:active {
			transform: none;
		}
	}
}