/* ==========================================================================
   HBCB — En-tête unique
   handballbrignoles.fr · Céweb83
   --------------------------------------------------------------------------
   VERSION 1.2 — 19/10/2026
   Un seul en-tête pour toutes les tailles d'écran, rendu par le shortcode
   [hbcb_header] dans un widget HTML du modèle d'en-tête Elementor.
   1.1 : icônes forcées au trait (le thème leur imposait un aplat cyan),
   chariot redessiné, icônes à 25 px, logo mobile agrandi, survol réservé
   aux appareils qui en ont un.
   1.2 : styles de bouton du thème neutralisés sur le burger à tous les états
   (fond rouge au focus) ; le focus n'entre plus dans le volet quand il est
   ouvert au doigt (anneau or parasite sur la première entrée).
   --------------------------------------------------------------------------
   À déposer dans /wp-content/hbcb/hbcb-header.css
   --------------------------------------------------------------------------
   BASCULE : 1200 px. Onze entrées de menu ne tiennent pas en ligne entre
   1024 et 1200 px. Si tu changes ce seuil, change-le aux trois endroits
   signalés par « BASCULE » dans ce fichier ET dans hbcb-header.js.
   ========================================================================== */

/* ==========================================================================
   00 · JETONS
   Repris de la feuille boutique pour que l'en-tête et la boutique partagent
   exactement les mêmes valeurs. Redéclarés ici : l'en-tête doit pouvoir
   fonctionner seul, même si la feuille boutique ne se charge pas.
   ========================================================================== */
:root {
  --hb-marine-900: #040C35;
  --hb-marine-800: #0A1545;
  --hb-or:         #F7D101;
  --hb-cyan:       #009FE3;
  --hb-blanc:      #FFFFFF;

  --hb-h-entete:   76px;   /* hauteur en grand écran */
  --hb-h-entete-s: 62px;   /* hauteur en petit écran et au défilement */

  --hb-t-rapide:   .18s;
  --hb-t:          .28s;
  --hb-courbe:     cubic-bezier(.22, .61, .36, 1);
}

/* Le focus clavier ne doit jamais finir caché derrière l'en-tête collant.
   WCAG 2.2, critère « Focus Not Obscured ». */
html { scroll-padding-top: calc(var(--hb-h-entete) + 12px); }


/* ==========================================================================
   01 · STRUCTURE
   ========================================================================== */

/* L'en-tête est collant dans le flux : aucune réservation de hauteur à faire,
   donc aucun décalage de mise en page au chargement. Les conteneurs Elementor
   qui l'entourent doivent laisser déborder, sinon « sticky » ne prend pas. */
.elementor-location-header,
.elementor-location-header > .e-con,
.elementor-location-header .e-con-inner { overflow: visible !important; }

.hb-entete {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--hb-marine-900);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  transition: box-shadow var(--hb-t) var(--hb-courbe);
}
.hb-entete[data-defile] {
  box-shadow: 0 6px 24px rgba(4, 12, 53, .28);
}

.hb-entete__barre {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1480px, 100% - 48px);
  margin-inline: auto;
  height: var(--hb-h-entete);
  transition: height var(--hb-t) var(--hb-courbe);
}
.hb-entete[data-defile] .hb-entete__barre { height: var(--hb-h-entete-s); }

/* Texte réservé aux lecteurs d'écran. */
.hb-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on arrive dessus au clavier. */
.hb-evitement {
  position: absolute;
  left: 12px; top: -64px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--hb-or);
  color: var(--hb-marine-900);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--hb-t-rapide) var(--hb-courbe);
}
.hb-evitement:focus { top: 12px; }


/* ==========================================================================
   02 · LOGO
   ========================================================================== */
.hb-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--hb-blanc);
}
.hb-logo img {
  display: block;
  width: auto;
  height: 52px;
  transition: height var(--hb-t) var(--hb-courbe);
}
.hb-entete[data-defile] .hb-logo img { height: 42px; }
.hb-logo__texte { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }


/* ==========================================================================
   03 · MENU — GRAND ÉCRAN
   ========================================================================== */

/* display: contents fait disparaître le volet de la mise en page sans sortir
   le menu du DOM : le même balisage sert aux deux tailles d'écran. */
.hb-volet { display: contents; }

.hb-nav { flex: 1 1 auto; min-width: 0; }

.hb-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .9vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hb-menu li { position: relative; list-style: none; }

