/**
 * header.css — Styles du header sticky 2 lignes.
 *
 * Structure :
 *  .site-header
 *    .header__top      (ligne 1 : logo + hashtag | countdown + CTA)
 *    .header__nav      (ligne 2 : nav principale | partenaire FNCOF)
 *
 * @package lafetecontinue-allianz
 */

/* ==========================================================================
   HEADER — Wrapper principal
   ========================================================================== */

.site-header {
	position:   fixed;
	top:        0;
	left:       0;
	right:      0;
	z-index:    var(--z-header);
	background: var(--color-white);
	transition: box-shadow var(--transition-base);
}

/* Ombre portée activée quand le header est sticky (classe ajoutée par navigation.js) */
.site-header.is-sticky {
	box-shadow: 0 2px 16px rgba(18, 43, 84, 0.12);
}

/* ==========================================================================
   LIGNE 1 — Barre supérieure
   ========================================================================== */

.header__top {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1.25rem var(--spacing-section-x);
	border-bottom:   1px solid var(--color-grey);
}

/* Côté gauche : logo + hashtag */
.header__top-left {
	display:     flex;
	align-items: center;
	gap:         2rem;
}

.header__logo img {
	display: block;
	height:  50px;
	width:   auto;
}

.header__hashtag {
	font-family: var(--font-family-base);
	font-size:   1.25rem;
	font-weight: var(--font-weight-bold);
	color:       var(--color-black);
	line-height: 1;
}

/* Côté droit : countdown + CTA */
.header__top-right {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
}

.header__countdown-label {
	font-size:  1.25rem;
	color:      var(--color-blue-dark);
	white-space: nowrap;
}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */

.header__countdown {
	display:         flex;
	align-items:     center;
	gap:             0.25rem;
	background:      var(--color-blue-primary);
	color:           var(--color-white);
	padding:         var(--btn-padding-y) var(--btn-padding-x);
	border-radius:   var(--btn-radius);
	font-family:     var(--font-family-base);
	font-size:       1.25rem;
	font-weight:     var(--font-weight-regular);
	line-height:     1;
	white-space:     nowrap;
}

.countdown__segment {
	display:     flex;
	align-items: baseline;
	gap:         0.15rem;
}

.countdown__value {
	font-variant-numeric: tabular-nums;
	min-width:            2ch;
	text-align:           center;
}

.countdown__sep {
	font-size: 0.75em;
	opacity:   0.8;
}

/* Les séparateurs ":" entre unités */
.countdown__sep--colon {
	font-size: 1em;
	opacity:   1;
	padding:   0 0.1rem;
}

/* Fin du concours */
.countdown__ended {
	font-size: 1rem;
}

/* ==========================================================================
   LIGNE 2 — Navigation
   ========================================================================== */

.header__nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1.25rem var(--spacing-section-x);
}

/* Liste des liens de navigation */
.nav-primary {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
}

.nav-primary__link {
	font-family:     var(--font-family-base);
	font-size:       var(--font-size-nav);
	font-weight:     var(--font-weight-regular);
	color:           var(--color-blue-dark);
	text-decoration: none;
	padding-bottom:  2px;
	border-bottom:   2px solid transparent;
	transition:      border-color var(--transition-base), color var(--transition-base);
}

.nav-primary__link:hover {
	color:        var(--color-blue-primary);
	border-color: var(--color-blue-primary);
}

/* État actif (section visible au scroll) */
.nav-primary__link.is-active {
	color:        var(--color-blue-primary);
	border-color: var(--color-blue-primary);
	font-weight:  var(--font-weight-bold);
}

/* Partenaire FNCOF */
.header__partner {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
}

.header__partner-label {
	font-size:  1rem;
	color:      var(--color-black);
	white-space: nowrap;
}

.header__partner img {
	height: 50px;
	width:  auto;
}

/* ==========================================================================
   RESPONSIVE — Laptop large (≤1140px)
   ========================================================================== */

@media (max-width: 1140px) {

	.header__top,
	.header__nav {
		padding-left:  4rem;
		padding-right: 4rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Tablette (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	.header__top,
	.header__nav {
		padding-left:  2rem;
		padding-right: 2rem;
	}

	/* Hashtag masqué pour gagner de la place */
	.header__hashtag {
		display: none;
	}

	/* Label "J-xx avant le concours" masqué — le countdown reste visible */
	.header__countdown-label {
		display: none;
	}

	/* Partenaire : logo seul, sans label */
	.header__partner-label {
		display: none;
	}
}

/* ==========================================================================
   RESPONSIVE — Tablette étroite / Mobile paysage (≤768px)
   ========================================================================== */

@media (max-width: 768px) {

	:root {
		--header-height: 9rem; /* 3 lignes : logo+hashtag / nav / partenaire */
	}

	/* Ligne 1 : logo + hashtag — compressés */
	.header__top {
		padding:       0.625rem 1.5rem;
		border-bottom: 1px solid var(--color-grey);
	}

	/* Hashtag visible mais taille réduite */
	.header__hashtag {
		display:   block;
		font-size: 0.875rem;
	}

	/* Countdown et CTA masqués — pas assez de place */
	.header__countdown,
	.header__cta {
		display: none;
	}

	/* Ligne 2 : nav scrollable */
	.header__nav {
		flex-direction: column;
		align-items:    stretch;
		padding:        0;
		gap:            0;
	}

	.nav-primary {
		gap:        1rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		padding:    0.5rem 1.5rem;
		border-bottom: 1px solid var(--color-grey);
	}

	.nav-primary::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	.nav-primary__link {
		font-size:   0.875rem;
		white-space: nowrap;
	}

	/* Ligne 3 : partenaire FNCOF — bande compacte */
	.header__partner {
		display:         flex;
		align-items:     center;
		justify-content: center;
		gap:             0.5rem;
		padding:         0.375rem 1.5rem;
		background:      var(--color-cyan-pale);
	}

	.header__partner-label {
		display:   block;
		font-size: 0.75rem;
		color:     var(--color-blue-dark);
	}

	.header__partner img {
		height: 28px;
	}
}

/* ==========================================================================
   RESPONSIVE — Mobile (≤425px)
   ========================================================================== */

@media (max-width: 425px) {

	:root {
		--header-height: 8.5rem;
	}

	.header__top {
		padding: 0.5rem 1rem;
	}

	.header__logo img {
		height: 36px;
	}

	.header__hashtag {
		font-size: 0.8125rem;
	}

	.nav-primary {
		padding: 0.5rem 1rem;
		gap:     0.75rem;
	}

	.nav-primary__link {
		font-size: 0.8125rem;
	}

	.header__partner {
		padding: 0.375rem 1rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Petit mobile (≤375px)
   ========================================================================== */

@media (max-width: 375px) {

	:root {
		--header-height: 8.25rem;
	}

	.header__top {
		padding: 0.5rem 0.75rem;
	}

	.header__logo img {
		height: 32px;
	}

	.header__hashtag {
		font-size: 0.75rem;
	}

	.nav-primary {
		padding: 0.375rem 0.75rem;
		gap:     0.5rem;
	}

	.nav-primary__link {
		font-size: 0.75rem;
	}

	.header__partner {
		padding: 0.375rem 0.75rem;
	}

	.header__partner img {
		height: 24px;
	}
}