/* ==========================================================================
   Pages « studio » (Yoga Valence, Pilates / Reformer Valence, Yoga Saint-Péray, Pilates / Reformer Saint-Péray,
   Hot Studio Valence) : composants hyst-* de /root/build/gabarit-studio.php. Chargé après style.css.
   Couleurs : variables du thème (--hy-*), elles-mêmes branchées sur le Kit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Adresse d'un studio (variable Logia, lien vers la fiche Google) : pastille du hero, ligne à picto, texte seul
   -------------------------------------------------------------------------- */
.hyst-adresse {
	max-width: 100%;
}

.hyst-adresse .elementor-icon-list-items {
	margin: 0;
}

.hyst-adresse .elementor-icon-list-item,
.hyst-adresse .elementor-icon-list-item > a {
	align-items: center;
}

.hyst-adresse .elementor-icon-list-icon {
	flex: none;
	color: var(--hy-ocre);
}

.hyst-adresse .elementor-icon-list-icon svg {
	width: 16px;
	height: 20px;
	margin: 0;
	fill: currentColor;
}

.hyst-adresse .elementor-icon-list-text {
	padding-left: 12px;
	text-box: trim-both cap alphabetic;
	transition: color .25s ease;
}

/* Pastille du hero : pilule translucide, picto ocre, adresse en blanc. */
.hyst-adresse--pastille .elementor-icon-list-item > a {
	padding: 12px 24px;
	border: 1px solid rgba(249, 247, 243, .14);
	border-radius: 100px;
	background: rgba(249, 247, 243, .11);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color .3s ease, border-color .3s ease;
}

.hyst-adresse--pastille .elementor-icon-list-item > a:is(:hover, :focus-visible) {
	border-color: rgba(196, 168, 135, .6);
	background: rgba(249, 247, 243, .2);
}

.hyst-adresse--pastille .elementor-icon-list-text {
	padding-left: 14px;
	text-box: normal;
	line-height: 1.3;
}

/* Texte seul (bloc « Adresse », tableau) : l'adresse passe sur deux lignes après la rue, comme sur la maquette. */
.hyst-adresse--texte .elementor-icon-list-text {
	padding-left: 0;
	line-height: 1.5;
	hyphens: none;
}



.hyst-adresse--texte a .elementor-icon-list-text {
	background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
	transition: color .25s ease, background-size .4s ease;
}

.hyst-adresse--texte a:is(:hover, :focus-visible) .elementor-icon-list-text {
	color: var(--hy-ocre);
}

/* --------------------------------------------------------------------------
   Présentation du studio : Adresse / Accès, chiffres clés
   -------------------------------------------------------------------------- */
.hyst-rangee-infos > .e-con {
	flex: 1 1 0;
	min-width: 0;
}

.hyst-info-picto img {
	display: block;
	width: auto;
	height: 24px;
}

