/* ============================================================
   HEADER — Graph'Art Studio
   À combiner avec la configuration Astra Header Footer Builder
   décrite dans header-specs.md.

   Scope : .site-header (classe Astra du header)
   Dépend de : tokens.css
   ============================================================ */

/* ------------------------------------------------------------
   STRUCTURE GLOBALE
   ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent !important;
  box-shadow: none !important;
}

/* Neutralise le fond blanc qu'Astra applique sur les wrappers */
.site-header .main-header-bar-wrap,
.site-header .main-header-bar,
.site-header .ast-primary-header-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.site-header .ast-container {
  padding-left: var(--gas-gutter-desktop) !important;
  padding-right: var(--gas-gutter-desktop) !important;
  max-width: 100%;
}

/* Pages sans hero full-screen : header opaque dès le scroll */
.error404 .site-header,
.blog .site-header,
.gas-header-solid .site-header,
.error404 .site-header .main-header-bar-wrap,
.blog .site-header .main-header-bar-wrap,
.gas-header-solid .site-header .main-header-bar-wrap,
.error404 .site-header .main-header-bar,
.blog .site-header .main-header-bar,
.gas-header-solid .site-header .main-header-bar,
.error404 .site-header .ast-primary-header-bar,
.blog .site-header .ast-primary-header-bar,
.gas-header-solid .site-header .ast-primary-header-bar {
  background: var(--gas-color-bg-primary) !important;
  transition: background 0.25s ease;
}

.site-header .main-header-bar {
  height: 96px;
  padding-left: var(--gas-gutter-desktop) !important;
  padding-right: var(--gas-gutter-desktop) !important;
}

/* ------------------------------------------------------------
   LOGO — texte stylisé "graph'Art Studio"
   Astra : .site-logo, .site-title, .custom-logo-link
   ------------------------------------------------------------ */

.site-header .site-title,
.site-header .site-branding a {
  font-family: var(--gas-font-display);
  font-weight: var(--gas-font-weight-light);
  font-size: 22px;
  letter-spacing: var(--gas-letter-spacing-tight);
  color: var(--gas-color-text-primary);
  text-decoration: none;
  line-height: 1;
}

/* Shortcode [gas_logo] dans le HFB (élément HTML) */
.gas-logo-link {
  font-family: var(--gas-font-display);
  font-weight: var(--gas-font-weight-light);
  font-size: 22px;
  letter-spacing: var(--gas-letter-spacing-tight);
  color: var(--gas-color-text-primary);
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  transition: color var(--gas-transition-fast) var(--gas-easing-default);
}

.gas-logo-link .gas-logo-g,
.site-header .site-title .gas-logo-g {
  font-family: var(--gas-font-italic);
  font-style: italic;
  color: var(--gas-color-accent);
  font-size: 1.45em;
}

.gas-logo-link .gas-logo-art,
.site-header .site-title .gas-logo-art {
  font-family: var(--gas-font-italic);
  font-style: italic;
}

.gas-logo-link:hover,
.site-header .site-branding a:hover {
  background: transparent !important;
  color: var(--gas-color-accent);
  text-decoration: none;
  opacity: 1;
}

.gas-logo-link:hover .gas-logo-g,
.site-header .site-branding a:hover .gas-logo-g {
  color: var(--gas-color-text-secondary);
}

/* Contraint la largeur pendant le chargement — évite le placeholder surdimensionné */
img.custom-logo {
  max-width: 210px;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   NAVIGATION PRINCIPALE
   Astra : #ast-desktop-header .main-header-menu, .menu-item > a
   ------------------------------------------------------------ */

.site-header .main-header-menu {
  display: flex;
  gap: var(--gas-spacing-lg);
}

.site-header .main-header-menu > .menu-item > a {
  font-family: var(--gas-font-label);
  font-size: var(--gas-font-size-label);
  letter-spacing: var(--gas-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--gas-color-text-primary);
  opacity: 0.6;
  padding: 0;
  text-decoration: none;
  transition:
    opacity var(--gas-transition-fast) var(--gas-easing-default),
    color var(--gas-transition-fast) var(--gas-easing-default);
}

.site-header .main-header-menu > .menu-item > a:hover,
.site-header .main-header-menu > .menu-item.current-menu-item > a,
.site-header .main-header-menu > .menu-item.current-menu-ancestor > a {
  color: var(--gas-color-accent) !important;
  opacity: 1;
  background: transparent !important;
}

.site-header *:focus,
.site-header *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Désactiver tout soulignement Astra par défaut */
.site-header .main-header-menu > .menu-item > a::after,
.site-header .main-header-menu > .menu-item > a::before {
  display: none;
}

/* ------------------------------------------------------------
   SWITCHER FR / EN
   <li class="gas-lang-item"> injecté via wp_nav_menu_items
   ------------------------------------------------------------ */

.site-header .main-header-menu > li.gas-lang-item {
  display: flex;
  align-items: center;
  align-self: center;
  list-style: none;
  position: relative;
}

/* position: relative sur le trigger — dropdown centré par rapport au drapeau+chevron */
.site-header .gas-lang-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.65;
  transition: opacity var(--gas-transition-fast);
  cursor: pointer;
}

