/*
Theme Name:   Form+ Child
Theme URI:    https://formplus.nc
Description:  Thème enfant de Hello Elementor pour le site Form+ (clubs Almatrium et Vata, Nouméa). La charte vit dans le kit Elementor ; ce fichier ne reçoit que le CSS personnalisé, avec des classes préfixées fp-.
Author:       Mindflurry
Template:     hello-elementor
Version:      1.0.9
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  formplus-child
*/

/* ==========================================================================
   Mode d'emploi
   - Le champ « Version » ci-dessus sert de cache-buster : l'incrémenter
     (1.0.1, 1.0.2…) à chaque modification de ce fichier, puis vider le
     cache LiteSpeed.
   - Aucune couleur ni police en dur : utiliser les variables --fp-* ci-dessous,
     qui reprennent les couleurs et typographies globales du kit Elementor.
   - Toute classe ajoutée dans Elementor (Avancé › Classes CSS) commence
     par fp- : fp-hero, fp-card, fp-mobile-bar…
   ========================================================================== */


/* ==========================================================================
   Variables de charte
   Valeurs définies dans le kit Elementor
   (Réglages du site › Couleurs globales / Typographie globale).
   Déclarées sur body, là où Elementor pose les variables --e-global-*.
   ========================================================================== */
body {
	--fp-color-primary:   var(--e-global-color-primary);   /* Encre */
	--fp-color-secondary: var(--e-global-color-secondary); /* Orange foncé */
	--fp-color-text:      var(--e-global-color-text);      /* Encre douce */
	--fp-color-accent:    var(--e-global-color-accent);    /* Orange Form+ */
	--fp-color-dark:      var(--e-global-color-212fea2);   /* Fond sombre */
	--fp-color-light:     var(--e-global-color-7b70faa);   /* Blanc */
	--fp-color-paper:     var(--e-global-color-fppaper);   /* Papier */
	--fp-color-silver:    var(--e-global-color-fpargnt);   /* Argent */
	--fp-color-line:      var(--e-global-color-fpligne);   /* Ligne */
	--fp-color-muted:     var(--e-global-color-fpgrist);   /* Gris texte */
	--fp-color-orange-text: var(--e-global-color-fporant); /* Orange texte */

	--fp-font-primary:    var(--e-global-typography-primary-font-family);
	--fp-font-secondary:  var(--e-global-typography-secondary-font-family);
	--fp-font-text:       var(--e-global-typography-text-font-family);
	--fp-font-accent:     var(--e-global-typography-accent-font-family);

	--fp-radius-small:    10px;
	--fp-radius-card:     16px;
	--fp-radius-panel:    24px;
	--fp-shadow-soft:     0 1px 2px color-mix(in srgb, var(--fp-color-primary) 6%, transparent),
	                      0 12px 32px -18px color-mix(in srgb, var(--fp-color-primary) 28%, transparent);
	--fp-shadow-lift:     0 2px 4px color-mix(in srgb, var(--fp-color-primary) 6%, transparent),
	                      0 28px 56px -24px color-mix(in srgb, var(--fp-color-primary) 34%, transparent);
	--fp-shadow-button:   0 12px 24px -14px color-mix(in srgb, var(--fp-color-primary) 60%, transparent);
	--fp-ease:            cubic-bezier(.2, .7, .2, 1);

	/* Motif « + » du logo, utilisé comme masque (sa couleur vient de background-color) */
	--fp-plus:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 14v72M14 50h72' fill='none' stroke='black' stroke-width='22' stroke-linecap='round'/%3E%3C/svg%3E");
	--fp-plus-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 15v10M15 20h10' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* ==========================================================================
   CSS personnalisé du site
   Une section par composant, dans l'ordre d'apparition sur le site.
   ========================================================================== */

/* --- Focus clavier visible (tout le site) -------------------------------- */
:focus-visible {
	outline: 2px solid var(--fp-color-accent);
	outline-offset: 3px;
}

/* --- Boutons : léger soulèvement au survol --------------------------------
   Forme pilule, couleurs et typographie viennent du kit (Réglages du site › Boutons). */
.elementor-button {
	transition: translate .25s var(--fp-ease), box-shadow .25s var(--fp-ease), background-color .2s ease, color .2s ease;
}
.elementor-button:hover,
.elementor-button:focus-visible {
	translate: 0 -2px;
	box-shadow: var(--fp-shadow-button);
}

/* --- Bouton secondaire ---------------------------------------------------
   Widget Bouton › Avancé › Classes CSS : fp-btn--secondary
   Fond blanc, filet fin encre ; survol en encre.                           */
.fp-btn--secondary .elementor-button {
	background-color: var(--fp-color-light);
	color: var(--fp-color-primary);
	box-shadow: inset 0 0 0 1px var(--fp-color-primary);
}
.fp-btn--secondary .elementor-button:hover,
.fp-btn--secondary .elementor-button:focus-visible {
	background-color: var(--fp-color-primary);
	color: var(--fp-color-light);
	box-shadow: var(--fp-shadow-button);
}

/* --- Lien fléché ---------------------------------------------------------
   Widget Bouton › Avancé › Classes CSS : fp-link-arrow                    */
.fp-link-arrow .elementor-button {
	background-color: transparent;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--fp-color-primary);
}
.fp-link-arrow .elementor-button:hover,
.fp-link-arrow .elementor-button:focus-visible {
	background-color: transparent;
	box-shadow: none;
	translate: none;
	color: var(--fp-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.fp-link-arrow .elementor-button-text::after {
	content: "\2192";
	display: inline-block;
	margin-left: .4em;
	color: var(--fp-color-accent);
	transition: transform .25s var(--fp-ease);
}
.fp-link-arrow .elementor-button:hover .elementor-button-text::after,
.fp-link-arrow .elementor-button:focus-visible .elementor-button-text::after {
	transform: translateX(4px);
}

/* --- Header clair ---------------------------------------------------------
   Section du header › Avancé › Classes CSS : fp-header                    */
.fp-header {
	background-color: color-mix(in srgb, var(--fp-color-light) 86%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--fp-color-line) 70%, transparent);
}

/* --- Logo en pastille noire (le logo a un texte blanc) --------------------
   Widget Image › Avancé › Classes CSS : fp-logo-badge                    */
.fp-logo-badge img {
	background-color: var(--fp-color-dark);
	padding: 8px 12px;
	border-radius: var(--fp-radius-small);
}

/* --- Carte -----------------------------------------------------------------
   Conteneur › Avancé › Classes CSS : fp-card                              */
.e-con.fp-card,
.fp-card {
	background-color: var(--fp-color-light);
	border: 1px solid var(--fp-color-line);
	border-radius: var(--fp-radius-card);
	box-shadow: var(--fp-shadow-soft);
	overflow: hidden;
	transition: translate .35s var(--fp-ease), box-shadow .35s var(--fp-ease), border-color .35s ease;
}
.e-con.fp-card:hover,
.fp-card:hover {
	translate: 0 -4px;
	box-shadow: var(--fp-shadow-lift);
	border-color: color-mix(in srgb, var(--fp-color-accent) 40%, var(--fp-color-line));
}

/* --- Panneau sombre arrondi (avis, bandeau cours) --------------------------
   Conteneur › Avancé › Classes CSS : fp-panel
   Halos orange + quadrillage fin qui s'estompe.                            */
.e-con.fp-panel,
.fp-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--fp-radius-panel);
	background-image:
		radial-gradient(560px circle at 100% 0%, color-mix(in srgb, var(--fp-color-accent) 30%, transparent), transparent 65%),
		radial-gradient(440px circle at 0% 100%, color-mix(in srgb, var(--fp-color-secondary) 16%, transparent), transparent 70%);
}
.fp-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(color-mix(in srgb, var(--fp-color-light) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--fp-color-light) 7%, transparent) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 80% 20%, black, transparent 70%);
	mask-image: radial-gradient(ellipse at 80% 20%, black, transparent 70%);
}

