/* =========================
   Header v2: grand (in-flow) + sticky compact
   ========================= */

:root{
  --container-max: 1200px;
  --header-hero-h: 200px;
  --header-sticky-h: 70px;
}

/* Container centré */
.hsmf-container{
  max-width: var(--container-max);
	width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 1) Header HERO (dans le flux) --- */
.hsmf-header-hero{
  width: 100%;
  height: var(--header-hero-h);
  background: #0b0b0b;
  color: #fff;
  display: flex;
  align-items: center;
}



/* --- 2) Header STICKY (fixed, slide-in) --- */
.hsmf-header-sticky{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-sticky-h);
  background: rgba(255,255,255,0.97);
  color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);

  transform: translateY(-110%);
  opacity: 0;
  transition: transform 540ms ease, opacity 0ms ease;
  z-index: 9999;
	padding-top: 5px;
}

body.hsmf-sticky-on .hsmf-header-sticky{
  transform: translateY(0);
  opacity: 1;
}



/* Alignement interne */
.hsmf-header-hero .hsmf-container,
.hsmf-header-sticky .hsmf-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Option: enlever style de lien/zone cliquable autour du logo */
.site-logo{
  background: transparent;
  padding: 0;
  margin: 0;
}

/* tailles */
.hsmf-header-hero .site-logo img { 
	height: 140px; 
	width: auto; 
	display: block; 
}
.hsmf-header-sticky .site-logo img { 
	height: 65px; 
	width: auto; 
	display: block; 
}