/* =========================================================================
   Beyondd - En-tête et pied de page custom (PHP + ACF, sans Elementor)
   Chargé uniquement en mode aperçu (?newtheme=1).
   S'appuie sur global.css et theme-animation.css pour tout ce qui existait
   déjà (marquee du bandeau, panier FunnelKit, burger, gaps du pied de page).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices : déclarées ici pour que l'en-tête ne dépende plus d'Elementor
   ---------------------------------------------------------------------- */
@font-face {
	font-family: 'Basier Square Mono';
	src: url('/wp-content/uploads/2025/08/basiersquaremono-regular-webfont.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'General Sans';
	src: url('/wp-content/uploads/2025/08/GeneralSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'General Sans';
	src: url('/wp-content/uploads/2025/08/GeneralSans-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Elementor déclare Semibold en « bold » : on reprend la même graisse
   pour ne pas changer le rendu des textes en 700. */
@font-face {
	font-family: 'General Sans';
	src: url('/wp-content/uploads/2025/08/GeneralSans-Semibold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bd-black: #121212;
	--bd-grey: #F6F6F6;

	/* Vert d'accent : valeur de la maquette Figma, arbitrée par le client.
	   Les pages encore sous Elementor conservent le #C6F800 du kit tant
	   qu'elles ne sont pas refaites. Un seul endroit à changer ici. */
	--c-primary: #B7FF1A;
	--c-primary-hover: #A6E80F;

	/* Alias historiques, conservés pour ne rien casser. */
	--bd-green: var(--c-primary);
	--bd-green-alt: var(--c-primary);

	--bd-muted: #6E6E6E;
	--bd-content-width: 1240px;
}

/* =========================================================================
   1. En-tête - structure commune
   ========================================================================= */

.bd-header {
	position: sticky;
	top: 0;
	z-index: 98;
	background-color: #fff;
	transition: 200ms ease;
}

body.has-scrolled .bd-header {
	top: -39px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: 200ms ease;
}

.bd-header a {
	text-decoration: none;
}

/* Bandeau haut (marquee géré par theme-animation.css) */
.bd-header .top-bar {
	display: flex;
	flex-direction: row;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: var(--bd-black);
}

.bd-header .top-bar .top-bar-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.bd-header .top-bar p {
	margin: 0;
	font-family: var(--font-title);
	font-size: 13px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff;
}

/* Barre principale */
.bd-header .header-main {
	background-color: #fff;
}

.bd-header .header-main-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: var(--bd-content-width);
	height: 68px;
	margin: 0 auto;
	padding: 0;
}

/* Logo et bloc de droite occupent la meme largeur : la navigation se
   retrouve exactement centree dans l'en-tete, comme dans l'existant
   (ou elle etait centree en position absolue). */
.bd-header .is-site-logo {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
}

.bd-header .bd-header-right {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

/* Logo */
.bd-header .is-site-logo a {
	display: block;
}

.bd-header .is-site-logo img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 36px;
	object-fit: contain;
	object-position: center center;
}

/* -------------------------------------------------------------------------
   Boutons natifs du nouveau theme
   -------------------------------------------------------------------------
   Le kit Elementor habille TOUS les <button> de la page :
     .elementor-kit-13 button                -> fond #C6F800, padding 23/22   (0,1,1)
     .elementor-kit-13 button:hover, :focus  -> fond #99C000, radius 0        (0,2,1)

   Neutraliser le seul etat de base ne suffit pas : la regle de survol du kit
   est plus specifique et reprend la main au survol ET au focus. On reprend
   donc explicitement :hover, :focus et :active.

   Portee : uniquement les boutons du nouveau theme, c'est-a-dire les <button>
   dont une classe commence par « bd- » (plus le burger, qui garde son nom
   historique .is-burger-menu pour rester compatible avec global.css).
   Les boutons des extensions (WPForms, FunnelKit, Complianz, Genius Reviews)
   ne sont volontairement pas cibles et gardent leur propre style.

   Dosage de la specificite (important : plusieurs agents travaillent sur le
   nouveau theme en parallele). Le filtre « bd- » est place dans :where(),
   qui ne compte pas dans la specificite. On obtient :
     base   body.beyondd-newtheme button:where(...)        -> (0,1,2)
     etats  body.beyondd-newtheme button:where(...):hover  -> (0,2,2)
   La base bat le kit (0,1,1) et les etats battent le kit au survol (0,2,1),
   mais les deux restent EN DESSOUS d'une regle de composant a deux classes
   du type « .bd-accueil .bd-fleche » (0,2,0) ou « .bd-accueil .bd-fleche:hover »
   (0,3,0). Chaque bloc garde donc la main sur ses propres boutons : cette
   neutralisation ne fait que retirer le vert du kit, elle n'impose pas de
   style par-dessus les autres feuilles.

   Confort : un bouton « bd- » qui n'a pas envie d'ecrire ses etats peut
   simplement poser ces variables sur lui-meme, elles sont reprises au survol,
   au focus et a l'activation :
     --bd-btn-bg             (defaut : transparent)
     --bd-btn-color          (defaut : inherit)
     --bd-btn-radius         (defaut : 0)
     --bd-btn-padding        (defaut : 0)
     --bd-btn-hover-opacity  (defaut : 0.6)
   -------------------------------------------------------------------------- */

body.beyondd-newtheme button:where([class^="bd-"], [class*=" bd-"], .is-burger-menu) {
	margin: 0;
	padding: var(--bd-btn-padding, 0);
	border: 0;
	border-radius: var(--bd-btn-radius, 0);
	background: none;
	background-color: var(--bd-btn-bg, transparent);
	box-shadow: none;
	color: var(--bd-btn-color, inherit);
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: opacity 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Reprend la main sur .elementor-kit-13 button:hover / :focus (0,2,1) :
   sans ces trois etats, le burger et la croix virent au vert olive #99C000
   et perdent leur arrondi au survol comme au focus. */
body.beyondd-newtheme button:where([class^="bd-"], [class*=" bd-"], .is-burger-menu):is(:hover, :focus, :active) {
	background-color: var(--bd-btn-bg, transparent);
	color: var(--bd-btn-color, inherit);
	border-radius: var(--bd-btn-radius, 0);
	box-shadow: none;
}

/* Retour d'interaction volontaire. La maquette ne montre aucun aplat sur le
   burger ni sur la croix : on reste sur l'attenuation deja utilisee ailleurs
   dans le theme (footer a:hover, .is-button-style-2 a:hover). */
body.beyondd-newtheme button:where([class^="bd-"], [class*=" bd-"], .is-burger-menu):hover {
	opacity: var(--bd-btn-hover-opacity, 0.6);
}

/* Navigation clavier : contour net, jamais supprime. */
body.beyondd-newtheme button:where([class^="bd-"], [class*=" bd-"], .is-burger-menu):focus-visible {
	outline: 2px solid var(--bd-black);
	outline-offset: 4px;
	opacity: 1;
}

/* Focus a la souris : pas de contour, mais le survol reste visible. */
body.beyondd-newtheme button:where([class^="bd-"], [class*=" bd-"], .is-burger-menu):focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================================
   2. Navigation desktop
   ========================================================================= */

.bd-header .header-nav-menu {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	flex: 0 0 auto;
	align-self: stretch;
	/* neutralise le height:100% de global.css, qui se resout en auto ici */
	height: auto !important;
}

.bd-header .header-nav-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	height: auto !important;
}

.bd-header .header-nav-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5px 9px;
	background-color: var(--bd-grey);
	transition: 200ms;
}

.bd-header .header-nav-link p {
	margin: 0;
	font-family: var(--font-title);
	font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--bd-black);
	transition: 200ms;
}

.bd-header .header-nav-item .header-nav-link:hover {
	background-color: var(--bd-black);
}

.bd-header .header-nav-item .header-nav-link:hover p {
	color: #fff;
}

.bd-header .space-mega-menu {
	display: none;
}

/* Mega-menu */
.bd-header .is-mega-menu-container {
	position: absolute !important;
	top: 100%;
	left: 0;
	width: 100% !important;
	max-height: 0;
	overflow: hidden !important;
	background-color: #fff !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: max-height 250ms ease;
	z-index: 10;
}

.bd-header .header-nav-item.has-mega-menu:hover .is-mega-menu-container,
.bd-header .header-nav-item.has-mega-menu:focus-within .is-mega-menu-container {
	max-height: 700px;
}

.bd-header .is-mega-menu-boxed {
	width: 100%;
	max-width: var(--bd-content-width);
	margin: 0 auto;
}

.bd-header .is-mega-menu-inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 32px;
	padding: 32px 0;
}

.bd-header .mega-menu-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 240px;
	max-width: 240px;
	flex: none;
}