/* --- Colonne avis Google (shortcode Trustindex) ---------------------------
   Conteneur › Avancé › Classes CSS : fp-reviews                           */
.e-con.fp-reviews,
.fp-reviews {
	background-color: var(--fp-color-light);
	border-radius: var(--fp-radius-card);
	box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--fp-color-primary) 70%, transparent);
	min-height: 220px;
}

/* --- Hero : halos, trame de points et grand « + » en filigrane -------------
   Conteneur › Avancé › Classes CSS : fp-hero                              */
.e-con.fp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image:
		radial-gradient(760px circle at 88% 8%, color-mix(in srgb, var(--fp-color-accent) 36%, transparent), transparent 62%),
		radial-gradient(600px circle at 4% 100%, color-mix(in srgb, var(--fp-color-secondary) 22%, transparent), transparent 70%),
		radial-gradient(color-mix(in srgb, var(--fp-color-light) 11%, transparent) 1px, transparent 1.6px);
	background-size: auto, auto, 22px 22px;
}
.fp-hero::after {
	content: "";
	position: absolute;
	right: -5vw;
	bottom: -9vw;
	z-index: -1;
	width: min(46vw, 640px);
	aspect-ratio: 1;
	pointer-events: none;
	background-image: linear-gradient(135deg, var(--fp-color-accent), var(--fp-color-secondary));
	opacity: .2;
	-webkit-mask: var(--fp-plus) center / contain no-repeat;
	mask: var(--fp-plus) center / contain no-repeat;
	animation: fp-float 16s ease-in-out infinite;
}