.hb-menu a {
  position: relative;
  display: block;
  padding: 10px clamp(6px, .7vw, 12px);
  color: rgba(255, 255, 255, .88);
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--hb-t-rapide) var(--hb-courbe);
}
.hb-menu a:hover,
.hb-menu a:focus-visible { color: var(--hb-blanc); }

/* Le trait d'or. Il naît au centre et s'ouvre vers les deux bords : on anime
   une transformation et jamais une largeur, pour rester sur le compositeur et
   ne pas faire recalculer la mise en page à chaque survol. */
.hb-menu a::after {
  content: "";
  position: absolute;
  left: clamp(6px, .7vw, 12px);
  right: clamp(6px, .7vw, 12px);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--hb-or);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hb-t) var(--hb-courbe);
}
.hb-menu a:hover::after,
.hb-menu a:focus-visible::after { transform: scaleX(1); }

/* Page courante : le trait reste, et le texte passe en blanc plein. Une
   couleur seule ne suffirait pas, le trait porte l'information en double. */
.hb-menu .current-menu-item > a,
.hb-menu .current-menu-ancestor > a,
.hb-menu .current_page_item > a {
  color: var(--hb-blanc);
  font-weight: 700;
}
.hb-menu .current-menu-item > a::after,
.hb-menu .current-menu-ancestor > a::after,
.hb-menu .current_page_item > a::after { transform: scaleX(1); }

/* Sous-menus */
.hb-menu .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 10;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 12px;
  background: var(--hb-marine-800);
  box-shadow: 0 18px 40px rgba(4, 12, 53, .45);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--hb-t) var(--hb-courbe),
              transform var(--hb-t) var(--hb-courbe),
              visibility 0s linear var(--hb-t);
}
.hb-menu li:hover > .sub-menu,
.hb-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.hb-menu .sub-menu a {
  padding: 9px 12px;
  border-radius: 8px;
  white-space: normal;
  font-size: 14px;
}
.hb-menu .sub-menu a::after { display: none; }
.hb-menu .sub-menu a:hover,
.hb-menu .sub-menu a:focus-visible { background: rgba(255, 255, 255, .08); }


/* ==========================================================================
   04 · ICÔNES DE DROITE
   ========================================================================== */
.hb-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* 44 × 44 px au minimum : c'est la taille sous laquelle une cible devient
   difficile à viser au doigt. */
.hb-action,
.hb-burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hb-blanc);
  cursor: pointer;
  transition: background var(--hb-t-rapide) var(--hb-courbe),
              color var(--hb-t-rapide) var(--hb-courbe),
              transform var(--hb-t-rapide) var(--hb-courbe);
}
/* Le survol n'est posé que sur les appareils qui en ont un. Sur un écran
   tactile, iOS garde l'état de survol après le doigt : le burger restait sur
   fond gris une fois la page touchée. */
@media (hover: hover) {
  .hb-action:hover,
  .hb-burger:hover { background: rgba(255, 255, 255, .1); color: var(--hb-or); }
}
.hb-action:active,
.hb-burger:active { transform: scale(.94); }

/* Les icônes sont dessinées au trait. Le thème et Elementor imposent un fill
   aux svg contenus dans un lien, et en CSS une règle bat l'attribut écrit
   dans le balisage : sans ces trois déclarations, les icônes repassent en
   aplat cyan. La couleur est forcée pour la même raison. */
.hb-entete .hb-action,
.hb-entete .hb-burger { color: var(--hb-blanc) !important; }
@media (hover: hover) {
  .hb-entete .hb-action:hover,
  .hb-entete .hb-burger:hover { color: var(--hb-or) !important; }
}
.hb-ico {
  width: 25px;
  height: 25px;
  fill: none !important;
  stroke: currentColor !important;
}

.hb-pastille {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--hb-or);
  color: var(--hb-marine-900);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.hb-pastille[hidden] { display: none; }

/* Le panier tressaille quand le compteur change. Un cran de plus que
   nécessaire serait du bruit : 420 ms, une seule fois, sans rebond. */
@keyframes hb-tressaut {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22) rotate(-7deg); }
  70%  { transform: scale(.95) rotate(3deg); }
  100% { transform: scale(1); }
}
.hb-action--panier[data-hb-anime] .hb-ico {
  animation: hb-tressaut .42s var(--hb-courbe);
}


/* ==========================================================================
   05 · BURGER
   ========================================================================== */
.hb-burger { display: none; }

/* Le thème et Elementor habillent tous les <button> : fond, bordure, ombre,
   et surtout un fond coloré au focus. Le burger n'est pas un bouton de
   formulaire, on neutralise ces styles sur chaque état plutôt que sur le seul
   état normal, sinon le fond du thème réapparaît dès le premier tap. */
