/*
Theme Name: Buchilien
Theme URI: https://alexandrevergnaud.fr
Author: Alexandre Vergnaud
Author URI: https://alexandrevergnaud.fr
Description: Thème pour salles de sport
Version: 1.8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =========================================================
   Socle de design : toutes les valeurs du thème
   ========================================================= */

:root {
	/* Fonds */
	--cbu-fond: #25292b;
	--cbu-fond-profond: #1e2123;
	--cbu-fond-carte: #2a2e31;
	--cbu-fond-clair: #2e3236;

	/* Accents et teintes de survol */
	--cbu-jaune: #feca18;
	--cbu-jaune-fonce: #e3b20a;
	--cbu-rouge: #d6302a;
	--cbu-rouge-fonce: #b42520;
	--cbu-rouge-texte: #ff6b5e; /* rouge lisible en texte sur fond sombre (messages d'erreur) */

	/* Textes et traits */
	--cbu-blanc: #ffffff;
	--cbu-noir: #111314;
	--cbu-texte-doux: #d4d7d9;
	--cbu-texte: #a7acb0;
	--cbu-indice: #858b90; /* texte d'exemple dans les champs */
	--cbu-trait: #3b4044;
	--cbu-trait-champ: #6b7277; /* bordure des champs, contraste 3:1 */

	/* Voiles sur photo */
	--cbu-voile-leger: rgba(0, 0, 0, 0.3);
	--cbu-voile-fort: rgba(0, 0, 0, 0.7);
	--cbu-verre: rgba(37, 41, 43, 0.7);
	--cbu-panneau: rgba(37, 41, 43, 0.95);

	/* Polices */
	--cbu-police: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--cbu-police-titre: "Helvetica Neue Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Tailles (1rem = 10px). Les tailles fluides glissent entre
	   un écran de 360px et un écran de 1280px. */
	--cbu-taille-affiche: clamp(4.4rem, 2.21rem + 6.087vw, 10rem);
	--cbu-taille-titre-page: clamp(4rem, 2.43rem + 4.348vw, 8rem);
	--cbu-taille-h2: clamp(3.2rem, 1.95rem + 3.478vw, 6.4rem);
	--cbu-taille-h3: clamp(2.4rem, 1.93rem + 1.304vw, 3.6rem);
	--cbu-taille-h4: clamp(1.8rem, 1.64rem + 0.435vw, 2.2rem);
	--cbu-taille-prix: clamp(3.2rem, 2.89rem + 0.87vw, 4rem);
	--cbu-taille-l: clamp(1.8rem, 1.53rem + 0.761vw, 2.5rem);
	--cbu-taille-m: clamp(1.8rem, 1.72rem + 0.217vw, 2rem);
	--cbu-taille-corps: clamp(1.6rem, 1.56rem + 0.109vw, 1.7rem);
	--cbu-taille-s: clamp(1.4rem, 1.36rem + 0.109vw, 1.5rem);
	--cbu-taille-xs: 1.3rem;
	--cbu-taille-label: 1.2rem;
	--cbu-interligne: 1.6;

	/* Espacements */
	--cbu-esp-1: 0.5rem;
	--cbu-esp-2: 1rem;
	--cbu-esp-3: 1.5rem;
	--cbu-esp-4: 2rem;
	--cbu-esp-5: 3rem;
	--cbu-esp-6: 5rem;
	--cbu-section: clamp(6rem, 13vh, 13rem);
	--cbu-entete: 15vh;

	/* Formes et effets */
	--cbu-rayon-s: 4px;
	--cbu-rayon-m: 10px;
	--cbu-rayon-l: 20px;
	--cbu-ombre: 0 0 70px rgba(0, 0, 0, 0.3);
	--cbu-ombre-survol: 0 8px 24px rgba(0, 0, 0, 0.35);
	--cbu-ombre-texte: 0 2px 30px rgba(0, 0, 0, 0.45);
	--cbu-anneau: 0 0 0 3px var(--cbu-fond), 0 0 0 5px var(--cbu-jaune);
	--cbu-transition: 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
	--cbu-transition-photo: 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   Base
   ========================================================= */

html {
	font-size: 62.5%;
	margin: 0px !important; /* écrase la marge de la barre d'administration WordPress */
}

body {
	background-color: var(--cbu-fond);
	color: var(--cbu-blanc);
	font-family: var(--cbu-police);
	font-size: var(--cbu-taille-corps);
	line-height: var(--cbu-interligne);
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--cbu-police-titre);
	text-transform: uppercase;
	line-height: 0.95;
	text-wrap: balance;
}

h1 {
	font-size: var(--cbu-taille-affiche);
	margin-bottom: var(--cbu-esp-4);
	font-weight: 900;
	text-shadow: var(--cbu-ombre-texte);
}

h1 + p > span {
	font-size: var(--cbu-taille-m);
	color: var(--cbu-blanc);
}

h2 {
	font-size: var(--cbu-taille-h2);
	font-weight: 700;
}