/* --- Hero avec vidéo de fond -----------------------------------------------
   Conteneur : classes fp-hero fp-hero--video (Arrière-plan › Vidéo).
   La vidéo passe sous un voile sombre qui reprend halos, trame de points
   et fondu vers le bas ; le grand « + » animé reste au-dessus.            */
.e-con.fp-hero--video {
	background-color: var(--fp-color-dark);
	background-image: none;
}
.e-con.fp-hero--video .elementor-background-video-container {
	z-index: -3;
}
.e-con.fp-hero--video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	pointer-events: none;
	background-image:
		radial-gradient(760px circle at 88% 8%, color-mix(in srgb, var(--fp-color-accent) 34%, transparent), transparent 62%),
		radial-gradient(600px circle at 4% 100%, color-mix(in srgb, var(--fp-color-secondary) 22%, transparent), transparent 70%),
		radial-gradient(color-mix(in srgb, var(--fp-color-light) 10%, transparent) 1px, transparent 1.6px),
		linear-gradient(to bottom, transparent 65%, var(--fp-color-dark) 100%),
		linear-gradient(90deg, color-mix(in srgb, var(--fp-color-dark) 90%, transparent) 0%, color-mix(in srgb, var(--fp-color-dark) 66%, transparent) 55%, color-mix(in srgb, var(--fp-color-dark) 45%, transparent) 100%);
	background-size: auto, auto, 22px 22px, auto, auto;
}
@media (max-width: 767px) {
	.e-con.fp-hero--video::before {
		background-image:
			radial-gradient(420px circle at 100% 0%, color-mix(in srgb, var(--fp-color-accent) 30%, transparent), transparent 65%),
			radial-gradient(color-mix(in srgb, var(--fp-color-light) 10%, transparent) 1px, transparent 1.6px),
			linear-gradient(to bottom, color-mix(in srgb, var(--fp-color-dark) 72%, transparent) 0%, color-mix(in srgb, var(--fp-color-dark) 84%, transparent) 100%);
		background-size: auto, 22px 22px, auto;
	}
}

/* --- Bandeau défilant des disciplines (sous le hero) ----------------------
   Conteneur : fp-marquee-band ; widget HTML :
   <div class="fp-marquee" aria-hidden="true"><div class="fp-marquee__track">…</div></div> */