.hb-entete .hb-burger,
.hb-entete .hb-burger:hover,
.hb-entete .hb-burger:focus,
.hb-entete .hb-burger:focus-visible,
.hb-entete .hb-burger:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  .hb-entete .hb-burger:hover { background: rgba(255, 255, 255, .1) !important; }
}
/* Volet ouvert : un fond discret, pour que le bouton se lise comme enfoncé. */
.hb-entete[data-ouvert] .hb-burger { background: rgba(255, 255, 255, .1) !important; }

.hb-burger__traits {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.hb-burger__traits i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--hb-t) var(--hb-courbe),
              opacity var(--hb-t-rapide) var(--hb-courbe);
}
.hb-burger__traits i:nth-child(1) { top: 0; }
.hb-burger__traits i:nth-child(2) { top: 7px; }
.hb-burger__traits i:nth-child(3) { top: 14px; }

/* Les deux traits extrêmes se rejoignent au centre puis pivotent en croix. */
.hb-entete[data-ouvert] .hb-burger__traits i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hb-entete[data-ouvert] .hb-burger__traits i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.hb-entete[data-ouvert] .hb-burger__traits i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   06 · PETIT ÉCRAN — BASCULE 1200 px
   ========================================================================== */
@media (max-width: 1199px) {

  :root { --hb-h-entete: var(--hb-h-entete-s); }

  .hb-entete__barre { width: min(1480px, 100% - 32px); gap: 12px; }
  .hb-logo img { height: 46px; }
  .hb-burger { display: inline-flex; }

  /* Le volet redevient un vrai élément et occupe l'écran. */
  .hb-volet {
    display: block;
    position: fixed;
    inset: var(--hb-h-entete-s) 0 0 0;
    z-index: 998;
    padding: 18px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--hb-marine-900);
    opacity: 0;
    transform: translateX(14px);
    visibility: hidden;
    transition: opacity var(--hb-t) var(--hb-courbe),
                transform var(--hb-t) var(--hb-courbe),
                visibility 0s linear var(--hb-t);
  }
  .hb-entete[data-ouvert] .hb-volet {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .hb-menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }
  .hb-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .hb-menu > li:last-child { border-bottom: 0; }

  .hb-menu a {
    padding: 15px 4px;
    font-size: 17px;
    font-weight: 600;
    white-space: normal;
  }
  .hb-menu a::after { display: none; }
  .hb-menu .current-menu-item > a,
  .hb-menu .current_page_item > a {
    color: var(--hb-or);
    padding-left: 14px;
    border-left: 3px solid var(--hb-or);
    border-radius: 0 8px 8px 0;
  }

  /* Les entrées entrent l'une après l'autre, très légèrement décalées.
     Le retard est porté par une variable posée en JavaScript, pour ne pas
     écrire trente règles nth-child. */
  .hb-entete[data-ouvert] .hb-menu > li {
    animation: hb-entree .34s var(--hb-courbe) backwards;
    animation-delay: calc(var(--hb-rang, 0) * 28ms + 60ms);
  }
  @keyframes hb-entree {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* Sous-menus toujours dépliés en petit écran : pas d'accordéon à ouvrir,
     donc rien à comprendre avant de trouver sa page. */
  .hb-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0 0 8px 14px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    border-left: 2px solid rgba(255, 255, 255, .14);
  }
  .hb-menu .sub-menu a { font-size: 15px; font-weight: 500; padding: 11px 14px; }
}

@media (max-width: 420px) {
  .hb-entete__barre { width: min(1480px, 100% - 24px); }
  .hb-logo img { height: 38px; }
}


/* ==========================================================================
   07 · ACCESSIBILITÉ
   ========================================================================== */

/* Un anneau de focus visible partout. Il est doublé d'un liseré marine pour
   rester lisible aussi bien sur la barre marine que sur un fond clair. */
.hb-entete a:focus-visible,
.hb-entete button:focus-visible,
.hb-evitement:focus-visible {
  outline: 3px solid var(--hb-or);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Quand le visiteur a demandé moins d'animation, on garde les changements
   d'état mais on supprime le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .hb-entete *,
  .hb-entete *::before,
  .hb-entete *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .hb-menu a::after { transition: none; }
}

/* Impression : l'en-tête collant n'a aucun sens sur papier. */
@media print {
  .hb-entete { position: static; box-shadow: none; }
  .hb-actions, .hb-evitement { display: none; }
}