h3 {
	font-size: var(--cbu-taille-h3);
	font-weight: 700;
}

h4 {
	font-size: var(--cbu-taille-h4);
}

p {
	font-size: var(--cbu-taille-corps);
	line-height: var(--cbu-interligne);
	color: var(--cbu-texte);
	text-wrap: pretty;
}

/* Le bloc de texte entier est limité et centré, plutôt que chaque
   paragraphe : les lignes restent lisibles sans être tassées à gauche. */
*.content {
	max-width: 96rem;
	margin-inline: auto;
}

*.content p {
	margin-bottom: 1.2em;
}

:focus-visible {
	outline: none;
	box-shadow: var(--cbu-anneau);
	border-radius: var(--cbu-rayon-s);
}

strong {
	color: var(--cbu-blanc);
}

a, a:hover, a:active {
	color: inherit;
}

a h4 {
	padding: var(--cbu-esp-4) 0;
}

a.link_block {
	text-decoration: none;
}

*.content {
	text-align: initial;
}

/* =========================================================
   Mise en page
   ========================================================= */

.block {
	padding-block: var(--cbu-section);
}

header + section {
	padding-top: var(--cbu-entete);
}

.dark,
.events,
.grids,
.salles,
.demonstration {
	background-color: var(--cbu-fond-profond);
}

.separateur {
	padding: var(--cbu-esp-5) 0;
}

.row-centered {
	text-align: center;
}

.col-centered {
	display: inline-block;
	float: none;
	margin-right: -4px;
}

.grille {
	padding-block: 0;
}

.shadow {
	box-shadow: var(--cbu-ombre);
}

/* =========================================================
   En-tête et menu
   ========================================================= */

/* Les ancres (#planning, #joinus) ne passent pas sous l'en-tête fixe. */
html {
	scroll-padding-top: 12rem;
}

html.menu-ouvert {
	overflow: hidden;
}

.entete {
	position: fixed;
	inset: 0 0 auto;
	z-index: 1030;
	pointer-events: none; /* la zone vide autour du logo laisse passer les clics */
}

.entete_barre > * {
	pointer-events: auto;
}

/* Voile en haut de l'écran une fois la page défilée : le logo et le menu
   ne flottent plus directement sur le contenu. */
.entete::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 16rem;
	background: linear-gradient(to bottom, var(--cbu-fond-profond) 15%, rgba(30, 33, 35, 0.8) 55%, rgba(30, 33, 35, 0));
	opacity: 0;
	transition: opacity var(--cbu-transition-photo);
}

.entete.est-reduite::before {
	opacity: 1;
}

.entete_barre {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--cbu-esp-3);
	max-width: 117rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.entete_logo {
	flex: none;
	border-radius: 50%;
}

.entete_logo:focus-visible {
	outline: none;
	box-shadow: var(--cbu-anneau);
}

.logo {
	display: block;
	width: auto;
	height: clamp(9.6rem, 20vh, 18rem);
	margin-top: clamp(2.4rem, 5vh, 4.8rem);
	transition: height var(--cbu-transition), margin var(--cbu-transition);
}

.est-reduite .logo {
	height: clamp(5.6rem, 10vh, 8rem);
	margin-top: var(--cbu-esp-3);
}

/* Onglet des horaires, accroché au logo. js/menu.js ajoute « Ouvert » ou « Fermé ». */
.entete_horaires {
	flex: none;
	display: flex;
	align-items: center;
	margin: 0 auto 0 0;
	padding: var(--cbu-esp-1) var(--cbu-esp-3) 0.7rem;
	background-color: var(--cbu-rouge);
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
	font-size: var(--cbu-taille-s);
	line-height: 1.3;
	color: var(--cbu-blanc);
	white-space: nowrap;
}

.entete_etat:empty {
	display: none;
}

.entete_etat {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-right: 0.8rem;
	padding-right: 0.8rem;
	border-right: 1px solid rgba(255, 255, 255, 0.45);
	font-weight: 700;
}

.entete_etat::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background-color: currentColor;
}

.est-ouvert .entete_etat::before {
	animation: entete-pouls 2.4s ease-out infinite;
}

.est-ferme .entete_etat::before {
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}

@keyframes entete-pouls {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
	70%, 100% { box-shadow: 0 0 0 0.7rem rgba(255, 255, 255, 0); }
}

/* Bouton « Séance découverte » et bouton Menu : mobile uniquement. */
.entete_essai,
.entete_bouton,
.menu-principal_infos {
	display: none;
}

/* Menu sur grand écran : panneau flouté accroché en haut. */
.menu-principal_liste {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin: 0;
	padding: var(--cbu-esp-2) var(--cbu-esp-3);
	list-style: none;
	background-color: var(--cbu-verre);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-top: 0;
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
}

.menu-principal_liste > li {
	display: flex;
}