.e-con.fp-marquee-band {
	overflow: hidden;
}
.fp-marquee {
	overflow: hidden;
	padding: 20px 0 26px;
	border-top: 1px solid color-mix(in srgb, var(--fp-color-light) 10%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.fp-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: fp-marquee 48s linear infinite;
}
.fp-marquee__track span {
	flex: none;
	padding: 0 22px;
	font-family: var(--fp-font-primary);
	font-size: clamp(30px, 4.6vw, 64px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--fp-color-light) 45%, transparent);
}
.fp-marquee__track .fp-marquee__plus {
	padding: 0 6px;
	color: var(--fp-color-accent);
	-webkit-text-stroke: 0;
}
.fp-marquee:hover .fp-marquee__track {
	animation-play-state: paused;
}

/* --- Halo orange doux dans un angle (sections claires) --------------------
   Conteneur › Classes CSS : fp-bg-glow (haut droite) ou fp-bg-glow fp-bg-glow--left (bas gauche) */
.e-con.fp-bg-glow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.fp-bg-glow::after {
	content: "";
	position: absolute;
	top: -280px;
	right: -240px;
	z-index: -1;
	width: 680px;
	aspect-ratio: 1;
	border-radius: 50%;
	pointer-events: none;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--fp-color-accent) 20%, transparent), transparent 65%);
	animation: fp-float 20s ease-in-out infinite;
}
.fp-bg-glow--left::after {
	top: auto;
	right: auto;
	bottom: -300px;
	left: -260px;
	animation-delay: -8s;
}

/* --- Trame de points (sections argent) ------------------------------------
   Conteneur › Classes CSS : fp-bg-dots                                    */
.e-con.fp-bg-dots {
	background-image: radial-gradient(color-mix(in srgb, var(--fp-color-primary) 11%, transparent) 1px, transparent 1.5px);
	background-size: 20px 20px;
}

/* --- Motif de petits « + » qui s'estompe (haut droite) ---------------------
   Conteneur › Classes CSS : fp-bg-plus                                    */
.e-con.fp-bg-plus {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.fp-bg-plus::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 55%;
	height: 75%;
	pointer-events: none;
	background-color: var(--fp-color-accent);
	opacity: .35;
	-webkit-mask-image: var(--fp-plus-tile), linear-gradient(to bottom left, black 5%, transparent 70%);
	-webkit-mask-size: 36px 36px, 100% 100%;
	-webkit-mask-repeat: repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-image: var(--fp-plus-tile), linear-gradient(to bottom left, black 5%, transparent 70%);
	mask-size: 36px 36px, 100% 100%;
	mask-repeat: repeat, no-repeat;
	mask-composite: intersect;
}

/* --- Appel à l'action final : dégradé orange et « + » qui tourne -----------
   Conteneur › Classes CSS : fp-final-cta                                  */
.e-con.fp-final-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: linear-gradient(120deg, var(--fp-color-accent) 0%, color-mix(in srgb, var(--fp-color-accent) 72%, var(--fp-color-secondary)) 100%);
}
.fp-final-cta::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4%;
	z-index: -1;
	width: min(34vw, 440px);
	aspect-ratio: 1;
	translate: 0 -50%;
	pointer-events: none;
	background-color: var(--fp-color-light);
	opacity: .16;
	-webkit-mask: var(--fp-plus) center / contain no-repeat;
	mask: var(--fp-plus) center / contain no-repeat;
	animation: fp-spin 60s linear infinite;
}

/* --- Liste à puces « + » (motif du logo) ----------------------------------
   Widget Liste d'icônes › Avancé › Classes CSS : fp-plus-list             */
.fp-plus-list .elementor-icon-list-icon i {
	color: var(--fp-color-accent);
}
.fp-plus-list .elementor-icon-list-icon svg {
	fill: var(--fp-color-accent);
}

/* --- Pastilles de disciplines (sur fond sombre) ---------------------------
   Widget Éditeur de texte : <ul class="fp-chips"><li>…</li></ul>          */