.bd-header .mega-menu-left-sub-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bd-header .mega-menu-left-item {
	padding: 15px 20px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--bd-black);
	transition: 200ms;
}

.bd-header .mega-menu-left-item a,
.bd-header .mega-menu-left-item span {
	color: inherit;
}

.bd-header .button-see-all {
	margin-top: auto;
}

.bd-header .button-see-all .bd-button {
	display: block;
	width: 100%;
	padding: 20px;
	text-align: center;
	background-color: var(--c-primary);
	color: #000;
	font-family: var(--font-text);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	transition: 200ms;
}

.bd-header .button-see-all .bd-button:hover {
	opacity: 0.8;
}

/* Cartes produit du mega-menu (remplacent le Listing Grid JetEngine 3912) */
.bd-header .mega-menu-listing {
	display: flex;
	flex-direction: row;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
}

.bd-header .mega-menu-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: calc(25% - 15px);
	flex: 1 1 0;
	min-height: 136px;
	padding: 24px 20px;
	border-radius: 10px;
	background-color: var(--bd-grey);
	color: var(--bd-black);
}

.bd-header .mega-menu-card .block-link-listing {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.bd-header .mega-menu-card-img {
	display: block;
	margin-bottom: 16px;
}

.bd-header .mega-menu-card-img img {
	display: block;
	max-width: 110px;
	height: auto;
	transition: 200ms;
}

.bd-header .mega-menu-card:hover .mega-menu-card-img img {
	transform: scale(1.08);
}

.bd-header .mega-menu-card-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* Produit pas encore en vente (case « Disponible à la vente » décochée sur la
   fiche produit). Le gabarit ne rend déjà plus de <a> : ces règles ne font
   qu'accompagner visuellement, elles ne portent pas la désactivation. */
.bd-header .mega-menu-card-indispo {
	cursor: default;
	pointer-events: none;
}

.bd-header .mega-menu-card-indispo .mega-menu-card-img img {
	filter: grayscale( 1 );
	opacity: 0.65;
}

/* Pas de zoom au survol : une carte grisée qui réagit enverrait un signal
   contradictoire. Le sélecteur d'origine est déjà neutralisé par le
   pointer-events, cette règle sert de garde-fou explicite. */
.bd-header .mega-menu-card-indispo:hover .mega-menu-card-img img {
	transform: none;
}

.bd-header .mega-menu-card-indispo .mega-menu-card-title {
	color: #9A9A9A;
}

/* Mention d'attente, à l'emplacement exact de la flèche diagonale. */
.bd-header .mega-menu-card-soon {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 100px;
	background-color: #fff;
	font-family: var( --font-text, 'General Sans' ), sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #6E6E6E;
	white-space: nowrap;
}

/* =========================================================================
   3. Boutons et icônes de droite
   ========================================================================= */

.bd-header .block-header-cta {
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex: none;
}

.bd-header .is-header-button .bd-button {
	display: inline-block;
	padding: 8px 10px;
	background-color: var(--bd-grey);
	color: #000;
	font-family: var(--font-title);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: 200ms;
}

.bd-header .is-header-button.is-button-style-2 .bd-button {
	background-color: var(--bd-black);
	color: #fff;
}

.bd-header .is-header-button .bd-button:hover {
	background-color: var(--bd-black);
	color: #fff;
}

.bd-header .is-header-button.is-button-style-2 .bd-button:hover {
	opacity: 0.8;
}

.bd-header .header-icons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	flex: none;
}

