/*
Barre de contact fixe en bas d'ecran, sur mobile uniquement - James Renner
85 a 93 % des clics viennent d'un telephone : le numero n'etait visible qu'en
haut et en bas de page et disparaissait des qu'on faisait defiler.

Le balisage (<nav class="barre-mobile">) est ecrit en dur dans chaque page,
pas injecte par script : la balise d'appel Google Ads (__awcc) et l'ecouteur
de clics GTM (Click URL contient "tel:") voient ainsi le lien des le
chargement, comme les autres liens tel: du site.
*/

/* Cibles du bouton « Envoyer des photos » : l'en-tete devient fixe au
   defilement (header nav.is-sticky), sans marge il masquerait le titre. */
#estimation,
#formulaire {
	scroll-margin-top: 90px;
}

.barre-mobile {
	display: none;
}

@media only screen and (max-width: 767.98px) {
	.barre-mobile {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* sous le bandeau de consentement (#sdgdpr_modal_wrapper, 1091),
		   au-dessus du contenu et de l'en-tete fixe */
		z-index: 1030;
		display: grid;
		grid-template-columns: 1fr 1fr;
		background: #1f2325;
		border-top: 1px solid rgba(238, 222, 193, 0.22);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
	}

	.barre-mobile-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 58px;
		padding: 0 10px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.barre-mobile-btn svg {
		width: 19px;
		height: 19px;
		flex: none;
	}

	/* or du site sur texte quasi noir : 8,7:1 */
	.barre-mobile-btn--appel,
	.barre-mobile-btn--appel:hover,
	.barre-mobile-btn--appel:focus {
		background: var(--bs-tertiary-color);
		color: #1c1b19;
	}

	.barre-mobile-btn--photos,
	.barre-mobile-btn--photos:hover,
	.barre-mobile-btn--photos:focus {
		background: #1f2325;
		color: #fff;
	}

	.barre-mobile-btn:active {
		filter: brightness(0.92);
	}

	.barre-mobile-btn:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	/* la barre ne doit pas masquer la fin du pied de page. Toutes les pages
	   portent <body class="p-0"> (Bootstrap, padding: 0 !important) : il faut
	   la meme arme et une specificite superieure. */
	body,
	body.p-0 {
		padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
	}

	/* bouton « retour en haut » (template.css le place a 75px, centre) :
	   remonte au-dessus de la barre */
	#scrollTopBtn {
		bottom: calc(72px + env(safe-area-inset-bottom)) !important;
	}

	/* Pendant la saisie, le clavier fait remonter la barre, qui recouvrirait
	   le champ en cours. Sans :has(), la barre reste simplement visible. */
	body:has(form input:focus, form textarea:focus, form select:focus) .barre-mobile {
		display: none;
	}
}