/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */

li.current-menu-item a {
	background: none !important;
}

/* Texte en gras pour la page active dans les menus (header et footer), pas au survol */
.fl-menu li.menu-item.current-menu-item > a {
	font-weight: bold;
}

/* Fond de page : le body est déjà en #fcf5fa mais .fl-page-content (thème de base) le recouvre en blanc sur tout le contenu */
.fl-page-content {
	background-color: #fcf5fa;
}

/* Bloc texte : fond beige avec filet vert à gauche */
.fond-texte-beige {
	background-color: #fcf5fa;
	border-left: 4px solid #8DC63F;
	border-radius: 12px;
	padding: 24px 32px;
}

/* Zoom dynamique (un seul passage, reste zoomé) sur la photo panoramique (id CSS "zoom") de la page Accueil */
#zoom .fl-photo-content {
	overflow: hidden;
}
#zoom .fl-photo-img {
	transform-origin: center center;
	animation: zoom-loop 18s ease-in-out forwards;
}
@keyframes zoom-loop {
	from { transform: scale(1); }
	to { transform: scale(1.15); }
}

/* Test : cadre continu sur la hero de la page d'accueil, avec 3 coupures ponctuelles */
.fl-node-ugelsycxh4bw .fl-row-content-wrap {
	position: relative;
}
.fl-node-ugelsycxh4bw .fl-row-content-wrap::after {
	content: "";
	position: absolute;
	inset: 30px;
	pointer-events: none;
	z-index: 2;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(to right, #fff 0 38%, transparent 38% 42%, #fff 42% 100%),
		linear-gradient(to bottom, #fff 0 100%),
		linear-gradient(to right, #fff 0 58%, transparent 58% 62%, #fff 62% 100%),
		linear-gradient(to bottom, #fff 0 48%, transparent 48% 52%, #fff 52% 100%);
	background-position: top left, top right, bottom left, top left;
	background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}

/* Style unifié pour tous les boutons du site (modules Bouton natifs + PowerPack + bouton du menu).
   Ajouter la classe "btn-libre" sur un bouton pour l'exclure : ses couleurs se règlent alors dans le module. */
.fl-button:not(.btn-libre):not(.btn-libre *),
.pp-button:not(.btn-libre):not(.btn-libre *),
.menu-item-button > a {
	background-color: #b24b8c !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	padding: 14px 28px !important;
	letter-spacing: 1px;
}
.fl-button:not(.btn-libre):not(.btn-libre *):hover,
.pp-button:not(.btn-libre):not(.btn-libre *):hover,
.menu-item-button > a:hover {
	background-color: rgb(125, 23, 88) !important;
}

/* Variante de couleur "btn-terracotta" : mêmes forme/padding/texte blanc que les autres boutons, seules les couleurs changent.
   La classe peut être posée sur le bouton lui-même ou sur le conteneur du module (champ Avancé > Classe). */
.fl-button.btn-terracotta.btn-terracotta.btn-terracotta,
.pp-button.btn-terracotta.btn-terracotta.btn-terracotta,
.btn-terracotta.btn-terracotta .fl-button.fl-button,
.btn-terracotta.btn-terracotta .pp-button.pp-button {
	background-color: #BA585A !important;
}
.fl-button.btn-terracotta.btn-terracotta.btn-terracotta:hover,
.pp-button.btn-terracotta.btn-terracotta.btn-terracotta:hover,
.btn-terracotta.btn-terracotta .fl-button.fl-button:hover,
.btn-terracotta.btn-terracotta .pp-button.pp-button:hover {
	background-color: #A06565 !important;
}

/* Bouton "btn-libre" : garde la forme et l'espacement des boutons du site, mais les couleurs viennent du module */
.fl-button.btn-libre,
.pp-button.btn-libre,
.btn-libre .fl-button,
.btn-libre .pp-button {
	border-radius: 50px;
	padding: 14px 28px;
	letter-spacing: 1px;
}

/* Bouton secondaire "fantôme" (contour) : à appliquer via la classe "btn-outline" sur le module Bouton */
.fl-button.btn-outline,
.pp-button.btn-outline {
	background-color: transparent !important;
	color: #b24b8c !important;
	border: none !important;
	box-shadow: inset 0 0 0 2px #b24b8c !important;
	border-radius: 50px !important;
	padding: 14px 28px !important;
	letter-spacing: 1px;
}
.fl-button.btn-outline:hover,
.pp-button.btn-outline:hover {
	background-color: rgb(125, 23, 88) !important;
	box-shadow: inset 0 0 0 2px rgb(125, 23, 88) !important;
	color: #ffffff !important;
}

/* Module "2 boutons" (PowerPack) empilé verticalement : chaque bouton s'adapte à son texte, sans retour à la ligne */
.pp-dual-button-content a.pp-button {
	width: auto !important;
	white-space: nowrap !important;
}

/* Texte blanc au survol sur les 2 boutons du module "2 boutons" */
.pp-dual-button-content a.pp-button:hover,
.pp-dual-button-content a.pp-button:hover span {
	color: #ffffff !important;
}

/* Sous-menu "Les soins" en barre horizontale pleine largeur (ancrée sur la ligne du header, pas sur le <li>, ni le conteneur interne, ni la colonne centrée) */
.fl-menu li.fl-has-submenu,
.fl-menu .fl-has-submenu-container {
	position: static !important;
}
.fl-row-content:has(.fl-menu) {
	position: static !important;
}
.fl-menu .sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	display: flex !important;
	flex-direction: row;
	justify-content: center;
	gap: 32px;
	background-color: #fcf5fa;
	box-shadow: none;
	padding: 16px 0;
}
/* Continuité du survol entre "Les soins" et la barre pleine largeur : au survol, l'item est prolongé vers le bas (padding)
   et la marge négative annule ce prolongement, donc rien ne bouge dans la mise en page.
   Actif uniquement pendant le survol de l'item : il ne recouvre ni le logo ni les autres items du menu. */
.fl-menu li.fl-has-submenu:hover {
	padding-bottom: 110px;
	margin-bottom: -110px;
}
.fl-menu .sub-menu li a {
	color: #4A4A4A;
}
.fl-menu .sub-menu li.current-menu-item a,
.fl-menu .sub-menu li a:hover {
	color: #b24b8c;
	border-bottom: 2px solid #b24b8c;
}

/* ==========================================================================
   Onglets avancés "éditorial" (PowerPack Advanced Tabs) — à activer avec la classe "tabs-editorial"
   (module > Avancé > Classe). Réglages module : Layout = Vertical. Typos/tailles : réglées dans Beaver.
   Numéros 01, 02… générés automatiquement (compteurs CSS), dans les onglets et dans le déroulé.
   ========================================================================== */

/* Mise en page : onglets à gauche, contenu à droite */
@media only screen and (min-width: 769px) {
	.tabs-editorial .pp-tabs-vertical {
		display: grid;
		grid-template-columns: minmax(230px, 4fr) 8fr;
		column-gap: 80px;
		align-items: start;
	}
	.tabs-editorial .pp-tabs-vertical::before,
	.tabs-editorial .pp-tabs-vertical::after {
		display: none !important;
	}
	.tabs-editorial .pp-tabs-vertical .pp-tabs-labels,
	.tabs-editorial .pp-tabs-vertical .pp-tabs-panels {
		float: none !important;
		width: auto !important;
	}
}

/* Onglets (liste de gauche) */
.tabs-editorial .pp-tabs-labels {
	counter-reset: tablabel;
}
.tabs-editorial .pp-tabs-labels .pp-tabs-label {
	counter-increment: tablabel;
	background: transparent !important;
	border-width: 0 0 1px 0 !important;
	border-style: solid !important;
	border-color: #EAD6D0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}
.tabs-editorial .pp-tabs-labels .pp-tabs-label:first-child {
	border-top: 1px solid #EAD6D0 !important;
}
.tabs-editorial .pp-tabs-labels .pp-tab-label-inner {
	position: relative;
	padding: 24px 40px 24px 6px;
}
.tabs-editorial .pp-tabs-labels .pp-tab-label-flex {
	display: flex;
	align-items: baseline;
	gap: 36px;
}
.tabs-editorial .pp-tabs-labels .pp-tab-label-flex::before {
	content: counter(tablabel, decimal-leading-zero);
	flex: 0 0 auto;
	min-width: 28px;
	font-size: 13px;
	letter-spacing: 0.15em;
	color: #D9AFA5;
}
.tabs-editorial .pp-tabs-labels .pp-tab-title {
	transition: color 0.2s ease;
}
.tabs-editorial .pp-tabs-labels .pp-tabs-label:hover .pp-tab-title,
.tabs-editorial .pp-tabs-labels .pp-tabs-label.pp-tab-active .pp-tab-title {
	color: #A06565;
}
/* Tiret à droite de l'onglet actif */
.tabs-editorial .pp-tabs-labels .pp-tabs-label.pp-tab-active .pp-tab-label-inner::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 18px;
	height: 1px;
	background: #A06565;
	border: 0;
	transform: none;
}

/* Déroulé (panneau de droite) */
.tabs-editorial .pp-tabs-panels {
	counter-reset: tabpanel;
	border: 0 !important;
	background: transparent !important;
}
.tabs-editorial .pp-tabs-panel {
	counter-increment: tabpanel;
}
.tabs-editorial .pp-tabs-panel-content {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

/* Photo éventuelle en tête de l'onglet */
.tabs-editorial .pp-tabs-panel-content img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
	margin: 0 0 44px;
}

/* Surtitre "01 — TITRE DE LA SECTION" : <h3 class="eyebrow-tab">Titre de la section</h3> (le numéro est automatique).
   Fonctionne aussi avec <p class="eyebrow-tab">. Les styles de titre du thème sont neutralisés pour garder l'aspect d'origine. */
.tabs-editorial .pp-tabs-panel-content .eyebrow-tab {
	margin: 0 0 14px;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #A06565;
}
.tabs-editorial .pp-tabs-panel-content .eyebrow-tab::before {
	content: counter(tabpanel, decimal-leading-zero) " — ";
}

/* Titre d'accroche en italique ("Vous ne pouvez pas prendre soin…") : premier titre h4 du contenu
   (hiérarchie : h2 de la section > h3 "01 — …" > h4 accroche) */
.tabs-editorial .pp-tabs-panel-content h4:first-of-type {
	margin: 0 0 32px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	font-size: clamp(20px, 1.7vw, 24px);
	color: #4A3B39;
}

/* Libellés d'onglets balisés en <h3> : on neutralise les styles de titre du thème pour garder l'apparence actuelle */
.tabs-editorial .pp-tab-title h3 {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* Filet de séparation entre deux blocs de texte */
.tabs-editorial .pp-tabs-panel-content hr {
	border: 0;
	border-top: 1px solid #EAD6D0;
	margin: 32px 0;
}

/* Mode accordéon (mobile) : numéros aussi sur les en-têtes */
.tabs-editorial .pp-tabs-panel-label .pp-tab-label-flex::before {
	content: counter(tabpanel, decimal-leading-zero);
	margin-right: 18px;
	font-size: 13px;
	letter-spacing: 0.15em;
	color: #D9AFA5;
}
@media only screen and (max-width: 768px) {
	.tabs-editorial .pp-tabs-panel-content img {
		height: 200px;
		margin-bottom: 28px;
	}
}

/* ==========================================================================
   Frise "parcours" (page À propos) — classe "timeline-editorial" sur le module HTML OU sur un <div> qui entoure les .tl-item.
   Structure : <div class="timeline-editorial"><div class="tl-item"><h3 class="tl-year">2019</h3><p class="tl-text">…</p></div>…</div>
   ========================================================================== */
.timeline-editorial .tl-item:first-child {
	border-top: 1px solid #EAD6D0;
}
.timeline-editorial .tl-item {
	display: grid;
	grid-template-columns: minmax(110px, 1fr) 2.3fr;
	column-gap: 48px;
	align-items: baseline;
	padding: 44px 0;
	border-bottom: 1px solid #EAD6D0;
}
.timeline-editorial .tl-year {
	margin: 0;
	padding: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 32px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: #b24b8c;
}
.timeline-editorial .tl-text {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: #4A3B39;
}
@media only screen and (max-width: 768px) {
	.timeline-editorial .tl-item {
		grid-template-columns: 1fr;
		row-gap: 10px;
		padding: 28px 0;
	}
	.timeline-editorial .tl-year {
		font-size: 28px;
	}
}