/**
 * Villa Victoria — Bandeaux de titre (#pxl-page-title-default)
 *
 * Concerne les fiches prestation (/service/…), les fiches produit (/product/…)
 * et la boutique. La photo elle-même est injectée en ligne par vv-bandeaux.php,
 * depuis le réglage du thème : changer la photo se fait dans l'administration,
 * pas ici.
 *
 * Charte : navy #0F1F34, filet sable #E6DFD4, titres Melodrama.
 */

/* =====================================================================
   1. Voile de lisibilité
   ===================================================================== */

/* Le thème pose un H1 blanc de 150 px à même la photo, sans aucun voile. Les
   photos de la villa sont claires (ciel, murs blancs, linge) là où la photo de
   démonstration était sombre : sans dégradé, le titre disparaissait. Le voile
   est un ::after écrit après le titre dans l'ordre du document ; les deux
   z-index le remettent dessous. Ne pas positionner le .container intermédiaire :
   le titre est en absolute bottom:0 et prendrait ce conteneur vide comme
   référence, donc sortirait par le haut du bandeau. */
body.single-service #pxl-page-title-default .pxl-page-title-bg::after,
body.single-product #pxl-page-title-default .pxl-page-title-bg::after,
body.post-type-archive-product #pxl-page-title-default .pxl-page-title-bg::after,
body.tax-product_cat #pxl-page-title-default .pxl-page-title-bg::after,
body.tax-product_tag #pxl-page-title-default .pxl-page-title-bg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(15, 31, 52, 0.34) 0%, rgba(15, 31, 52, 0.22) 32%, rgba(15, 31, 52, 0.78) 100%);
	pointer-events: none;
}

body.single-service #pxl-page-title-default .pxl-page-title,
body.single-product #pxl-page-title-default .pxl-page-title,
body.post-type-archive-product #pxl-page-title-default .pxl-page-title,
body.tax-product_cat #pxl-page-title-default .pxl-page-title,
body.tax-product_tag #pxl-page-title-default .pxl-page-title {
	z-index: 1;
}

/* =====================================================================
   2. Mobile : ni titre ni photo sur les fiches
   ===================================================================== */

/* Sous 768 px, le bandeau imposait un demi-écran de photo et un titre de
   40 px avant le moindre contenu utile. Seule la photo et le H1 disparaissent
   (.pxl-page-title-bg) : le fil d'Ariane et la phrase de présentation, qui
   vivent dans .pxl-page-title-content, restent en place. La boutique garde son
   bandeau, qui sert de titre de rubrique. */
@media (max-width: 767px) {
	body.single-service #pxl-page-title-default .pxl-page-title-bg,
	body.single-product #pxl-page-title-default .pxl-page-title-bg {
		display: none;
	}

	/* le bandeau se réduit alors à son contenu : on lui rend un peu d'air */
	body.single-service #pxl-page-title-default .pxl-page-title-content,
	body.single-product #pxl-page-title-default .pxl-page-title-content {
		padding-top: 28px;
	}
}