/* Module « Header sticky » — header réduit au scroll.
 *
 * Au repos (haut de page) : aucune règle ne s'applique, le header garde son
 * apparence d'origine. Tout est conditionné à la classe .is-stuck posée par le JS.
 */

.vsticky-header {
	transition: background-color .4s ease, box-shadow .4s ease;
}

/* ------------------------------------------------------------------
   ÉTAT STICKY
------------------------------------------------------------------ */

.vsticky-header.is-stuck {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background-color: var( --vstk-bg, #ffffff ) !important;
	box-shadow: 0 1px 12px rgba( 0, 0, 0, .07 );
	min-height: var( --vstk-height, 70px );
	height: var( --vstk-height, 70px );
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center !important;
}

/* Les conteneurs enfants s'alignent verticalement sur la hauteur réduite,
   sinon le burger et le bouton flottent en haut. */
.vsticky-header.is-stuck > .e-con,
.vsticky-header.is-stuck > .elementor-element {
	height: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   ANIMATION D'ENTRÉE (façon Cheval Blanc)
   Le fond apparaît en fondu, puis les éléments se posent du haut vers le bas.
------------------------------------------------------------------ */

/* Fond : fondu via un pseudo-élément, pour ne pas animer le header lui-même */
.vsticky-header.is-stuck::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var( --vstk-bg, #ffffff );
	opacity: 0;
	z-index: -1;
	animation: vstk-fade-in .9s cubic-bezier( .33, 1, .68, 1 ) forwards;
}

@keyframes vstk-fade-in {
	to { opacity: 1; }
}

/* Éléments : petit translate du haut vers le bas, en cascade */
.vsticky-header.is-stuck .venete-burger-widget,
.vsticky-header.is-stuck .elementor-widget-theme-site-logo,
.vsticky-header.is-stuck .venete-reservation-widget {
	animation: vstk-drop .5s cubic-bezier( .33, 1, .68, 1 ) both;
}

.vsticky-header.is-stuck .venete-burger-widget       { animation-delay: .10s; }
.vsticky-header.is-stuck .elementor-widget-theme-site-logo { animation-delay: .16s; }
.vsticky-header.is-stuck .venete-reservation-widget  { animation-delay: .22s; }

@keyframes vstk-drop {
	from {
		opacity: 0;
		transform: translateY( -14px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* ------------------------------------------------------------------
   COULEURS EN ÉTAT STICKY
------------------------------------------------------------------ */

/* Les barres du burger : transition sur le fill pour que tout changement de
   couleur (y compris ceux imposés par le script du burger) soit fondu et non
   brutal. */
.vsticky-header .venete-bar {
	transition: fill .3s ease;
}

/* Bouton Réserver : texte et contour en noir */
.vsticky-header.is-stuck .venete-reserve-trigger,
.vsticky-header.is-stuck .venete-reserve-trigger-label {
	color: var( --vstk-ink, #1a1a1a ) !important;
	border-color: var( --vstk-ink, #1a1a1a ) !important;
	transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

/* Survol : fond noir, contour noir, texte blanc */
.vsticky-header.is-stuck .venete-reserve-trigger:hover,
.vsticky-header.is-stuck .venete-reserve-trigger:focus-visible {
	background-color: var( --vstk-ink, #1a1a1a ) !important;
	border-color: var( --vstk-ink, #1a1a1a ) !important;
	color: var( --vstk-bg, #ffffff ) !important;
}

.vsticky-header.is-stuck .venete-reserve-trigger:hover .venete-reserve-trigger-label,
.vsticky-header.is-stuck .venete-reserve-trigger:focus-visible .venete-reserve-trigger-label {
	color: var( --vstk-bg, #ffffff ) !important;
}

/* ------------------------------------------------------------------
   LOGO : typo blanche → icône oiseau beige
------------------------------------------------------------------ */

.vsticky-header .elementor-widget-theme-site-logo img {
	transition: opacity .7s ease;
}

.vsticky-header .vstk-logo-holder {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* L'oiseau est injecté par le JS, masqué tant qu'on n'est pas sticky */
.vsticky-header .vstk-logo-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: auto;
	height: var( --vstk-logo-size, 38px );
	color: var( --vstk-logo-color, #E6E0D2 );
	opacity: 0;
	pointer-events: none;
	transition: opacity .7s ease;
}

.vsticky-header .vstk-logo-mark svg {
	display: block;
	width: auto;
	height: 100%;
}

.vsticky-header .vstk-logo-mark svg path {
	fill: currentColor;
}

.vsticky-header.is-stuck .elementor-widget-theme-site-logo img {
	opacity: 0;
}

.vsticky-header.is-stuck .vstk-logo-mark {
	opacity: 1;
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media ( prefers-reduced-motion: reduce ) {
	.vsticky-header,
	.vsticky-header *,
	.vsticky-header.is-stuck::before {
		animation: none !important;
		transition: none !important;
	}
	.vsticky-header.is-stuck::before { opacity: 1; }
}



/* ------------------------------------------------------------------
   MOBILE : logo aligné à gauche
   Volontairement minimal : on ne touche ni aux dimensions ni au flex
   des conteneurs, pour ne pas déstructurer le header.
------------------------------------------------------------------ */
@media ( max-width: 767px ) {

	/* Le widget logo se cale à gauche dans son conteneur */
	.vsticky-header.is-stuck .elementor-widget-theme-site-logo .elementor-widget-container {
		display: flex;
		justify-content: flex-start;
	}

	/* L'oiseau suit l'alignement à gauche au lieu d'être centré */
	.vsticky-header.is-stuck .vstk-logo-mark {
		left: 0;
		transform: translateY( -50% );
	}

	/* Même marge à gauche du logo que celle du burger à droite (15px),
	   pour un équilibre visuel. On ne touche qu'au padding. */
	.vsticky-header.is-stuck .vstk-logo-con {
		padding-left: 15px;
	}
}