/* ============================================================
   HEADER V2 — toutes les pages ; le tunnel de commande seulement si
   $hv2_tunnel_actif (_partials/site-v2.tpl, design du tunnel décidé le 28/10)
   Chargée par templates/_partials/head.tpl hors tunnel, et par site-v2.tpl
   sur le tunnel. Le header leo_gopet (Ap Page Builder) est restylé aux
   couleurs de la home : fond crème, menu en Karla, icônes seules, pastille
   terracotta. Dès 1024 px, header transparent posé sur la photo de l'accueil
   et des pages à bandeau photo : fin du fichier.
   Préfixe body:not(#hv2-tous) : ne vise aucun élément, il garde le poids
   d'un identifiant qu'avait l'ancien body:not(#checkout) (même cascade).
   ============================================================ */

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/karla-latin-var.woff2") format("woff2");
}

body:not(#hv2-tous) #header {
  --hv2-ink:      #332720;
  --hv2-clay:     #B05315;
  --hv2-clay-ink: #A1480F;
  --hv2-cream:    #FBF7EF;
  --hv2-line:     #E2D6C2;
  --hv2-sans:     "Karla", "Helvetica Neue", Arial, sans-serif;
  --hv2-hdr-fg:    var(--hv2-ink);
  --hv2-hdr-hover: var(--hv2-clay);

  background-color: var(--hv2-cream);
  box-shadow: 0 1px 0 var(--hv2-line);
}

/* Même mise en page que l'accueil, pleine largeur : hors accueil, le thème
   (réglage « pleine largeur » d'Ap Page Builder) enveloppe le header dans un
   .container centré de 1200 px, et transforme le .container-fluid intérieur
   en une classe tronquée « -fluid » sans style. */