.menu-principal_liste a {
	position: relative;
	display: block;
	padding: 0.8rem 1.2rem;
	border-radius: var(--cbu-rayon-s);
	color: var(--cbu-texte-doux);
	font-size: var(--cbu-taille-s);
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--cbu-transition), background-color var(--cbu-transition), box-shadow var(--cbu-transition);
}

/* Trait jaune sous le lien survolé et sous la page en cours. */
.menu-principal_liste a::after {
	content: "";
	position: absolute;
	left: 1.2rem;
	right: 1.2rem;
	bottom: 0.2rem;
	height: 2px;
	border-radius: 1px;
	background-color: var(--cbu-jaune);
	transform: scaleX(0);
	transition: transform var(--cbu-transition);
}

.menu-principal_liste a:hover,
.menu-principal_liste a:focus {
	color: var(--cbu-blanc);
	text-decoration: none;
}

.menu-principal_liste a:hover::after,
.menu-principal_liste .current-menu-item > a::after,
.menu-principal_liste .current_page_item > a::after {
	transform: scaleX(1);
}

.menu-principal_liste .current-menu-item > a,
.menu-principal_liste .current_page_item > a {
	color: var(--cbu-jaune);
}

.menu-principal_liste a:focus-visible {
	outline: none;
	box-shadow: var(--cbu-anneau);
}

/* Liens mis en avant (classes ajoutées dans functions.php ou Apparence > Menus) :
   toujours en fin de menu, planning puis séance découverte. */
.menu-principal_liste > .menu-planning {
	order: 1;
	margin-left: var(--cbu-esp-2);
}

.menu-principal_liste > .menu-decouverte {
	order: 2;
	margin-left: var(--cbu-esp-1);
}

.menu-principal_liste > .menu-planning > a,
.menu-principal_liste > .menu-decouverte > a {
	padding: 0.7rem 1.4rem;
	font-weight: 700;
}

.menu-principal_liste > .menu-planning > a::after,
.menu-principal_liste > .menu-decouverte > a::after {
	display: none;
}

.menu-principal_liste > .menu-planning > a {
	color: var(--cbu-jaune);
	box-shadow: inset 0 0 0 1px var(--cbu-jaune);
}

.menu-principal_liste > .menu-planning > a:hover {
	background-color: var(--cbu-jaune);
	color: var(--cbu-noir);
}

.menu-principal_liste > .menu-planning > a:focus-visible {
	box-shadow: inset 0 0 0 1px var(--cbu-jaune), var(--cbu-anneau);
}

.menu-principal_liste > .menu-decouverte > a {
	background-color: var(--cbu-rouge);
	color: var(--cbu-blanc);
}

.menu-principal_liste > .menu-decouverte > a:hover {
	background-color: var(--cbu-rouge-fonce);
	color: var(--cbu-blanc);
}

/* Boutons utilisables dans le contenu des pages */
a.outlined-red,
a.outlined-yellow {
	border-radius: var(--cbu-rayon-s);
	padding: var(--cbu-esp-1) var(--cbu-esp-2);
	font-weight: 700;
}

a.outlined-red {
	background-color: var(--cbu-rouge);
	color: var(--cbu-blanc);
}

a.outlined-red:hover {
	background-color: var(--cbu-rouge-fonce);
	color: var(--cbu-blanc);
}

a.outlined-yellow {
	color: var(--cbu-jaune);
	box-shadow: inset 0 0 0 1px var(--cbu-jaune);
}

a.outlined-yellow:hover {
	background-color: var(--cbu-jaune);
	color: var(--cbu-noir);
}

/* Tablette et mobile : barre compacte + panneau plein écran.
   La bascule se fait avant que le menu ne passe sur deux lignes. */
