/** Shopify CDN: Minification failed

Line 34:0 All "@import" rules must come first

**/
/*
  ============================================================
  Mitch Jerky — Header Override
  Fichier: assets/mitch-header.css

  INSTALLATION:
  1. Copier ce fichier dans: Online Store → Themes → Edit code → assets/
  2. Dans layout/theme.liquid, ajouter AVANT </head>:
     {{ 'mitch-header.css' | asset_url | stylesheet_tag }}

  Ce fichier surcharge uniquement les styles du header existant.
  Le fichier header.liquid n'est PAS modifié.
  ============================================================
*/

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --mj-red:        #c8102e;
  --mj-red-dark:   #9e0c24;
  --mj-dark:       #1a0a06;
  --mj-dark2:      #2a1208;
  --mj-cream:      #f5f0e8;
  --mj-font-disp:  'Oswald', sans-serif;
  --mj-font-body:  'Inter', -apple-system, sans-serif;
  --mj-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Google Font import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
/* ── Wrapper principal ──────────────────────────────────────── */
#shopify-section-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background .4s var(--mj-ease), box-shadow .4s var(--mj-ease);
}

/* État par défaut : transparent */
#shopify-section-header .site-header {
  background: transparent !important;
  border-bottom: none !important;
  transition: background .4s var(--mj-ease), box-shadow .4s var(--mj-ease);
}

/* État scrollé via #shopify-section-header */
#shopify-section-header.mj-scrolled .site-header {
  background: rgba(26, 10, 6, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, .45) !important;
}

/* Fallback: si le JS attache la classe directement sur .site-header */
.site-header {
  transition: background .4s var(--mj-ease), box-shadow .4s var(--mj-ease);
}

.site-header.mj-scrolled {
  background: rgba(26, 10, 6, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, .45) !important;
}

/* Fallback: si le JS attache la classe sur header[role="banner"] */
header[role="banner"].mj-scrolled,
header[role="banner"].mj-scrolled .site-header {
  background: rgba(26, 10, 6, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0, 0, 0, .45) !important;
}

/* ── Grid interne ───────────────────────────────────────────── */
#shopify-section-header .grid {
  margin: 0 auto;
  padding: 0 2rem;
  align-items: center;
  min-height: 90px;
  transition: min-height .4s var(--mj-ease);
}

#shopify-section-header.mj-scrolled .grid,
.site-header.mj-scrolled .grid {
  min-height: 70px !important;
}

/* Layout: logo | nav centre | icônes à droite */
#shopify-section-header .grid--table {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Logo — gauche */
#shopify-section-header .grid--table > .grid__item:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  padding-right: 1.5rem !important;
}

/* Nav — milieu, prend l'espace */
#shopify-section-header #AccessibleNav {
  flex: 1 1 auto !important;
  width: auto !important;
  overflow: visible !important;
}

/* Icônes — toujours poussées à droite */
#shopify-section-header .site-header__icons {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  padding-left: 1rem !important;
}

/* Hide the desktop search form to prevent overflow — keep only the icon toggle */
#shopify-section-header .site-header__search.small--hide {
  display: none !important;
}

/* Show the search toggle icon on all sizes instead */
#shopify-section-header .site-header__search-toggle.medium-up--hide {
  display: none !important;
}

/* ── OPTION: garder la barre de recherche mais plus compacte ──
   Commenter le bloc "display: none" ci-dessus et décommenter ceci:

#shopify-section-header .site-header__search.small--hide {
  display: block !important;
}
#shopify-section-header .search-header__input {
  width: 120px !important;
  transition: width .3s ease !important;
}
#shopify-section-header .search-header__input:focus {
  width: 180px !important;
}
── */

/* Icons wrapper — flex row, centré verticalement, espacé */
#shopify-section-header .site-header__icons-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: nowrap !important;
}

/* Séparation visuelle entre panier/compte et hamburger */
#shopify-section-header .site-header__menu.js-mobile-nav-toggle {
  margin-left: .5rem !important;
  padding-left: .75rem !important;
  border-left: 1px solid rgba(255,255,255,.2) !important;
}

/* ── Logo ───────────────────────────────────────────────────── */
#shopify-section-header .site-header__logo {
  margin: 0;
  transition: padding .4s var(--mj-ease);
}

/* Logo texte GRAND par défaut */
#shopify-section-header .site-header__logo .site-header__logo-link,
#shopify-section-header .site-header__logo-link,
.site-header .site-header__logo-link {
  font-family: var(--mj-font-disp) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1 !important;
  transition: font-size .4s var(--mj-ease),
              letter-spacing .4s var(--mj-ease),
              opacity .2s !important;
}

/* Logo IMAGE grand par défaut — tous les sélecteurs possibles */
#shopify-section-header .site-header__logo img,
#shopify-section-header .site-header__logo-image img,
#shopify-section-header a.site-header__logo-image img,
.site-header .site-header__logo img {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  display: block !important;
  transition: width .4s var(--mj-ease), max-width .4s var(--mj-ease) !important;
}