.hyst-chiffre .hy-chiffre .elementor-heading-title {
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

.hyst-chiffre-unite {
	font-size: .714em;
}

.hyst-info--filet,
.hyst-chiffres:not(.hyst-chiffres--cartes) > .hyst-chiffre {
	padding-top: 32px;
	border-top: 1px solid rgba(196, 168, 135, .2);
}

.hyst-chiffre--carte {
	transition: border-color .4s ease, transform .4s ease;
}

@media (min-width: 1025px) {
	.hyst-infos {
		padding-bottom: 8px;
	}

	/* La colonne « Adresse » est un peu plus large : l'adresse complète (variable Logia) tient sur une ligne. */
	.hyst-infos .hyst-rangee-infos > .e-con:first-child,
	.hyst-section-presentation--photo .hyst-rangee-infos > .e-con:first-child {
		flex-grow: 1.25;
	}
}

@media (max-width: 479px) {
	.hyst-rangee-infos {
		flex-wrap: wrap !important;
	}

	.hyst-rangee-infos > .e-con {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   Photos (cadre arrondi) et rangées de deux colonnes
   -------------------------------------------------------------------------- */
.hyst-photo img {
	display: block;
	width: 100%;
}

.hyst-photo--bord {
	border: 1px solid rgba(196, 168, 135, .25);
}

.hyst-col {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Styles au planning du studio
   -------------------------------------------------------------------------- */
.hyst-legende-gauche .hy-jauge-legende {
	justify-content: flex-start;
}

.hyst-styles-entete > .elementor-widget-button {
	flex: none;
}

/* Titres des cartes alignés d'une carte à l'autre, même quand une description tient sur une ligne. */
.hyst-section-styles .hy-style {
	justify-content: flex-start;
}

/* Une seule carte (Saint-Péray) : carte large, jauge à droite du titre. */
.hyst-styles-carte .hy-styles {
	width: 100%;
}

.hyst-styles-carte .hy-styles .elementor-loop-container > .e-loop-item {
	flex-basis: 100%;
}

.hyst-styles-carte .hy-style.e-con {
	position: relative;
	--padding-top: 48px !important;
	--padding-right: 48px !important;
	--padding-bottom: 48px !important;
	--padding-left: 48px !important;
}

.hyst-styles-carte .hy-style-jauge {
	position: absolute;
	top: 48px;
	right: 48px;
	width: auto;
}

@media (max-width: 767px) {
	.hyst-styles-carte .hy-style.e-con {
		--padding-top: 28px !important;
		--padding-right: 24px !important;
		--padding-bottom: 28px !important;
		--padding-left: 24px !important;
	}

	.hyst-styles-carte .hy-style-jauge {
		top: 28px;
		right: 24px;
	}
}

/* --------------------------------------------------------------------------
   Le réseau : carte Google Maps (cadre ocre arrondi) et tableau d'informations
   -------------------------------------------------------------------------- */
.hyst-carte {
	overflow: hidden;
	border: 1px solid var(--hy-ocre);
	border-radius: 16px;
	background: #E8E4DA;
	line-height: 0;
	isolation: isolate;
}

.hyst-carte .elementor-custom-embed {
	line-height: 0;
}

.hyst-carte iframe {
	display: block;
	width: 100%;
	border: 0;
}

.hyst-tableau-ligne {
	padding: 22px 0;
	border-top: 1px solid rgba(29, 29, 27, .12);
}

.hyst-tableau-ligne:first-child {
	border-top: 0;
}

.hyst-tableau-libelle {
	flex: none;
}

.hyst-libelle .elementor-heading-title {
	text-transform: uppercase;
}

.hyst-tableau-valeur {
	min-width: 0;
}

.hyst-tableau-valeur.elementor-widget-text-editor {
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Tarifs : carte de prix (« Première séance » sombre, « Offre découverte » gris bleu)
   -------------------------------------------------------------------------- */
.hyst-prix .elementor-heading-title,
.hyst-prix-ancien .elementor-heading-title {
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: lining-nums;
}

.hyst-prix-unite {
	padding-bottom: 4px;
}

.hyst-tarifs--decouverte .hy-tarifs-carte .hy-filet {
	background: rgba(255, 255, 255, .45);
}

.hyst-tarifs--decouverte .hy-tarifs-carte {
	border: 1px solid rgba(196, 168, 135, .25);
}

.hyst-prix-texte.elementor-widget-text-editor {
	color: rgba(29, 29, 27, .7);
}

/* Prix promotionnel : le rouge #F14336 de la maquette est hors charte. Même présentation que la page ville de
   Saint-Péray : prix en noir dans une pastille ocre (l'ocre en texte sur le gris bleu est illisible), ancien prix barré. */
.hyst-prix-ligne:has(.hyst-prix-promo) {
	align-items: center;
}

.hyst-prix-promo .elementor-heading-title {
	padding: 9px 14px 7px;
	border-radius: 100px;
	background: var(--hy-ocre);
	font-size: 2rem;
	text-box: normal;
}

.hyst-prix-ancien .elementor-heading-title {
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	text-decoration: line-through;
}

@media (min-width: 1025px) {
	.hyst-tarifs--decouverte.hy-tarifs {
		justify-content: center;
		gap: 80px;
	}

	.hyst-tarifs--decouverte > .hy-tarifs-liste {
		flex: 0 1 645px;
	}

	.hyst-tarifs--decouverte > .hy-tarifs-carte {
		align-self: stretch;
		justify-content: flex-start;
		min-height: 480px;
	}

	.hyst-tarifs--decouverte > .hy-tarifs-carte > .elementor-widget-button {
		margin-top: auto;
	}
}

/* --------------------------------------------------------------------------
   Planning : carte « verre »
   -------------------------------------------------------------------------- */
.hyst-planning {
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.hyst-paras .hyst-fort {
	color: rgba(29, 29, 27, .9);
}

.hyst-paras p + p {
	margin-top: 1.3em;
}

.hyst-note.elementor-widget-text-editor {
	font-size: .875rem;
}

/* Chiffre + légende sur une ligne, sous un filet (variante sans cartes). */
.hyst-chiffre--ligne .hy-legende {
	max-width: 170px;
}

.hyst-chiffre--ligne > .elementor-widget-heading {
	flex: none;
}

/* Grande photo à cheval sur le haut du panneau clair (1re section du panneau). */
.hyst-panneau-photo {
	--hy-chevauche: 289px;
	--hy-chevauche-tablette: 220px;
}

@media (max-width: 767px) {
	.hyst-panneau-photo {
		--hy-chevauche-tablette: 130px;
	}
}

/* Mot d'un titre en ocre (« Hot Studio à Valence » sur une page de Saint-Péray). */
.hyst-ocre {
	color: var(--hy-ocre);
}

/* Photo de 495 px à cheval sur le panneau (Pilates Saint-Péray) : la moitié dépasse au-dessus. */
.hyst-panneau-photo--495 {
	--hy-chevauche: 248px;
	--hy-chevauche-tablette: 190px;
}

@media (max-width: 767px) {
	.hyst-panneau-photo--495 {
		--hy-chevauche-tablette: 120px;
	}
}

/* --------------------------------------------------------------------------
   Conseils (Hot Studio) : bandeau ocre de contact
   -------------------------------------------------------------------------- */
.hyst-bandeau .hyst-bandeau-texte {
	flex: 1 1 0;
	min-width: 0;
}

.hyst-bandeau .elementor-widget-button {
	flex: none;
}

.hyst-bandeau .elementor-button {
	--hy-b-survol-bord: var(--hy-noir);
}

/* Planning avec photo et tableau : le tableau prend la largeur de la colonne. */
.hyst-planning .hyst-tableau {
	width: 100%;
}

.hyst-planning--photo .hyst-tableau-ligne:first-child {
	border-top: 1px solid rgba(29, 29, 27, .12);
}

/* Desktop étroit : la carte « Offre découverte » garde son bouton dans son cadre. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.hyst-tarifs--decouverte > .hy-tarifs-carte {
		flex: 0 0 352px;
		--padding-left: 24px !important;
		--padding-right: 24px !important;
	}

	.hyst-tarifs--decouverte.hy-tarifs {
		gap: 48px;
	}
}