.site-header .gas-lang-item:hover .gas-lang-trigger {
  opacity: 1;
}

.site-header .gas-lang-flag {
  width: 22px;
  height: 16px;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}

.site-header .gas-lang-chevron {
  display: block;
  color: var(--gas-color-text-primary);
  opacity: 0.6;
  transition: transform var(--gas-transition-fast);
  flex-shrink: 0;
}

.site-header .gas-lang-item:hover .gas-lang-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown dans le trigger — left: 50% se calcule sur la largeur du trigger exactement */
.site-header .gas-lang-dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + 6px);
  left: 11px; /* = moitié du drapeau (22px), centre le dropdown sous le flag */
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  background: var(--gas-color-bg-primary);
  border: 1px solid rgba(196, 184, 158, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  min-width: 54px;
  text-align: center;
  z-index: 9999;
}

/* Pont transparent qui comble le gap de 6px — maintient le hover pendant le déplacement de souris */
.site-header .gas-lang-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
  background: transparent;
}

.site-header .gas-lang-item:hover .gas-lang-dropdown {
  display: block !important;
}

.site-header .gas-lang-dropdown li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .gas-lang-dropdown a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.65;
  transition: opacity var(--gas-transition-fast);
}

.site-header .gas-lang-dropdown a:hover,
.site-header .gas-lang-dropdown a:focus {
  opacity: 1;
  color: inherit !important;
  background: transparent !important;
}

.site-header .gas-lang-item a:focus,
.site-header .gas-lang-item a:focus-visible,
.site-header .gas-lang-item span:focus,
.site-header .gas-lang-item span:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   MINI-CART WOOCOMMERCE
   Structure réelle Astra HFB :
     .ast-site-header-cart.ast-menu-cart-outline
       .ast-addon-cart-wrap   ← conteneur principal (border bleue ici)
         i.astra-icon.ast-icon-shopping-bag  ← icône (icon-font, pas SVG)
         .count  ← badge nombre d'articles
   ------------------------------------------------------------ */

.site-header .ast-site-header-cart {
  margin-left: var(--gas-spacing-md);
}

/* Icône champagne par défaut — crème au survol */
.site-header .ast-site-header-cart .ast-cart-menu-wrap,
.site-header .ast-site-header-cart .ast-addon-cart-wrap {
  color: var(--gas-color-accent) !important;
  transition: color var(--gas-transition-fast);
}
body.ast-theme-transparent-header .ast-site-header-cart .ast-cart-menu-wrap,
body.ast-theme-transparent-header .ast-site-header-cart .ast-addon-cart-wrap {
  color: var(--gas-color-accent) !important;
}