.bd-header .header-icons .bd-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bd-header .header-icons svg {
	display: block;
}

.bd-header .account-mobile-icon {
	display: none;
}

/* =========================================================================
   4. Menu mobile
   Valeurs relevees dans Figma (node 575:6401, cadre 390 x 956).
   La rotation -0.28deg du groupe de cartes est un artefact de maquette,
   volontairement non reproduite.
   ========================================================================= */

.bd-mobile-overlay {
	display: none;
}

.bd-mobile-menu {
	display: none;
}

@media only screen and (max-width: 1024px) {

	.bd-header .header-nav-menu {
		display: none;
	}

	.bd-header .account-mobile-icon {
		display: flex;
	}

	/* Le logo centre de global.css a besoin d'un parent positionne. */
	.bd-header .header-main-inner {
		position: relative;
		padding: 0;
		height: 100%;
	}

	.bd-header .is-site-logo,
	.bd-header .bd-header-right {
		flex: none;
	}

	.bd-header .is-site-logo img {
		height: 30px;
		max-width: none;
	}

	/* Menu ouvert : le bandeau noir reste visible, la barre logo disparait
	   au profit de la ligne croix / panier du panneau. */
	body.bd-menu-open .bd-header {
		top: 0 !important;
		box-shadow: none;
	}

	body.bd-menu-open .bd-header .header-main {
		visibility: hidden;
	}

	.bd-mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9998;
		background-color: rgba(18, 18, 18, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 250ms ease;
	}

	body.bd-menu-open .bd-mobile-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.bd-mobile-menu {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: var(--bd-menu-top, 29px);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		background-color: #fff;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 300ms ease, visibility 0s linear 300ms;
	}

	body.bd-menu-open {
		overflow: hidden;
	}

	body.bd-menu-open .bd-mobile-menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 300ms ease, visibility 0s;
	}

	/* Ligne croix + panier (Figma 644:2604) */
	.bd-mobile-menu-bar {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26px 20px 0;
	}

	.bd-header .bd-mobile-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		flex: none;
	}

	.bd-header .bd-mobile-close svg {
		display: block;
		width: 16px;
		height: 16px;
	}

	.bd-mobile-cart {
		display: flex;
		align-items: center;
	}

	/* Panier FunnelKit : meme icone que l'en-tete (global.css remplace le
	   SVG par cart.webp via ::before), dimensionnee selon la maquette. */
	.bd-mobile-cart .fkcart-shortcode-icon-wrap::before {
		width: 20px;
		height: 21px;
	}

	/* Zone defilante : cartes + liens */
	.bd-mobile-scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 14px 20px 24px;
	}

	/* --- Cartes produit (Figma 644:2522 et suivantes) --- */
	.bd-mobile-cards {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.bd-card {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 20px;
		border-radius: 20px;
		background-color: rgba(18, 18, 18, 0.05);
		color: var(--bd-black);
	}

	.bd-card-left {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	.bd-card-media {
		flex: none;
		width: 65px;
		height: 65px;
	}

	.bd-card-media img {
		display: block;
		width: 65px;
		height: 65px;
		object-fit: cover;
	}

	.bd-card-body {
		display: flex;
		flex-direction: column;
		gap: 5px;
		min-width: 0;
	}

	/* Note produit : rendue par [genius_reviews_summary]. On ne recree pas
	   le markup, on adapte celui du plugin au format de la maquette :
	   une seule etoile, noire, suivie de la moyenne et du nombre d'avis.
	   Maquette : 6px. Remonte a 10px (taille de la description) pour
	   rester lisible sur telephone. */
	.bd-card-rating {
		display: flex;
		align-items: center;
		font-family: var(--font-text);
		font-size: 10px;
		font-weight: 400;
		line-height: 1;
		color: var(--bd-black);
	}

	.bd-card-rating .gr-summary-rating {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-size: inherit;
		line-height: 1;
		color: inherit;
	}

	/* La maquette ne montre qu'une etoile : on masque les quatre suivantes. */
	.bd-card-rating .gr-summary-rating-stars {
		display: inline-flex;
		align-items: center;
		line-height: 0;
	}

	.bd-card-rating .gr-summary-rating-stars > *:not(:first-child) {
		display: none;
	}

	/* Le SVG du plugin dessine un carre plein (currentColor) et l'etoile en
	   creux : on rend le carre transparent et l'etoile noire. */
	.bd-card-rating .gr-summary-rating-star {
		width: 10px;
		height: 10px;
		color: transparent !important;
		--color-star-icon-custom: var(--bd-black);
	}

	/* Le plugin met .gr-summary-rating-text en 16px : sans cette regle, le
	   « (76) » heriterait de 16px et ferait grandir la carte. */
	.bd-card-rating .gr-summary-rating-text,
	.bd-card-rating .gr-summary-rating-average,
	.bd-card-rating .gr-summary-rating-count,
	.bd-card-rating .gr-summary-rating-prefix,
	.bd-card-rating .gr-summary-rating-suffix {
		font-size: inherit;
		font-weight: inherit;
		line-height: 1;
		color: inherit;
	}

	/* flex : supprime les espaces entre « ( », « 76 » et « ) ». */
	.bd-card-rating .gr-summary-rating-text {
		display: inline-flex;
		align-items: center;
		gap: 0;
	}

	.bd-card-title {
		font-family: var(--font-text);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.25;
		color: var(--bd-black);
	}

	.bd-card-desc {
		font-family: var(--font-text);
		font-size: 10px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--bd-black);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bd-card-arrow {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		border-radius: 7px;
		background-color: #fff;
	}

	.bd-card-arrow svg {
		display: block;
		width: 10px;
		height: 10px;
	}

	/* Produit pas encore en vente : même source de vérité que le méga-menu et
	   que la page d'accueil (case « Disponible à la vente » de la fiche).
	   Le gabarit ne rend pas de <a> dans ce cas, le CSS ne fait qu'appuyer. */
	.bd-card-indispo {
		cursor: default;
		pointer-events: none;
	}

	.bd-card-indispo .bd-card-media img {
		filter: grayscale( 1 );
		opacity: 0.65;
	}

	.bd-card-indispo .bd-card-title,
	.bd-card-indispo .bd-card-desc,
	.bd-card-indispo .bd-card-rating {
		color: #9A9A9A;
	}

	/* La note reprend la couleur atténuée, étoile comprise. */
	.bd-card-indispo .bd-card-rating .gr-summary-rating-star {
		--color-star-icon-custom: #9A9A9A;
	}

	/* Mention d'attente, à la place exacte de la flèche. */
	.bd-card-soon {
		flex: none;
		align-self: center;
		display: inline-flex;
		align-items: center;
		padding: 8px 10px;
		border-radius: 7px;
		background-color: #fff;
		font-family: var( --font-text, 'General Sans' ), sans-serif;
		font-size: 10px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.02em;
		color: #6E6E6E;
		white-space: nowrap;
	}

	/* --- Liens simples --- */
	.bd-mobile-links {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding-top: 14px;
	}

	.bd-mobile-links a {
		display: block;
		height: 31px;
		padding: 5px 0;
		font-family: var(--font-text);
		font-size: 16px;
		font-weight: 500;
		line-height: 20px;
		color: var(--bd-black);
	}

	/* --- Bloc newsletter (Figma 644:2589) --- */
	.bd-mobile-newsletter {
		flex: none;
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 20px;
		background-color: var(--bd-black);
	}

	.bd-mobile-newsletter-copy {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.bd-mobile-newsletter-title {
		margin: 0;
		font-family: var(--font-title);
		font-size: 20px;
		font-weight: 400;
		line-height: 20px;
		text-transform: uppercase;
		color: #fff;
	}

	.bd-mobile-newsletter-text {
		margin: 0;
		font-family: var(--font-text);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.35;
		color: #fff;
	}

	.bd-mobile-form .wpforms-container,
	.bd-mobile-form .wpforms-container-full {
		margin: 0 !important;
	}

	.bd-mobile-form .wpforms-form {
		display: flex !important;
		flex-direction: column;
		gap: 14px;
	}

	.bd-mobile-form .wpforms-field {
		padding: 0 !important;
	}

	.bd-mobile-form .wpforms-field-label {
		display: none;
	}

	.bd-mobile-form input[type="text"],
	.bd-mobile-form input[type="email"] {
		width: 100%;
		padding: 10px 24px;
		border: 0.5px solid #fff !important;
		border-radius: 10px !important;
		background-color: transparent !important;
		color: #fff !important;
		font-family: var(--font-text) !important;
		font-size: 16px !important;
		line-height: 1.5;
	}

	.bd-mobile-form input::placeholder {
		color: #fff;
		opacity: 1;
		font-size: 16px;
	}

	.bd-mobile-form .wpforms-submit {
		width: 100%;
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 10px !important;
		border: none !important;
		border-radius: 10px !important;
		background-color: var(--c-primary) !important;
		color: #181818 !important;
		font-family: var(--font-text) !important;
		font-size: 16px !important;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: normal !important;
		text-transform: none !important;
	}

	.bd-mobile-form em.wpforms-error {
		margin-top: 4px;
		font-size: 12px;
		color: var(--c-primary);
	}
}

/* =========================================================================
   5. Pied de page
   ========================================================================= */

.bd-footer .bd-footer-outer {
	display: flex;
	flex-direction: column;
	padding-top: 64px;
	padding-bottom: 40px;
	background-color: var(--bd-black);
}

.bd-footer a {
	text-decoration: none;
	transition: 0.2s;
}

.bd-footer a:hover {
	opacity: 0.6;
}

.bd-footer .bd-footer-boxed {
	width: 100%;
	max-width: var(--bd-content-width);
	margin: 0 auto;
}

.bd-footer .bd-footer-top {
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
}

.bd-footer .bd-footer-logo {
	margin-bottom: 40px;
}

.bd-footer .bd-footer-logo svg {
	display: block;
	width: auto;
	height: 48px;
}

.bd-footer .footer-columns {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 48px;
}

.bd-footer .bd-footer-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bd-footer .bd-footer-contact-lines {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.bd-footer .bd-footer-contact-lines p {
	margin: 0;
	font-family: var(--font-title);
	font-size: 20px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff;
}

.bd-footer .bd-footer-contact-lines a {
	color: #fff;
}

.bd-footer .bd-footer-socials {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
}

.bd-footer .bd-footer-social {
	display: block;
	line-height: 0;
}

.bd-footer .bd-footer-social svg {
	display: block;
	width: 30px;
	height: 30px;
}

.bd-footer .bd-footer-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-footer .bd-footer-menu li:not(:last-child) {
	margin-bottom: 5px;
}

.bd-footer .bd-footer-menu a {
	display: block;
	padding: 5px 0;
	font-family: var(--font-title);
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.bd-footer .block-footer-newsletter {
	max-width: 415px;
}

.bd-footer .bd-footer-newsletter-title {
	margin: 0 0 14px;
	font-family: var(--font-title);
	font-size: 20px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff;
}

.bd-footer .bd-footer-newsletter-text p:not(.bd-footer-newsletter-title) {
	margin: 0;
	color: #fff;
}

.bd-footer .footer-newsletter .wpforms-container,
.bd-footer .footer-newsletter .wpforms-container-full {
	margin: 0 !important;
}

.bd-footer .footer-newsletter .wpforms-form {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.bd-footer .footer-newsletter .wpforms-field-container {
	width: 100%;
}

.bd-footer .footer-newsletter .wpforms-field {
	padding: 0 !important;
}

.bd-footer .footer-newsletter input[type="text"],
.bd-footer .footer-newsletter input[type="email"] {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #fff !important;
	border-radius: 10px !important;
	background-color: transparent !important;
	color: #fff !important;
	font-family: var(--font-text) !important;
	font-size: 16px !important;
}

.bd-footer .footer-newsletter input::placeholder {
	color: #fff;
	font-size: 16px;
}

.bd-footer .footer-newsletter .wpforms-submit {
	padding: 10px 18px !important;
	border: none !important;
	border-radius: 10px !important;
	background-color: var(--c-primary) !important;
	color: #000 !important;
	font-family: var(--font-text) !important;
	font-size: 16px !important;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.bd-footer .bd-footer-legal {
	max-width: 1340px;
	margin: 0 auto 40px;
}

.bd-footer .bd-footer-legal p {
	margin: 0;
	text-align: center;
	font-size: 15px;
	color: #fff;
}

.bd-footer .bd-footer-legal a {
	color: #fff;
}

.bd-footer .bd-footer-lettering {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}

.bd-footer .bd-footer-lettering img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 1024px) {

	.bd-footer .footer-columns {
		flex-direction: column;
	}

	.bd-footer .block-footer-newsletter {
		max-width: 100%;
	}
}

/* Note : sous 768px le formulaire du pied de page reste sur une ligne
   (champ + bouton), comme le pied de page actuel. Pas de passage en
   colonne : ce serait un ecart avec l'existant. */

/* =========================================================================
   6. Pied de page - grille de quatre colonnes
   -------------------------------------------------------------------------
   Le pied de page compte cinq blocs : contact, trois colonnes de liens et
   la newsletter. Mesure faite avant de toucher a la grille : leurs largeurs
   intrinseques cumulent 1231,6 px (contact 235,1 + shop 123,7 +
   compte 222,7 + formules 235,1 + newsletter 415) pour une boite de contenu
   plafonnee a 1240 px par --bd-content-width. Il ne resterait que 8,4 px
   pour quatre gouttieres : une rangee de cinq est impossible.

   Premiere reponse, restee incomplete : la newsletter passait seule sur une
   deuxieme rangee, calee a droite. Mesure du resultat a 1440 px : la rangee
   de liens s'arretait a 249 px de haut, la newsletter reprenait 48 px plus
   bas et descendait jusqu'a 166 px de plus, laissant un vide de 305 px de
   haut sur toute la moitie gauche, sous contact, shop et compte.

   Reponse retenue : la newsletter rejoint le bloc contact dans une premiere
   colonne, « .bd-footer-col-lead », posee dans le gabarit
   template-parts/beyondd-footer.php. Le pied de page redevient une grille
   de quatre colonnes sans orphelin, la newsletter est calee a gauche, et le
   vide disparait. Largeurs a 1440 px : 415 + 123,7 + 222,7 + 235,1 =
   996,5 px pour 1240 px de contenu, soit 243,5 px que « space-between »
   repartit en trois gouttieres de 81 px, la valeur deja en place.

   « Nos formules » est la seule colonne a porter un titre : ses six
   entrees sont de meme rang, alors que « Shop » et « Mon compte » servent
   d'en-tete a leur propre colonne.
   ========================================================================= */

/* Titre de colonne. Reprend .bd-footer-newsletter-title a l'identique :
   meme police, meme corps, meme casse, meme interlettrage, meme retrait
   bas. C'est le seul vocabulaire de titre que le pied de page connaisse. */
.bd-footer .bd-footer-menu-title {
	margin: 0 0 14px;
	font-family: var(--font-title);
	font-size: 20px;
	line-height: 1.5;
	text-transform: uppercase;
	color: #fff;
}

/* Conteneur du titre et de la liste : .bd-footer-col est une boite flex
   dont la gouttiere de 24 px s'ajouterait sinon aux 14 px du titre. Sur
   une colonne sans titre il est neutre, la liste reste seule. */
.bd-footer .bd-footer-menu-inner {
	display: block;
}

/* Colonne de tete : contact, puis newsletter.
   L'ecart de 40 px est celui qui separe deja le logo des colonnes, et les
   blocs entre eux en mobile. Plus large que la gouttiere interne de 24 px
   du bloc contact, il detache la newsletter ; plus etroit que la gouttiere
   de colonne, il la garde dans la meme colonne. Aucune valeur nouvelle. */
.bd-footer .bd-footer-col.bd-footer-col-lead {
	gap: 40px;
}

/* global.css fige tous les enfants directs de « .footer-columns » qui ne
   sont pas la newsletter, en « width: fit-content !important » et
   « flex: none !important ». La colonne de tete en est un : figee a la
   largeur de la newsletter, elle ne pourrait plus se resserrer et la
   rangee deborderait des que la boite de contenu passe sous 1240 px. On
   lui rend une base souple, plafonnee aux 415 px de la newsletter et
   plancher aux 235,1 px du bloc contact. */
.bd-footer .footer-columns > .bd-footer-col-lead {
	width: auto !important;
	flex: 0 1 415px !important;
	max-width: 415px;
	min-width: 235px;
}

/* La newsletter n'est plus un enfant direct de « .footer-columns » : c'est
   la colonne de tete qui porte sa largeur. Les deux plafonds de global.css
   (415 px partout, 300 px sous 1240 px) la rendraient plus etroite que sa
   propre colonne et ramenaient son champ de saisie a 166 px. */
.bd-footer .bd-footer-col-lead .block-footer-newsletter {
	max-width: 100% !important;
}

/* Quatre colonnes sur une rangee, au dessus du seuil de 1024 px deja
   utilise par global.css et par la section 5 : pas de palier nouveau.
   Les trois colonnes de liens sont figees a 123,7 + 222,7 + 235,1 =
   581,5 px par global.css, et la boite de contenu vaut « viewport moins la
   barre de defilement moins deux fois --px-global », soit 946 px a
   1025 px. La colonne de tete prend ce qui reste : 292 px au plus etroit,
   donc 158 px au champ de saisie une fois retires le bouton (118 px) et
   leur ecart (16 px), de quoi afficher seize caracteres pour un texte
   indicatif qui en compte neuf. Elle atteint son plafond de 415 px des
   1147 px de large. */
@media only screen and (min-width: 1025px) {

	/* « nowrap » est indispensable, et non un reste du reglage d'origine :
	   avec « wrap », le navigateur coupe la rangee avant d'essayer de
	   retrecir quoi que ce soit. Mesure a 1121 px avec « wrap » : la
	   colonne de tete restait a 415 px et « Nos formules » tombait seule
	   sur une deuxieme rangee. Avec « nowrap », c'est le
	   « flex-shrink » de la colonne de tete qui absorbe les 51 px
	   manquants et elle se pose a 364 px. */
	.bd-footer .footer-columns {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	/* global.css impose « gap: 16px !important » sous 1240 px. C'etait le
	   reglage d'une rangee de cinq blocs ; pour quatre colonnes il colle
	   les liens. On pose une gouttiere explicite de 24 px, la gouttiere
	   interne des colonnes, deja au vocabulaire du pied de page. Elle ne
	   pese que sous 1147 px, la ou « space-between » n'a plus de jeu a
	   repartir ; au dela les gouttieres reelles remontent d'elles-memes,
	   a 68 px a 1280 px et 81 px a 1440 px. */
	.bd-footer .footer-columns {
		column-gap: 24px !important;
	}
}

/* Tablette : deux colonnes, deux rangees.
   Jusqu'ici tout s'empilait en une seule colonne des 1024 px, ce qui
   portait le pied de page a 1413 px de haut a ce palier. Deux colonnes de
   « 50% - 20px » suffisent largement : la plus large des colonnes de liens
   demande 235,1 px pour 464 px disponibles a 1024 px, et 336 px a 768 px.
   La colonne de tete garde son ordre, donc la newsletter reste calee a
   gauche. Le seuil haut est celui de global.css et de la section 5, le
   seuil bas celui de la tablette en portrait. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

	.bd-footer .footer-columns {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		column-gap: 40px !important;
		row-gap: 48px !important;
	}

	/* Le second selecteur reprend celui du palier large, a specificite
	   egale, pour desamorcer son « flex: 0 1 415px !important ». */
	.bd-footer .footer-columns > *,
	.bd-footer .footer-columns > .bd-footer-col-lead {
		width: calc(50% - 20px) !important;
		flex: 0 0 calc(50% - 20px) !important;
		max-width: none;
		min-width: 0;
	}
}

/* Mobile : une colonne, comme avant. La colonne de tete prend toute la
   largeur pour que la newsletter ne se retrecisse pas a son contenu. */
@media only screen and (max-width: 767px) {

	.bd-footer .footer-columns > .bd-footer-col-lead {
		width: 100% !important;
		flex: 0 0 auto !important;
		max-width: none;
		min-width: 0;
	}
}

/* Hauteur du champ de saisie. Il mesure 42 px (2 x 8 px de remplissage,
   24 px de ligne, 2 x 1 px de filet) alors que le bouton pose a cote de lui
   en fait 44 : les deux extremites de la ligne ne s'alignaient pas. On
   reprend la hauteur du bouton, sans toucher au remplissage ni au corps du
   texte, ce qui donne au passage une cible tactile de 44 px en mobile. */
.bd-footer .footer-newsletter input[type="text"],
.bd-footer .footer-newsletter input[type="email"] {
	min-height: 44px !important;
}