/* Logo IMAGE réduit au scroll */
#shopify-section-header.mj-scrolled .site-header__logo img,
#shopify-section-header.mj-scrolled .site-header__logo-image img,
#shopify-section-header.mj-scrolled a.site-header__logo-image img,
.site-header.mj-scrolled .site-header__logo img {
  width: 120px !important;
  max-width: 120px !important;
}

/* Mobile & tablette : toujours taille normale, jamais d'agrandissement */
@media (max-width: 900px) {
  #shopify-section-header .site-header__logo img,
  #shopify-section-header .site-header__logo-image img,
  #shopify-section-header a.site-header__logo-image img,
  .site-header .site-header__logo img,
  #shopify-section-header.mj-scrolled .site-header__logo img,
  #shopify-section-header.mj-scrolled .site-header__logo-image img,
  #shopify-section-header.mj-scrolled a.site-header__logo-image img,
  .site-header.mj-scrolled .site-header__logo img {
    width: 120px !important;
    max-width: 120px !important;
  }
}

/* Logo texte réduit au scroll */
#shopify-section-header.mj-scrolled .site-header__logo .site-header__logo-link,
#shopify-section-header.mj-scrolled .site-header__logo-link,
.site-header.mj-scrolled .site-header__logo-link {
  font-size: 1.4rem !important;
  letter-spacing: 2px !important;
}

#shopify-section-header .site-header__logo-link:hover {
  opacity: .85 !important;
}

/* ── Navigation desktop ─────────────────────────────────────── */
#shopify-section-header #AccessibleNav {
  text-align: center;
  padding-top: 2rem;
}

#shopify-section-header .site-nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#shopify-section-header .site-nav__link--main {
  font-family: var(--mj-font-disp) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .8) !important;
  padding: .5rem .9rem !important;
  border-radius: 4px;
  transition: color .2s, background .2s !important;
  text-decoration: none !important;
  position: relative;
}

#shopify-section-header .site-nav__link--main::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: .9rem;
  right: .9rem;
  height: 2px;
  background: var(--mj-red);
  transform: scaleX(0);
  transition: transform .3s var(--mj-ease);
}

#shopify-section-header .site-nav__link--main:hover {
  color: #fff !important;
  background: transparent !important;
}

#shopify-section-header .site-nav__link--main:hover::after {
  transform: scaleX(1);
}

/* ── Icônes (search, account, cart) ────────────────────────── */
#shopify-section-header .site-header__icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
}

#shopify-section-header .site-header__icons .icon {
  fill: rgba(255, 255, 255, .8);
  transition: fill .2s;
}

#shopify-section-header .site-header__icons a:hover .icon,
#shopify-section-header .site-header__icons button:hover .icon {
  fill: #fff;
}

#shopify-section-header .site-header__account,
#shopify-section-header .site-header__cart,
#shopify-section-header .site-header__search-toggle {
  padding: .5rem .6rem;
  border-radius: 6px;
  transition: background .2s;
}

#shopify-section-header .site-header__account:hover,
#shopify-section-header .site-header__cart:hover,
#shopify-section-header .site-header__search-toggle:hover {
  background: rgba(255, 255, 255, .1);
}

/* Compteur panier */
#shopify-section-header .cart-count {
  background: var(--mj-red) !important;
  color: #fff !important;
  font-family: var(--mj-font-disp) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

/* ── Search bar desktop ─────────────────────────────────────── */
#shopify-section-header .search-header__input {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: var(--mj-font-body) !important;
  transition: border-color .2s, background .2s !important;
}

#shopify-section-header .search-header__input::placeholder {
  color: rgba(255, 255, 255, .4) !important;
}

#shopify-section-header .search-header__input:focus {
  background: rgba(255, 255, 255, .15) !important;
  border-color: var(--mj-red) !important;
  outline: none !important;
}

#shopify-section-header .search-header__submit .icon {
  fill: rgba(255, 255, 255, .7);
}

/* ── Mobile nav ─────────────────────────────────────────────── */
/* On NE touche PAS au positionnement : le thème Debut gère
   l'ouverture/fermeture (le wrapper est le 1er élément de la section
   et se révèle en haut). On corrige UNIQUEMENT les couleurs pour que
   les liens blancs soient lisibles (le défaut du thème est un fond
   clair → liens invisibles). */

