/* ==========================================================================
   Pages « Nos pratiques » (Yoga, Pilates / Reformer, Hot Studio) : classes hyp-*.
   Générateur : /root/build/gabarit-pratique.php. Couleurs et typos : globaux du Kit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photo qui remplit la hauteur de sa colonne
   -------------------------------------------------------------------------- */
.hyp-photo {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border-radius: 16px;
	isolation: isolate;
}

.hyp-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hyp-equipe-photo .hyp-photo {
	min-height: 520px;
}

@media (max-width: 1024px) {
	.hyp-photo,
	.hyp-equipe-photo .hyp-photo {
		min-height: 0;
		aspect-ratio: 16 / 10;
		flex: none;
	}

	/* Empilé : le texte passe toujours avant la photo et les chiffres. */
	.hyp-pratique--inverse > .hyp-pratique-photo {
		order: 1;
	}

	.hyp-photo {
		max-height: 480px;
	}
}

@media (max-width: 767px) {
	.hyp-photo,
	.hyp-equipe-photo .hyp-photo {
		aspect-ratio: 4 / 3.4;
	}
}

/* --------------------------------------------------------------------------
   Paire de chiffres clés (filet vertical entre les deux)
   -------------------------------------------------------------------------- */
.hyp-chiffres > .hyp-chiffre {
	position: relative;
	width: auto !important;
	flex: 0 1 auto;
}

.hyp-chiffres > .hyp-chiffre + .hyp-chiffre::before {
	content: "";
	position: absolute;
	left: -48px;
	top: 50%;
	width: 1px;
	height: 56px;
	margin-top: -28px;
	background: rgba(196, 168, 135, .3);
}

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

.hyp-chiffre .hy-legende p {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.hyp-chiffres > .hyp-chiffre + .hyp-chiffre::before {
		left: -24px;
	}

	.hyp-chiffres {
		justify-content: center !important;
	}
}

/* --------------------------------------------------------------------------
   Atouts 2 × 2 (filet court sous la première rangée)
   -------------------------------------------------------------------------- */
.hyp-atouts {
	max-width: 576px;
}

.hyp-atouts > .hyp-atout {
	flex: 0 0 256px;
	max-width: calc(50% - 32px);
}

.hyp-atouts > .hyp-atout:nth-child(n+3) {
	padding-top: 32px;
	border-top: 0;
	background: linear-gradient(rgba(196, 168, 135, .3), rgba(196, 168, 135, .3)) left top / 72px 1px no-repeat;
}

@media (max-width: 1024px) {
	.hyp-atouts {
		max-width: none;
	}

	.hyp-atouts > .hyp-atout {
		flex: 1 1 calc(50% - 32px);
	}
}