/* Supprime la bordure bleue du style "outline" */
.site-header .ast-menu-cart-outline .ast-addon-cart-wrap,
.site-header .ast-menu-cart-with-border .ast-addon-cart-wrap,
body.ast-theme-transparent-header .ast-menu-cart-outline .ast-addon-cart-wrap {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hover : crème */
.site-header .ast-site-header-cart a.cart-container:hover .ast-addon-cart-wrap,
.site-header .ast-site-header-cart a.cart-container:hover i.astra-icon {
  color: var(--gas-color-text-primary) !important;
}

/* Badge du nombre d'articles — pseudo-élément ::after sur i.astra-icon */
.site-header .ast-site-header-cart i.astra-icon::after,
.site-header .ast-site-header-cart i.astra-icon:after,
body.ast-theme-transparent-header .ast-site-header-cart i.astra-icon::after,
body.ast-theme-transparent-header .ast-site-header-cart i.astra-icon:after {
  background-color: var(--gas-color-accent) !important;
  color: var(--gas-color-bg-primary) !important;
  border-color: var(--gas-color-accent) !important;
}

/* Fallback : cibler aussi .count si présent */
.site-header .ast-site-header-cart .count,
.site-header .ast-menu-cart-outline .ast-addon-cart-wrap .count {
  background-color: var(--gas-color-accent) !important;
  color: var(--gas-color-bg-primary) !important;
  border-color: var(--gas-color-accent) !important;
}

/* Mini-cart dropdown supprimé — le clic renvoie directement vers /panier/ */
.site-header .ast-site-header-cart .widget_shopping_cart,
.site-header .ast-site-header-cart .widget_shopping_cart_content {
  display: none !important;
}

/* ------------------------------------------------------------
   ESPACEMENT DROIT (groupe switcher + cart)
   ------------------------------------------------------------ */

.site-header .ast-builder-grid-row [data-section="section-hb-html-1"],
.site-header .gas-header-right {
  display: flex;
  align-items: center;
  gap: var(--gas-spacing-md);
}

/* ============================================================
   MOBILE — ≤ 1024px
   Hamburger + Dropdown menu (#ast-mobile-header, data-type="dropdown")
   ============================================================ */

@media (max-width: 1024px) {
  .site-header .main-header-bar {
    height: 72px;
  }
  .site-header .ast-container {
    padding-left: var(--gas-gutter-mobile) !important;
    padding-right: var(--gas-gutter-mobile) !important;
  }

  /* Réserve l'espace pour les icônes user/panier avant leur injection par Astra JS —
     évite le flash où le logo semble rétrécir quand les icônes apparaissent */
  #ast-mobile-header .site-header-primary-section-right {
    min-width: 120px;
    justify-content: flex-end;
  }

  /* Retarde l'apparition du mobile header de 100ms — laisse Astra JS injecter les icônes
     avant que l'utilisateur voie quoi que ce soit (évite le flash logo → rétrécissement) */
  .ast-header-break-point #ast-mobile-header {
    animation: gas-mobile-header-appear 0s 0.1s both;
  }

  /* Titre texte dans la barre mobile */
  #ast-mobile-header .site-title a {
    font-family: var(--gas-font-display);
    font-weight: var(--gas-font-weight-light);
    font-size: 18px;
    letter-spacing: var(--gas-letter-spacing-tight);
    color: var(--gas-color-text-primary) !important;
    text-decoration: none;
  }

  /* Hamburger + croix : couleur crème sur le bouton.
     Le SVG hérite via currentColor. On ne force pas fill/stroke sur les enfants
     pour ne pas remplir d'éventuels rects de fond. */
  .site-header .menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px;
    color: var(--gas-color-text-primary) !important;
  }

  /* Hamburger et croix : path unique dans chaque SVG Astra.
     currentColor hérite d'une couleur bleue forcée par Astra → on écrase directement le fill. */
  .site-header .ast-mobile-svg path {
    fill: var(--gas-color-text-primary) !important;
  }

  /* Dropdown panel : fond sombre + hauteur plein écran pour couvrir le contenu */
  #ast-mobile-header .ast-mobile-header-content {
    background: var(--gas-color-bg-primary) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* Liste des items du dropdown */
  #ast-hf-mobile-menu {
    flex-direction: column !important;
    gap: 0;
    padding: 12px 0;
    align-items: center;
  }

  #ast-hf-mobile-menu .menu-item {
    text-align: center;
    width: 100%;
    list-style: none;
    margin: 0;
  }

  #ast-hf-mobile-menu .menu-item > a.menu-link {
    font-family: var(--gas-font-display);
    font-weight: var(--gas-font-weight-light);
    font-size: 18px;
    letter-spacing: var(--gas-letter-spacing-tight);
    text-transform: none;
    color: var(--gas-color-text-primary);
    opacity: 0.85;
    padding: 1px var(--gas-gutter-mobile);
    text-align: center;
    display: block;
    text-decoration: none;
    background: transparent !important;
    transition: color var(--gas-transition-fast) var(--gas-easing-default),
                opacity var(--gas-transition-fast) var(--gas-easing-default);
  }

  #ast-hf-mobile-menu .menu-item > a.menu-link:hover,
  #ast-hf-mobile-menu .menu-item.current-menu-item > a.menu-link {
    color: var(--gas-color-accent) !important;
    opacity: 1;
    background: transparent !important;
  }

  /* Switcher langue dans le menu mobile :
     - Trigger affiché tel quel (pas de dropdown hover)
     - Dropdown caché : on montre uniquement le drapeau actif + lien vers l'autre langue */
  #ast-hf-mobile-menu > li.gas-lang-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0 4px;
    list-style: none;
    width: 100%;
  }

  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    cursor: pointer;
  }

  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-chevron {
    display: none;
  }

  /* Dropdown du switcher langue : toujours visible en mobile (pas de hover) */
  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-dropdown {
    display: flex !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }

  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-dropdown::before {
    display: none;
  }

  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-dropdown a {
    opacity: 0.5;
    padding: 0;
  }

  #ast-hf-mobile-menu > li.gas-lang-item .gas-lang-dropdown a:hover {
    opacity: 1;
  }

  #ast-mobile-header *:focus,
  #ast-mobile-header *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   MENU MOBILE OUVERT — overlay plein écran + scroll lock
   Classe gas-menu-open ajoutée par mobile-menu.js sur html + body
   ============================================================ */

html.gas-menu-open,
body.gas-menu-open {
  overflow: hidden !important;
}

