/* =====================================================================
   Evok — header fixe (reproduction du header du theme Evok, variante
   header_black : fond blanc + logo fonce, comme les pages "no_background"
   du site principal). Unites en px (1rem theme = 10px). JS .scrolled
   injecte par evok-forms.php.
   ===================================================================== */

header.header {
	--white:#FFFFFF; --black_alt:#121212; --body-color:var(--black_alt);
	--blue_dark:#13294B;

	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 48px;
	/* base = variante "sur photo" : transparent, controles blancs ;
	   header_black / scrolled repassent en fond blanc + controles fonces */
	background: transparent;
	font-family: 'Futura PT', Arial, sans-serif;
	font-size: 16px;
	color: var(--body-color);
	letter-spacing: 0.32px;
	transition: background 0.4s ease;
}
header.header.header_black { background: var(--white); }
header.header *, header.header *::before, header.header *::after { box-sizing: border-box; }
header.header ul { list-style: none; margin: 0; padding: 0; }
header.header a { text-decoration: none; color: inherit; }
header.header button { background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
body.admin-bar header.header { top: 32px; }

header.header .header_top {
	position: relative;
	height: 130px;
	display: flex;
	align-items: center;
	/* trait sous le header (border du header_nav sur evok), meme sans menu :
	   blanc sur la photo, fonce sur fond blanc */
	border-bottom: 1px solid var(--white);
	transition: height 0.4s ease 0.4s, border 0.4s ease;
}
header.header.header_black .header_top,
header.header.scrolled .header_top {
	border-bottom: 1px solid var(--body-color);
}

/* ---- logos centres (plein -> reduit au scroll) ---- */
header.header .header_top .header--logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
header.header .header_top .header--logo img {
	display: block;
	/* taille modulable via l'option site_logo--scale (defaut 1) */
	width: calc(120px * var(--logo-scale, 1));
	height: auto;
}
header.header .header_top .header--logo.logo--full { transition: transform 0.4s ease 0.4s; }
header.header .header_top .header--logo.logo--text { opacity: 0; transition: opacity 0.4s ease; }

/* ---- selecteur de langue ---- */
header.header .header_top .wp_lang { margin-left: auto; display: inline-flex; }
header.header .wp_lang .fa-chevron-down { font-size: 7.5px; }
header.header .wp_lang .wp_lang--dropdown { position: relative; }
header.header .wp_lang .wp_lang--dropdown button {
	display: flex;
	align-items: center;
	gap: 0 10px;
	color: var(--white);
	font-size: 16px;
	transition: color 0.4s ease;
}
header.header.header_black .wp_lang .wp_lang--dropdown button,
header.header.scrolled .wp_lang .wp_lang--dropdown button {
	color: var(--body-color);
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list {
	position: absolute;
	left: 0;
	top: 100%;
	padding-top: 7.5px;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li a {
	display: block;
	background: var(--white);
	color: var(--body-color);
	font-size: 16px;
	padding: 11px 15px;
	border: 1px solid var(--body-color);
	transition: color 0.3s ease, background-color 0.3s ease;
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li a:hover {
	background: var(--body-color);
	color: var(--white);
}
header.header .wp_lang .wp_lang--dropdown .dropdown--list li + li a { border-top: 0; }
header.header .wp_lang .wp_lang--dropdown:hover .dropdown--list {
	opacity: 1;
	pointer-events: auto;
	z-index: 10;
}

/* ---- boutons (portes du theme, header_black : bordure foncee) ---- */
header.header .btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	white-space: normal;
	text-align: left;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: 1.04px;
	padding: 10px 20px;
	border: 1px solid var(--body-color);
	color: var(--body-color);
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
}
header.header .btn:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}
/* bouton Book : blanc sur la photo, fonce en header_black / scrolled */
header.header .btn.btn-white {
	background: transparent;
	border: 1px solid var(--white);
	color: var(--white);
}
header.header .btn.btn-white:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}
header.header.header_black .header_top .header--book > .btn,
header.header.scrolled .header_top .header--book > .btn {
	background: transparent;
	border: 1px solid var(--body-color);
	color: var(--body-color);
}
header.header.header_black .header_top .header--book > .btn:hover,
header.header.scrolled .header_top .header--book > .btn:hover {
	background: var(--body-color);
	border: 1px solid var(--body-color);
	color: var(--white);
}

/* ---- Book (dropdown au survol) ---- */
header.header .header_top .header--book { margin-left: 20px; position: relative; }
header.header .header_top .header--book > .btn { min-width: 120px; }
header.header .header_top .header--book .book--btns {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	transition: opacity 0.2s ease;
}
header.header .header_top .header--book .book--btns .btn {
	width: 100%;
	background: var(--white);
	color: var(--black_alt);
	border: 1px solid var(--black_alt);
	border-top: 0;
}
header.header .header_top .header--book .book--btns .btn:hover {
	background: var(--black_alt);
	color: var(--white);
}
header.header .header_top .header--book:hover .book--btns {
	opacity: 1;
	pointer-events: auto;
	z-index: 10;
}

/* masque Book sous 992px (d-lg-block d-none du theme) */
@media (max-width: 991px) {
	header.header .header_top .header--book { display: none; }
}

/* ---- etat scrolled : header reduit, bascule des logos ---- */
header.header.scrolled { background: var(--white); transition: background 0.4s ease 0.4s; }
header.header.scrolled .header_top { height: 80px; transition: height 0.4s ease, border 0.4s ease; }
header.header.scrolled .header_top .header--logo.logo--full {
	transform: translate(-50%, -250%);
	transition: transform 0.4s ease;
}
header.header.scrolled .header_top .header--logo.logo--text {
	opacity: 1;
	transition: opacity 0.4s ease 0.4s;
}

/* ---- page SANS image d'entete : dégager la hauteur du header ----
   Le header est en position:fixed, donc hors du flux. Avec une photo, celle-ci
   occupe la place et le header se pose dessus, transparent — c'est l'effet
   voulu. Sans photo, le contenu démarrait à zéro et se retrouvait masqué
   derrière les 130px du bandeau blanc : le titre de la page était coupé.

   La classe evok-has-hero est posée sur le <body> par evok-forms.php ; elle
   existait déjà mais aucune règle ne s'en servait. On réserve donc la hauteur
   du header uniquement quand la photo manque. */
body:not(.evok-has-hero) {
	padding-top: 130px;
}

/* ---- image d'entete (pleine largeur, sous le header transparent) ---- */
.evok-page-hero {
	width: 100%;
	height: 70vh;
}
.evok-page-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- mobile ---- */
@media (max-width: 767px) {
	header.header { padding: 0 20px; }
	header.header .header_top .header--logo img { width: calc(100px * var(--logo-scale, 1)); }
	header.header .header_top .header--logo.logo--text img { width: calc(90px * var(--logo-scale, 1)); }
	header.header .header_top .wp_lang { display: none; }
	header.header.scrolled .header_top { height: 65px; }
	body.admin-bar header.header { top: 46px; }
	.evok-page-hero { height: 55vh; }
	/* le header garde 130px hors défilement, mais le logo y est plus petit :
	   un peu moins de dégagement suffit sans laisser un grand blanc */
	body:not(.evok-has-hero) { padding-top: 115px; }
}