@media (max-width: 1079px) {

	html {
		scroll-padding-top: 8.8rem;
	}

	.entete::before {
		display: none;
	}

	.entete_barre {
		align-items: center;
		gap: var(--cbu-esp-2);
		height: 7.2rem;
		max-width: none;
		padding-inline: var(--cbu-esp-3) var(--cbu-esp-2);
	}

	/* Fond de la barre une fois la page défilée */
	.entete_barre::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--cbu-panneau);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		box-shadow: 0 1px 0 var(--cbu-trait);
		opacity: 0;
		transition: opacity var(--cbu-transition);
	}

	.est-reduite .entete_barre::before {
		opacity: 1;
	}

	.logo,
	.est-reduite .logo {
		height: 5.6rem;
		margin: 0;
	}

	.entete_horaires {
		align-self: flex-start;
		margin-right: 0;
	}

	.entete_essai {
		display: block;
		flex: none;
		margin-left: auto;
		padding: 1.1rem 1.4rem;
		border-radius: var(--cbu-rayon-s);
		background-color: var(--cbu-rouge);
		color: var(--cbu-blanc);
		font-size: var(--cbu-taille-s);
		font-weight: 700;
		line-height: 1.6rem;
		white-space: nowrap;
		text-decoration: none;
		transition: background-color var(--cbu-transition), opacity var(--cbu-transition), visibility 0s;
	}

	/* Menu ouvert : le bouton du panneau prend le relais */
	.menu-ouvert .entete_essai {
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--cbu-transition), visibility 0s 0.2s;
	}

	.entete_essai:hover,
	.entete_essai:focus {
		background-color: var(--cbu-rouge-fonce);
		color: var(--cbu-blanc);
		text-decoration: none;
	}

	.entete_bouton {
		display: inline-flex;
		align-items: center;
		gap: 1rem;
		flex: none;
		min-height: 4.4rem;
		margin: 0;
		padding: 0 1.4rem;
		border: 0;
		border-radius: var(--cbu-rayon-s);
		background-color: var(--cbu-fond-clair);
		color: var(--cbu-blanc);
		font: inherit;
		font-size: var(--cbu-taille-s);
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		transition: background-color var(--cbu-transition);
	}

	.entete_bouton:hover {
		background-color: var(--cbu-trait);
	}

	.entete_essai:focus-visible,
	.entete_bouton:focus-visible {
		outline: none;
		box-shadow: var(--cbu-anneau);
	}

	/* Trois traits qui deviennent une croix */
	.entete_bouton-icone {
		position: relative;
		width: 20px;
		height: 14px;
	}

	.entete_bouton-icone::before,
	.entete_bouton-icone::after,
	.entete_bouton-icone > span {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 1px;
		background-color: currentColor;
		transition: transform var(--cbu-transition), opacity var(--cbu-transition);
	}

	.entete_bouton-icone::before { top: 0; }
	.entete_bouton-icone > span { top: 6px; }
	.entete_bouton-icone::after { top: 12px; }

	.entete_bouton[aria-expanded="true"] .entete_bouton-icone::before {
		transform: translateY(6px) rotate(45deg);
	}

	.entete_bouton[aria-expanded="true"] .entete_bouton-icone > span {
		opacity: 0;
	}

	.entete_bouton[aria-expanded="true"] .entete_bouton-icone::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Panneau plein écran, sous la barre */
	.menu-principal {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		padding: 10.4rem var(--cbu-esp-4) var(--cbu-esp-5);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--cbu-fond-profond);
		text-align: left;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1.6rem);
		transition: opacity var(--cbu-transition), transform var(--cbu-transition), visibility 0s 0.2s;
	}

	.menu-ouvert .menu-principal {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--cbu-transition), transform var(--cbu-transition);
	}

	.menu-principal_liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: 60rem;
		padding: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
	}

	.menu-principal_liste > li {
		display: block;
	}

	.menu-ouvert .menu-principal_liste > li {
		animation: menu-entree 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.menu-principal_liste > li:nth-child(2) { animation-delay: 40ms; }
	.menu-principal_liste > li:nth-child(3) { animation-delay: 80ms; }
	.menu-principal_liste > li:nth-child(4) { animation-delay: 120ms; }
	.menu-principal_liste > li:nth-child(5) { animation-delay: 160ms; }
	.menu-principal_liste > li:nth-child(n+6) { animation-delay: 200ms; }

	.menu-principal_liste a {
		padding: 1.4rem 0;
		border-bottom: 1px solid var(--cbu-trait);
		border-radius: 0;
		color: var(--cbu-blanc);
		font-family: var(--cbu-police-titre);
		font-size: var(--cbu-taille-h3);
		font-weight: 700;
		line-height: 1.1;
		text-transform: uppercase;
		white-space: normal;
	}

	.menu-principal_liste a::after {
		display: none;
	}

	.menu-principal_liste a:hover,
	.menu-principal_liste a:focus {
		color: var(--cbu-jaune);
	}

	.menu-principal_liste > .menu-planning,
	.menu-principal_liste > .menu-decouverte {
		margin-left: 0;
	}

	.menu-principal_liste > .menu-planning {
		margin-top: var(--cbu-esp-5);
	}

	.menu-principal_liste > .menu-decouverte {
		margin-top: var(--cbu-esp-2);
	}

	.menu-principal_liste > .menu-planning > a,
	.menu-principal_liste > .menu-decouverte > a {
		padding: 1.5rem var(--cbu-esp-3);
		border-bottom: 0;
		border-radius: var(--cbu-rayon-s);
		font-family: var(--cbu-police);
		font-size: var(--cbu-taille-m);
		line-height: 1.2;
		text-align: center;
		text-transform: none;
	}

	.menu-principal_infos {
		display: block;
		max-width: 60rem;
		margin-top: auto;
		padding-top: var(--cbu-esp-5);
		color: var(--cbu-texte);
		font-size: var(--cbu-taille-s);
	}

	.menu-principal_infos p {
		margin: 0 0 0.4rem;
	}

	.menu-principal_infos strong,
	.menu-principal_infos a {
		color: var(--cbu-blanc);
	}

	@keyframes menu-entree {
		from { opacity: 0; transform: translateY(1.2rem); }
	}
}

/* Petit téléphone : les horaires passent dans le panneau. */
@media (max-width: 599px) {

	.entete_horaires {
		display: none;
	}
}

