/* ==========================================================================
   INKÛNU — Accueil uniquement
   Chargé dans theme.liquid sous `{% if template.name == 'index' %}`, donc rien
   de tout ceci ne fuit sur les autres pages. Le header Dawn passe en overlay
   transparent par-dessus le hero, et reprend un fond solide au scroll.
   ========================================================================== */

/* Le header sort du flux : <main> démarre en haut de page et le hero occupe
   toute la fenêtre dès le premier pixel. `top` reste pilotable par Dawn, donc
   le comportement « on-scroll-up » (masquer en descendant, révéler en montant)
   continue de fonctionner tel quel. */
.ink-home .section-header.shopify-section-group-header-group {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
}

/* Voile très léger. La lisibilité du menu est portée par les ombres portées
   ci-dessous, pas par un assombrissement de la scène : le golden hour du hero
   est le sujet, on ne le passe pas au gris pour gagner du contraste. */
.ink-home .section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(38, 24, 6, 0.34) 0%,
    rgba(38, 24, 6, 0.2) 46%,
    rgba(38, 24, 6, 0.07) 74%,
    rgba(38, 24, 6, 0) 100%
  );
  transition: opacity 0.25s ease;
}

.ink-home .section-header .header-wrapper {
  position: relative;
  z-index: 1;
  /* Dawn peint le logo, les liens et les icônes avec rgb(var(--color-foreground)).
     Basculer la variable suffit à tout passer en crème d'un coup, sans lister
     chaque sélecteur du header. */
  --color-foreground: 247, 239, 224;
  background: transparent;
  border-bottom: 0;
}

/* Ombre portée discrète sur tout ce que porte le header : c'est elle qui tient
   la lisibilité sur une image claire, à la place d'un scrim opaque. */
.ink-home .section-header .header__menu-item,
.ink-home .section-header .header__icon,
.ink-home .section-header .header__heading-link,
.ink-home .section-header .localization-form__select,
.ink-home .section-header .header__icon .icon {
  text-shadow: 0 1px 2px rgba(38, 22, 5, 0.55), 0 0 14px rgba(38, 22, 5, 0.35);
}

/* Dawn pose les liens de nav à 75% d'opacité. Sur fond opaque c'est une nuance
   discrète, en overlay c'est du contraste perdu pour rien : on repasse à plein. */
.ink-home .section-header .header__menu-item,
.ink-home .section-header .header__active-menu-item,
.ink-home .section-header .localization-selector {
  color: rgb(var(--color-foreground));
}

/* Les icônes sont des SVG en `fill: currentColor` : le text-shadow ne les
   touche pas, il leur faut un drop-shadow. */
.ink-home .section-header .header__icon .svg-wrapper,
.ink-home .section-header .header__icon svg {
  filter: drop-shadow(0 1px 2px rgba(38, 22, 5, 0.5));
}

/* --------------------------------------------------------------------------
   Logo — le SVG de marque est noir. En overlay sur l'image on le passe en
   crème ; ailleurs (header solide au scroll, autres pages) il reste noir.
   brightness(0) l'aplatit en noir plein, invert(1) le passe en blanc, et le
   sepia le réchauffe vers le crème de la charte.
   -------------------------------------------------------------------------- */

/* La chaîne se lit de gauche à droite : brightness(0) aplatit le tracé en noir
   plein quelle que soit sa couleur d'origine, invert(1) le passe en blanc,
   sepia(1) le réchauffe, saturate creuse le bleu et brightness redescend le
   niveau. Mesuré à l'écran : #f7f7de, soit le crème de la charte à un poil de
   vert près, écart invisible à cette taille. */
.ink-home .section-header .header__heading-logo {
  filter: brightness(0) invert(1) sepia(1) saturate(1.7) brightness(0.97)
    drop-shadow(0 1px 3px rgba(38, 22, 5, 0.5));
}

/* ==========================================================================
   Au scroll : Dawn pose .shopify-section-header-sticky sur la section.
   On reprend un fond crème solide, le texte encre et le logo noir d'origine.
   ========================================================================== */

.ink-home .section-header.shopify-section-header-sticky::before {
  opacity: 0;
}

.ink-home .section-header.shopify-section-header-sticky .header-wrapper {
  --color-foreground: 10, 10, 10;
  background: var(--bg);
  border-bottom: 1px solid #ece4d6;
}

.ink-home .section-header.shopify-section-header-sticky .header__heading-logo {
  filter: none;
}

.ink-home .section-header.shopify-section-header-sticky .header__menu-item,
.ink-home .section-header.shopify-section-header-sticky .header__icon,
.ink-home .section-header.shopify-section-header-sticky .header__heading-link,
.ink-home .section-header.shopify-section-header-sticky .localization-form__select,
.ink-home .section-header.shopify-section-header-sticky .header__icon .icon {
  text-shadow: none;
}

.ink-home .section-header.shopify-section-header-sticky .header__icon .svg-wrapper,
.ink-home .section-header.shopify-section-header-sticky .header__icon svg {
  filter: none;
}

/* Les sous-menus et le tiroir mobile portent leur propre classe de schéma :
   ils redéfinissent --color-foreground localement et gardent donc leur fond
   clair et leur texte encre. On leur rend juste un fond opaque explicite, le
   header transparent ne devant pas déteindre dessus. */
.ink-home .section-header .header__submenu,
.ink-home .section-header .mega-menu__content,
.ink-home .section-header menu-drawer .menu-drawer {
  background-color: rgb(var(--color-background));
}

.ink-home .section-header menu-drawer .menu-drawer .header__heading-logo {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .ink-home .section-header::before {
    transition: none;
  }
}