/*
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.4.0
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;
}

*.content p {
	max-width: 70ch;
}

: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: var(--cbu-section) 0;
}

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: 0;
}

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

/* =========================================================
   Navigation
   ========================================================= */

.navbar,
.navbar-inverse {
	background-color: transparent;
	border: none;
}

.navbar-header {
	height: 10vh;
}

.navbar-brand {
	padding: 0;
	height: 100%;
}

.logo {
	height: 20vh;
	margin: 5vh 0;
	transition: all var(--cbu-transition);
}

.logo.smaller {
	height: 10vh;
	margin: 2vh 0;
}

#navbar {
	height: 100%;
}

.navbar-nav {
	height: 100%;
	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);
	padding: 0 var(--cbu-esp-4);
}

.navbar-inverse .navbar-nav > li > a {
	color: var(--cbu-texte-doux);
	transition: color var(--cbu-transition), background-color var(--cbu-transition);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	color: var(--cbu-blanc);
	background-color: rgba(255, 255, 255, 0.06);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .current-menu-item > a {
	color: var(--cbu-jaune);
	background-color: transparent;
}

.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
	border-color: var(--cbu-fond-clair);
	background-color: var(--cbu-fond-clair);
}

.navbar-inverse .navbar-toggle {
	margin: var(--cbu-esp-2);
}

/* Liens mis en avant : classe CSS « menu-decouverte » ou « menu-planning »
   à saisir dans Apparence > Menus. Les id restent en secours. */
.navbar-nav > li.menu-decouverte > a,
.navbar-nav > li.menu-planning > a,
#menu-item-444 a,
#menu-item-445 a,
a.outlined-red,
a.outlined-yellow {
	border-radius: var(--cbu-rayon-s);
	color: var(--cbu-blanc);
	padding: var(--cbu-esp-1) var(--cbu-esp-2);
}

.navbar-nav > li.menu-decouverte > a,
.navbar-nav > li.menu-planning > a,
#menu-item-444 a,
#menu-item-445 a {
	margin: 9px 6px;
}

.navbar-inverse .navbar-nav > li.menu-decouverte > a,
.navbar-inverse #menu-item-444 a,
a.outlined-red {
	background-color: var(--cbu-rouge);
	color: var(--cbu-blanc);
	font-weight: 700;
}

.navbar-inverse .navbar-nav > li.menu-decouverte > a:hover,
.navbar-inverse #menu-item-444 a:hover,
a.outlined-red:hover {
	background-color: var(--cbu-rouge-fonce);
	color: var(--cbu-blanc);
}

.navbar-inverse .navbar-nav > li.menu-planning > a,
.navbar-inverse #menu-item-445 a,
a.outlined-yellow {
	background-color: transparent;
	color: var(--cbu-jaune);
	box-shadow: inset 0 0 0 1px var(--cbu-jaune);
}

.navbar-inverse .navbar-nav > li.menu-planning > a:hover,
.navbar-inverse #menu-item-445 a:hover,
a.outlined-yellow:hover {
	background-color: var(--cbu-jaune);
	color: var(--cbu-noir);
}

/* Onglet des horaires */
.tab {
	position: fixed;
	top: 0;
	left: 15vw;
	z-index: 99;
	padding: var(--cbu-esp-2) var(--cbu-esp-3);
	background-color: var(--cbu-rouge);
	border-radius: 0 0 var(--cbu-rayon-m) var(--cbu-rayon-m);
}

div.tab p {
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: var(--cbu-taille-s);
	color: var(--cbu-blanc);
}

/* =========================================================
   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: 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;
}

/* =========================================================
   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);
}

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

footer {
	background-color: var(--cbu-fond-clair);
	padding: 3vh 0;
	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;
	}


	.logo {
		height: 10vh;
		margin: var(--cbu-esp-2);
	}

	.logo.smaller {
		margin: var(--cbu-esp-2);
	}

	.navbar-nav {
		background-color: var(--cbu-fond);
	}

	.tab {
		left: 20vw;
	}

	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;
	}
}