@media (max-width: 767px) {
	.hyp-atouts > .hyp-atout {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.hyp-atouts > .hyp-atout:nth-child(n+3) {
		padding-top: 24px;
	}
}

/* --------------------------------------------------------------------------
   Cartes sombres : formats numérotés (Pilates), bénéfices (Hot Studio)
   -------------------------------------------------------------------------- */
.hyp-carte {
	transition: transform .4s ease, border-color .4s ease;
}

@media (hover: hover) {
	.hyp-carte:hover {
		transform: translateY(-4px);
		border-color: rgba(196, 168, 135, .45) !important;
	}
}

.hyp-numero .elementor-heading-title {
	font-variant-numeric: lining-nums;
}

.hyp-grille-3 {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hyp-grille-3 > .e-con {
	width: auto;
}

.hyp-benefice .elementor-widget-text-editor {
	max-width: 310px;
}

@media (max-width: 1024px) {
	.hyp-grille-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.hyp-grille-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 7e carte de style (Power Yoga) : la grille des styles la centre déjà (style.css). */

/* --------------------------------------------------------------------------
   Bannière photo à cheval sur le panneau clair (201 px au-dessus, comme la maquette)
   -------------------------------------------------------------------------- */
.hy-panneau--chevauche.hyp-panneau-banniere {
	margin-top: 201px;
}

.hy-panneau--chevauche.hyp-panneau-banniere > .e-con:first-child {
	margin-top: -201px;
}

@media (max-width: 1024px) {
	.hy-panneau--chevauche.hyp-panneau-banniere {
		margin-top: 150px;
	}

	.hy-panneau--chevauche.hyp-panneau-banniere > .e-con:first-child {
		margin-top: -150px;
	}

	.hyp-banniere.e-con {
		--min-height: 380px !important;
	}
}

@media (max-width: 767px) {
	.hy-panneau--chevauche.hyp-panneau-banniere {
		margin-top: 100px;
	}

	.hy-panneau--chevauche.hyp-panneau-banniere > .e-con:first-child {
		margin-top: -100px;
	}

	.hyp-banniere.e-con {
		--min-height: 260px !important;
	}
}

/* --------------------------------------------------------------------------
   Notre partenaire (Merrithew)
   -------------------------------------------------------------------------- */
.hyp-partenaire {
	border: 1px solid rgba(245, 240, 230, .08);
}

.hyp-partenaire-logo img {
	display: block;
	width: 373px;
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Notre équipe : carte chiffre clé
   -------------------------------------------------------------------------- */
.hyp-chiffre-carte {
	width: auto !important;
	max-width: 100%;
}

.hyp-chiffre-carte > .e-con {
	width: auto;
}

/* --------------------------------------------------------------------------
   Réservation : frise de 5 étapes (ligne pleine jusqu'à l'étape 4, pointillée ensuite)
   -------------------------------------------------------------------------- */
.hyp-etapes {
	position: relative;
}

.hyp-etapes::before,
.hyp-etapes::after {
	content: "";
	position: absolute;
	top: 28px;
	height: 1px;
	pointer-events: none;
}

.hyp-etapes::before {
	left: 0;
	width: calc(70% + 6.4px);
	background: var(--hy-ocre);
}

.hyp-etapes::after {
	left: calc(70% + 6.4px);
	right: 0;
	background: repeating-linear-gradient(90deg, var(--hy-ocre) 0 6px, transparent 6px 12px);
}

.hyp-etapes > .hyp-etape {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
}

.hyp-etape-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(29, 29, 27, .09);
	border-radius: 12px;
	background: #FBF9F5;
	line-height: 0;
}

.hyp-etape-num .elementor-heading-title {
	display: block;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

.hyp-etape--finale .hyp-etape-num {
	border-color: var(--hy-ocre);
	background: var(--hy-ocre);
}

.hyp-etape--finale .hyp-etape-num .elementor-heading-title {
	color: var(--hy-noir);
}

/* Sous 900 px : frise verticale (pastille à gauche, texte à droite). */
@media (max-width: 899px) {
	.hyp-etapes {
		flex-direction: column !important;
		gap: 28px !important;
		max-width: 560px;
		margin-inline: auto;
	}

	.hyp-etapes::before {
		left: 28px;
		top: 0;
		width: 1px;
		height: calc(100% - 100px);
	}

	.hyp-etapes::after {
		content: none;
	}

	.hyp-etapes > .hyp-etape {
		flex: none;
		flex-direction: row !important;
		align-items: flex-start !important;
		width: 100%;
	}

	.hyp-etape-texte {
		padding-top: 6px;
	}

	.hyp-etape .elementor-heading-title,
	.hyp-etape .elementor-widget-text-editor {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Ateliers : carte liste (lignes séparées par un filet)
   -------------------------------------------------------------------------- */
.hyp-ateliers,
.hyp-conseils {
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.hyp-ateliers > .hyp-atelier + .hyp-atelier,
.hyp-conseils > .hyp-conseil + .hyp-conseil {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(29, 29, 27, .1);
}

.hyp-atelier-date {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--hy-ocre);
	line-height: 0;
}

.hyp-atelier-date .elementor-heading-title {
	text-box: normal;
	font-variant-numeric: lining-nums;
}

.hyp-atelier-date em {
	display: block;
}

.hyp-atelier-corps {
	flex: 1 1 0;
	min-width: 0;
}

.hyp-atelier-horaire {
	flex: none;
}

.hyp-atelier-horaire .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.hyp-atelier-horaire .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--hy-noir);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.85 9.41 8.62 7.74V4.33a.62.62 0 0 0-1.24 0v3.72c0 .2.09.38.25.5l2.48 1.85a.62.62 0 0 0 .87-.12.62.62 0 0 0-.13-.87Z'/%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 14.76A6.77 6.77 0 1 1 8 1.24a6.77 6.77 0 0 1 0 13.52Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.85 9.41 8.62 7.74V4.33a.62.62 0 0 0-1.24 0v3.72c0 .2.09.38.25.5l2.48 1.85a.62.62 0 0 0 .87-.12.62.62 0 0 0-.13-.87Z'/%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 14.76A6.77 6.77 0 1 1 8 1.24a6.77 6.77 0 0 1 0 13.52Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767px) {
	.hyp-atelier {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
	}

	.hyp-atelier-horaire {
		flex: 0 0 100%;
		padding-left: 72px;
	}

	.hyp-ateliers > .hyp-atelier + .hyp-atelier,
	.hyp-conseils > .hyp-conseil + .hyp-conseil {
		margin-top: 20px;
		padding-top: 20px;
	}

	.hyp-conseil {
		align-items: flex-start !important;
	}
}

/* --------------------------------------------------------------------------
   Avant votre séance (Hot Studio) : carte de conseils
   -------------------------------------------------------------------------- */
.hyp-conseil > .e-con {
	flex: 1 1 0;
	min-width: 0;
}

.hyp-conseil > .hy-picto,
.hyp-format .hy-picto,
.hyp-benefice .hy-picto {
	flex: none;
}

/* --------------------------------------------------------------------------
   Ajustements des composants partagés sur les pages pratiques
   -------------------------------------------------------------------------- */
/* Pastilles (numéro d'étape, date d'atelier) : carré de 56 px, quelle que soit la largeur « auto » du widget. */
.elementor-element.hyp-etape-num,
.elementor-element.hyp-atelier-date {
	width: 56px !important;
	min-width: 56px;
}

/* Cartes de styles : même hauteur sur une rangée (la carte remplit sa case). */
.hyp-section-styles .hy-styles .elementor-loop-container > .e-loop-item {
	display: flex;
}

.hyp-section-styles .hy-styles .e-loop-item > .e-con {
	flex: 1 1 auto;
	height: auto;
}

/* Tarifs : la liste prend la place restante à côté de la carte. */
@media (min-width: 1025px) {
	.hyp-section-tarifs .hy-tarifs > .hy-tarifs-liste {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Nos autres pratiques : présentation alignée en haut des cartes (maquette). */
@media (min-width: 1025px) {
	.hyp-section-autres > .e-con-inner > .e-con {
		align-items: flex-start;
	}

	.hyp-section-autres > .e-con-inner > .e-con > .e-con:first-child {
		padding-top: 24px;
	}
}

.hyp-section-styles .hy-styles .elementor-loop-container {
	align-items: stretch !important;
}

.elementor-element.hyp-atelier-date .elementor-heading-title {
	line-height: 1.05;
}

.elementor-element.hyp-etape--finale .hyp-etape-num .elementor-heading-title {
	color: var(--hy-noir);
}

.elementor-element.hyp-etape-num .elementor-heading-title {
	line-height: 1;
}

/* Filet de la carte « La flexibilité Hyphen » : le fond du <hr> est neutralisé ailleurs, on le repose ici. */
.hyp-section-tarifs hr.hy-filet {
	background: rgba(219, 203, 170, .5) !important;
}

/* Le socle donne height: 100 % aux cartes de boucle : dans la grille flex des styles, cela empêche l'étirement. */
.hyp-section-styles .hy-styles .elementor-loop-container > .e-loop-item {
	height: auto;
}

/* Frise verticale : textes alignés à gauche. */
@media (max-width: 899px) {
	.elementor-element.hyp-etape .elementor-heading-title,
	.elementor-element.hyp-etape .elementor-widget-text-editor,
	.hyp-etape .elementor-widget-text-editor p {
		text-align: left !important;
	}
}

@media (max-width: 899px) {
	.hyp-etapes > .hyp-etape {
		flex-wrap: nowrap !important;
	}

	.hyp-etape > .hyp-etape-texte {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

/* Chiffres clés en mobile : deux colonnes égales, légendes sur deux lignes si besoin. */
@media (max-width: 767px) {
	.hyp-chiffres > .hyp-chiffre {
		flex: 1 1 0;
		min-width: 0;
	}

	.hyp-chiffre .hy-legende p {
		white-space: normal;
	}
}

.hyp-atelier > .hyp-atelier-corps,
.hyp-conseil > .e-con {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
}

@media (max-width: 767px) {
	.hyp-atelier > .hyp-atelier-corps {
		flex-basis: calc(100% - 72px) !important;
		flex-grow: 0 !important;
	}
}

@media (max-width: 767px) {
	.hyp-chiffres .hy-chiffre .elementor-heading-title {
		font-size: 2rem;
	}
}