/*
--------------------------------------
Header Template 1 - Responsive
--------------------------------------
*/

/* Mobile et tablette */
@media (max-width: 1199px) {

	.main-header__container.header-variant-1 .main-header__header-container {
		padding: 16px 20px;
	}

	.main-header__container.header-variant-1 .main-header__header-container-inner {
		gap: 20px;
	}

	/* Cache le menu desktop */
	.main-header__container.header-variant-1 .navigation-links {
		display: none;
	}

	/* Ordre des éléments : burger à gauche, logo au centre, phone à droite */
	.main-header__container.header-variant-1 .burger-container {
		order: 1;
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-start;
	}

	.main-header__container.header-variant-1 .main-logo {
		order: 2;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main-header__container.header-variant-1 .header-phone-button {
		order: 3;
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
	}

	/* Affiche le burger menu */
	.main-header__container.header-variant-1 .burger-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-header__container.header-variant-1 .burger {
		cursor: pointer;
		padding: 8px;
	}

	.main-header__container.header-variant-1 .burger svg {
		stroke: #FFFFFF;
	}

	/* Menu mobile en overlay */
	.main-header__container.header-variant-1 .navigation-wrapper .overlay {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 998;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.main-header__container.header-variant-1 .navigation-wrapper.--is-active .overlay {
		opacity: 1;
		visibility: visible;
	}

	.main-header__container.header-variant-1 .navigation-container {
		position: fixed;
		top: 0;
		left: -80%;
		width: 80%;
		max-width: 400px;
		height: 100vh;
		min-height: 100vh;
		background: #1E293B;
		z-index: 999;
		padding: 60px 30px 30px;
		transition: left 0.3s ease;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.main-header__container.header-variant-1 .navigation-wrapper.--is-active .navigation-container {
		left: 0;
	}

	.main-header__container.header-variant-1 .navigation-wrapper .close {
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
		color: #FFFFFF;
	}

	.main-header__container.header-variant-1 .navigation-wrapper.--is-active .navigation-links {
		display: block;
	}

	.main-header__container.header-variant-1 .navigation-links__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* Logo plus petit sur mobile */
	.main-header__container.header-variant-1 .main-logo__img {
		max-width: 120px;
		height: 34px;
		max-height: 34px;
	}

	/* Phone button : affiche l'icône et cache le texte sur mobile */
	.main-header__container.header-variant-1 .header-phone-button__list a,
	.main-header__container.header-variant-1 .header-phone-button__fallback .header-phone-button__link {
		padding: 10px;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		font-size: 0;
		position: relative;
	}

	/* Affiche l'icône téléphone avec un pseudo-élément */
	.main-header__container.header-variant-1 .header-phone-button__list a::before,
	.main-header__container.header-variant-1 .header-phone-button__fallback .header-phone-button__link::before {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* Cache le texte et l'icône du fallback */
	.main-header__container.header-variant-1 .header-phone-button__icon {
		display: none !important;
	}

	.main-header__container.header-variant-1 .header-phone-button__text {
		display: none;
	}

}

/* Tablette */
@media (min-width: 768px) and (max-width: 1199px) {

	.main-header__container.header-variant-1 .main-header__header-container {
		padding: 20px 40px;
	}

	.main-header__container.header-variant-1 .main-logo__img {
		max-width: 130px;
		height: 37px;
		max-height: 37px;
	}

}