/* ==========================================================================
   Header Préfal - intégration de la maquette Figma "header_grandpublic"
   Template : template-parts/header/header-classic.php
   Desktop (>= 993px) uniquement : en dessous, The7 bascule sur son header
   mobile (.mobile-header-bar + .dt-mobile-header), inchangé.
   ========================================================================== */

:root {
	/* Tokens Figma (colors/*, fonts/*, spacing/*) */
	--prefal-blue-100: #81d0f5;
	--prefal-blue-200: #78b9da;
	--prefal-blue-300: #077391;
	--prefal-neutral-400: #687073;
	--prefal-neutral-0: #ffffff;
	--prefal-font-title: "Jost", Helvetica, Arial, sans-serif;
	--prefal-font-body: "Nunito Sans", Helvetica, Arial, sans-serif;
	--prefal-space-2xs: 8px;
	--prefal-space-xs: 12px;
	--prefal-space-sm: 16px;
	--prefal-space-lg: 24px;
	--prefal-space-2xl: 48px;

	/* Dimensions du header */
	--prefal-header-height: 140px;
	--prefal-header-top-height: 90px;
	--prefal-header-nav-height: 50px;
	--prefal-header-logo-col: 250px;
	--prefal-header-gutter: 50px;
	--prefal-header-menu-gap: var(--prefal-space-2xl);
}

@media screen and (min-width: 993px) {

	/* --- Conteneur ------------------------------------------------------ */
	.masthead.prefal-header {
		background-color: var(--prefal-neutral-0);
	}

	/* Pleine largeur, sans le padding / max-width du header classic The7.
	   height:auto neutralise la hauteur inline posée par js/custom.js (sticky). */
	.masthead.prefal-header .header-bar {
		display: flex;
		flex-flow: row nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		max-width: 100% !important;
		min-height: var(--prefal-header-height) !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Espace réservé sous le header fixe (phantom-sticky) : même hauteur */
	#page .header-space {
		min-height: var(--prefal-header-height) !important;
	}

	/* --- Bloc logo (250 x 140) ------------------------------------------ */
	.masthead.prefal-header .branding {
		flex: 0 0 var(--prefal-header-logo-col) !important;
		width: var(--prefal-header-logo-col);
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		min-height: var(--prefal-header-height);
		padding-left: var(--prefal-header-gutter);
		background-color: var(--prefal-neutral-0);
	}

	/* Logo 150 x 92 : l'image (ratio 383x260) est recadrée verticalement
	   comme dans la maquette (hauteur 110,31 %, décalage -10,42 %). */
	/* The7 (phantom-sticky / phantom-custom-logo-on) masque le logo principal
	   en attendant son JS ou en mode sticky : on le garde toujours visible. */
	.masthead.prefal-header .branding > a:not(.sticky-logo):not(.phantom-top-line-logo),
	.phantom-sticky .masthead.prefal-header .branding > a:not(.same-logo):not(.sticky-logo):not(.phantom-top-line-logo),
	.phantom-custom-logo-on .show-phantom.masthead.prefal-header .branding > a:not(.sticky-logo):not(.phantom-top-line-logo) {
		order: 0;
		display: block !important;
		position: static !important;
		left: auto !important;
		width: 150px;
		height: 92px;
		overflow: hidden;
		padding: 0;
		opacity: 1 !important;
		visibility: visible !important;
		animation: none !important;
	}

	/* Logo "floating navigation" injecté par le JS The7 (a.sticky-logo /
	   .phantom-top-line-logo) : masqué, le logo principal reste affiché
	   dans tous les états, y compris sticky. Logo mobile masqué sur desktop. */
	.masthead.prefal-header .branding .sticky-logo,
	.masthead.prefal-header .branding .phantom-top-line-logo,
	.masthead.prefal-header .branding img.mobile-logo {
		display: none !important;
	}

	.masthead.prefal-header .branding > a > img:not(.mobile-logo) {
		display: block;
		width: 150px;
		height: auto;
		max-width: none;
		margin-top: calc(92px * -0.1042); /* -10,42 % de la hauteur du cadre */
	}

	.masthead.prefal-header .branding > .mini-widgets {
		display: none !important;
	}

	/* --- Colonne principale --------------------------------------------- */
	.prefal-header__main {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	/* --- Ligne haute : tagline + CTA ------------------------------------ */
	.prefal-header__top {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--prefal-space-lg);
		height: var(--prefal-header-top-height);
		padding-right: var(--prefal-header-gutter);
	}

	.prefal-header__tagline {
		align-self: flex-start;
		margin: var(--prefal-space-lg) 0 0;
		padding-left: 10px;
		border-left: 1px solid var(--prefal-blue-200);
		font-family: var(--prefal-font-title);
		font-weight: 500;
		font-size: 14px;
		line-height: var(--prefal-space-sm);
		color: var(--prefal-neutral-400);
		white-space: nowrap;
	}

	.prefal-header__ctas {
		display: flex;
		align-items: center;
		gap: var(--prefal-space-lg);
		margin-left: auto;
	}

	.prefal-cta,
	.prefal-cta:hover,
	.prefal-cta:focus {
		display: flex;
		align-items: center;
		gap: var(--prefal-space-2xs);
		padding: 12px 24px 12px 16px;
		border-radius: 16px;
		color: var(--prefal-neutral-0);
		text-decoration: none;
	}

	.prefal-cta {
		transition: filter 0.2s ease, transform 0.2s ease;
	}

	.prefal-cta:hover,
	.prefal-cta:focus-visible {
		filter: brightness(0.92);
	}

	.prefal-cta--catalogues { background-color: var(--prefal-blue-100); }
	.prefal-cta--menuisier  { background-color: var(--prefal-neutral-400); }
	.prefal-cta--devis      { background-color: var(--prefal-blue-300); }

	.prefal-cta__icon {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		display: block;
	}

	.prefal-cta__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-family: var(--prefal-font-body);
		font-weight: 700;
		line-height: normal;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--prefal-neutral-0);
	}

	.prefal-cta__line1 { font-size: 14px; }
	.prefal-cta__line2 { font-size: var(--prefal-space-sm); }

	/* --- Barre de navigation (bleu, 50px) -------------------------------- */
	.masthead.prefal-header .navigation {
		flex: 0 0 auto !important;
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		height: var(--prefal-header-nav-height);
		padding-left: var(--prefal-header-gutter);
		background-color: var(--prefal-blue-200);
	}

	/* Ligne de séparation du header classic The7 */
	.masthead.prefal-header .navigation:before {
		display: none;
	}

	/* Micro-widgets (anciens boutons CATALOGUES / DEVIS, recherche) :
	   remplacés par les CTA de la ligne haute. The7 les déplace toujours
	   dans le menu mobile sous 993px. */
	.masthead.prefal-header .navigation > .mini-widgets {
		display: none !important;
	}

	.masthead.prefal-header .main-nav {
		display: flex;
		flex-flow: row nowrap !important;
		align-items: center !important;
		gap: var(--prefal-header-menu-gap);
		margin: 0;
	}

	.masthead.prefal-header .main-nav > li {
		margin: 0;
	}

	.masthead.prefal-header .main-nav > li > a {
		margin: 0 !important;
		padding: 10px 0 !important;
	}

	.masthead.prefal-header .main-nav > li > a .menu-item-text {
		display: flex;
		align-items: center;
		gap: var(--prefal-space-2xs);
		white-space: nowrap;
	}

	.masthead.prefal-header .main-nav > li > a .menu-text {
		font-family: var(--prefal-font-title) !important;
		font-weight: 500 !important;
		font-size: 16px !important;
		line-height: normal !important;
		text-transform: uppercase;
		color: var(--prefal-neutral-0) !important;
		transition: opacity 0.2s ease;
	}

	/* Chevron des entrées avec sous-menu (asset Figma 12 x 7) */
	.masthead.prefal-header .main-nav > li.has-children > a .menu-item-text::after {
		content: "";
		flex: 0 0 12px;
		width: 12px;
		height: 7px;
		background: url("../images/header/chevron-down.svg") center / contain no-repeat;
		transition: transform 0.2s ease;
	}

	.masthead.prefal-header .main-nav > li.has-children:hover > a .menu-item-text::after,
	.masthead.prefal-header .main-nav > li.dt-hovered > a .menu-item-text::after {
		transform: rotate(180deg);
	}

	/* Soulignement "from-centre-line" de The7 : désactivé */
	.masthead.prefal-header .main-nav > li > a .menu-item-text::before,
	.masthead.prefal-header .main-nav > li > a .decoration-line {
		display: none !important;
	}

	.masthead.prefal-header .main-nav > li:hover > a .menu-text,
	.masthead.prefal-header .main-nav > li.dt-hovered > a .menu-text {
		opacity: 0.75;
	}

	.masthead.prefal-header .main-nav > li.act > a .menu-text {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	/* --- Sticky (phantom-sticky) : fond blanc conservé ------------------- */
	.phantom-sticky .sticky-on.masthead.prefal-header .main-nav > li > a .menu-text {
		color: var(--prefal-neutral-0) !important;
	}
}

