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

/* --------------------------------------------------------------------------
   Cartes des studios de la ville : adresse (picto + lien vers la fiche Google)
   -------------------------------------------------------------------------- */
.hyv-adresse .elementor-icon-list-items {
	margin: 0;
}

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

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

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

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

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

.hyv-adresse {
	max-width: 100%;
}

/* L'adresse tient sur une ligne en desktop (maquette) ; elle peut passer à la ligne sur les cartes étroites. */
@media (min-width: 1200px) {
	.hyv-adresse .elementor-icon-list-text {
		white-space: nowrap;
	}
}

/* Deux cartes (Saint-Péray) : côte à côte dès 900 px, empilées en dessous (convention des rangées de 2). */
@media (max-width: 899px) and (min-width: 768px) {
	.hyv-rangee-studios.pb-rangee-2 {
		flex-direction: column !important;
	}
}

/* --------------------------------------------------------------------------
   Photo + texte (Chiffres clés, Dark Sessions)
   -------------------------------------------------------------------------- */
.hyv-photo-col {
	align-self: stretch;
}

.hyv-photo img {
	display: block;
	width: 100%;
}

@media (min-width: 1025px) {
	.hyv-photo-texte > .e-con {
		flex: 1 1 0;
		min-width: 0;
	}

	.hyv-photo-texte > .e-con + .e-con {
		justify-content: flex-start;
	}
}

/* Grille 2 × 2 des chiffres clés : colonnes de 192 px, filet ocre de 72 px au-dessus de la seconde ligne. */
.hyv-chiffres {
	display: grid !important;
	grid-template-columns: repeat(2, 192px);
	gap: 56px 48px !important;
	width: auto;
	margin-top: 8px;
}

.hyv-chiffres > .hy-chiffre-bloc {
	position: relative;
	width: auto;
	max-width: none;
}

.hyv-chiffres > .hy-chiffre-bloc:nth-child(n+3)::before {
	content: "";
	position: absolute;
	left: 0;
	top: -28px;
	width: 72px;
	height: 1px;
	background: rgba(196, 168, 135, .3);
}

@media (max-width: 767px) {
	.hyv-chiffres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px !important;
		width: 100%;
	}

	.hyv-chiffres > .hy-chiffre-bloc:nth-child(n+3)::before {
		top: -24px;
	}
}

/* --------------------------------------------------------------------------
   Cartes « Starter Pack » et « Cartes cadeaux »
   -------------------------------------------------------------------------- */
.hyv-tarifs-cartes > .hyv-tarif {
	flex: 1 1 0;
	min-width: 0;
	transition: transform .4s ease, box-shadow .4s ease;
}

.hyv-tarif--starter {
	border: 1px solid rgba(196, 168, 135, .25);
}

@media (hover: hover) {
	.hyv-tarif:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px rgba(29, 29, 27, .08);
	}
}

.hyv-tarif-titre .elementor-heading-title,
.hyv-prix .elementor-heading-title {
	font-weight: 600;
	letter-spacing: -.04em;
	white-space: nowrap;
}

.hyv-mot-fonce {
	color: var(--hy-noir);
}

.hyv-tarif-tete {
	width: 100%;
}

.hyv-prix {
	flex: none;
}

.hyv-prix .elementor-heading-title {
	font-weight: 500;
	font-variant-numeric: lining-nums;
}

/* Prix promotionnel : le rouge #F14336 de la maquette est hors charte, remplacé par l'ocre du Kit. En texte sur le
   gris bleu de la carte, l'ocre est illisible (contraste 1,1) : il passe en fond de pastille, prix en noir. */
.hyv-prix--promo .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
	text-box: normal;
	line-height: 1;
}

.hyv-prix-promo {
	padding: 9px 14px 7px;
	border-radius: 100px;
	background: var(--hy-ocre);
	color: var(--hy-noir);
	font-weight: 600;
}

.hyv-prix-ancien {
	color: rgba(255, 255, 255, .85);
	font-size: .857em;
	text-decoration: line-through;
}

.hyv-tarif--cadeaux .elementor-button {
	--hy-b-survol-bord: var(--hy-noir);
}

@media (max-width: 1024px) {
	.hyv-tarifs-cartes > .hyv-tarif {
		flex: none;
		width: 100%;
	}
}

@media (max-width: 1024px) and (min-width: 900px) {
	.hyv-tarifs-cartes {
		flex-direction: row !important;
	}

	.hyv-tarifs-cartes > .hyv-tarif {
		flex: 1 1 0;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Grande photo du panneau clair (sans carte de texte)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hyv-grande-image .hy-cta.e-con {
		--min-height: 380px;
	}
}

@media (max-width: 767px) {
	.hyv-grande-image .hy-cta.e-con {
		--min-height: 240px;
	}
}

/* --------------------------------------------------------------------------
   Bandeau « Nos studios en France » : ville courante et « Bientôt » estompées. L'animation d'entrée écrit
   « opacity: 1 » en ligne sur chaque cellule : l'estompage du thème est rétabli ici (même valeur que style.css).
   -------------------------------------------------------------------------- */
.hyv-villes .hy-ville--courante,
.hyv-villes .hy-ville--bientot {
	opacity: .5 !important;
}

/* --------------------------------------------------------------------------
   Cartes des studios : paliers. Le bouton (libellé long) peut passer sur deux lignes plutôt que sortir de la carte.
   -------------------------------------------------------------------------- */
.hyv-carte-studio .elementor-widget-button {
	max-width: 100%;
}

.hyv-carte-studio .elementor-button {
	max-width: 100%;
	white-space: normal;
	line-height: 1.3;
	text-align: left;
}

@media (max-width: 1279px) and (min-width: 1025px) {
	.hyv-rangee-studios > .hyv-carte-studio {
		--padding-left: 24px;
		--padding-right: 24px;
	}
}

/* Trois cartes en tablette : deux cartes et l'amorce de la suivante (les libellés ne tiennent pas à trois). */
@media (max-width: 1024px) and (min-width: 768px) {
	.hyv-rangee-studios.pb-scroll-tablette.e-con > .e-con {
		flex-basis: 44% !important;
	}
}

@media (max-width: 899px) and (min-width: 768px) {
	.hyv-rangee-studios.pb-scroll-tablette.e-con > .e-con {
		flex-basis: 58% !important;
	}
}

/* Photo recadrée en paysage (tablette, mobile) : on garde le haut du sujet. */
@media (max-width: 1024px) {
	.hyv-photo img {
		object-position: 50% 22%;
	}
}

/* Bandeau des villes en tablette : le titre passe au-dessus, les trois villes restent sur une ligne (sinon les
   vignettes sont écrasées et les cellules se chevauchent à 768 px). */
.hyv-villes .hy-ville-image {
	flex: none;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.hyv-villes .hy-villes {
		flex-wrap: wrap !important;
		row-gap: 32px !important;
	}

	.hyv-villes .hy-villes-titre {
		flex: 0 0 100%;
		max-width: none;
		margin-right: 0;
	}
}

/* Adresse sur deux lignes (cartes étroites) : texte calé à gauche du picto, l'ensemble reste centré dans la carte. */
.hyv-adresse .elementor-icon-list-text {
	flex: 0 1 auto;
	text-align: left;
}

.hyv-tarif-tete:has(.hyv-prix--promo) {
	align-items: center;
}