/* ============================================================
   header-batibien — Portail thérapeutes
   Ce fichier est chargé sur TOUTES les pages (enqueue global) :
   il porte donc les tokens de design batibien, la base et les .btn
   partagés par le header, le contenu et le footer.
   Les couleurs pointent vers les variables Customizer (--color-*)
   avec repli sur les valeurs de marque batibien.
   ============================================================ */
:root{
	--ink:        var(--color-text, #14261D);       /* vert sapin très sombre */
	--leaf:       var(--color-primary, #2E5B45);    /* vert officinal */
	--paper:      var(--color-background, #F4F6F1);  /* papier sauge */
	--amber:      var(--color-accent, #B9822F);     /* macérât huileux */
	--line:       var(--color-border, #CBD5C8);
	--leaf-soft:  var(--color-surface, #E4ECE4);    /* vert d'eau pâle */
	--amber-deep: #8F6220;
	--white:      #FFFFFF;
	--muted:      #5C6E62;
	--radius:     14px;
	--max:        1180px;
}

/* ---------- Base globale ---------- */
body{
	font-family:'Archivo',system-ui,sans-serif;
	background:var(--paper);
	color:var(--ink);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
html{scroll-behavior:smooth}
a{color:inherit}
::selection{background:var(--amber);color:var(--white)}

/* ---------- Boutons (header + contenu) ---------- */
.btn{
	display:inline-block;padding:11px 22px;border-radius:999px;
	font-weight:600;font-size:.92rem;text-decoration:none;
	border:1.5px solid transparent;
	transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	cursor:pointer;
}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--leaf);color:var(--leaf);background:transparent}
.btn-ghost:hover{background:var(--leaf);color:var(--paper)}
.btn-solid{background:var(--leaf);color:var(--paper)}
.btn-solid:hover{background:var(--ink)}
.btn-amber{background:var(--amber);color:var(--white)}
.btn-amber:hover{background:var(--amber-deep)}

/* ---------- Header ---------- */
.bb-header{
	position:sticky;top:0;z-index:50;
	background:rgba(244,246,241,.92);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line);
}
.bb-header .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.bb-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.bb-header .brand-mark{
	width:40px;height:40px;border-radius:50%;
	background:var(--leaf);color:var(--paper);
	display:grid;place-items:center;
	font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;
	flex-shrink:0;
}
.bb-header .brand-logo{height:40px;width:auto;display:block}
.bb-header .brand-name{font-weight:700;letter-spacing:.01em;line-height:1.15}
.bb-header .brand-name small{
	display:block;font-weight:500;font-size:.68rem;color:var(--leaf);
	letter-spacing:.14em;text-transform:uppercase;
}
.bb-header .nav-actions{display:flex;align-items:center;gap:10px}
.bb-header .lang{
	display:inline-flex;align-items:center;gap:6px;
	font-size:.78rem;font-weight:600;color:var(--muted);margin-right:6px;
}
.bb-header .lang a{text-decoration:none;padding:2px 3px}
.bb-header .lang a[aria-current="true"]{color:var(--leaf);border-bottom:2px solid var(--amber)}
.bb-header .lang a:hover{color:var(--leaf)}
.bb-header .lang span{color:var(--line)}

/* ---------- Mode « commande pour un client » (Sales Agents) ----------
   La barre du plugin (<form class="wcb2bsa-switch-form">) n'existe QUE pendant
   l'impersonation. On s'en sert comme déclencheur (:has + classe .bb-impersonating
   posée en secours par header.js) pour : décaler le header sous la barre et
   simplifier la navigation (pas de Déconnexion ni Espace partenaires ; on montre
   « Mon compte »). Pour quitter le mode : bouton « Switch as sales agent » de la barre. */

/* Barre plugin : barre fixe propre, aux couleurs batibien */
.wcb2bsa-switch-form{
	position:fixed;inset:0 0 auto 0;z-index:1000;
	display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;
	height:48px;margin:0;padding:0 16px;
	background:var(--ink);color:var(--paper);
	font-family:'Archivo',system-ui,sans-serif;font-size:.9rem;font-weight:600;
	box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.wcb2bsa-switch-form>div{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcb2bsa-switch-form button{
	appearance:none;cursor:pointer;flex-shrink:0;
	border:1.5px solid var(--amber);background:var(--amber);color:#fff;
	border-radius:999px;padding:6px 16px;font:inherit;font-weight:600;
	transition:background .15s ease,border-color .15s ease;
}
.wcb2bsa-switch-form button:hover{background:var(--amber-deep);border-color:var(--amber-deep)}

/* « Mon compte » caché par défaut, montré seulement en mode commande pour un client */
.bb-nav-account{display:none}

/* Décalage header + contenu sous la barre */
body:has(.wcb2bsa-switch-form),
body.bb-impersonating{padding-top:48px}
body:has(.wcb2bsa-switch-form) .bb-header,
body.bb-impersonating .bb-header{top:48px}

/* Navigation simplifiée */
body:has(.wcb2bsa-switch-form) .bb-nav-espace,
body.bb-impersonating .bb-nav-espace{display:none}
body:has(.wcb2bsa-switch-form) .bb-nav-account,
body.bb-impersonating .bb-nav-account{display:inline-block}

/* ---------- Responsive ----------
   (Sur mobile, langue et boutons ne sont plus masqués : ils passent dans
   le menu déroulant du burger — voir « Sous 820px » plus bas.) */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
}

/* ---------- Menu (liens visiteur + langue + boutons) ----------
   .bb-menu = conteneur du menu. display:contents sur desktop → ses enfants
   (bb-mainnav, nav-actions) se placent normalement dans la barre flex.
   Sur mobile, il devient le panneau déroulant du burger (voir plus bas). */
.bb-header .bb-menu{display:contents}
.bb-header .bb-mainnav{display:flex;align-items:center;gap:26px}
.bb-header .bb-mainnav a{
	text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink);
	padding:6px 0;transition:color .15s ease;
}
.bb-header .bb-mainnav a:hover{color:var(--leaf)}
.bb-header .bb-burger{
	display:none;appearance:none;border:none;background:transparent;cursor:pointer;
	width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
}
.bb-header .bb-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.bb-header .bb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bb-header .bb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bb-header .bb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sous 820px : TOUT le menu (liens + langue + boutons) passe en panneau déroulant via le burger. */
@media (max-width:820px){
	.bb-header .bb-burger{display:inline-flex}
	.bb-header .bb-menu{
		display:none;position:absolute;left:0;right:0;top:100%;
		flex-direction:column;align-items:stretch;gap:0;
		background:var(--paper);border-bottom:1px solid var(--line);
		box-shadow:0 14px 26px -18px rgba(20,38,29,.45);padding:8px 0;
	}
	.bb-header .bb-menu.is-open{display:flex}
	/* liens visiteur */
	.bb-header .bb-menu .bb-mainnav{flex-direction:column;align-items:stretch;gap:0}
	.bb-header .bb-menu .bb-mainnav a{padding:13px 24px;border-bottom:1px solid var(--line)}
	/* langue + boutons empilés pleine largeur */
	.bb-header .bb-menu .nav-actions{flex-direction:column;align-items:stretch;gap:10px;padding:14px 24px}
	.bb-header .bb-menu .nav-actions .btn{text-align:center}
	.bb-header .bb-menu .lang{justify-content:center;margin:2px 0 6px}

	/* Voile sombre derrière le panneau (le clic dessus ferme le menu — géré en JS).
	   z-index 40 : sous le header (z-50, donc barre + panneau au-dessus), au-dessus du contenu. */
	body.bb-menu-open::after{
		content:"";position:fixed;inset:0;background:rgba(15,25,20,.5);z-index:40;
		animation:bb-fade .2s ease;
	}
}
@keyframes bb-fade{from{opacity:0}to{opacity:1}}