/* --- Adaptations entre 993px et la largeur de maquette (1920px) --------- */
@media screen and (min-width: 993px) and (max-width: 1700px) {
	:root {
		--prefal-header-menu-gap: 28px;
	}

	.masthead.prefal-header .main-nav > li > a .menu-text {
		font-size: 15px !important;
	}
}

@media screen and (min-width: 993px) and (max-width: 1440px) {
	:root {
		--prefal-header-menu-gap: 20px;
		--prefal-header-gutter: 30px;
		--prefal-header-logo-col: 210px;
	}

	.prefal-header__tagline {
		display: none;
	}

	.masthead.prefal-header .main-nav > li > a .menu-text {
		font-size: 14px !important;
	}

	.prefal-cta,
	.prefal-cta:hover,
	.prefal-cta:focus {
		padding: 10px 18px 10px 12px;
	}

	.prefal-cta__line1 {
		display: none;
	}
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
	:root {
		--prefal-header-menu-gap: 12px;
		--prefal-header-gutter: 20px;
		--prefal-header-logo-col: 190px;
	}

	.masthead.prefal-header .main-nav > li > a .menu-text {
		font-size: 13px !important;
	}

	/* Si le menu ne tient pas sur une ligne, il passe proprement à la ligne
	   (entrées entières) et la barre bleue s'agrandit. */
	.masthead.prefal-header .navigation {
		height: auto;
		min-height: var(--prefal-header-nav-height);
		padding-right: var(--prefal-header-gutter);
	}

	.masthead.prefal-header .main-nav {
		flex-wrap: wrap !important;
		row-gap: 0;
	}

	.masthead.prefal-header .main-nav > li > a {
		padding: 8px 0 !important;
	}

	.prefal-header__ctas {
		gap: var(--prefal-space-xs);
	}

	.prefal-cta,
	.prefal-cta:hover,
	.prefal-cta:focus {
		padding: 10px 12px;
	}

	.prefal-cta__text {
		display: none;
	}
}

/* --- Mobile / tablette (<= 992px) : header mobile The7 inchangé --------- */
@media screen and (max-width: 992px) {
	.masthead.prefal-header .prefal-header__main {
		display: none;
	}
}