@media (max-width: 359px) {

	.entete_bouton-texte {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* =========================================================
   Bandeau photo et boutons d'appel
   ========================================================= */

.top-page {
	height: 90vh;
	color: var(--cbu-blanc);
	text-align: center;
	vertical-align: middle;
	padding-top: var(--cbu-entete);
	position: relative;
}

.top-slider::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 19, 20, 0.55) 0%, rgba(17, 19, 20, 0.15) 40%, rgba(30, 33, 35, 0.9) 100%);
}

.top-slider > .row {
	z-index: 1;
}

.top-slider {
	background-image: url(content/images/79.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

section.top-page.top-slider {
	background-attachment: fixed;
}

.text-top-slider {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.plop {
	top: 40%;
}

.slogan {
	width: 50%;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
}

.slogan span {
	display: inline-block;
	color: var(--cbu-blanc);
	font-family: var(--cbu-police-titre);
	font-weight: 700;
	font-size: var(--cbu-taille-m);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: border-color var(--cbu-transition);
}

.slogan a,
.slogan a:hover {
	text-decoration: none;
}

.slogan a:hover span {
	border-color: var(--cbu-jaune);
}

/* Boutons : .calltoaction (blanc), --rouge (action principale),
   --jaune, --contour, --lien. Hauteur commune de 52px. */
.calltoaction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 2.8rem;
	background-color: var(--cbu-blanc);
	color: var(--cbu-noir);
	font-family: var(--cbu-police-titre);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border: none;
	border-radius: var(--cbu-rayon-s);
	cursor: pointer;
	transition: background-color var(--cbu-transition), color var(--cbu-transition), transform var(--cbu-transition), box-shadow var(--cbu-transition);
}

.calltoaction:hover {
	transform: translateY(-1px);
	background-color: var(--cbu-texte-doux);
	color: var(--cbu-noir);
	text-decoration: none;
}

.calltoaction:active {
	transform: translateY(0);
}

.calltoaction:focus-visible {
	box-shadow: var(--cbu-anneau);
}

.calltoaction:disabled {
	background-color: var(--cbu-fond-clair);
	color: var(--cbu-texte);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.calltoaction--rouge,
.color-red {
	background-color: var(--cbu-rouge);
	color: var(--cbu-blanc);
}

.calltoaction--rouge {
	box-shadow: 0 6px 20px rgba(214, 48, 42, 0.28);
}

.calltoaction--rouge:hover {
	background-color: var(--cbu-rouge-fonce);
	color: var(--cbu-blanc);
}

.calltoaction--jaune,
.color-yellow {
	background-color: var(--cbu-jaune);
	color: var(--cbu-noir);
}

.calltoaction--jaune:hover {
	background-color: var(--cbu-jaune-fonce);
}

.calltoaction--contour {
	background-color: transparent;
	color: var(--cbu-blanc);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.calltoaction--contour:hover {
	background-color: var(--cbu-blanc);
	color: var(--cbu-noir);
}

.calltoaction--lien {
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--cbu-jaune);
	font-size: 1.6rem;
}

.calltoaction--lien::after {
	content: "→";
	margin-left: 0.6rem;
	transition: transform var(--cbu-transition);
}

.calltoaction--lien:hover {
	background: none;
	color: var(--cbu-jaune);
}

.calltoaction--lien:hover::after {
	transform: translateX(4px);
}

.text-top-slider .calltoaction {
	margin-top: 20vh;
}

/* =========================================================
   Cartes à légende (événements, grille)
   ========================================================= */

figure {
	position: relative;
	transition: all var(--cbu-transition);
}

figure img,
.member img,
.card img {
	width: 100%;
	height: auto;
}

.event,
.grid,
.member {
	overflow: hidden;
	margin-top: var(--cbu-esp-5);
}

.event figure {
	height: 247px;
}

figure {
	overflow: hidden;
	border-radius: var(--cbu-rayon-m);
}

figure img {
	transition: transform var(--cbu-transition-photo);
}

figure:hover img {
	transform: scale(1.04);
}

figcaption {
	background: linear-gradient(0deg, rgba(17, 19, 20, 0.92) 0%, rgba(17, 19, 20, 0.6) 60%, rgba(17, 19, 20, 0) 100%);
	padding: var(--cbu-esp-6) var(--cbu-esp-4) var(--cbu-esp-4);
	position: absolute;
	transform: translateY(-100%);
	text-align: left;
	transition: all var(--cbu-transition);
}

.grid figcaption {
	width: 100%;
}

.event_date,
.grid_date {
	font-size: var(--cbu-taille-s);
	font-weight: 700;
	color: var(--cbu-jaune);
}

.event_excerp,
.grid_excerp {
	font-size: var(--cbu-taille-xs);
	color: var(--cbu-texte-doux);
}

/* =========================================================
   Coachs
   ========================================================= */

.team {
	padding-block: 0;
	text-align: center;
}

.team h2 {
	padding: 5vh 0;
}

.team p,
.power p {
	color: var(--cbu-blanc);
}

.member_wrapper {
	background-color: var(--cbu-fond-carte);
	border: 1px solid var(--cbu-trait);
	border-radius: var(--cbu-rayon-m);
	overflow: hidden;
	transition: transform var(--cbu-transition), box-shadow var(--cbu-transition);
}

.member_wrapper:hover {
	transform: translateY(-3px);
	box-shadow: var(--cbu-ombre-survol);
}

.member_wrapper img {
	border-radius: var(--cbu-rayon-m) var(--cbu-rayon-m) 0 0;
}

.member_description h3 {
	font-size: var(--cbu-taille-h4);
}

.member_description p {
	font-size: var(--cbu-taille-s);
	font-weight: 700;
	color: var(--cbu-jaune);
	padding-bottom: var(--cbu-esp-4);
}

.team_member {
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 300px;
}

.text_wrapper {
	text-align: left;
	background-color: var(--cbu-verre);
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
}

.member_bio {
	font-size: var(--cbu-taille-s);
	color: var(--cbu-blanc);
}

.power_stick {
	height: 40px;
	background-color: var(--cbu-fond-profond);
	border-radius: var(--cbu-rayon-s);
	padding: var(--cbu-esp-2);
	margin-bottom: var(--cbu-esp-3);
}

.power_level {
	height: 20px;
	background-color: var(--cbu-jaune);
	border-radius: 2px;
	transition: all 1.5s ease-out;
}

/* =========================================================
   Témoignages (gabarit index.php)
   ========================================================= */

.demonstator {
	height: 30vh;
	background-color: var(--cbu-fond);
	padding: var(--cbu-esp-3);
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

.demonstator img {
	height: 100%;
	display: inline-block;
}

.testimony {
	height: 100%;
	padding-left: var(--cbu-esp-3);
	text-align: left;
	display: inline-block;
	max-width: 400px;
}

.testimony p {
	font-size: var(--cbu-taille-s);
}

.name {
	text-align: right;
	font-style: italic;
}

/* =========================================================
   Témoignages de l'accueil (menu « Témoignages » de l'admin)
   ========================================================= */

.temoignages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
	gap: var(--cbu-esp-4);
	max-width: 120rem;
	margin: 0 auto var(--cbu-esp-5);
	text-align: left;
}

.temoignage {
	display: flex;
	flex-direction: column;
	gap: var(--cbu-esp-3);
	margin: 0;
	padding: var(--cbu-esp-4);
	background-color: var(--cbu-fond-carte);
	border-top: 3px solid var(--cbu-jaune);
	border-radius: var(--cbu-rayon-m);
}

.temoignage_photo {
	width: 6.4rem;
	height: 6.4rem;
	object-fit: cover;
	border-radius: 50%;
}

.temoignage_texte {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--cbu-taille-corps);
	line-height: var(--cbu-interligne);
	color: var(--cbu-texte-doux);
}

.temoignage_texte p:last-child {
	margin-bottom: 0;
}

.temoignage_nom {
	margin: 0;
	font-style: italic;
	color: var(--cbu-jaune);
}

/* =========================================================
   Cartes de cours (gabarit Liste)
   ========================================================= */

.carte {
	display: flex;
	text-align: left;
	margin-bottom: var(--cbu-esp-5);
	background-color: var(--cbu-fond-carte);
	border: 1px solid var(--cbu-trait);
	border-radius: var(--cbu-rayon-m);
	overflow: hidden;
	transition: border-color var(--cbu-transition);
}

.carte:hover {
	border-color: var(--cbu-jaune);
}

.carte .image {
	overflow: hidden;
	flex: none;
}

.carte .image img {
	width: 350px;
	height: auto;
	transition: transform var(--cbu-transition-photo);
}

.carte:hover .image img {
	transform: scale(1.04);
}

.carte .text {
	display: inline-block;
	width: auto;
	padding: 0 var(--cbu-esp-5);
	border-radius: 0 var(--cbu-rayon-m) var(--cbu-rayon-m) 0;
}

.carte h3 {
	padding: 0;
	font-weight: 900;
	hyphens: auto;
}

.img_plann {
	width: 75%;
}

/* =========================================================
   Formules
   ========================================================= */

.price_card {
	margin: 0;
}

.price_card .head {
	background-color: var(--cbu-fond-carte);
	border: 1px solid var(--cbu-trait);
	border-bottom-color: var(--cbu-trait);
	margin: 0;
	border-radius: var(--cbu-rayon-m) var(--cbu-rayon-m) 0 0;
}

.price_card .head h2 {
	font-size: var(--cbu-taille-l);
	font-weight: 900;
	color: var(--cbu-jaune);
	padding: var(--cbu-esp-4) 0;
	margin: 0;
}

.price_card .body {
	background-color: var(--cbu-fond-carte);
	border-left: 1px solid var(--cbu-trait);
	border-right: 1px solid var(--cbu-trait);
	color: var(--cbu-texte-doux);
	margin: 0;
	font-size: var(--cbu-taille-s);
	color: var(--cbu-texte);
	text-decoration: none;
	list-style: none;
	padding: var(--cbu-esp-3);
}

.price_card .body ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.price_card .body p {
	font-size: var(--cbu-taille-s);
}

.price_card .footer {
	background-color: var(--cbu-fond-carte);
	border: 1px solid var(--cbu-trait);
	padding: var(--cbu-esp-2) 0;
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
	margin-top: 0;
	color: var(--cbu-blanc);
}

.price_card .footer p {
	display: inline-block;
	color: var(--cbu-texte);
	font-size: var(--cbu-taille-xs);
}

.price_card .footer p.price_per_month {
	padding: 0;
	font-family: var(--cbu-police-titre);
	font-size: var(--cbu-taille-prix);
	font-weight: 900;
	color: var(--cbu-blanc);
	font-variant-numeric: tabular-nums;
}

.annual_price {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: -2.5rem;
}

/* =========================================================
   Pages simples
   ========================================================= */

.simple-page {
	text-align: justify;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.simple-page h1 {
	text-align: left;
	font-size: var(--cbu-taille-titre-page);
	padding-bottom: 5vh;
}

.simple-page .container {
	background-color: var(--cbu-panneau);
	padding-bottom: var(--cbu-esp-5);
	margin-top: var(--cbu-entete);
	border-radius: var(--cbu-rayon-l) var(--cbu-rayon-l) 0 0;
}

.simple-page .container .col-xs-12 img {
	max-width: 100%;
	height: auto;
}

.simple-page-block {
	padding: var(--cbu-esp-5);
}

.related_links {
	background-color: var(--cbu-panneau);
	border-radius: var(--cbu-rayon-m);
	padding: var(--cbu-esp-5);
	margin-top: var(--cbu-esp-5);
}

.rel_link {
	overflow: hidden;
	height: 300px;
	margin-bottom: var(--cbu-esp-3);
}

.rel_link img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	border-radius: var(--cbu-rayon-m);
}

.rel_link .container {
	position: relative;
	top: -25%;
	height: 25%;
	background-color: var(--cbu-panneau);
	width: 100%;
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
	margin: 0;
	padding-bottom: 0;
}

.rel_link .container p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	text-align-last: center;
	text-transform: uppercase;
	color: var(--cbu-blanc);
	font-weight: 700;
	font-size: var(--cbu-taille-l);
}

/* =========================================================
   Page 404
   ========================================================= */

.top-page.erreur-404_bandeau {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 80vh;
	padding-bottom: var(--cbu-esp-6);
}

.erreur-404_texte {
	position: relative;
	z-index: 1;
	max-width: 80rem;
}

.erreur-404_code {
	margin-bottom: var(--cbu-esp-2);
	font-size: var(--cbu-taille-label);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cbu-jaune);
}

