/*
--------------------------------------
Header Responsive
--------------------------------------
Breakpoints:
- Mobile: < 576px
- Mobile large: 576px - 767px
- Tablette: 768px - 1199px
- PC portable: 1200px - 1440px
- Desktop: > 1440px
--------------------------------------
*/

/*
======================================
MOBILE - < 576px (Smartphones portrait)
======================================
*/

/*
======================================
MOBILE - Recherche : cachée par défaut, visible quand menu ouvert
======================================
*/

@media (max-width: 767px) {

	.main-header__container .main-header__inner {
		background-color: var(--color-white);
		transition: background-color 0.35s ease-in-out;
	}

	.main-header__container.main-header--fullscreen.is-nav-open.is-nav-sublevel,
	.main-header__container.main-header__container--product-force-black-logo.main-header__container--product-white-logo-on-pinned {
		--burger-line-color: var(--color-black, #000);
	}

	.main-header__container.main-header--fullscreen .main-header__inner{
		background-color: transparent;
	}

	.main-header__container.main-header__container--product-force-black-logo.main-header__container--product-white-logo-on-pinned .main-header__inner,
	.main-header__container.main-header--fullscreen.is-nav-open.is-nav-sublevel .main-header__inner {
		background-color: transparent;
	}

	.main-header__container.main-header__container--logo-swapped .main-header__inner {
		background-color: var(--color-white);
	}

	.main-header__container.main-header__container--product-force-black-logo .main-header__inner {
		background-color: transparent;
	}

	.main-header__container.main-header--fullscreen.is-nav-open .main-header__inner {
		background-color: transparent;
	}

	.main-header__container.main-header__container--product-force-black-logo.main-header__container--product-white-logo-on-pinned .main-header__inner,
	.main-header__container.main-header--fullscreen.is-nav-open.is-nav-sublevel .main-header__inner {
		background-color: transparent;
	}

	.header-search-shortcode {
		display: none;
	}

	.main-header--fullscreen.is-nav-open .header-search-shortcode {
		display: flex;
	}

}

@media (max-width: 575px) {

	/* Header container */
	.main-header__container {
		padding: 0;
	}

	.main-header__header-container-inner {
		grid-template-columns: auto 1fr auto;
		max-width: 100%;
		padding: 0 var(--spacing-md);
		gap: var(--spacing-sm);
	}

	/* Logo centré */
	.main-header__container .main-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: left;
	}

	.main-header__container .main-logo__img {
		padding: var(--spacing-sm) 0;
	}

	.main-header__container .main-logo__svg {
		width: 120px;
	}

	.main-header__container .main-logo__link {
		padding-top: 0;
		gap: var(--spacing-sm);
	}

	.main-header__container .main-logo__text {
		font-size: var(--font-size-base);
		padding-top: 0;
	}

	/* Burger à gauche */
	.menu-wrapper {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
	}

	.header-menu-line {
		display: none;
	}

	/* Actions à droite */
	.main-header__inner .header-actions {
		grid-column: 3;
		grid-row: 1;
		gap: var(--spacing-sm);
	}

	.header-action__link-text {
		display: none;
	}

	/* Burger size - header classique uniquement */
	.main-header__container:not(.main-header--fullscreen) .burger {
		width: 36px;
		height: 36px;
		padding: var(--spacing-sm);
	}

	.main-header__container:not(.main-header--fullscreen) .burger__lines {
		width: 20px;
		height: 14px;
		gap: 5px;
	}



	.header-search-shortcode input[type="search"],
	.header-search-shortcode input[type="text"] {
		height: 36px;
		padding: 8px 14px;
	}

	/* Topbar */
	.main-header__topbar-container {
		height: 36px;
		padding: 0 12px;
	}

	.main-header__topbar-container .header-action__link-text {
		font-size: var(--font-size-xs);
		display: block;
	}

}

/*
======================================
MOBILE LARGE - 576px à 767px (Smartphones paysage)
======================================
*/

