/* ---------------------------------------------------------------------------
   Vertuose - Barre d'appel mobile
   ---------------------------------------------------------------------------
   Les couleurs (--vert-brand, --vert-brand-2), la hauteur (--vert-callbar-h)
   et le point de rupture proviennent des CONSTANTES du fichier PHP : ils sont
   injectés sur :root via wp_add_inline_style(). Ne codez donc AUCUNE de ces
   valeurs en dur ici : il suffit de modifier les constantes.

   Principe d'affichage :
   - la barre est « display: none » par défaut : sur ordinateur, elle
     n'apparaît jamais et n'a aucun effet (élément non rendu) ;
   - c'est la requête média, pilotée par la constante VERTUOSE_BREAKPOINT et
     injectée depuis le PHP, qui la révèle (display: grid) sous ce seuil.
   --------------------------------------------------------------------------- */

.vert-callbar {
	display: none; /* caché par défaut ; révélé (display:flex) par la requête média mobile */

	/* Barre sobre, centrée, à la largeur de ses deux boutons (pas toute la largeur
	   de l'écran). Encadrée d'une ligne orange. Posée juste au-dessus du bord bas
	   pour que le cadre soit entièrement visible (zone gestuelle iPhone comprise). */
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;

	max-width: calc(100% - 20px); /* garde une marge sur les très petits écrans */
	margin: 0;

	border: 1px solid var(--vert-accent, #ED8E00); /* encadrement orange fin */
	border-radius: 10px;
	overflow: hidden; /* les fonds des boutons épousent les coins arrondis */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vert-callbar__lien {
	display: flex;
	align-items: center;    /* texte centré verticalement */
	justify-content: center; /* texte centré horizontalement */
	gap: 8px;

	/* Chaque bouton à la largeur de son contenu. */
	min-height: var(--vert-callbar-h, 60px);
	padding: 0 22px;

	color: #fff;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;

	-webkit-tap-highlight-color: transparent;
	transition: filter 0.15s ease; /* transition douce sur la luminosité */
}

/* Bouton « Appeler » : vert de marque, texte blanc. */
.vert-callbar__tel {
	background-color: var(--vert-brand, #00513C);
}

/* Bouton « Devis gratuit » : vert foncé, texte blanc. */
.vert-callbar__devis {
	background-color: var(--vert-brand-2, #003628);
}

.vert-callbar__ico {
	flex: 0 0 auto;
}

/* Survol et appui : léger éclaircissement. */
.vert-callbar__lien:hover,
.vert-callbar__lien:active {
	filter: brightness(1.1);
}

/* Navigation au clavier : contour blanc bien visible, à l'intérieur du bouton. */
.vert-callbar__lien:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -5px;
}

/* Respect des préférences d'accessibilité : pas d'animation. */
@media (prefers-reduced-motion: reduce) {
	.vert-callbar__lien {
		transition: none;
	}
}