.fp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fp-chips li {
	padding: 10px 18px;
	border: 1px solid color-mix(in srgb, var(--fp-color-light) 22%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--fp-color-light) 6%, transparent);
	color: var(--fp-color-light);
	font-family: var(--fp-font-text);
	font-weight: 500;
	line-height: 1.2;
	transition: border-color .25s ease, background-color .25s ease;
}
.fp-chips li:hover {
	border-color: var(--fp-color-accent);
	background-color: color-mix(in srgb, var(--fp-color-accent) 14%, transparent);
}

/* --- Barre d'action mobile -----------------------------------------------
   Conteneur du footer avec la classe fp-mobile-bar (Réserver / S'abonner),
   fixé en bas de l'écran sous 768 px, masqué au-delà.                     */
.e-con.fp-mobile-bar,
.fp-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
	background-color: color-mix(in srgb, var(--fp-color-light) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-top: 1px solid var(--fp-color-line);
	box-shadow: 0 -12px 28px -20px color-mix(in srgb, var(--fp-color-primary) 40%, transparent);
}
.fp-mobile-bar .elementor-widget-button {
	flex: 1 1 0;
}
.fp-mobile-bar .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 10px 8px;
	font-size: 13px;
	letter-spacing: .02em;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
}
@media (max-width: 767px) {
	body:has(.fp-mobile-bar) {
		padding-bottom: 80px;
	}
	.fp-hero::after {
		right: -24vw;
		bottom: -18vw;
		width: 78vw;
		opacity: .14;
	}
	.fp-final-cta::after {
		top: auto;
		right: -20vw;
		bottom: -24vw;
		width: 70vw;
		translate: none;
	}
	.fp-bg-glow::after {
		width: 420px;
	}
}
@media (min-width: 768px) {
	.e-con.fp-mobile-bar,
	.fp-mobile-bar {
		display: none;
	}
}

/* --- Texte réservé aux lecteurs d'écran ---------------------------------- */
.fp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Planning (aperçu à onglets) -------------------------------------------
   Widget HTML : <div class="fp-planning"> avec des boutons radio
   (Tous / Almatrium / Vata) et une liste de .fp-slot[data-club].
   Le filtrage se fait en CSS, sans JavaScript.                             */
.fp-planning {
	display: grid;
	gap: 20px;
}
.fp-planning__filters {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	min-inline-size: 0;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--fp-color-line);
	border-radius: 999px;
	background-color: var(--fp-color-light);
	box-shadow: var(--fp-shadow-soft);
}
.fp-planning__filters label {
	position: relative;
	margin: 0;
	cursor: pointer;
}
.fp-planning__filters input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.fp-planning__filters label span {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--fp-font-primary);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fp-color-primary);
	transition: background-color .2s ease, color .2s ease;
}
.fp-planning__filters label:hover span {
	background-color: var(--fp-color-silver);
}
.fp-planning__filters input:checked + span {
	background-color: var(--fp-color-accent);
	color: var(--fp-color-primary);
}
.fp-planning__filters input:focus-visible + span {
	outline: 2px solid var(--fp-color-primary);
	outline-offset: 2px;
}
.fp-planning__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fp-planning:has(input[value="almatrium"]:checked) .fp-slot:not([data-club="almatrium"]),
.fp-planning:has(input[value="vata"]:checked) .fp-slot:not([data-club="vata"]) {
	display: none;
}
.fp-slot {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 14px 18px 14px 14px;
	border: 1px solid var(--fp-color-line);
	border-radius: var(--fp-radius-card);
	background-color: var(--fp-color-light);
	box-shadow: var(--fp-shadow-soft);
	transition: translate .3s var(--fp-ease), box-shadow .3s var(--fp-ease), border-color .3s ease;
}
.fp-slot:hover {
	translate: 0 -3px;
	box-shadow: var(--fp-shadow-lift);
	border-color: color-mix(in srgb, var(--fp-color-accent) 40%, var(--fp-color-line));
}
.fp-slot__time {
	flex: none;
	display: grid;
	place-items: center;
	gap: 6px;
	min-width: 84px;
	margin: 0;
	padding: 12px 10px;
	border-radius: var(--fp-radius-small);
	background-color: var(--fp-color-dark);
	color: var(--fp-color-light);
	text-align: center;
}
.fp-slot__time strong {
	font-family: var(--fp-font-primary);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}