.erreur-404_intro {
	max-width: 60rem;
	margin: 0 auto var(--cbu-esp-5);
	font-size: var(--cbu-taille-l);
	color: var(--cbu-texte-doux);
}

.erreur-404_actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cbu-esp-3);
}

.erreur-404_pistes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--cbu-esp-4);
	max-width: 120rem;
	margin: 0 auto var(--cbu-esp-5);
	padding: 0;
	list-style: none;
	text-align: left;
}

.erreur-404_piste {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--cbu-esp-4);
	background-color: var(--cbu-fond-carte);
	border-top: 3px solid var(--cbu-jaune);
	border-radius: var(--cbu-rayon-m);
	text-decoration: none;
	transition: transform var(--cbu-transition), box-shadow var(--cbu-transition);
}

.erreur-404_piste:hover,
.erreur-404_piste:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--cbu-ombre-survol);
	text-decoration: none;
}

.erreur-404_piste:focus-visible {
	box-shadow: var(--cbu-anneau);
}

.erreur-404_piste h3 {
	margin: 0 0 var(--cbu-esp-2);
	font-size: var(--cbu-taille-h4);
	color: var(--cbu-blanc);
}

.erreur-404_piste p {
	flex-grow: 1;
	font-size: var(--cbu-taille-s);
}

