/**
 * Villa Victoria — Fiches prestation (single-service)
 *
 * Le bandeau de titre est traité par vv-bandeaux ; ce fichier ne porte que la
 * mise en page des fiches elles-mêmes.
 *
 * Charte : navy #0F1F34, texte #5A6676, filet sable #E6DFD4.
 */

/* =====================================================================
   1. Les trois encadrés de bénéfices : une seule et même hauteur
   ===================================================================== */

/* Chaque fiche pose trois pxl_icon_box, un par colonne, dans une rangée. Les
   colonnes s'étirent déjà à la même hauteur (flex), mais l'encadré qu'elles
   contiennent — le rectangle visible, c'est lui qui porte le filet — s'arrête à
   son texte : trois rectangles de 518, 500 et 474 px, aux bas décalés. On fait
   descendre la hauteur de la colonne jusqu'au filet.
 *
   Le :only-child est essentiel : il vise les encadrés seuls dans leur colonne,
   donc ceux des rangées, et laisse ceux qui sont empilés sous un titre (les
   conseils « Après votre massage »), qui prendraient sinon chacun toute la
   hauteur de la colonne. */
body.single-service .e-con > .elementor-widget-pxl_icon_box:only-child,
body.single-service .e-con-inner > .elementor-widget-pxl_icon_box:only-child {
	height: 100%;
}

body.single-service .e-con > .elementor-widget-pxl_icon_box:only-child > .elementor-widget-container,
body.single-service .e-con-inner > .elementor-widget-pxl_icon_box:only-child > .elementor-widget-container,
body.single-service .e-con > .elementor-widget-pxl_icon_box:only-child .pxl-icon-box,
body.single-service .e-con-inner > .elementor-widget-pxl_icon_box:only-child .pxl-icon-box {
	height: 100%;
}

/* le contenu reste calé en haut du rectangle : sans cela, le texte se
   recentrerait verticalement et les trois titres ne seraient plus alignés */
body.single-service .e-con > .elementor-widget-pxl_icon_box:only-child .pxl-icon-box,
body.single-service .e-con-inner > .elementor-widget-pxl_icon_box:only-child .pxl-icon-box {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Le thème passe en « capitalize » les titres de pxl_icon_box et le libellé des
   boutons : « Apaisement Du Mental », « Réserver Ce Massage », là où la base dit
   « Apaisement du mental » et « Réserver ce massage ». Les pages refondues
   (Massages, Offrir) écrivent déjà leurs boutons en minuscules : les fiches les
   rejoignent. */
body.single-service .pxl-icon-box .pxl-item--title,
body.single-service #pxl-main .pxl-button a.btn,
body.single-service #pxl-main .pxl-button a.btn .pxl--btn-text {
	text-transform: none;
}

/* Sous 1025 px, Elementor empile les trois colonnes, chacune à la hauteur de
   son texte. Les rectangles ne sont alors plus côte à côte : rien ne se compare
   plus d'un bord à l'autre, et une égalisation en grille (grid-auto-rows: 1fr)
   a été essayée puis retirée — sur une grille de hauteur indéfinie, elle
   n'alignait que deux lignes sur trois. */

/* =====================================================================
   2. Mobile : bouton de réservation et sa mention, centrés
   ===================================================================== */

/* Le bouton est un « inline-flex » de 220 px dans un widget pleine largeur, et
   la phrase qui le suit est alignée à gauche : sur un écran de 390 px, les deux
   restaient collés au bord gauche sous un texte lui aussi à gauche, sans
   qu'aucun ne serve d'appui à l'autre.
   Les 36 fiches ont exactement un pxl_button, toujours suivi du pxl_text_editor
   qui porte la mention « Ou composez votre expérience sur mesure… » : la règle
   vaut donc pour toutes, sans dépendre des identifiants de widgets, qui
   changent d'une fiche à l'autre. */
@media (max-width: 767px) {
	body.single-service #pxl-main .elementor-widget-pxl_button,
	body.single-service #pxl-main .elementor-widget-pxl_button + .elementor-widget-pxl_text_editor {
		text-align: center;
	}
}