body:not(#hv2-tous) #header .header-top > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
/* Mêmes marges que .container-fluid (styles.css d'Ap Page Builder : 60 px,
   30 px sous 1200 px) */
body:not(#hv2-tous) #header .header-top .-fluid {
  margin-inline: auto;
  padding-inline: 60px;
}
@media (max-width: 1199px) {
  body:not(#hv2-tous) #header .header-top .-fluid { padding-inline: 30px; }
}

/* custom.css impose .header-top { background: #fff !important } */
body:not(#hv2-tous) #header .header-top { background: transparent !important; }

/* Barres vides sur la home (barre noire #0F0F0F du thème) */
body:not(#hv2-tous) #header .header-nav,
body:not(#hv2-tous) #header .header-banner { display: none; }

/* Menu niveau 1 : Karla, casse normale, souligné au survol */
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a {
  font-family: var(--hv2-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hv2-hdr-fg);
}

body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a .menu-title { position: relative; }

/* Couleur imposée à chaque niveau (lien, span, liens visités) : Accueil et
   Blog restaient noirs chez Sarobidy alors que Chien, Chat et Contact
   prenaient bien la couleur du header */
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a:is(:link, :visited),
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a .menu-title { color: var(--hv2-hdr-fg); }
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a:is(:hover, :focus-visible) .menu-title { color: var(--hv2-hdr-hover); }

body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a .menu-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a:is(:hover, :focus-visible) { color: var(--hv2-hdr-hover); }
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li > a:is(:hover, :focus-visible) .menu-title::after { transform: none; }

/* Sous-menus (Chien, Chat) */
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu {
  background: var(--hv2-cream);
  border: 1px solid var(--hv2-line);
  box-shadow: 0 12px 28px rgba(51, 39, 32, 0.12);
}
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu a {
  font-family: var(--hv2-sans);
  color: var(--hv2-ink);
}
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu a:is(:hover, :focus-visible) { color: var(--hv2-clay-ink); }

/* Thème : coins de 25px à l'ouverture, tirets gris puis jaunes au survol, puce jaune et
   texte décalé au survol. Ici : coins de 2px, filets fins, seul le texte change de couleur. */
body:not(#hv2-tous) #header .leo-megamenu .dropdown:hover > .dropdown-menu { border-radius: 2px; }
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li,
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:hover {
  padding: 6px 0;
  border-bottom: 1px solid var(--hv2-line);
}
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:last-child { border-bottom: 0; }
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:hover a,
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:hover a span { margin-left: 0; }
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:hover a::before { content: none; }
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu a > .menu-title {
  font-family: var(--hv2-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hv2-ink);
  transition: color 0.2s ease;
}
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu li:hover a > .menu-title,
body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu a:focus-visible > .menu-title { color: var(--hv2-clay-ink); }
@media (prefers-reduced-motion: reduce) {
  body:not(#hv2-tous) #header .leo-megamenu .dropdown-menu a > .menu-title { transition: none; }
}

/* Icônes (recherche, panier, compte) : couleur du header au lieu du jaune */
body:not(#hv2-tous) #header .col-info i,
body:not(#hv2-tous) #header #leo_search_block_top .title_block::before,
body:not(#hv2-tous) #header #_desktop_cart .header,
body:not(#hv2-tous) #header .userinfo-selector .popup-title { color: var(--hv2-hdr-fg); }

/* Panier non vide : le thème l'enveloppe dans un lien et dessine le sac en
   ::after (Font Awesome). Tous les liens, icônes et pseudo-éléments de la
   zone d'icônes prennent la couleur du header, hors panneaux déroulants
   (compte, recherche), qui ont leur propre fond crème. */
body:not(#hv2-tous) #header .col-info :is(a, i):not(.dropdown-menu *):not(form *):not(.cart-products-count),
body:not(#hv2-tous) #header .col-info :is(a, i):not(.dropdown-menu *):not(form *)::before,
body:not(#hv2-tous) #header .col-info :is(a, i):not(.dropdown-menu *):not(form *)::after { color: var(--hv2-hdr-fg); }
body:not(#hv2-tous) #header .col-info #_desktop_cart:hover :is(a, i),
body:not(#hv2-tous) #header .col-info #_desktop_cart:hover i::after { color: var(--hv2-hdr-hover); }

body:not(#hv2-tous) #header #leo_search_block_top .title_block:hover::before,
body:not(#hv2-tous) #header #_desktop_cart:hover .header,
body:not(#hv2-tous) #header #_desktop_cart:hover i,
body:not(#hv2-tous) #header .userinfo-selector .popup-title:is(:hover, :focus-visible),
body:not(#hv2-tous) #header .userinfo-selector .popup-title:is(:hover, :focus-visible) i { color: var(--hv2-hdr-hover); }

/* Icônes seules : libellés « Panier » et « Connexion » gardés pour les
   lecteurs d'écran, flèche du compte masquée */
body:not(#hv2-tous) #header #_desktop_cart .hidden-sm-down,
body:not(#hv2-tous) #header .userinfo-selector .popup-title span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body:not(#hv2-tous) #header .userinfo-selector .popup-title .material-icons { display: none; }

/* Pastille du panier : terracotta, texte clair (4,87:1), en exposant sur
   l'icône. Panier non vide : le thème dessine le sac en ::after dans une
   boîte fixe de 27 × 40 px (+ marge de 7 px) ; la boîte épouse désormais
   l'icône dans les deux états, sinon la pastille s'écartait du sac. */
body:not(#hv2-tous) #header #_desktop_cart { margin-right: 8px; }
body:not(#hv2-tous) #header #_desktop_cart .header {
  position: relative;
  display: inline-flex;
  align-items: center;
}
body:not(#hv2-tous) #header #_desktop_cart .header a { display: inline-flex; align-items: center; }
body:not(#hv2-tous) #header #_desktop_cart .header i {
  width: auto;
  height: auto;
  margin: 0;
  line-height: 1;
}
body:not(#hv2-tous) #header #_desktop_cart .cart-products-count {
  position: absolute;
  top: -8px;
  right: -12px;
  display: block;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--hv2-clay);
  color: #FFF8F0;
  font-family: var(--hv2-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Menu du compte et panneau de recherche */
body:not(#hv2-tous) #header .userinfo-selector .dropdown-menu {
  background: var(--hv2-cream);
  border: 1px solid var(--hv2-line);
}

/* Menu du compte aligné sur le bord DROIT de l'icône : custom.css impose
   left: 0 (et -110px sous 992 px), il s'ouvrait vers la droite et sortait
   de l'écran, l'icône étant tout à droite */
body:not(#hv2-tous) #header .userinfo-selector .user-info {
  left: auto;
  right: 0;
  min-width: 13rem;
  margin-top: 10px;
  box-shadow: 0 12px 28px rgba(51, 39, 32, 0.12);
}
body:not(#hv2-tous) #header .userinfo-selector .dropdown-menu a {
  font-family: var(--hv2-sans);
  color: var(--hv2-ink);
}
body:not(#hv2-tous) #header .userinfo-selector .dropdown-menu a:is(:hover, :focus-visible) { color: var(--hv2-clay-ink); }

/* Indicateur de sous-menu « + » (appagebuilder styles.css) : couleur du header */
body:not(#hv2-tous) #header .leo-megamenu .dropdown-toggle::after { color: var(--hv2-hdr-fg); }
body:not(#hv2-tous) #header .leo-megamenu .navbar-nav > li:hover > .dropdown-toggle::after { color: var(--hv2-hdr-hover); }

/* Burger (mobile) */
body:not(#hv2-tous) #header .navbar-toggler { color: var(--hv2-ink); }

/* Menu tiroir mobile (leobootstrapmenu) : la section, ajoutée au <body>,
   laissait son bouton « Fermer » visible en haut à gauche menu fermé.
   Elle n'est affichée que menu ouvert (body.off-canvas-active) ;
   la fermeture devient instantanée. */
body:not(.off-canvas-active) > .off-canvas-nav-megamenu { display: none; }

/* Le thème supprime le contour de focus */
body:not(#hv2-tous) #header :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--hv2-hdr-hover);
  outline-offset: 3px;
}


/* ============================================================
   HEADER FIXE SUR LES AUTRES PAGES (demande de Sarobidy, 2026-10-27)
   Dès 1024 px, comme sur l'accueil (qui a son propre header fixe, home-v2.css).
   Tunnel de commande non concerné (body#checkout).
   - position: sticky : le header reste en haut de l'écran sans place à réserver dessous ;
   - theme.css met #page en overflow: hidden, ce qui empêche sticky ; overflow: clip rogne
     de la même façon sans l'empêcher (navigateur sans clip : header simplement non fixe) ;
   - le header se resserre (30 → 14 px) sur les 100 premiers px de défilement, si le
     navigateur gère les animations liées au défilement et que les animations ne sont pas
     réduites. Le thème garde son propre header fixe désactivé (LEO_GOPET_ENABLE_FHEADER = 0).
   ============================================================ */
@keyframes hv2-hdr-compact {
  from { padding-block: 30px; }
  to   { padding-block: 14px; }
}

@media (min-width: 1024px) {
  body:not(#hv2-tous):not(#index) #page { overflow: clip; }

  body:not(#hv2-tous):not(#index) #header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      body:not(#hv2-tous):not(#index) #header .header-top {
        animation: hv2-hdr-compact auto linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 100px;
      }
    }
  }
}

/* ============================================================
   ESPACE SOUS LE HEADER (hors accueil), jusqu'à 768px
   Le thème masque le bandeau du fil d'Ariane jusqu'à 768px inclus
   (custom.css : .breadcrumb-bg { display: none !important }) : le contenu
   touchait alors le bas du header. Au-delà, le bandeau fait l'espace.
   ============================================================ */
@media (max-width: 768px) {
  body:not(#hv2-tous):not(#index) #wrapper { padding-top: 24px; }
}

/* ============================================================
   LOGO PLUS GRAND EN MOBILE (jusqu'à 767 px, demande de Sarobidy, 2026-11-02)
   Le logo du header (Ap Page Builder) est une image de 141 px : agrandie telle quelle,
   elle serait floue. On affiche à la place le même logo en 400 px (img/home/logo-imperial-400.png,
   copie de img/logo_mail-*.jpg), à 172 px de large. Navigateurs sans « content » sur
   une image : l'image d'origine, agrandie. Tunnel (body#checkout) non concerné.
   ============================================================ */
@media (max-width: 767px) {
  body:not(#checkout) #header .header-logo img.logo {
    content: url("../img/home/logo-imperial-400.png");
    width: 172px;
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
   HEADER POSÉ SUR LA PHOTO — accueil (hero) et pages à bandeau photo
   (À propos, rayons Chat et Chien, blog, meilleures ventes : _partials/bandeau-v2.tpl)
   ≥ 1024 px, navigateurs avec animations liées au défilement : CSS seul, la
   timeline est le défilement de la page (scroll(root)).
   - à 40 px : le fond crème, les couleurs (ivoire/or → brun/terracotta) et le
     logo (blanc → normal) basculent ENSEMBLE, d'un coup. Un fond qui apparaît en
     fondu pendant que le texte a déjà basculé laissait du brun sur un fond à demi
     transparent posé sur la photo sombre : illisible (vu par Sarobidy) ;
   - 0 → 100 px : le header se compacte (mouvement, coupé si l'utilisateur réduit
     les animations ; hv2-hdr-compact, plus haut).
   Firefox (sans animation-timeline: scroll()) : _partials/hv2-header-repli.tpl pose
   .hv2-hdr-js sur <html>, et .hv2-hdr-top tant que la page est à moins de 40 px du
   haut ; mêmes états, sans transition, seul le compactage est progressif.
   Sans l'un ni l'autre, ou sous 1024 px : header crème dans le flux (ci-dessus).
   Le hero (home-v2.css) et les bandeaux (site-v2/bandeaux.css) descendent leur
   contenu de la hauteur du header. Sélecteur body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header :
   même poids que le header fixe des autres pages (plus haut), placé après lui.
   Les couleurs passent par deux propriétés enregistrées (@property) pour pouvoir
   être animées.
   ============================================================ */

@property --hv2-hdr-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #332720;
}

@property --hv2-hdr-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #B05315;
}

@keyframes hv2-header-bg {
  from { background-color: rgba(251, 247, 239, 0); box-shadow: 0 1px 0 rgba(226, 214, 194, 0); }
  to   { background-color: rgba(251, 247, 239, 0.96); box-shadow: 0 1px 0 #E2D6C2; }
}

@keyframes hv2-header-ink {
  from { --hv2-hdr-fg: #F8F7EE; --hv2-hdr-hover: #D3B881; }
  to   { --hv2-hdr-fg: #332720; --hv2-hdr-hover: #B05315; }
}

@keyframes hv2-header-logo {
  from { filter: brightness(0) invert(1); }
  to   { filter: none; }
}

@media (min-width: 1024px) {
  @supports (animation-timeline: scroll()) {

    /* Pas sous prefers-reduced-motion : passer du transparent au fond clair est un
       changement d'état utile à la lisibilité, pas un mouvement.
       Le fond est animé sur #header : celui de .header-top est forcé par custom.css
       en !important, qu'une animation ne peut pas battre */
    body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      animation: hv2-header-bg auto steps(1, jump-end) both;
      animation-timeline: scroll(root);
      animation-range: 0px 40px;
    }

    body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-top {
      animation: hv2-header-ink auto steps(1, jump-end) both;
      animation-timeline: scroll(root);
      animation-range: 0px 40px;
    }

    body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-logo img {
      animation: hv2-header-logo auto steps(1, jump-end) both;
      animation-timeline: scroll(root);
      animation-range: 0px 40px;
    }

    @media (prefers-reduced-motion: no-preference) {
      body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-top {
        animation: hv2-header-ink auto steps(1, jump-end) both, hv2-hdr-compact auto linear both;
        animation-timeline: scroll(root), scroll(root);
        animation-range: 0px 40px, 0px 100px;
      }
    }
  }

  /* Repli Firefox */
  .hv2-hdr-js body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: rgba(251, 247, 239, 0.96);
    box-shadow: 0 1px 0 #E2D6C2;
  }

  .hv2-hdr-js.hv2-hdr-top body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header {
    background-color: rgba(251, 247, 239, 0);
    box-shadow: 0 1px 0 rgba(226, 214, 194, 0);
  }

  .hv2-hdr-js.hv2-hdr-top body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-top { --hv2-hdr-fg: #F8F7EE; --hv2-hdr-hover: #D3B881; }
  .hv2-hdr-js.hv2-hdr-top body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-logo img { filter: brightness(0) invert(1); }

  @media (prefers-reduced-motion: no-preference) {
    .hv2-hdr-js body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-top { padding-block: 14px; transition: padding-block 0.3s ease; }
    .hv2-hdr-js.hv2-hdr-top body:not(#hv2-tous):is(#index, :has(.breadcrumb-bg.hv2-bandeau)) #header .header-top { padding-block: 30px; }
  }
}