.mobile-nav-wrapper,
#shopify-section-header .mobile-nav-wrapper,
.site-header .mobile-nav-wrapper {
  background: var(--mj-dark) !important;
  background-color: var(--mj-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
  z-index: 1200 !important;
}

/* Le <ul> interne doit aussi être sombre (au cas où il a un fond) */
.mobile-nav-wrapper .mobile-nav,
#shopify-section-header .mobile-nav-wrapper .mobile-nav,
.mobile-nav-wrapper ul {
  background: var(--mj-dark) !important;
  margin: 0 !important;
}

/* ── Menu ouvert : rendre le header opaque (sombre) ───────────
   Le thème décale le menu de ~153px sous le header fixe via
   translate3d. Cette zone (le header transparent) laisserait voir
   le fond de page (espace blanc). On la rend sombre tant que le
   menu est ouvert pour un rendu uni. La classe .mj-nav-open est
   ajoutée sur <html> par mitch-header.js. */
html.mj-nav-open #shopify-section-header .site-header,
html.mj-nav-open #shopify-section-header,
html.js-menu--is-open #shopify-section-header .site-header,
html.js-menu--is-open #shopify-section-header {
  background: var(--mj-dark) !important;
  background-color: var(--mj-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-nav__link,
#shopify-section-header .mobile-nav__link,
.mobile-nav-wrapper .mobile-nav__link {
  font-family: var(--mj-font-disp) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: transparent !important;
  padding: 1rem 2rem !important;
  transition: color .2s, background .2s !important;
}

.mobile-nav__link:hover,
#shopify-section-header .mobile-nav__link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
}

.mobile-nav__item,
#shopify-section-header .mobile-nav__item {
  background: transparent !important;
}

.mobile-nav__item.border-bottom,
#shopify-section-header .mobile-nav__item.border-bottom {
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

/* Sous-liens / dropdowns du menu mobile : restent lisibles */
.mobile-nav__dropdown,
#shopify-section-header .mobile-nav__dropdown {
  background: rgba(0, 0, 0, .25) !important;
}
.mobile-nav__sublist-link,
#shopify-section-header .mobile-nav__sublist-link {
  font-family: var(--mj-font-disp) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .8) !important;
  background: transparent !important;
  padding: .9rem 2rem !important;
  display: block !important;
}
.mobile-nav__sublist-link:hover,
#shopify-section-header .mobile-nav__sublist-link:hover {
  color: #fff !important;
}
/* Icônes chevron du menu mobile en blanc */
.mobile-nav__icon .icon,
#shopify-section-header .mobile-nav__icon .icon,
.mobile-nav__return-btn .icon {
  fill: rgba(255, 255, 255, .8) !important;
}

/* ── Hamburger icon ─────────────────────────────────────────── */
#shopify-section-header .site-header__menu .icon {
  fill: rgba(255, 255, 255, .85);
}

#shopify-section-header .site-header__menu:hover .icon {
  fill: #fff;
}

/* ── Pousser le contenu sous le header fixe ─────────────────── */
/* Ajouter cette classe au <body> ou au premier élément de contenu */
.mj-header-offset {
  padding-top: 70px;
}

/* Si le hero est en plein écran, pas besoin d'offset — le hero
   commence sous le header transparent. Commenter la ligne ci-dessus
   si votre hero est full-viewport. */


/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — animations au scroll
   (fusionné ici pour éviter un fichier CSS supplémentaire)
══════════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .7s cubic-bezier(.25,.46,.45,.94),
    transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-48px);
}

[data-reveal="right"] {
  opacity: 0;
  transform: translateX(48px);
}

[data-reveal="zoom"] {
  opacity: 0;
  transform: scale(.93);
}

[data-reveal="fade"] {
  opacity: 0;
  transform: none;
}

[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Délais de cascade */
[data-reveal-delay="100"] { transition-delay: .1s; }
[data-reveal-delay="150"] { transition-delay: .15s; }
[data-reveal-delay="200"] { transition-delay: .2s; }
[data-reveal-delay="250"] { transition-delay: .25s; }
[data-reveal-delay="300"] { transition-delay: .3s; }
[data-reveal-delay="400"] { transition-delay: .4s; }
[data-reveal-delay="500"] { transition-delay: .5s; }
[data-reveal-delay="600"] { transition-delay: .6s; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="zoom"],
  [data-reveal="fade"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Hamburger visible jusqu'à 1024px (tablette incluse) ─────── */
@media (max-width: 1024px) {

  /* Afficher le bouton hamburger */
  #shopify-section-header .site-header__menu.js-mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Cacher la nav desktop */
  #shopify-section-header #AccessibleNav,
  #shopify-section-header nav#AccessibleNav {
    display: none !important;
  }

  /* Afficher le toggle de recherche mobile */
  #shopify-section-header .site-header__search-toggle {
    display: inline-flex !important;
  }

  #shopify-section-header .grid {
    padding: 0 1rem!important;
}
    .site-header__logo {
      padding-left: 0px!important;
    }
}

/* Au-dessus de 1024px : nav desktop visible, hamburger caché */
@media (min-width: 1025px) {
  #shopify-section-header .site-header__menu.js-mobile-nav-toggle {
    display: none !important;
  }

  #shopify-section-header #AccessibleNav {
    display: block !important;
  }
}