.erreur-404_piste .calltoaction--lien {
	align-self: flex-start;
}

.erreur-404_piste:hover .calltoaction--lien::after {
	transform: translateX(4px);
}

.erreur-404_contact {
	margin: 0;
}

.erreur-404_contact a {
	color: var(--cbu-jaune);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.top-page.erreur-404_bandeau {
		min-height: 70vh;
	}

	.erreur-404_actions .calltoaction {
		width: 100%;
	}
}

/* =========================================================
   Pied de page et réseaux
   ========================================================= */

footer {
	background-color: var(--cbu-fond-clair);
	padding-block: 3vh;
	text-align: left;
}

footer h6 {
	font-size: var(--cbu-taille-m);
	margin-bottom: 2vh;
}

footer p {
	font-size: var(--cbu-taille-s);
}

footer .legal {
	padding-top: 2vh;
	text-align: center;
}

footer .legal p {
	font-size: var(--cbu-taille-xs);
}

.strock {
	width: 100%;
	height: 0;
	border-top: 1px solid var(--cbu-trait);
}

.f-social a {
	padding: var(--cbu-esp-3);
	padding-top: var(--cbu-section);
}

.f-social a i {
	font-size: 64px;
}

/* =========================================================
   Formulaires (contenus, extensions, MailPoet hors iframe)
   ========================================================= */