.fp-slot__time span {
	font-family: var(--fp-font-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--fp-color-light) 72%, transparent);
}
.fp-slot__name {
	margin: 0;
	font-family: var(--fp-font-primary);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fp-color-primary);
}
.fp-slot__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 8px 0 0;
	font-family: var(--fp-font-text);
	font-size: 14px;
	line-height: 1.4;
	color: var(--fp-color-muted);
}
.fp-slot__club {
	padding: 3px 10px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--fp-color-accent) 14%, transparent);
	color: var(--fp-color-orange-text);
	font-size: 12px;
	font-weight: 600;
}
.fp-planning__note {
	margin: 0;
	font-family: var(--fp-font-text);
	font-size: 13px;
	color: var(--fp-color-muted);
}
@media (max-width: 767px) {
	.fp-planning__grid {
		grid-template-columns: 1fr;
	}
	.fp-slot {
		gap: 14px;
	}
	.fp-slot__time {
		min-width: 72px;
	}
}

/* --- Photos des cartes (clubs, coachs) -------------------------------------
   Conteneur photo › Avancé › Classes CSS : fp-photo-box fp-photo-box--club
   (ou fp-photo-box--coach). Dedans, un widget Image avec la classe fp-photo.
   Recadrage automatique (16:10 clubs, 4:5 coachs), zoom doux au survol.
   fp-photo-box--demo ajoute le badge « Photo d'illustration » : à retirer
   en même temps que l'on pose les vraies photos.                          */
.e-con.fp-photo-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--fp-color-dark);
}
.elementor-widget-image.fp-photo {
	width: 100%;
}
.elementor-widget-image.fp-photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: var(--fp-photo-pos, 50% 50%);
	border-radius: 0;
	transition: scale .7s var(--fp-ease);
}
.fp-photo-box--coach .elementor-widget-image.fp-photo img {
	aspect-ratio: 4 / 5;
}
.fp-card:hover .elementor-widget-image.fp-photo img {
	scale: 1.04;
}
@media (max-width: 767px) {
	.fp-photo-box--coach .elementor-widget-image.fp-photo img {
		aspect-ratio: 1 / 1;
		object-position: 50% 30%;
	}
}
.fp-photo-box--demo::after {
	content: "Photo d\2019 illustration";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 10px;
	border: 1px solid color-mix(in srgb, var(--fp-color-light) 22%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--fp-color-dark) 55%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-family: var(--fp-font-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--fp-color-light) 90%, transparent);
	pointer-events: none;
}

/* --- Apparition au scroll (navigateurs compatibles uniquement) ------------
   Sans support, tout reste visible normalement.                           */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fp-card,
		.fp-slot,
		.fp-reveal {
			animation: fp-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 32%;
		}
	}
}

/* --- Animations ------------------------------------------------------------ */
@keyframes fp-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%      { transform: translate3d(-14px, -20px, 0) rotate(6deg); }
}
@keyframes fp-spin {
	to { transform: rotate(360deg); }
}
@keyframes fp-marquee {
	to { transform: translateX(-50%); }
}
@keyframes fp-reveal {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* --- Réduction des animations -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.fp-card,
	.fp-slot,
	.elementor-widget-image.fp-photo img,
	.fp-chips li,
	.fp-link-arrow .elementor-button-text::after {
		transition: none;
	}
	.elementor-button:hover,
	.elementor-button:focus-visible,
	.fp-card:hover,
	.fp-slot:hover {
		translate: none;
	}
	.fp-card:hover .elementor-widget-image.fp-photo img {
		scale: none;
	}
	.fp-hero::after,
	.fp-bg-glow::after,
	.fp-final-cta::after,
	.fp-marquee__track {
		animation: none;
	}
	.fp-hero--video .elementor-background-video-container {
		display: none;
	}
}