@media (min-width: 576px) and (max-width: 767px) {

	.main-header__header-container-inner {
		grid-template-columns: auto 1fr auto;
		max-width: 95%;
		gap: 12px;
	}

	/* Logo centré */
	.main-header__container .main-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}


	.main-header__container .main-logo__svg {
		width: 140px;
	}

	/* Burger à gauche */
	.menu-wrapper {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
	}

	.header-menu-line {
		display: none;
	}

	/* Actions à droite */
	.main-header__inner .header-actions {
		grid-column: 3;
		grid-row: 1;
		gap: 10px;
	}

	.main-header__container:not(.main-header--fullscreen) .burger {
		width: 40px;
		height: 40px;
	}

}

/*
======================================
TABLETTE - 768px à 1199px
======================================
*/

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

	.main-header__header-container-inner {
		grid-template-columns: auto 1fr auto;
		max-width: 95%;
		gap: 20px;
	}

	/* Logo à gauche */
	.main-header__container .main-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.main-header__container .main-logo__svg {
		width: 150px;
	}

	.main-header__container .main-logo__link {
		padding-top: 5px;
	}

	/* Actions au centre-droit */
	.main-header__inner .header-actions {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-end;
		gap: 15px;
	}

	/* Burger à droite */
	.menu-wrapper {
		grid-column: 3;
		grid-row: 1;
		justify-content: flex-end;
	}

	.header-menu-line {
		display: none;
	}

	.main-header__container:not(.main-header--fullscreen) .burger {
		width: 44px;
		height: 44px;
	}

	.main-header__container:not(.main-header--fullscreen) .burger__lines {
		width: 24px;
		height: 18px;
	}

}

/*
======================================
PC PORTABLE - 1200px à 1440px
======================================
*/

@media (min-width: 1200px) and (max-width: 1440px) {

	.main-header--fullscreen .main-logo {
		left: clamp(16px, 3vw, 32px);
	}


	.main-header--fullscreen .burger-container {
		right: clamp(16px, 3vw, 32px);
	}

	.main-header--fullscreen .header-actions {
		right: calc(clamp(16px, 3vw, 32px) + 55px);
		gap: 10px;
	}

	.header-menu-line {
		max-width: min(48vw, 680px);
	}

}

/*
======================================
DESKTOP - > 1200px (Styles communs)
======================================
*/

@media (min-width: 1200px) {

	.main-header__inner--is-fixed {
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.35s ease-in-out;
		pointer-events: none;
	}

	.main-header__inner--is-fixed.main-header__inner--is-shown {
		opacity: 1;
		transform: translateY(0);
		pointer-events: all;
	}

	.menu-wrapper {
		grid-column: 2;
	}

	.main-header__inner .header-actions {
		grid-column: 3;
	}

	.menu-wrapper .navigation-links {
		display: flex;
		justify-content: center;
	}

}

/*
======================================
LARGE DESKTOP - > 1440px
======================================
*/

@media (min-width: 1440px) {

	.main-header__header-container-inner.header-variant-1 {
		grid-template-columns: auto auto;
	}

	.main-header--fullscreen .main-logo {
		left: clamp(24px, 4vw, 48px);
	}

	.main-header--fullscreen .burger-container {
		right: clamp(24px, 4vw, 48px);
	}

	.main-header--fullscreen .header-actions {
		right: calc(clamp(24px, 4vw, 48px) + 60px);
	}

}

/*
======================================
DISABLE HOVER ANIMATIONS - Touch devices
======================================
*/

@media (hover: none), (pointer: coarse) {

	/* Disable all hover transitions on touch devices */
	.burger,
	.burger__line,
	.menu-link,
	.header-action__link {
		transition: none !important;
	}

	/* Ensure proper tap targets for touch */
	.burger {
		min-width: 44px;
		min-height: 44px;
	}

	.header-action__link {
		min-height: 44px;
		padding: 10px;
	}

}

/*
======================================
REDUCE MOTION - Accessibility
======================================
*/

@media (prefers-reduced-motion: reduce) {

	.main-header__container,
	.main-header__topbar-container,
	.main-header__header-container,
	.main-header__inner--is-fixed,
	.burger,
	.burger__line,
	.main-logo__img {
		transition: none !important;
	}

}