@media (max-width: 1024px) {

  /* Overlay semi-transparent couvrant tout l'écran */
  body.gas-menu-open #ast-mobile-header .ast-mobile-header-content {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    background: rgba(11, 22, 46, 0.90) !important;
    overflow-y: auto !important;
    padding-top: 80px !important;
    min-height: 100dvh !important;
  }

  /* Barre header flotte au-dessus de l'overlay — fond transparent pour effet unifié */
  body.gas-menu-open #ast-mobile-header .main-header-bar {
    position: relative;
    z-index: 9991;
  }

  body.gas-menu-open #ast-mobile-header .main-header-bar,
  body.gas-menu-open #ast-mobile-header .main-header-bar .main-header-bar-wrap,
  body.gas-menu-open #ast-mobile-header .main-header-bar .ast-primary-header-bar {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Logo centré dans la barre :
     le trigger (X) passe en absolute à droite, le logo prend tout l'espace */
  body.gas-menu-open #ast-mobile-header .main-header-bar .ast-container {
    position: relative;
  }

  body.gas-menu-open #ast-mobile-header .main-header-bar [data-section*="trigger"] {
    position: absolute !important;
    right: var(--gas-gutter-mobile) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  body.gas-menu-open #ast-mobile-header .main-header-bar .gas-logo-link {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 36px !important;
    white-space: nowrap;
  }
}

/* Tablette : on garde le menu desktop visible si possible */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header .main-header-menu {
    gap: var(--gas-spacing-md);
  }
  .site-header .main-header-menu > .menu-item > a {
    font-size: 10px;
  }
}

/* ------------------------------------------------------------
   SWITCHER LANGUE MOBILE — injecté via wp_footer
   Caché par défaut, visible uniquement quand le menu est ouvert
   ------------------------------------------------------------ */

.gas-mobile-lang {
  display: none;
}

body.gas-menu-open .gas-mobile-lang {
  display: flex;
  justify-content: center;
  margin-top: var(--gas-spacing-xl);
  padding-bottom: 40px;
  gap: 14px;
  align-items: center;
}

.gas-mobile-lang__flag {
  display: inline-flex;
  opacity: 0.45;
  transition: opacity 0.2s;
  border: none;
  padding: 0;
  background: none;
  text-decoration: none;
}

.gas-mobile-lang__flag:hover,
.gas-mobile-lang__flag--active {
  opacity: 1;
}

.gas-mobile-lang__flag img {
  display: block;
  border: 1px solid rgba(242, 235, 221, 0.15);
}

.gas-mobile-lang__flag:focus,
.gas-mobile-lang__flag:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   ICÔNES HEADER INJECTÉES — Mon compte (desktop + mobile) + Panier (mobile)
   Repositionnées par JS (DOM insertion) — pas de position: fixed.
   ============================================================ */

.gas-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color var(--gas-transition-fast) var(--gas-easing-default),
              opacity var(--gas-transition-fast) var(--gas-easing-default);
}

.gas-header-icon:focus,
.gas-header-icon:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Desktop ≥ 1025px : compte inséré par JS avant .ast-site-header-cart ── */
.site-header .gas-account-desktop {
  display: inline-flex;
  align-items: center;
  height: 96px;
  margin-left: var(--gas-spacing-xs);
  color: var(--gas-color-accent) !important;
  transition: color var(--gas-transition-fast) var(--gas-easing-default);
}

.site-header .gas-account-desktop:hover {
  color: var(--gas-color-text-primary) !important;
}

.site-header .gas-account-desktop:focus,
.site-header .gas-account-desktop:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Global : caché par défaut — JS le réinsère dans le DOM au bon endroit ── */
.gas-header-icons {
  display: none;
}

/* ── Mobile ≤ 1024px : flux normal dans .ast-grid-right-section ──
   JS insère le bloc comme sibling du trigger hamburger → même ligne, même alignement vertical.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gas-header-icons {
    align-items: center;
    gap: 10px;
    margin-right: 0;
    padding: 0 !important;
  }

  body.gas-menu-open .gas-header-icons {
    display: none !important;
  }

  .gas-header-icon--account,
  .gas-header-icon--cart {
    color: var(--gas-color-text-primary) !important;
    opacity: 0.85;
    -webkit-tap-highlight-color: transparent;
  }

  .gas-header-icon--account:hover,
  .gas-header-icon--cart:hover {
    opacity: 1;
  }

  .gas-header-icon--account:active,
  .gas-header-icon--cart:active {
    color: var(--gas-color-accent) !important;
    opacity: 1;
  }

  .gas-header-icon--account:focus,
  .gas-header-icon--account:focus-visible,
  .gas-header-icon--cart:focus,
  .gas-header-icon--cart:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}

@keyframes gas-mobile-header-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}