/**
 * Critical header — layout above-the-fold (évite le flash au chargement).
 * Fichier unique : modifier ici pour toute les pages (racine, articles, formations, previews).
 * Les styles visuels détaillés restent dans header.css.
 */

:root {
  --header-h-mobile: 72px;
  --header-h-desktop: 96px;
  --body-padding-top-offset: 0px;
  /* Hauteur jusqu'en bas de la barre bleue (nav) : barre rouge + nav avec son padding interne (header.css) */
  --header-top-bar-h: 52px;   /* min-height 36 + padding 8+8 */
  --header-nav-padding-y-mobile: 1.5rem;  /* 0.75rem top + 0.75rem bottom (#header-unified > nav .max-w-7xl) */
  --header-nav-padding-y-desktop: 2rem;   /* 1rem top + 1rem bottom */
  --header-to-dev-banner-desktop: calc(var(--header-top-bar-h) + var(--header-h-desktop) + var(--header-nav-padding-y-desktop)); /* 52 + 96 + 32 = 180px */
  --header-to-dev-banner-mobile: calc(var(--header-top-bar-h) + var(--header-h-mobile) + var(--header-nav-padding-y-mobile));   /* 52 + 72 + 24 = 148px */
  /* Hauteur totale du header (barre + nav + disclaimer + bannière dev) : contenu = juste sous la ligne noire */
  --disclaimer-height: 36px;
  --dev-banner-height: 40px;
  --header-total-height-desktop: calc(var(--header-to-dev-banner-desktop) + var(--disclaimer-height) + var(--dev-banner-height));
  --header-total-height-mobile: calc(var(--header-to-dev-banner-mobile) + var(--disclaimer-height) + var(--dev-banner-height));
}

html {
  scrollbar-gutter: stable;
}

body {
  box-sizing: border-box !important;
  /* Base = barre + nav ; --body-padding-top-offset ajouté par JS selon bannières visibles (0, disclaimer, dev-banner, ou les deux) */
  padding-top: calc(var(--header-to-dev-banner-desktop) + var(--body-padding-top-offset)) !important;
  font-family: 'Inter', sans-serif !important;
  text-rendering: optimizeLegibility !important;
}

/* Pages avec barre « Retour » seule (previews, ebooks) : padding réduit pour éviter l'espace blanc */
body:has(.minimal-bar-retour) {
  padding-top: 52px !important;
}

/* Barre Retour toujours au-dessus du contenu au scroll (previews, ebooks) */
.minimal-bar-retour {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Fond et couleurs du header : définis dans header.css (transparence, anthracite nav) pour rester unifiés partout */
#header-unified {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  width: 100%;
  background: transparent;
  line-height: 1.2 !important;
}

#header-top-bar {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.2 !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: space-between !important;
}

#header-top-bar > div:first-child,
#header-top-bar > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

#header-top-bar span[data-i18n="emergency.title"] {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#header-top-bar a[href^="tel"],
#header-top-bar a[href*="1722"] {
  min-height: 30px !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  padding: 4px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}

#header-top-bar .lang,
#header-top-bar .lang-active {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  padding: 4px 7px !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
}

#login-button-nav {
  min-height: 30px !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

.header-main {
  min-height: var(--header-h-mobile) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  justify-content: space-between !important;
}

.header-brand,
.header-brand > a,
.header-brand > a > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.header-brand > a > div {
  flex-direction: column !important;
}

.brand-title {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.brand-accent {
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin-top: -0.2rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.header-nav-action-slot {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

.cart-icon-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.cart-icon-container svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.cart-count-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: #8b0000 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 0.1rem 0.35rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (min-width: 640px) {
  .header-main {
    min-height: var(--header-h-desktop) !important;
  }
}

@media (max-width: 639px) {
  body {
    padding-top: calc(var(--header-to-dev-banner-mobile) + var(--body-padding-top-offset)) !important;
  }
  body:has(.minimal-bar-retour) {
    padding-top: 52px !important;
  }
  #header-top-bar {
    min-height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}