label,
legend {
	font-size: var(--cbu-taille-s);
	font-weight: 700;
	color: var(--cbu-texte-doux);
	margin-bottom: var(--cbu-esp-2);
	border: 0;
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="url"], input[type="search"], input[type="password"], input[type="date"],
	select, textarea, .form-control) {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 1.6rem;
	font-family: var(--cbu-police);
	font-size: 1.6rem; /* 16px : évite le zoom automatique sur iPhone */
	line-height: 1.4;
	color: var(--cbu-blanc);
	background-color: var(--cbu-fond-profond);
	border: 1px solid var(--cbu-trait-champ);
	border-radius: var(--cbu-rayon-s);
	box-shadow: none;
	transition: border-color var(--cbu-transition), box-shadow var(--cbu-transition);
}

:where(textarea) {
	min-height: 120px;
	padding: 1.2rem 1.6rem;
	resize: vertical;
}

:where(select) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 4.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23feca18' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.6rem center;
}

::placeholder {
	color: var(--cbu-indice);
	opacity: 1;
}

:where(input, select, textarea, .form-control):hover {
	border-color: var(--cbu-texte);
}

:where(input, select, textarea, .form-control):focus {
	outline: none;
	border-color: var(--cbu-jaune);
	box-shadow: 0 0 0 3px rgba(254, 202, 24, 0.25);
}

:where(input, select, textarea)[aria-invalid="true"],
.mailpoet_form .parsley-error {
	border-color: var(--cbu-rouge-texte);
}

:where(input, select, textarea):disabled {
	opacity: 0.55;
	border-style: dashed;
	cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--cbu-jaune);
	width: 20px;
	height: 20px;
}

:where(input[type="submit"], button[type="submit"]):not(.calltoaction) {
	min-height: 52px;
	padding: 0 2.8rem;
	font-family: var(--cbu-police-titre);
	font-weight: 700;
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cbu-blanc);
	background-color: var(--cbu-rouge);
	border: 0;
	border-radius: var(--cbu-rayon-s);
	cursor: pointer;
	transition: background-color var(--cbu-transition);
}

:where(input[type="submit"], button[type="submit"]):not(.calltoaction):hover {
	background-color: var(--cbu-rouge-fonce);
}

.form-erreur,
.mailpoet_form .parsley-errors-list,
.mailpoet_validate_error {
	font-size: 1.3rem;
	color: var(--cbu-rouge-texte);
	list-style: none;
	padding: 0;
	margin: var(--cbu-esp-2) 0 0;
}

.form-aide {
	font-size: 1.3rem;
	color: var(--cbu-texte);
}

.mailpoet_validate_success {
	color: var(--cbu-jaune);
}

/* =========================================================
   Mouvement réduit
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation: none !important;
	}

	section.top-page.top-slider,
	.simple-page {
		background-attachment: scroll;
	}
}

/* =========================================================
   Mobile (xs de Bootstrap 3)
   ========================================================= */

@media (max-width: 767px) {

	html {
		min-height: 100%;
		height: 100%;
	}

	/* Les tailles de titre sont fluides : on autorise seulement la césure. */
	h1,
	h2,
	.simple-page h1 {
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	section.top-page.top-slider,
	section.container-fluid.simple-page {
		background-attachment: scroll;
	}

	.top-page {
		height: 70vh;
	}


	iframe {
		max-width: 100%;
	}

	iframe.mailpoet_form_iframe {
		max-width: 290px;
	}

	form.mailpoet_form,
	div.widget_wysija_cont.iframe_wysija {
		width: 305px;
	}

	.carte {
		flex-flow: column;
	}

	.carte .image img {
		width: 100%;
		max-width: none;
		border-radius: var(--cbu-rayon-m) var(--cbu-rayon-m) 0 0;
	}

	.carte .text {
		width: 100%;
		margin-left: 0;
		border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
		padding: var(--cbu-esp-3);
	}

	.carte h3 {
		margin-top: 0;
	}

	/* Pages simples : marges latérales réduites et texte aligné à gauche
	   (le justifié crée des trous sur une colonne étroite). */
	.simple-page {
		text-align: left;
	}

	.simple-page-block {
		padding: var(--cbu-esp-4) var(--cbu-esp-1);
	}

	.related_links {
		padding: var(--cbu-esp-4) var(--cbu-esp-2);
	}
}