/* ============================================================
   En-tête et navigation.

   Le menu passait sur deux lignes dès 1280 px : sept entrées de premier
   niveau, dont trois collections de club. Les trois sont maintenant
   regroupées sous une entrée unique qui ouvre un panneau portant les
   blasons officiels. Le menu Shopify n'est pas touché, le regroupement se
   fait à l'affichage.

   Ce fichier porte tout l'en-tête : disposition, panneau des clubs, tiroir
   mobile et comportement collant. Les anciennes règles ont quitté
   theme-components.css, theme-overrides.css et theme-design-layer.css.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition:
    transform var(--dur) var(--ease-out-quint),
    background var(--motion-state),
    border-color var(--motion-state),
    box-shadow var(--motion-state);
}

/* Posé par ui-header.js : opaque une fois le hero dépassé. */
.site-header[data-stuck="true"] {
  background: var(--surface);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

.site-header[data-hidden="true"] { transform: translateY(-100%); }

/* Un menu ouvert ou un focus clavier ramène toujours l'en-tête. */
.site-header:focus-within,
.site-header:has(.site-nav[data-open="true"]) { transform: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  min-height: 78px;
}

/* ---------- Navigation ---------- */

.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: Barlow, Arial, sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

/* Le soulignement se dessine par une mise à l'échelle, pas par une largeur
   animée : aucun calcul de mise en page à chaque image. */
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out-quint);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after,
.nav-clubs__toggle[aria-expanded="true"]::after { transform: scaleX(1); }

/* ---------- Panneau des clubs ---------- */

.nav-clubs { position: relative; }

.nav-clubs__chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-state);
}

.nav-clubs__toggle[aria-expanded="true"] .nav-clubs__chevron { transform: translateY(1px) rotate(225deg); }

.nav-clubs__panel {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + 14px);
  left: -20px;
  padding: 14px;
  background: var(--surface);
  border-top: 3px solid var(--ink);
  box-shadow: var(--shadow-3);
}

.nav-clubs__panel[hidden] { display: none; }

.nav-clubs__list {
  display: grid;
  gap: 6px;
  min-width: 286px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.club-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 11px 11px;
  background: var(--paper);
  transition: background var(--motion-state), transform var(--motion-state);
}

/* La couleur du club n'est qu'une arête : le nom et le blason portent
   l'information, jamais la couleur seule. */
.club-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--club, var(--ink));
}

.club-card:hover,
.club-card:focus-visible { background: var(--surface-sunken); transform: translateX(3px); }

.club-card[aria-current="page"] { background: var(--surface-sunken); }

.club-card__crest {
  display: block;
  width: 46px;
  height: 46px;
}

.club-card__crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.club-card__body { display: grid; gap: 2px; min-width: 0; }

.club-card__name {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.club-card__count {
  color: var(--ink-70);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Actions ---------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin-left: auto;
}

.header-actions svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.header-actions__search {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.header-actions__cart {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.header-actions__cart strong {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 12px 6px;
  border: 0;
  background: none;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform var(--motion-state), opacity var(--motion-state);
}

.menu-toggle__bar + .menu-toggle__bar { margin-top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav-drawer__search { display: none; }

.nav-scrim { display: none; }

/* ---------- Langue ----------
   Un formulaire Shopify « localization », une langue par bouton d'envoi.
   Rendu seulement si plusieurs langues sont publiées. Même voix que les
   liens de navigation : capitales, graisse 800, aucun drapeau. La langue
   courante est marquée par un filet, pas par la couleur seule. */

.lang-switch__form { margin: 0; }

.lang-switch__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switch__item {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  cursor: pointer;
  /* Couleur pleine plutôt qu'une opacité : 6,8:1 sur --paper, 7,1:1 sur
     --surface. L'opacité à .62 tombait à 4,2:1. */
  color: var(--ink-70);
  transition: color var(--motion-state);
}

.lang-switch__item:hover { color: var(--ink); }

.lang-switch__item[aria-current="true"] {
  cursor: default;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.lang-switch--drawer { display: none; }

/* ============================================================
   Sous 1000 px : tiroir.
   Le tiroir n'est masqué que si le script a pris la main. Sans
   JavaScript, la navigation reste dépliée sous l'en-tête et le site
   reste parcourable.
   ============================================================ */

@media (max-width: 1000px) {
  .site-header__inner { min-height: 68px; }
  .menu-toggle { display: block; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 10px 18px 26px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }

  .nav-list { display: grid; gap: 0; }

  .nav-list__item { border-bottom: 1px solid var(--line); }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    min-height: 54px;
    padding: 12px 2px;
    font-size: .95rem;
  }

  .nav-link::after { display: none; }

  /* Dans le tiroir, les clubs sont une liste dépliée : rien à survoler. */
  .nav-clubs__toggle { display: none; }

  .nav-clubs__panel,
  .nav-clubs__panel[hidden] {
    display: block;
    position: static;
    padding: 10px 0 14px;
    border-top: 0;
    background: none;
    box-shadow: none;
  }

  .nav-clubs__list { min-width: 0; gap: 8px; }

  /* Le blason reste sur le fond du tiroir, jamais sur une carte blanche. */
  .club-card { min-height: 64px; border: 1px solid var(--ink-12); background: transparent; }

  /* L'entrée de la recherche a la forme du champ qu'elle ouvre : une capsule. */
  .nav-drawer__search {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 14px;
    padding: 0 20px;
    border: 1px solid var(--ink-12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--shadow-1);
    color: var(--ink-70);
    font-size: 1rem;
    font-weight: 700;
  }

  .nav-drawer__search svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
  }

  .header-actions__cart > span { display: none; }

  /* Sous 1000 px, la langue quitte la barre et passe au pied du tiroir. */
  .lang-switch--header { display: none; }

  .lang-switch--drawer {
    display: block;
    margin-top: 14px;
  }

  .lang-switch--drawer .lang-switch__list { gap: 14px; }
  .lang-switch--drawer .lang-switch__item { padding: 0; font-size: .88rem; letter-spacing: .06em; }

  /* À partir d'ici, le script a pris la main : le tiroir se ferme. */
  [data-js="on"] .site-nav { display: none; }
  [data-js="on"] .site-nav[data-open="true"] { display: grid; }

  /* Le voile est un enfant du tiroir et commence là où le tiroir finit.
     Posé en `inset: 0` sur l'en-tête, il assombrissait la barre elle-même,
     qui doit rester nette puisqu'elle porte le bouton de fermeture. Ici
     aucune mesure n'est nécessaire : le tiroir connaît sa propre fin. */
  [data-js="on"] .site-nav[data-open="true"] .nav-scrim {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    background: rgba(9, 28, 42, .38);
  }
}

@media (max-width: 560px) {
  .site-nav { padding: 8px 15px 22px; }
  .club-card { grid-template-columns: 40px 1fr; gap: 12px; }
  .club-card__crest { width: 40px; height: 40px; }
}

/* ============================================================
   Mouvement
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background var(--dur) linear; }
  .site-header[data-hidden="true"] { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-clubs__panel:not([hidden]) {
    animation: nav-panel-in var(--motion-state) backwards;
  }

  /* Les cartes entrent l'une après l'autre : le panneau se lit comme une
     liste qui se déroule, pas comme un bloc qui apparaît. */
  .nav-clubs__panel:not([hidden]) .club-card {
    animation: nav-card-in .34s var(--ease-out-quint) backwards;
    animation-delay: calc(var(--i, 0) * var(--motion-stagger));
  }
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nav-card-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}