/*
 * FitMove — téléphone et tablette.
 *
 * Chargée après le thème et les styles des blocs. Objectif : un rythme régulier,
 * des écrans qui respirent, et pas de longues colonnes de cartes à faire défiler.
 *
 *  - Téléphone : jusqu'à 640 px
 *  - Tablette  : de 641 à 1024 px
 */

/* Rien ne doit jamais dépasser sur les côtés. */
body { overflow-x: clip; }

/* Textes courts sur téléphone (héros) : voir fmb_mobile_text(). */
.fm-mob-only { display: none; }

/* Petits textes d'appoint sous une grille. */
.fm-small { font-size: .9em; opacity: .8; }

/* ---------------------------------------------------------------------------
 * Parcours HYROX : 8 stations numérotées
 * ------------------------------------------------------------------------ */
.fm-hx-stations { counter-reset: none; }
.fm-hx-station { display: flex; flex-direction: column; gap: 2px; min-height: 100%; padding: clamp(16px, 2vw, 22px) !important; }
.fm-hx-station p, .fm-hx-station h3 { margin: 0 !important; }
.fm-hx-station__n { font-family: var(--fm-font-heading); font-weight: var(--fm-heading-weight, 800); font-size: clamp(26px, 3vw, 34px); line-height: 1; color: var(--fm-primary-text, var(--fm-primary)); letter-spacing: -.02em; margin-bottom: 10px !important; }
.fm-hx-station__km { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.fm-hx-station__name { font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.2 !important; }

/* Anciennes cartes HYROX (pages non reconstruites) : même rendu compact. */
.fm-hx-step { padding: 16px !important; border-radius: var(--fm-radius, 12px); }
.fm-hx-step .fm-section__inner { padding: 0 !important; width: 100%; }
.fm-hx-step .fm-kicker { font-size: 12px; letter-spacing: .04em; margin-bottom: 6px; }
.fm-hx-step .fm-kicker::before { display: none; }
.fm-hx-step .fm-title { font-size: 17px !important; line-height: 1.2; }

/* ===========================================================================
 * Tablette et téléphone (jusqu'à 1024 px)
 * ======================================================================== */
@media (max-width: 1024px) {
	/* --- Cartes qui défilent sur le côté -------------------------------- *
	 * Équipe et tarifs (et, sur téléphone, avis et cartes de contenu) : on glisse
	 * du doigt pour voir la suite, au lieu d'une longue colonne ou d'une carte
	 * orpheline seule sur sa ligne. */
	.fm-team,
	.fm-grid:has(> .fm-price:nth-child(3)),
	.fm-pricing:not(.fm-pricing--mini, .fm-pricing--wide):has(> .fm-price:nth-child(3)) {
		display: flex !important;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--fm-gutter, 16px);
		margin-inline: calc(var(--fm-gutter, 16px) * -1);
		padding: 6px var(--fm-gutter, 16px) 10px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.fm-team::-webkit-scrollbar, .fm-grid::-webkit-scrollbar, .fm-pricing::-webkit-scrollbar { display: none; }
	.fm-team > *,
	.fm-grid:has(> .fm-price:nth-child(3)) > *,
	.fm-pricing:not(.fm-pricing--mini, .fm-pricing--wide):has(> .fm-price:nth-child(3)) > * { flex: 0 0 44%; max-width: 360px; scroll-snap-align: start; margin: 0 !important; }
	.fm-team > * { flex-basis: 34%; }
	.fm-team:has(> .fm-coach--round) > * { flex-basis: 27%; }

	/* Offres qui défilent : le bouton reste en bas de chaque carte. */
	.fm-price { display: flex; flex-direction: column; }
	.fm-price__cta { margin-top: auto; }

	/* Points sous les cartes qui défilent (ajoutés par le script). */
	.fm-swipe-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
	.fm-swipe-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: currentColor; opacity: .22; transition: width .25s, opacity .25s; cursor: pointer; }
	.fm-swipe-dots button[aria-current="true"] { width: 20px; opacity: .85; background: var(--fm-primary, #E1061B); }

	/* Sections « très aérées » : un peu moins. */
	.fm-section--pad-xl { padding-block: calc(var(--fm-section, 48px) * 1.15); }
}

/* ===========================================================================
 * Tablette seule (641 à 1024 px) : pas de carte orpheline
 * ======================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
	/* Trois éléments : trois colonnes plutôt que 2 + 1. */
	.fm-grid:has(> :nth-child(3):last-child):not(:has(> .fm-price)),
	.fm-info:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.fm-info:has(> :nth-child(3):last-child) .fm-info__item { padding: 20px; }
	/* Points forts du héros : 2 × 2. */
	.fm-hero__foot .fm-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Offres de coaching : 3 colonnes. */
	.fm-coffers:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fm-coffers .fm-coffer { padding: 20px; }
}

/* ===========================================================================
 * Téléphone (jusqu'à 640 px)
 * ======================================================================== */
@media (max-width: 640px) {
	.fm-desk-only { display: none; }
	.fm-mob-only { display: inline; }

	/* --- Premier écran : moins de texte -------------------------------- */
	.fm-hero .fm-more,
	.fm-main .wp-block-post-content > .fm-section:first-child .fm-more,
	.fm-main .wp-block-post-content > .fm-hero:first-child + .fm-section .fm-hero .fm-more { display: none; }

	.fm-lead { font-size: 17px; line-height: 1.55; }
	.fm-heading-block + .fm-lead, .fm-heading-block + p { margin-top: 14px; }

	/* Pastille « Nouveau » : sur une ligne. */
	.fm-hero__news { max-width: 100%; font-size: 13px; gap: 8px; padding-block: 4px; }
	.fm-hero__news > span:not(.fm-hero__news-tag) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.fm-hero__news-tag { font-size: 11px; }
	.fm-hero__kicker, .fm-hero__tag { font-size: 13px; }
	.fm-hero__text { font-size: 16px; line-height: 1.55; }
	.fm-hero__btns { gap: 10px; }
	.fm-hero__btns .fm-btn { min-height: 50px; }

	/* Photos du héros : moins hautes, le texte arrive plus vite. */
	.fm-hero--split .fm-hero__media, .fm-hero--panel .fm-hero__media, .fm-hero--editorial .fm-hero__pano { aspect-ratio: 16 / 10; }
	.fm-hero__mosaic { height: clamp(220px, 58vw, 300px); }
	.fm-hero.is-dark.fm-hero--h-tall .fm-hero__inner, .fm-hero--floating.fm-hero--h-tall .fm-hero__inner { min-height: 64svh; }

	/* Points forts sous le héros : 2 × 2, compacts (icône + titre). */
	.fm-hero__foot .fm-usp { gap: 10px; padding-top: 18px; }
	.fm-hero__foot .fm-usp__item { flex-direction: row; align-items: center; gap: 10px; }
	.fm-hero__foot .fm-usp--boxed .fm-usp__item { padding: 10px 12px; }
	.fm-hero__foot .fm-usp__ico { width: 36px; height: 36px; }
	.fm-hero__foot .fm-usp__ico svg { width: 18px; height: 18px; }
	.fm-hero__foot .fm-usp__txt strong { font-size: 14px; line-height: 1.25; }
	.fm-hero__foot .fm-usp__txt small { display: none; }

	/* Cartes qui défilent : une carte et demie à l'écran (voir plus haut). */
	.fm-grid:has(> .fm-testimonial:nth-child(2)),
	.fm-grid:has(> .is-style-fm-card:nth-child(3)):not(.fm-hx-stations, .fm-hx-why, .fm-hx-gallery),
	.fm-grid:has(> .fm-price:nth-child(2)),
	.fm-pricing:not(.fm-pricing--mini, .fm-pricing--wide):has(> .fm-price:nth-child(2)) {
		display: flex !important;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--fm-gutter, 16px);
		margin-inline: calc(var(--fm-gutter, 16px) * -1);
		padding: 6px var(--fm-gutter, 16px) 10px;
		scrollbar-width: none;
	}
	.fm-grid:has(> .fm-testimonial:nth-child(2)) > *,
	.fm-grid:has(> .is-style-fm-card:nth-child(3)):not(.fm-hx-stations, .fm-hx-why, .fm-hx-gallery) > *,
	.fm-grid:has(> .fm-price:nth-child(2)) > *,
	.fm-pricing:not(.fm-pricing--mini, .fm-pricing--wide):has(> .fm-price:nth-child(2)) > * { flex: 0 0 84%; max-width: 340px; scroll-snap-align: start; margin: 0 !important; }
	/* Offres de coaching : elles aussi défilent sur le côté. */
	.fm-coffers { display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fm-gutter, 16px); margin-inline: calc(var(--fm-gutter, 16px) * -1); padding: 6px var(--fm-gutter, 16px) 10px; scrollbar-width: none; }
	.fm-coffers::-webkit-scrollbar { display: none; }
	.fm-coffers > * { flex: 0 0 84%; max-width: 340px; scroll-snap-align: start; }
	.fm-team > * { flex-basis: 64%; max-width: 280px; }
	.fm-team:has(> .fm-coach--round) > * { flex-basis: 42%; }
	.fm-team:has(> .fm-coach--round) .fm-coach__media { width: min(140px, 100%); }

	/* --- Cartes de tarifs --------------------------------------------- */
	/* Mode carrousel (Studio) : une formule à l'écran, on glisse ou on choisit
	   « Sans / Avec cours collectifs » au-dessus. */
	.fm-plans--m-swipe .fm-pfam { display: flex; gap: 4px; margin: 2px 0 6px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 7%, transparent); }
	.fm-pfam__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.15; cursor: pointer; transition: background-color .25s, box-shadow .25s, color .25s; }
	.fm-pfam__btn > span { text-align: center; }
	.fm-pfam__btn > span svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
	.fm-pfam__btn[aria-pressed="true"] { background: var(--fm-bg, #fff); color: var(--fm-text, #0a0a0a); box-shadow: 0 2px 10px -3px rgb(0 0 0 / .22); }
	.fm-pfam__btn[aria-pressed="true"][data-kind="group"] { color: var(--fm-primary-text, #C60518); }
	.fm-plans--m-swipe .fm-pgrid { display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fm-gutter, 16px); margin-inline: calc(var(--fm-gutter, 16px) * -1); padding: 16px var(--fm-gutter, 16px) 12px; scrollbar-width: none; }
	.fm-plans--m-swipe .fm-pgrid::-webkit-scrollbar { display: none; }
	.fm-plans--m-swipe .fm-pgrid > .fm-pcard { flex: 0 0 86%; max-width: 360px; scroll-snap-align: start; margin: 0; }
	.fm-plans--m-swipe .fm-pgrid > .fm-pcard[hidden] { display: none !important; }

	.fm-pcard { --fm-pcard-pad: 20px; }
	.fm-plans:not(.fm-plans--s-banner) .fm-pcard { padding: 22px 20px 20px !important; }
	.fm-plans--s-banner .fm-pcard__top { padding: 22px 20px; }
	.fm-plans--s-banner .fm-pcard__features { padding: 18px 20px 0; }
	.fm-plans--s-banner .fm-pcard__note { padding: 16px 20px 20px; }
	.fm-plans--s-banner .fm-pcard__upsell { margin-inline: 20px; }
	.fm-plans--s-banner .fm-pcard > .fm-pcard__upsell:last-child { margin-bottom: 20px; }
	.fm-pcard__features { gap: 10px !important; }
	.fm-pcard__features small { display: none; }
	.fm-pcard__note { font-size: 13px; }
	.fm-plans__intro { font-size: 16px; }

	/* Séances sans abonnement : 2 × 2, compactes. */
	.fm-pricing--mini { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
	.fm-pricing--mini .fm-price { padding: 16px 14px !important; gap: 6px; }
	.fm-pricing--mini .fm-price__name { font-size: 15px !important; line-height: 1.25; }
	.fm-pricing--mini .fm-price__value { font-size: 26px !important; }
	.fm-pricing--mini .fm-price__features { margin: 4px 0 0 !important; padding: 8px 0 0 !important; }
	.fm-pricing--mini .fm-price__features li { font-size: 14px; padding-left: 0; text-align: left; }
	.fm-pricing--mini .fm-price__features li svg, .fm-pricing--mini .fm-price__features li::before { display: none; }
	.fm-pricing--mini .fm-price__note { font-size: 13px; }

	/* --- Infos pratiques : icône à gauche, cartes resserrées ------------ */
	.fm-info--cards { gap: 10px; }
	.fm-info--cards .fm-info__item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
	.fm-info--cards .fm-info__icon { grid-row: 1 / span 6; width: 40px; height: 40px; }
	.fm-info--cards .fm-info__icon svg { width: 19px; height: 19px; }
	.fm-info--cards .fm-info__item > :not(.fm-info__icon) { grid-column: 2; }
	.fm-info--cards .fm-info__title { font-size: 18px; }
	.fm-info__big { font-size: 20px; }

	/* --- HYROX : 3 photos en mosaïque (une grande, deux petites) -------- */
	.fm-hyrox { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
	.fm-hyrox > figure { margin: 0 !important; overflow: hidden; border-radius: var(--fm-radius-media, 12px); }
	.fm-hyrox > figure img { width: 100%; height: 100%; object-fit: cover; }
	.fm-hyrox > figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.fm-hyrox > figure:not(:first-child) { aspect-ratio: 1; }

	/* --- Boutons : pleine largeur, les uns sous les autres -------------- */
	.wp-block-buttons:not(.fm-keep-inline) { flex-direction: column; align-items: stretch !important; gap: 10px; }
	.wp-block-buttons:not(.fm-keep-inline) > .wp-block-button { width: 100%; margin: 0; }
	.wp-block-buttons:not(.fm-keep-inline) .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; text-align: center; text-wrap: balance; }

	/* Appel à l'action du pied de page : bouton pleine largeur. */
	.fm-footer__cta .fm-btn { width: 100%; justify-content: center; }

	/* --- Divers ------------------------------------------------------- */
	.fm-hx-stations { gap: 8px !important; }
	.fm-acc__q { padding-block: 16px; }
	.is-style-fm-checks li { font-size: 16px; }
}

/* Très petits écrans (iPhone SE, 360 px) */
@media (max-width: 380px) {
	.fm-hero__news > span:not(.fm-hero__news-tag) { max-width: 200px; }
	.fm-pricing--mini .fm-price__value { font-size: 23px !important; }
}

/* Séances et cartes (2 par ligne sur téléphone) : le bouton tient sur une ligne. */
@media (max-width: 480px) {
	.fm-pricing--mini .fm-price__btn { min-height: 44px; padding: 10px 8px !important; font-size: 13.5px !important; white-space: nowrap; }
	.fm-pricing--mini .fm-price__btn .fm-btn__icon { display: none; }
}
@media (max-width: 680px) { .fm-pricing--sessions > .fm-price.is-highlight:last-child { grid-column: 1 / -1; } }